style: update style of browser tabs

style: update style of connection dialog
2023-10-27 16:41:27 +08:00 · 2023-10-27 16:41:27 +08:00 · b6eebda177
parent 33051f4e46
commit b6eebda177
7 changed files with 59 additions and 52 deletions
--- a/frontend/src/AppContent.vue
+++ b/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');
--- a/frontend/src/components/content/ContentPane.vue
+++ b/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>
--- a/frontend/src/components/content/ContentValueTab.vue
+++ b/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 { name } = tabStore.currentTab
+const tabMarkColor = computed(() => {
+    const { name } = tabStore?.currentTab || {}
    const { markColor = '' } = connectionStore.serverProfile[name] || {}
-    return {
-        borderTopWidth: markColor ? '3px' : '1px',
-        borderTopColor: markColor || themeVars.value.borderColor,
-    }
+    return markColor
 })

 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
-            v-for="(t, i) in tab"
-            :key="i"
-            :class="tabClass(i)"
-            :closable="true"
-            :name="i"
-            :style="tabStore.activatedIndex === i ? activeTabStyle : undefined"
-            @dblclick.stop="() => {}">
+        <n-tab v-for="(t, i) in tab" :key="i" :class="tabClass(i)" :closable="true" :name="i" @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 {
--- a/frontend/src/components/content_value/ContentServerStatus.vue
+++ b/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">
--- a/frontend/src/components/dialogs/ConnectionDialog.vue
+++ b/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="{
-                                        'color-preset-item_selected': generalForm.markColor === color,
+                                    :style="{
+                                        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>
--- a/frontend/src/components/sidebar/BrowserPane.vue
+++ b/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
--- a/frontend/src/utils/rgb.js
+++ b/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