style: change side navigation menu style
style: change some theme color
This commit is contained in:
parent
3c1727db3e
commit
2a3a15d64d
|
@ -4,7 +4,7 @@ import BrowserPane from './components/sidebar/BrowserPane.vue'
|
||||||
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
||||||
import { debounce, get } from 'lodash'
|
import { debounce, get } from 'lodash'
|
||||||
import { useThemeVars } from 'naive-ui'
|
import { useThemeVars } from 'naive-ui'
|
||||||
import NavMenu from './components/sidebar/NavMenu.vue'
|
import Ribbon from './components/sidebar/Ribbon.vue'
|
||||||
import ConnectionPane from './components/sidebar/ConnectionPane.vue'
|
import ConnectionPane from './components/sidebar/ConnectionPane.vue'
|
||||||
import ContentServerPane from './components/content/ContentServerPane.vue'
|
import ContentServerPane from './components/content/ContentServerPane.vue'
|
||||||
import useTabStore from './stores/tab.js'
|
import useTabStore from './stores/tab.js'
|
||||||
|
@ -25,7 +25,7 @@ const props = defineProps({
|
||||||
})
|
})
|
||||||
|
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
navMenuWidth: 60,
|
navMenuWidth: 50,
|
||||||
toolbarHeight: 38,
|
toolbarHeight: 38,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -163,7 +163,7 @@ onMounted(async () => {
|
||||||
:style="prefStore.generalFont"
|
:style="prefStore.generalFont"
|
||||||
class="flex-box-h flex-item-expand"
|
class="flex-box-h flex-item-expand"
|
||||||
style="--wails-draggable: none">
|
style="--wails-draggable: none">
|
||||||
<nav-menu v-model:value="tabStore.nav" :width="data.navMenuWidth" />
|
<ribbon v-model:value="tabStore.nav" :width="data.navMenuWidth" />
|
||||||
<!-- browser page -->
|
<!-- browser page -->
|
||||||
<div v-show="tabStore.nav === 'browser'" class="content-area flex-box-h flex-item-expand">
|
<div v-show="tabStore.nav === 'browser'" class="content-area flex-box-h flex-item-expand">
|
||||||
<resizeable-wrapper
|
<resizeable-wrapper
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
import { computed, h, nextTick, reactive, ref } from 'vue'
|
import { computed, h, nextTick, reactive, ref } from 'vue'
|
||||||
import IconButton from '@/components/common/IconButton.vue'
|
import IconButton from '@/components/common/IconButton.vue'
|
||||||
import Refresh from '@/components/icons/Refresh.vue'
|
import Refresh from '@/components/icons/Refresh.vue'
|
||||||
import { map, size, uniqBy } from 'lodash'
|
import { map, size, split, uniqBy } from 'lodash'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
import Delete from '@/components/icons/Delete.vue'
|
import Delete from '@/components/icons/Delete.vue'
|
||||||
import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
|
@ -107,7 +107,7 @@ defineExpose({
|
||||||
width: 180,
|
width: 180,
|
||||||
align: 'center',
|
align: 'center',
|
||||||
titleAlign: 'center',
|
titleAlign: 'center',
|
||||||
render({ timestamp }, index) {
|
render: ({ timestamp }, index) => {
|
||||||
return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')
|
return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -115,7 +115,7 @@ defineExpose({
|
||||||
title: $t('log.server'),
|
title: $t('log.server'),
|
||||||
key: 'server',
|
key: 'server',
|
||||||
filterOptionValue: data.server,
|
filterOptionValue: data.server,
|
||||||
filter(value, row) {
|
filter: (value, row) => {
|
||||||
return value === '' || row.server === value.toString()
|
return value === '' || row.server === value.toString()
|
||||||
},
|
},
|
||||||
width: 150,
|
width: 150,
|
||||||
|
@ -129,10 +129,10 @@ defineExpose({
|
||||||
titleAlign: 'center',
|
titleAlign: 'center',
|
||||||
filterOptionValue: data.keyword,
|
filterOptionValue: data.keyword,
|
||||||
resizable: true,
|
resizable: true,
|
||||||
filter(value, row) {
|
filter: (value, row) => {
|
||||||
return value === '' || !!~row.cmd.indexOf(value.toString())
|
return value === '' || !!~row.cmd.indexOf(value.toString())
|
||||||
},
|
},
|
||||||
render({ cmd }, index) {
|
render: ({ cmd }, index) => {
|
||||||
const cmdList = split(cmd, '\n')
|
const cmdList = split(cmd, '\n')
|
||||||
if (size(cmdList) > 1) {
|
if (size(cmdList) > 1) {
|
||||||
return h(
|
return h(
|
||||||
|
@ -150,7 +150,7 @@ defineExpose({
|
||||||
width: 100,
|
width: 100,
|
||||||
align: 'center',
|
align: 'center',
|
||||||
titleAlign: 'center',
|
titleAlign: 'center',
|
||||||
render({ cost }, index) {
|
render: ({ cost }, index) => {
|
||||||
const ms = dayjs.duration(cost).asMilliseconds()
|
const ms = dayjs.duration(cost).asMilliseconds()
|
||||||
if (ms < 1000) {
|
if (ms < 1000) {
|
||||||
return `${ms} ms`
|
return `${ms} ms`
|
||||||
|
|
|
@ -1,9 +1,10 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { h, onMounted, onUnmounted, reactive, ref } from 'vue'
|
import { h, onMounted, onUnmounted, reactive, ref } from 'vue'
|
||||||
import Refresh from '@/components/icons/Refresh.vue'
|
import Refresh from '@/components/icons/Refresh.vue'
|
||||||
import { debounce, isEmpty, map, size } from 'lodash'
|
import { debounce, isEmpty, map, size, split } from 'lodash'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
import { useThemeVars } from 'naive-ui'
|
import { useThemeVars } from 'naive-ui'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
import useBrowserStore from 'stores/browser.js'
|
import useBrowserStore from 'stores/browser.js'
|
||||||
|
|
||||||
const themeVars = useThemeVars()
|
const themeVars = useThemeVars()
|
||||||
|
|
|
@ -29,7 +29,7 @@ const props = defineProps({
|
||||||
|
|
||||||
const emit = defineEmits(['update:value'])
|
const emit = defineEmits(['update:value'])
|
||||||
|
|
||||||
const iconSize = computed(() => Math.floor(props.width * 0.4))
|
const iconSize = computed(() => Math.floor(props.width * 0.45))
|
||||||
const renderIcon = (icon) => {
|
const renderIcon = (icon) => {
|
||||||
return () => h(NIcon, null, { default: () => h(icon, { strokeWidth: 3 }) })
|
return () => h(NIcon, null, { default: () => h(icon, { strokeWidth: 3 }) })
|
||||||
}
|
}
|
||||||
|
@ -41,18 +41,18 @@ const menuOptions = computed(() => {
|
||||||
{
|
{
|
||||||
label: i18n.t('ribbon.browser'),
|
label: i18n.t('ribbon.browser'),
|
||||||
key: 'browser',
|
key: 'browser',
|
||||||
icon: renderIcon(Database),
|
icon: Database,
|
||||||
show: browserStore.anyConnectionOpened,
|
show: browserStore.anyConnectionOpened,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: i18n.t('ribbon.server'),
|
label: i18n.t('ribbon.server'),
|
||||||
key: 'server',
|
key: 'server',
|
||||||
icon: renderIcon(Server),
|
icon: Server,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: i18n.t('ribbon.log'),
|
label: i18n.t('ribbon.log'),
|
||||||
key: 'log',
|
key: 'log',
|
||||||
icon: renderIcon(Record),
|
icon: Record,
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
@ -115,18 +115,30 @@ const exThemeVars = computed(() => {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
id="app-nav-menu"
|
id="app-ribbon"
|
||||||
:style="{
|
:style="{
|
||||||
width: props.width + 'px',
|
width: props.width + 'px',
|
||||||
|
minWidth: props.width + 'px',
|
||||||
}"
|
}"
|
||||||
class="flex-box-v">
|
class="flex-box-v">
|
||||||
<n-menu
|
<div class="ribbon-wrapper flex-box-v">
|
||||||
:collapsed="true"
|
<div
|
||||||
:collapsed-icon-size="iconSize"
|
v-for="(m, i) in menuOptions"
|
||||||
:collapsed-width="props.width"
|
v-show="m.show !== false"
|
||||||
:options="menuOptions"
|
:key="i"
|
||||||
:value="props.value"
|
:class="{ 'ribbon-item-active': props.value === m.key }"
|
||||||
@update:value="(val) => emit('update:value', val)" />
|
class="ribbon-item clickable"
|
||||||
|
@click="emit('update:value', m.key)">
|
||||||
|
<n-tooltip :delay="2" :show-arrow="false" placement="right">
|
||||||
|
<template #trigger>
|
||||||
|
<n-icon :size="iconSize">
|
||||||
|
<component :is="m.icon" :stroke-width="3.5"></component>
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
{{ m.label }}
|
||||||
|
</n-tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="flex-item-expand"></div>
|
<div class="flex-item-expand"></div>
|
||||||
<div class="nav-menu-item flex-box-v">
|
<div class="nav-menu-item flex-box-v">
|
||||||
<n-dropdown
|
<n-dropdown
|
||||||
|
@ -142,11 +154,69 @@ const exThemeVars = computed(() => {
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
#app-nav-menu {
|
#app-ribbon {
|
||||||
//height: 100vh;
|
//height: 100vh;
|
||||||
border-right: v-bind('exThemeVars.splitColor') solid 1px;
|
border-right: v-bind('exThemeVars.splitColor') solid 1px;
|
||||||
background-color: v-bind('exThemeVars.sidebarColor');
|
background-color: v-bind('exThemeVars.ribbonColor');
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
color: v-bind('themeVars.textColor2');
|
||||||
|
|
||||||
|
.ribbon-wrapper {
|
||||||
|
gap: 2px;
|
||||||
|
margin-top: 5px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-right: 3px;
|
||||||
|
|
||||||
|
.ribbon-item {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1;
|
||||||
|
color: v-bind('themeVars.textColor3');
|
||||||
|
//border-left: 5px solid #000;
|
||||||
|
border-radius: v-bind('themeVars.borderRadius');
|
||||||
|
padding: 8px 0;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(0, 0, 0, 0.05);
|
||||||
|
color: v-bind('themeVars.primaryColor');
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
position: absolute;
|
||||||
|
width: 3px;
|
||||||
|
left: 0;
|
||||||
|
top: 24%;
|
||||||
|
bottom: 24%;
|
||||||
|
border-radius: 9999px;
|
||||||
|
content: '';
|
||||||
|
background-color: v-bind('themeVars.primaryColor');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ribbon-item-active {
|
||||||
|
//background-color: v-bind('exThemeVars.ribbonActiveColor');
|
||||||
|
color: v-bind('themeVars.primaryColor');
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: v-bind('themeVars.primaryColor') !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
position: absolute;
|
||||||
|
width: 3px;
|
||||||
|
left: 0;
|
||||||
|
top: 24%;
|
||||||
|
bottom: 24%;
|
||||||
|
border-radius: 9999px;
|
||||||
|
content: '';
|
||||||
|
background-color: v-bind('themeVars.primaryColor');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.nav-menu-item {
|
.nav-menu-item {
|
||||||
align-items: center;
|
align-items: center;
|
|
@ -11,7 +11,9 @@
|
||||||
*/
|
*/
|
||||||
export const extraLightTheme = {
|
export const extraLightTheme = {
|
||||||
titleColor: '#F2F2F2',
|
titleColor: '#F2F2F2',
|
||||||
sidebarColor: '#E9E9E9',
|
ribbonColor: '#F9F9F9',
|
||||||
|
ribbonActiveColor: '#E3E3E3',
|
||||||
|
sidebarColor: '#F2F2F2',
|
||||||
splitColor: '#DADADA',
|
splitColor: '#DADADA',
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -20,7 +22,9 @@ export const extraLightTheme = {
|
||||||
* @type ExtraTheme
|
* @type ExtraTheme
|
||||||
*/
|
*/
|
||||||
export const extraDarkTheme = {
|
export const extraDarkTheme = {
|
||||||
titleColor: '#363636',
|
titleColor: '#262626',
|
||||||
|
ribbonColor: '#2C2C2C',
|
||||||
|
ribbonActiveColor: '#363636',
|
||||||
sidebarColor: '#262626',
|
sidebarColor: '#262626',
|
||||||
splitColor: '#474747',
|
splitColor: '#474747',
|
||||||
}
|
}
|
||||||
|
|
|
@ -33,6 +33,9 @@ export const themeOverrides = {
|
||||||
tabGapLargeCard: '2px',
|
tabGapLargeCard: '2px',
|
||||||
tabFontWeightActive: 450,
|
tabFontWeightActive: 450,
|
||||||
},
|
},
|
||||||
|
Card: {
|
||||||
|
colorEmbedded: '#FAFAFA',
|
||||||
|
},
|
||||||
Form: {
|
Form: {
|
||||||
labelFontSizeTopSmall: '12px',
|
labelFontSizeTopSmall: '12px',
|
||||||
labelFontSizeTopMedium: '13px',
|
labelFontSizeTopMedium: '13px',
|
||||||
|
@ -77,7 +80,7 @@ const _darkThemeOverrides = {
|
||||||
nodeTextColor: '#CECED0',
|
nodeTextColor: '#CECED0',
|
||||||
},
|
},
|
||||||
Card: {
|
Card: {
|
||||||
colorEmbedded: '#18181C',
|
colorEmbedded: '#212121',
|
||||||
},
|
},
|
||||||
Dropdown: {
|
Dropdown: {
|
||||||
color: '#272727',
|
color: '#272727',
|
||||||
|
|
Loading…
Reference in New Issue