feat(ui): reintroduce all styles

kestra-io · Dec 21, 2022 · 6ce2c78 · 6ce2c78
1 parent 31b1786
commit 6ce2c78
Show file tree

Hide file tree

Showing 95 changed files with 1,789 additions and 2,787 deletions.
diff --git a/ui/src/App.vue b/ui/src/App.vue
@@ -1,22 +1,21 @@
 <template>
     <el-config-provider>
         <left-menu @menu-collapse="onMenuCollapse" />
-        <custom-toast v-if="message" :no-auto-hide="true" :message="message" />
+        <error-toast v-if="message" :no-auto-hide="true" :message="message" />
         <main :class="menuCollapsed">
             <top-nav-bar :menu-collapsed="menuCollapsed" />
             <router-view v-if="!error" />
             <template v-else>
                 <errors :code="error" />
             </template>
         </main>
-        <div id="theme-loaded" />
     </el-config-provider>
 </template>
 
 <script>
     import LeftMenu from "override/components/LeftMenu.vue";
     import TopNavBar from "./components/layout/TopNavBar";
-    import CustomToast from "./components/customToast";
+    import ErrorToast from "./components/ErrorToast";
     import Errors from "./components/errors/Errors";
     import {mapState} from "vuex";
     import Utils from "./utils/utils";
