fix(ui): polish of the new ui

close #1135
close #1131
close #1137

ui/src/components/Status.vue

@@ -1,7 +1,7 @@
 <template>
-    <el-button @click="$emit('click', $event)" class="status" :icon="icon" :size="this.size" :type="this.type" :class="cls">
+    <el-button @click="$emit('click', $event)" class="status" :icon="icon" :size="this.size" :class="cls">
         <template v-if="label">
-            {{ $filters.cap($filters.lower(status)) }}
+            {{ title || $filters.cap($filters.lower(status)) }}
         </template>
     </el-button>
 </template>
@@ -22,6 +22,10 @@
                 type: String,
                 default: ""
             },
+            title: {
+                type: String,
+                default: ""
+            },
             label: {
                 type: Boolean,
                 default: true
@@ -30,16 +34,15 @@
         emits: ["click"],
         computed: {
             cls() {
+                const bg = "status-" + State.colorClass()[this.status];
                 return {
-                    "no-label": !this.label
+                    "no-label": !this.label,
+                    [bg]: true,
                 }
             },
-            icon () {
+            icon() {
                 return State.icon()[this.status];
             },
-            type () {
-                return State.colorClass()[this.status];
-            }
         }
     };
 </script>
@@ -51,5 +54,9 @@
             padding: 8px;
             line-height: 1;
         }
+
+        &:not(.no-label) {
+            border-radius: var(--bs-border-radius-pill);
+        }
     }
 </style>

ui/src/components/executions/Executions.vue

@@ -114,7 +114,7 @@
             </template>
         </data-table>
 
-        <bottom-line>
+        <bottom-line v-if="displayBottomBar">
             <ul>
                 <li v-if="executionsSelection.length !== 0 && (canUpdate || canDelete)">
                     <bottom-line-counter v-model="queryBulkAction" :selections="executionsSelection" :total="total" @update:model-value="selectAll()">
@@ -244,6 +244,10 @@
                     .add(-30, "days")
                     .toDate();
             },
+            displayBottomBar() {
+                return (this.executionsSelection.length !== 0 && (this.canUpdate || this.canDelete)) ||
+                    (this.$route.name === 'flows/update');
+            },
             canUpdate() {
                 return this.user && this.user.isAllowed(permission.EXECUTION, action.UPDATE);
             },

ui/src/components/executions/Kill.vue

@@ -1,20 +1,16 @@
 <template>
-    <div class="wrapper" v-if="enabled">
-        <el-button @click="kill" type="warning" class="me-1">
-            <stop-circle-outline />
-            {{ $t("kill") }}
-        </el-button>
-    </div>
+    <status status="KILLING" :title="$t('kill')" v-if="enabled" @click="kill" class="me-1" />
 </template>
 <script>
     import StopCircleOutline from "vue-material-design-icons/StopCircleOutline.vue";
     import {mapState} from "vuex";
     import permission from "../../models/permission";
     import action from "../../models/action";
     import State from "../../utils/state";
+    import Status from "../Status.vue";
 
     export default {
-        components: {StopCircleOutline},
+        components: {StopCircleOutline, Status},
         props: {
             execution: {
                 type: Object,
@@ -48,8 +44,8 @@
     };
 </script>
 
-<style lang="scss">
-.wrapper {
-    display: inline;
-}
+<style lang="scss" scoped>
+    button.el-button {
+        cursor: pointer !important;
+    }
 </style>

ui/src/components/executions/Overview.vue

@@ -137,7 +137,7 @@
                     });
                 }
 
