style: update style of browser tabs

style: update style of connection dialog

frontend/src/AppContent.vue

@@ -79,6 +79,10 @@ const border = computed(() => {
     return `1px solid ${color}`
 })
 
+const logoWrapperWidth = computed(() => {
+    return `${data.navMenuWidth + prefStore.behavior.asideWidth - 4}px`
+})
+
 const borderRadius = ref(10)
 const logoPaddingLeft = ref(10)
 const maximised = ref(false)
@@ -148,7 +152,8 @@ onMounted(async () => {
                 <div
                     id="app-toolbar-title"
                     :style="{
-                        width: `${data.navMenuWidth + prefStore.behavior.asideWidth - 4}px`,
+                        width: logoWrapperWidth,
+                        minWidth: logoWrapperWidth,
                         paddingLeft: `${logoPaddingLeft}px`,
                     }">
                     <n-space :size="3" :wrap="false" :wrap-item="false" align="center">
@@ -192,7 +197,7 @@ onMounted(async () => {
                 <nav-menu v-model:value="tabStore.nav" :width="data.navMenuWidth" />
                 <!-- browser page -->
                 <div v-show="tabStore.nav === 'browser'" :class="{ dragging }" class="flex-box-h flex-item-expand">
-                    <div id="app-side" :style="{ width: asideWidthVal }" class="flex-box-h flex-item">
+                    <div :style="{ width: asideWidthVal }" class="app-side flex-box-h flex-item">
                         <browser-pane
                             v-for="t in tabStore.tabs"
                             v-show="get(tabStore.currentTab, 'name') === t.name"
@@ -218,7 +223,7 @@ onMounted(async () => {
 
                 <!-- server list page -->
                 <div v-show="tabStore.nav === 'server'" :class="{ dragging }" class="flex-box-h flex-item-expand">
-                    <div id="app-side" :style="{ width: asideWidthVal }" class="flex-box-h flex-item">
+                    <div :style="{ width: asideWidthVal }" class="app-side flex-box-h flex-item">
                         <connection-pane class="flex-item-expand" />
                         <div
                             :class="{
@@ -273,7 +278,7 @@ onMounted(async () => {
         height: calc(100% - 60px);
     }
 
-    #app-side {
+    .app-side {
         //overflow: hidden;
         height: 100%;
         background-color: v-bind('themeVars.tabColor');

frontend/src/components/content/ContentPane.vue

@@ -63,10 +63,6 @@ const selectedSubTab = computed(() => {
     return subTab
 })
 
-const onSwitchSubTab = (name) => {
-    tabStore.switchSubTab(name)
-}
-
 // BUG: naive-ui tabs will set the bottom line to '0px' after switch to another page and back again
 // watch parent tabs' changing and call 'syncBarPosition' manually
 const tabsRef = ref(null)
@@ -102,7 +98,7 @@ watch(
             placement="top"
             tab-style="padding-left: 10px; padding-right: 10px;"
             type="line"
-            @update:value="onSwitchSubTab">
+            @update:value="tabStore.switchSubTab">
             <!-- server status pane -->
             <n-tab-pane :name="BrowserTabType.Status.toString()" display-directive="show:lazy">
                 <template #tab>

frontend/src/components/content/ContentValueTab.vue

@@ -7,6 +7,10 @@ import { get, map } from 'lodash'
 import { useThemeVars } from 'naive-ui'
 import useConnectionStore from 'stores/connections.js'
 
+/**
+ * Value content tab on head
+ */
+
 const themeVars = useThemeVars()
 const i18n = useI18n()
 const tabStore = useTabStore()
@@ -21,18 +25,15 @@ const onCloseTab = (tabIndex) => {
     })
 }
 
-const activeTabStyle = computed(() => {
+const tabMarkColor = computed(() => {
-    const { name } = tabStore.currentTab
+    const { name } = tabStore?.currentTab || {}
     const { markColor = '' } = connectionStore.serverProfile[name] || {}
-    return {
+    return markColor
-        borderTopWidth: markColor ? '3px' : '1px',
-        borderTopColor: markColor || themeVars.value.borderColor,
-    }
 })
 
 const tabClass = (idx) => {
     if (tabStore.activatedIndex === idx) {
-        return ['value-tab', 'value-tab-active']
+        return ['value-tab', 'value-tab-active', tabMarkColor.value ? 'value-tab-active_mark' : '']
     } else if (tabStore.activatedIndex - 1 === idx) {
         return ['value-tab', 'value-tab-inactive']
     } else {
@@ -52,12 +53,6 @@ const tab = computed(() =>
     <n-tabs
         v-model:value="tabStore.activatedIndex"
         :closable="true"
-        :tab-style="{
-            borderStyle: 'solid',
-            borderWidth: '1px',
-            borderLeftColor: themeVars.borderColor,
-            borderRightColor: themeVars.borderColor,
-        }"
         :tabs-padding="0"
         :theme-overrides="{
             tabFontWeightActive: 800,
@@ -73,14 +68,7 @@ const tab = computed(() =>
         type="card"
         @close="onCloseTab"
         @update:value="(tabIndex) => tabStore.switchTab(tabIndex)">
-        <n-tab
+        <n-tab v-for="(t, i) in tab" :key="i" :class="tabClass(i)" :closable="true" :name="i" @dblclick.stop="() => {}">
-            v-for="(t, i) in tab"
-            :key="i"
-            :class="tabClass(i)"
-            :closable="true"
-            :name="i"
-            :style="tabStore.activatedIndex === i ? activeTabStyle : undefined"
-            @dblclick.stop="() => {}">
             <n-space :size="5" :wrap-item="false" align="center" inline justify="center">
                 <n-icon size="18">
                     <server stroke-width="4" />
@@ -95,11 +83,16 @@ const tab = computed(() =>
 .value-tab {
     --wails-draggable: none;
     position: relative;
+    border: 1px solid v-bind('themeVars.borderColor') !important;
 }
 
 .value-tab-active {
     background-color: v-bind('themeVars.bodyColor') !important;
     border-bottom-color: v-bind('themeVars.bodyColor') !important;
+
+    &_mark {
+        border-top: 3px solid v-bind('tabMarkColor') !important;
+    }
 }
 
 .value-tab-inactive {

frontend/src/components/content_value/ContentServerStatus.vue

@@ -10,8 +10,6 @@ const props = defineProps({
     server: String,
 })
 
-const emit = defineEmits(['update:autoRefresh', 'refresh'])
-
 const connectionStore = useConnectionStore()
 const serverInfo = ref({})
 const autoRefresh = ref(false)
@@ -169,7 +167,7 @@ const infoFilter = ref('')
                         <n-gi :span="6">
                             <n-statistic
                                 :label="$t('status.connected_clients')"
-                                :value="get(serverInfo.value, 'Clients.connected_clients', 0)" />
+                                :value="get(serverInfo, 'Clients.connected_clients', 0)" />
                         </n-gi>
                         <n-gi :span="6">
                             <n-statistic :value="totalKeys">

frontend/src/components/dialogs/ConnectionDialog.vue

@@ -8,11 +8,13 @@ import Close from '@/components/icons/Close.vue'
 import useConnectionStore from 'stores/connections.js'
 import FileOpenInput from '@/components/common/FileOpenInput.vue'
 import { KeyViewType } from '@/consts/key_view_type.js'
+import { useThemeVars } from 'naive-ui'
 
 /**
  * Dialog for new or edit connection
  */
 
+const themeVars = useThemeVars()
 const dialogStore = useDialog()
 const connectionStore = useConnectionStore()
 const i18n = useI18n()
@@ -396,10 +398,13 @@ const onClose = () => {
                                 <div
                                     v-for="color in predefineColors"
                                     :key="color"
-                                    :class="{
+                                    :style="{
-                                        'color-preset-item_selected': generalForm.markColor === color,
+                                        backgroundColor: color,
+                                        borderColor:
+                                            generalForm.markColor === color
+                                                ? themeVars.textColorBase
+                                                : themeVars.borderColor,
                                     }"
-                                    :style="{ backgroundColor: color }"
                                     class="color-preset-item"
                                     @click="generalForm.markColor = color">
                                     <n-icon v-if="isEmpty(color)" :component="Close" size="24" />
@@ -591,13 +596,9 @@ const onClose = () => {
     width: 24px;
     height: 24px;
     margin-right: 2px;
-    border: white 3px solid;
+    border-width: 3px;
+    border-style: solid;
     cursor: pointer;
     border-radius: 50%;
-
-    &_selected,
-    &:hover {
-        border-color: #cdd0d6;
-    }
 }
 </style>

frontend/src/components/sidebar/BrowserPane.vue

@@ -12,21 +12,12 @@ import useConnectionStore from 'stores/connections.js'
 import { types } from '@/consts/support_redis_type.js'
 import Search from '@/components/icons/Search.vue'
 import Unlink from '@/components/icons/Unlink.vue'
-import Status from '@/components/icons/Status.vue'
 
 const themeVars = useThemeVars()
 const dialogStore = useDialogStore()
 const tabStore = useTabStore()
 const currentName = computed(() => get(tabStore.currentTab, 'name', ''))
 const browserTreeRef = ref(null)
-/**
- *
- * @type {ComputedRef<{server: string, db: number, key: string}>}
- */
-const currentSelect = computed(() => {
-    const { server, db, key } = tabStore.currentTab || {}
-    return { server, db, key }
-})
 
 const onInfo = () => {
     browserTreeRef.value?.handleSelectContextMenu('server_info')
@@ -96,7 +87,7 @@ const filterTypeOptions = computed(() => {
             <!--                stroke-width="4"-->
             <!--                unselect-stroke-width="3"-->
             <!--                @update:value="onSwitchView" />-->
-            <icon-button :icon="Status" size="20" stroke-width="4" t-tooltip="interface.status" @click="onInfo" />
+            <!--            <icon-button :icon="Status" size="20" stroke-width="4" t-tooltip="interface.status" @click="onInfo" />-->
             <icon-button :icon="Refresh" size="20" stroke-width="4" t-tooltip="interface.reload" @click="onRefresh" />
             <div class="flex-item-expand" />
             <icon-button

frontend/src/utils/rgb.js

@@ -5,6 +5,7 @@ import { padStart, size, startsWith } from 'lodash'
  * @property {number} r
  * @property {number} g
  * @property {number} b
+ * @property {number} [a]
  */
 
 /**
@@ -43,6 +44,28 @@ export function hexGammaCorrection(rgb, gamma) {
     }
 }
 
+/**
+ * mix two colors
+ * @param rgba1
+ * @param rgba2
+ * @param weight
+ * @return {{a: number, r: number, b: number, g: number}}
+ */
+export function mixColors(rgba1, rgba2, weight = 0.5) {
+    if (rgba1.a === undefined) {
+        rgba1.a = 255
+    }
+    if (rgba2.a === undefined) {
+        rgba2.a = 255
+    }
+    return {
+        r: Math.floor(rgba1.r * (1 - weight) + rgba2.r * weight),
+        g: Math.floor(rgba1.g * (1 - weight) + rgba2.g * weight),
+        b: Math.floor(rgba1.b * (1 - weight) + rgba2.b * weight),
+        a: Math.floor(rgba1.a * (1 - weight) + rgba2.a * weight),
+    }
+}
+
 /**
  * RGB object to hex color string
  * @param {RGB} rgb