@@ -26,7 +25,7 @@
         components: {
             LeftMenu,
             TopNavBar,
-            CustomToast,
+            ErrorToast,
             Errors
         },
         data() {
@@ -36,7 +35,7 @@
             };
         },
         computed: {
-            ...mapState("core", ["message", "error", "themes", "theme"])
+            ...mapState("core", ["message", "error"])
         },
         created() {
             if (this.created === false) {
@@ -109,12 +108,12 @@
     @use 'element-plus/theme-chalk/src/mixins/mixins' as mixin;
 
     main {
-        padding-right: 15px;
-        padding-left: 15px;
+        padding-right: var(--spacer);
+        padding-left: var(--spacer);
         margin-right: auto;
         margin-left: auto;
 
-        padding-top: 15px;
+        padding-top: var(--spacer);
         padding-bottom: 60px !important;
         transition: all 0.3s ease;
 
@@ -123,11 +122,11 @@
         }
 
         &.menu-not-collapsed {
-            padding-left: calc(mixin.getCssVar('menu-width') + 15px);
+            padding-left: calc(var(--menu-width) + var(--spacer));
 
             @include mixin.res(lg) {
-                padding-left: calc(mixin.getCssVar('menu-width') + 40px + 15px);
-                padding-right: 40px;
+                padding-left: calc(var(--menu-width) + (var(--spacer) * 4));
+                padding-right: calc(var(--spacer) * 4);
             }
         }
     }

diff --git a/ui/src/components/ErrorToast.vue b/ui/src/components/ErrorToast.vue
@@ -0,0 +1,79 @@
+<script>
+    import {ElNotification, ElTable, ElTableColumn} from "element-plus";
+    import {h} from 'vue'
+
+    export default {
+        name: "ErrorToast",
+        props: {
+            message: {
+                type: Object,
+                required: true
+            },
+            noAutoHide: {
+                type: Boolean,
+                default: false
+            }
+        },
+        notifications: [],
+        watch: {
+            $route() {
+                this.notifications.forEach((item) => {
+                    item.close()
+                });
+            },
+        },
+        computed: {
+            text () {
+                return this.message.message || this.message.content.message
+            },
+            title () {
+                return this.message.title || "Error"
+            },
+            items() {
+                const messages = this.message.content && this.message.content._embedded && this.message.content._embedded.errors ? this.message.content._embedded.errors : []
+                return Array.isArray(messages) ? messages : [messages]
+            },
+        },
+        render() {
+            this.$nextTick(() => {
+                const children = [
+                    h('span', {innerHTML: this.text})
+                ];
+
+                if (this.items.length > 0) {
+                    children.push(h(
+                        ElTable,
+                        {
+                            stripe: true,
+                            tableLayout: "auto",
+                            fixed: true,
+                            data: this.items,
+                            class: ["mt-2"],
+                            size: "small",
+                        },
+                        [
+                            h(ElTableColumn, {prop: 'message', label: "Message"}),
+                            h(ElTableColumn, {prop: 'path', label: "Path"}),
+                        ]
+                    ))
+                }
+
+                const current = ElNotification({
+                    title: this.title || "Error",
+                    message: h('div',  children),
+                    type: "error",
+                    duration: 0,
+                    dangerouslyUseHTMLString: true,
+                    customClass: "large"
+                });
+
+                if (this.notifications === undefined) {
+                    this.notifications = [];
+                }
+
+                this.notifications.push(current);
+            });
+        }
+    };
+</script>
+
diff --git a/ui/src/components/Id.vue b/ui/src/components/Id.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-tooltip transition="" :hide-after="0" placement="top">
+    <el-tooltip transition="" :hide-after="0" :persistent="false" placement="top">
         <template #content><code>{{ value }}</code></template>
         <code :id="uuid" class="text-nowrap">
             {{ transformValue }}

diff --git a/ui/src/components/Kicon.vue b/ui/src/components/Kicon.vue
@@ -5,6 +5,9 @@
             :content="tooltip"
             :raw-content="true"
             :placement="placement"
+            :persistent="false"
+            transition=""
+            :hide-after="0"
         >
             <slot />
         </el-tooltip>
@@ -27,8 +30,7 @@
 </script>
 
 <style lang="scss" scoped>
-
-.kicon {
-    white-space: nowrap;
-}
+    .kicon {
+        white-space: nowrap;
+    }
 </style>
diff --git a/ui/src/components/Status.vue b/ui/src/components/Status.vue
@@ -31,7 +31,6 @@
         computed: {
             cls() {
                 return {
-                    ["btn-" + State.colorClass()[this.status] + (this.size ? " btn-" + this.size : "")]: true,
                     "no-label": !this.label
                 }
             },

diff --git a/ui/src/components/Tabs.vue b/ui/src/components/Tabs.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="card ktr-tabs">
-        <el-tabs v-model="activeName">
+    <div>
+        <el-tabs v-model="activeName" class="mb-3">
             <el-tab-pane
                 v-for="tab in tabs"
                 :key="tab.name"
@@ -76,92 +76,3 @@
     };
 </script>
 
-<style lang="scss">
-@import "../styles/_variable.scss";
-
-.ktr-tabs {
-    transition: all 0.3s ease;
-
-    &.card {
-        background-color: transparent;
-        border: 0;
-    }
-
-    .tabs > .card-header {
-        padding: 0;
-        position: relative;
-
-        > div {
-            padding: $card-spacer-y $card-spacer-x;
-            overflow-x: scroll;
-            overflow-y: hidden;
-            direction: rtl;
-            transform: rotate(180deg);
-
-            &::-webkit-scrollbar {
-                height: 5px;
-            }
-
-            &::-webkit-scrollbar-track, &::-webkit-scrollbar-thumb {
-                background: transparent;
-                transition: 320ms;
-            }
-
-            &::-webkit-scrollbar-thumb:hover {
-                background: $gray-500;
-            }
-
-            .card-header-tabs {
-                margin-top: -11px;
-                direction: ltr;
-                transform: rotate(-180deg);
-            }
-
-            @-moz-document url-prefix() {
-                & {
-                    overflow-x: auto;
-                    .card-header-tabs {
-                        padding-top: 5px;
-                    }
-                }
-            }
-        }
-
-        &:before, &:after {
-            content: "";
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 10px;
-            height: 100%;
-            z-index: 2;
-            background: linear-gradient(to right, rgba(248, 248, 252, 0) 0%, rgba(248, 248, 252, 1) 85%);
-
-            .theme-dark & {
-                background: linear-gradient(to right, rgba(27, 30, 42, 0) 0%, rgb(27, 30, 42) 95%);
-            }
-        }
-
-        &:after {
-            left: 0;
-            background: linear-gradient(to left, rgba(248, 248, 252, 0) 0%, rgba(248, 248, 252, 1) 85%);
-
-            .theme-dark & {
-                background: linear-gradient(to left, rgba(27, 30, 42, 0) 0%, rgb(27, 30, 42) 95%);
-            }
-        }
-
-        &:hover > div::-webkit-scrollbar-thumb {
-            background: var(--secondary);
-        }
-
-        .nav {
-            flex-wrap: nowrap;
-
-            .nav-item {
-                white-space: nowrap;
-            }
-        }
-    }
-}
-</style>
diff --git a/ui/src/components/customToast.vue b/ui/src/components/customToast.vue
diff --git a/ui/src/components/errors/Errors.vue b/ui/src/components/errors/Errors.vue
@@ -42,7 +42,7 @@
 
     .errors {
         h2 {
-            margin-bottom: calc(getCssVar('spacer') * 2);
+            margin-bottom: calc(var(--spacer) * 2);
         }
 
         width: 100%;