-                if (this.execution.originalId !== this.execution.id) {
+                if (this.execution.originalId && this.execution.originalId !== this.execution.id) {
                     ret.push({
                         key: this.$t("original execution"),
                         value: this.execution.originalId,

ui/src/components/home/NamespaceTreeMap.vue

@@ -19,7 +19,7 @@
     import {useRoute, useRouter} from "vue-router"
     import Utils from "../../utils/utils.js";
     import TreeMapChart from "../../charts/TreeMapChart"
-    import {defaultConfig, chartClick} from "../../utils/charts";
+    import {defaultConfig, chartClick, backgroundFromState} from "../../utils/charts";
     import {color} from "chart.js/helpers";
     import State from "../../utils/state";
 
@@ -42,10 +42,6 @@
 
             const dataReady = computed(() => props.data !== undefined)
 
-            const backgroundFromState = (state) => {
-                return State.color()[state]
-            }
-
             const tooltip = (context) => {
                 const tooltip = context.tooltip;
                 const tree = tooltip.dataPoints[0].dataset.tree;

ui/src/components/home/StatusPie.vue

@@ -18,7 +18,7 @@
 <script>
     import {defineComponent, computed, ref} from "vue";
     import {DoughnutChart} from "vue-chart-3"
-    import {tooltip, defaultConfig} from "../../utils/charts.js";
+    import {tooltip, defaultConfig, backgroundFromState} from "../../utils/charts.js";
     import State from "../../utils/state";
     import {cssVariable} from "../../utils/global";
 
@@ -57,12 +57,6 @@
                 }
             }))
 
-            const backgroundFromState = (state, alpha = 1) => {
-                const hex = State.color()[state];
-                const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16));
-                return `rgba(${r},${g},${b},${alpha})`;
-            }
-
             const chartData = computed(() => {
                 let background = Object.keys(props.data.executionCounts).map(function (state) {
                     return backgroundFromState(state)

ui/src/components/layout/News.vue

@@ -7,7 +7,7 @@
     <el-drawer size="50%" v-if="isOpen" v-model="isOpen" destroy-on-close :append-to-body="true" class="sm" :title="$t('feeds.title')">
         <div class="post" v-for="(feed, index) in feeds" :key="feed.id">
             <div v-if="feed.image" class="mt-2">
-                <img class="float-right" :src="feed.image" alt="">
+                <img class="float-end" :src="feed.image" alt="">
             </div>
             <h5>
                 {{ feed.title }}
@@ -17,7 +17,7 @@
             <markdown class="markdown-tooltip mt-3" :source="feed.description" />
 
             <div class="text-end">
-                <a class="el-button el-button--primary mt-3 d-inline-block text-end" :href="feed.href" target="_blank">{{ feed.link }} <OpenInNew /></a>
+                <a class="el-button el-button--primary mt-3 " :href="feed.href" target="_blank">{{ feed.link }} <OpenInNew /></a>
             </div>
 
             <el-divider v-if="index !== feeds.length - 1" />

ui/src/components/logs/LogList.vue

@@ -46,7 +46,7 @@
                                 </div>
 
                                 <el-dropdown trigger="click">
-                                    <el-button type="primary">
+                                    <el-button type="default">
                                         <DotsVertical title="" />
                                     </el-button>
                                     <template #dropdown>
@@ -323,6 +323,10 @@
                 background: var(--bs-gray-400);
                 padding: .375rem .75rem;
                 white-space: nowrap;
+
+                html.dark & {
+                    color: var(--bs-gray-600);
+                }
             }
 
             .task-id, .task-duration {
@@ -345,14 +349,23 @@
                 color: var(--bs-gray-500);
             }
 
-            .task-duration {
+            .task-duration small {
                 white-space: nowrap;
 
+                html.dark & {
+                    color: var(--bs-gray-600);
+                }
+            }
+
+            .el-dropdown {
+                > .el-button {
+                    border: 0;
+                }
             }
 
             .task-status {
                 button {
-
+                    border: 0;
                 }
             }
 

ui/src/components/stats/StateChart.vue

@@ -21,7 +21,7 @@
     import {useRoute, useRouter} from "vue-router"
     import {BarChart} from "vue-chart-3";
     import Utils from "../../utils/utils.js";
-    import {defaultConfig, tooltip, chartClick} from "../../utils/charts.js";
+    import {defaultConfig, tooltip, chartClick, backgroundFromState} from "../../utils/charts.js";
     import State from "../../utils/state";
     import {useI18n} from "vue-i18n";
 
@@ -121,10 +121,6 @@
                 },
             }))
 
-            const backgroundFromState = (state) => {
-                return State.color()[state]
-            }
-
             const darkTheme = document.getElementsByTagName("html")[0].className.indexOf("dark") >= 0;
 
             const chartData = computed(() => {

ui/src/override/components/LeftMenu.vue

@@ -317,19 +317,6 @@
                 color: var(--bs-white);
             }
 
-            &_exact-active,
-            &_active {
-                font-weight: 700;
-                background-color: var(--bs-white);
-                color: var(--bs-primary);
-                box-shadow: 0 0.5rem 0.5rem var(--bs-gray-300);
-
-                html.dark & {
-                    background-color: var(--bs-primary);
-                    box-shadow: none;
-                }
-            }
-
             &_disabled {
                 opacity: 1;
             }

ui/src/styles/_variable.scss

@@ -65,8 +65,33 @@ $box-shadow-sm: 0 .125rem .25rem rgba($black, .075);
 $box-shadow: 0 .5rem 1rem rgba($black, .15);
 $box-shadow-lg: 0 1rem 3rem rgba($black, .175);
 
+// boostrap flags
+$enable-reduced-motion: false;
+
 // element-plus
 $types: primary, success, warning, danger, error, info !default;
+$element-colors: (
+    'white': $white,
+    'black': $black,
+    'primary': (
+        'base': $primary,
+    ),
+    'success': (
+        'base': $green,
+    ),
+    'warning': (
+        'base': $orange,
+    ),
+    'danger': (
+        'base': $red,
+    ),
+    'error': (
+        'base': $red,
+    ),
+    'info': (
+        'base': $cyan,
+    ),
+);
 
 // bootstrap
 @import "bootstrap/scss/functions";