style: adjusted the light and dark themes
style: add window shadow on macOS #62
This commit is contained in:
parent
124627d724
commit
6fb0eadfbd
|
@ -18,7 +18,7 @@ import { useI18n } from 'vue-i18n'
|
||||||
import { darkTheme } from 'naive-ui'
|
import { darkTheme } from 'naive-ui'
|
||||||
import KeyFilterDialog from './components/dialogs/KeyFilterDialog.vue'
|
import KeyFilterDialog from './components/dialogs/KeyFilterDialog.vue'
|
||||||
import { WindowSetDarkTheme, WindowSetLightTheme } from 'wailsjs/runtime/runtime.js'
|
import { WindowSetDarkTheme, WindowSetLightTheme } from 'wailsjs/runtime/runtime.js'
|
||||||
import { themeOverrides } from '@/utils/theme.js'
|
import { darkThemeOverrides, themeOverrides } from '@/utils/theme.js'
|
||||||
import AboutDialog from '@/components/dialogs/AboutDialog.vue'
|
import AboutDialog from '@/components/dialogs/AboutDialog.vue'
|
||||||
|
|
||||||
hljs.registerLanguage('json', json)
|
hljs.registerLanguage('json', json)
|
||||||
|
@ -60,7 +60,7 @@ watch(
|
||||||
:inline-theme-disabled="true"
|
:inline-theme-disabled="true"
|
||||||
:locale="prefStore.themeLocale"
|
:locale="prefStore.themeLocale"
|
||||||
:theme="prefStore.isDark ? darkTheme : undefined"
|
:theme="prefStore.isDark ? darkTheme : undefined"
|
||||||
:theme-overrides="themeOverrides"
|
:theme-overrides="prefStore.isDark ? darkThemeOverrides : themeOverrides"
|
||||||
class="fill-height">
|
class="fill-height">
|
||||||
<n-dialog-provider>
|
<n-dialog-provider>
|
||||||
<app-content :loading="initializing" />
|
<app-content :loading="initializing" />
|
||||||
|
|
|
@ -17,6 +17,7 @@ import { EventsOn, WindowIsFullscreen, WindowIsMaximised, WindowToggleMaximise }
|
||||||
import { isMacOS } from '@/utils/platform.js'
|
import { isMacOS } from '@/utils/platform.js'
|
||||||
import iconUrl from '@/assets/images/icon.png'
|
import iconUrl from '@/assets/images/icon.png'
|
||||||
import ResizeableWrapper from '@/components/common/ResizeableWrapper.vue'
|
import ResizeableWrapper from '@/components/common/ResizeableWrapper.vue'
|
||||||
|
import { extraTheme } from '@/utils/extra_theme.js'
|
||||||
|
|
||||||
const themeVars = useThemeVars()
|
const themeVars = useThemeVars()
|
||||||
|
|
||||||
|
@ -33,6 +34,9 @@ const tabStore = useTabStore()
|
||||||
const prefStore = usePreferencesStore()
|
const prefStore = usePreferencesStore()
|
||||||
const connectionStore = useConnectionStore()
|
const connectionStore = useConnectionStore()
|
||||||
const logPaneRef = ref(null)
|
const logPaneRef = ref(null)
|
||||||
|
const exThemeVars = computed(() => {
|
||||||
|
return extraTheme(prefStore.isDark)
|
||||||
|
})
|
||||||
// const preferences = ref({})
|
// const preferences = ref({})
|
||||||
// provide('preferences', preferences)
|
// provide('preferences', preferences)
|
||||||
|
|
||||||
|
@ -51,8 +55,7 @@ watch(
|
||||||
)
|
)
|
||||||
|
|
||||||
const border = computed(() => {
|
const border = computed(() => {
|
||||||
const color = isMacOS() && false ? '#0000' : themeVars.value.borderColor
|
return isMacOS() ? 'none' : `1px solid ${themeVars.value.borderColor}`
|
||||||
return `1px solid ${color}`
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const logoWrapperWidth = computed(() => {
|
const logoWrapperWidth = computed(() => {
|
||||||
|
@ -108,15 +111,9 @@ onMounted(async () => {
|
||||||
<!-- app content-->
|
<!-- app content-->
|
||||||
<n-spin
|
<n-spin
|
||||||
:show="props.loading"
|
:show="props.loading"
|
||||||
:style="{ backgroundColor: themeVars.bodyColor, borderRadius: `${borderRadius}px`, border }"
|
:style="{ borderRadius: `${borderRadius}px`, border }"
|
||||||
:theme-overrides="{ opacitySpinning: 0 }">
|
:theme-overrides="{ opacitySpinning: 0 }">
|
||||||
<div
|
<div id="app-content-wrapper" :style="{ color: themeVars.textColorBase }" class="flex-box-v">
|
||||||
id="app-content-wrapper"
|
|
||||||
:style="{
|
|
||||||
backgroundColor: themeVars.bodyColor,
|
|
||||||
color: themeVars.textColorBase,
|
|
||||||
}"
|
|
||||||
class="flex-box-v">
|
|
||||||
<!-- title bar -->
|
<!-- title bar -->
|
||||||
<div
|
<div
|
||||||
id="app-toolbar"
|
id="app-toolbar"
|
||||||
|
@ -208,15 +205,16 @@ onMounted(async () => {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
#app-content-wrapper {
|
#app-content-wrapper {
|
||||||
width: calc(100vw - 2px);
|
width: 100vw;
|
||||||
height: calc(100vh - 2px);
|
height: 100vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 10px;
|
border-radius: 8px;
|
||||||
|
background-color: v-bind('themeVars.bodyColor');
|
||||||
|
|
||||||
#app-toolbar {
|
#app-toolbar {
|
||||||
background-color: v-bind('themeVars.tabColor');
|
background-color: v-bind('exThemeVars.titleColor');
|
||||||
border-bottom: 1px solid v-bind('themeVars.borderColor');
|
border-bottom: 1px solid v-bind('exThemeVars.splitColor');
|
||||||
|
|
||||||
&-title {
|
&-title {
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
|
@ -240,31 +238,11 @@ onMounted(async () => {
|
||||||
.app-side {
|
.app-side {
|
||||||
//overflow: hidden;
|
//overflow: hidden;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: v-bind('themeVars.tabColor');
|
background-color: v-bind('exThemeVars.sidebarColor');
|
||||||
border-right: 1px solid v-bind('themeVars.borderColor');
|
border-right: 1px solid v-bind('exThemeVars.splitColor');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.resize-divider {
|
|
||||||
width: 3px;
|
|
||||||
border-right: 1px solid v-bind('themeVars.borderColor');
|
|
||||||
}
|
|
||||||
|
|
||||||
.resize-divider-hide {
|
|
||||||
background-color: #0000;
|
|
||||||
border-right-color: #0000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resize-divider-hover {
|
|
||||||
background-color: v-bind('themeVars.borderColor');
|
|
||||||
border-right-color: v-bind('themeVars.borderColor');
|
|
||||||
}
|
|
||||||
|
|
||||||
.resize-divider-drag {
|
|
||||||
background-color: v-bind('themeVars.primaryColor');
|
|
||||||
border-right-color: v-bind('themeVars.primaryColor');
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-enter-from,
|
.fade-enter-from,
|
||||||
.fade-leave-to {
|
.fade-leave-to {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
|
@ -162,6 +162,5 @@ defineExpose({
|
||||||
.content-container {
|
.content-container {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-left: 1px solid v-bind('themeVars.borderColor');
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -178,14 +178,14 @@ watch(
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.content-sub-tab {
|
.content-sub-tab {
|
||||||
background-color: v-bind('themeVars.bodyColor');
|
background-color: v-bind('themeVars.tabColor');
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-sub-tab-pane {
|
.content-sub-tab-pane {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: v-bind('themeVars.tabColor');
|
background-color: v-bind('themeVars.bodyColor');
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -6,6 +6,8 @@ import { useI18n } from 'vue-i18n'
|
||||||
import { get, map } from 'lodash'
|
import { get, map } from 'lodash'
|
||||||
import { useThemeVars } from 'naive-ui'
|
import { useThemeVars } from 'naive-ui'
|
||||||
import useConnectionStore from 'stores/connections.js'
|
import useConnectionStore from 'stores/connections.js'
|
||||||
|
import { extraTheme } from '@/utils/extra_theme.js'
|
||||||
|
import usePreferencesStore from 'stores/preferences.js'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Value content tab on head
|
* Value content tab on head
|
||||||
|
@ -15,6 +17,7 @@ const themeVars = useThemeVars()
|
||||||
const i18n = useI18n()
|
const i18n = useI18n()
|
||||||
const tabStore = useTabStore()
|
const tabStore = useTabStore()
|
||||||
const connectionStore = useConnectionStore()
|
const connectionStore = useConnectionStore()
|
||||||
|
const prefStore = usePreferencesStore()
|
||||||
|
|
||||||
const onCloseTab = (tabIndex) => {
|
const onCloseTab = (tabIndex) => {
|
||||||
const tab = get(tabStore.tabs, tabIndex)
|
const tab = get(tabStore.tabs, tabIndex)
|
||||||
|
@ -47,6 +50,10 @@ const tab = computed(() =>
|
||||||
label: item.title,
|
label: item.title,
|
||||||
})),
|
})),
|
||||||
)
|
)
|
||||||
|
|
||||||
|
const exThemeVars = computed(() => {
|
||||||
|
return extraTheme(prefStore.isDark)
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -60,7 +67,6 @@ const tab = computed(() =>
|
||||||
tabGapMediumCard: 0,
|
tabGapMediumCard: 0,
|
||||||
tabGapLargeCard: 0,
|
tabGapLargeCard: 0,
|
||||||
tabColor: '#0000',
|
tabColor: '#0000',
|
||||||
// tabBorderColor: themeVars.borderColor,
|
|
||||||
tabBorderColor: '#0000',
|
tabBorderColor: '#0000',
|
||||||
tabTextColorCard: themeVars.closeIconColor,
|
tabTextColorCard: themeVars.closeIconColor,
|
||||||
}"
|
}"
|
||||||
|
@ -83,12 +89,12 @@ const tab = computed(() =>
|
||||||
.value-tab {
|
.value-tab {
|
||||||
--wails-draggable: none;
|
--wails-draggable: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 1px solid v-bind('themeVars.borderColor') !important;
|
border: 1px solid v-bind('exThemeVars.splitColor') !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.value-tab-active {
|
.value-tab-active {
|
||||||
background-color: v-bind('themeVars.bodyColor') !important;
|
background-color: v-bind('themeVars.tabColor') !important;
|
||||||
border-bottom-color: v-bind('themeVars.bodyColor') !important;
|
border-bottom-color: v-bind('themeVars.tabColor') !important;
|
||||||
|
|
||||||
&_mark {
|
&_mark {
|
||||||
border-top: 3px solid v-bind('tabMarkColor') !important;
|
border-top: 3px solid v-bind('tabMarkColor') !important;
|
||||||
|
@ -99,7 +105,7 @@ const tab = computed(() =>
|
||||||
border-color: #0000 !important;
|
border-color: #0000 !important;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: v-bind('themeVars.borderColor') !important;
|
background-color: v-bind('exThemeVars.splitColor') !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -112,7 +112,7 @@ const infoFilter = ref('')
|
||||||
<n-scrollbar ref="scrollRef">
|
<n-scrollbar ref="scrollRef">
|
||||||
<n-back-top :listen-to="scrollRef" />
|
<n-back-top :listen-to="scrollRef" />
|
||||||
<n-space :size="5" :wrap-item="false" style="padding: 5px" vertical>
|
<n-space :size="5" :wrap-item="false" style="padding: 5px" vertical>
|
||||||
<n-card>
|
<n-card embedded>
|
||||||
<template #header>
|
<template #header>
|
||||||
<n-space :wrap-item="false" align="center" inline size="small">
|
<n-space :wrap-item="false" align="center" inline size="small">
|
||||||
{{ props.server }}
|
{{ props.server }}
|
||||||
|
@ -184,7 +184,7 @@ const infoFilter = ref('')
|
||||||
</n-grid>
|
</n-grid>
|
||||||
</n-spin>
|
</n-spin>
|
||||||
</n-card>
|
</n-card>
|
||||||
<n-card :title="$t('status.all_info')">
|
<n-card :title="$t('status.all_info')" embedded>
|
||||||
<template #header-extra>
|
<template #header-extra>
|
||||||
<n-input v-model:value="infoFilter" clearable placeholder="">
|
<n-input v-model:value="infoFilter" clearable placeholder="">
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
|
|
|
@ -69,13 +69,8 @@ const onReloadKey = async () => {
|
||||||
:size="props.size"
|
:size="props.size"
|
||||||
:ttl="props.ttl"
|
:ttl="props.ttl"
|
||||||
:value="props.value"
|
:value="props.value"
|
||||||
:view-as="props.viewAs"
|
:view-as="props.viewAs" />
|
||||||
class="content-value-wrapper" />
|
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped></style>
|
||||||
.content-value-wrapper {
|
|
||||||
background-color: v-bind('themeVars.bodyColor');
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
@ -12,6 +12,7 @@ import { BrowserOpenURL } from 'wailsjs/runtime/runtime.js'
|
||||||
import useConnectionStore from 'stores/connections.js'
|
import useConnectionStore from 'stores/connections.js'
|
||||||
import usePreferencesStore from 'stores/preferences.js'
|
import usePreferencesStore from 'stores/preferences.js'
|
||||||
import Record from '@/components/icons/Record.vue'
|
import Record from '@/components/icons/Record.vue'
|
||||||
|
import { extraTheme } from '@/utils/extra_theme.js'
|
||||||
|
|
||||||
const themeVars = useThemeVars()
|
const themeVars = useThemeVars()
|
||||||
|
|
||||||
|
@ -88,14 +89,14 @@ const renderContextLabel = (option) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const dialogStore = useDialogStore()
|
const dialogStore = useDialogStore()
|
||||||
const preferencesStore = usePreferencesStore()
|
const prefStore = usePreferencesStore()
|
||||||
const onSelectPreferenceMenu = (key) => {
|
const onSelectPreferenceMenu = (key) => {
|
||||||
switch (key) {
|
switch (key) {
|
||||||
case 'preferences':
|
case 'preferences':
|
||||||
dialogStore.openPreferencesDialog()
|
dialogStore.openPreferencesDialog()
|
||||||
break
|
break
|
||||||
case 'update':
|
case 'update':
|
||||||
preferencesStore.checkForUpdate(true)
|
prefStore.checkForUpdate(true)
|
||||||
break
|
break
|
||||||
case 'about':
|
case 'about':
|
||||||
dialogStore.openAboutDialog()
|
dialogStore.openAboutDialog()
|
||||||
|
@ -106,6 +107,10 @@ const onSelectPreferenceMenu = (key) => {
|
||||||
const openGithub = () => {
|
const openGithub = () => {
|
||||||
BrowserOpenURL('https://github.com/tiny-craft/tiny-rdm')
|
BrowserOpenURL('https://github.com/tiny-craft/tiny-rdm')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const exThemeVars = computed(() => {
|
||||||
|
return extraTheme(prefStore.isDark)
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -139,7 +144,9 @@ const openGithub = () => {
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
#app-nav-menu {
|
#app-nav-menu {
|
||||||
//height: 100vh;
|
//height: 100vh;
|
||||||
//border-right: v-bind('themeVars.borderColor') solid 1px;
|
border-right: v-bind('exThemeVars.splitColor') solid 1px;
|
||||||
|
background-color: v-bind('exThemeVars.sidebarColor');
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
.nav-menu-item {
|
.nav-menu-item {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
@ -0,0 +1,35 @@
|
||||||
|
/**
|
||||||
|
* @typedef ExtraTheme
|
||||||
|
* @property {string} titleColor
|
||||||
|
* @property {string} sidebarColor
|
||||||
|
* @property {string} splitColor
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @type ExtraTheme
|
||||||
|
*/
|
||||||
|
export const extraLightTheme = {
|
||||||
|
titleColor: '#F0F0F4',
|
||||||
|
sidebarColor: '#F6F6F6',
|
||||||
|
splitColor: '#E0E0E6',
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @type ExtraTheme
|
||||||
|
*/
|
||||||
|
export const extraDarkTheme = {
|
||||||
|
titleColor: '#202020',
|
||||||
|
sidebarColor: '#202124',
|
||||||
|
splitColor: '#323138',
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {boolean} dark
|
||||||
|
* @return ExtraTheme
|
||||||
|
*/
|
||||||
|
export const extraTheme = (dark) => {
|
||||||
|
return dark ? extraDarkTheme : extraLightTheme
|
||||||
|
}
|
|
@ -1,3 +1,5 @@
|
||||||
|
import { merge } from 'lodash'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @type import('naive-ui').GlobalThemeOverrides
|
* @type import('naive-ui').GlobalThemeOverrides
|
||||||
|
@ -12,6 +14,7 @@ export const themeOverrides = {
|
||||||
borderRadiusSmall: '3px',
|
borderRadiusSmall: '3px',
|
||||||
lineHeight: 1.5,
|
lineHeight: 1.5,
|
||||||
scrollbarWidth: '8px',
|
scrollbarWidth: '8px',
|
||||||
|
tabColor: '#FFFFFF',
|
||||||
},
|
},
|
||||||
Tag: {
|
Tag: {
|
||||||
// borderRadius: '3px'
|
// borderRadius: '3px'
|
||||||
|
@ -39,4 +42,27 @@ export const themeOverrides = {
|
||||||
labelTextColor: 'rgb(113,120,128)',
|
labelTextColor: 'rgb(113,120,128)',
|
||||||
labelFontWeight: '450',
|
labelFontWeight: '450',
|
||||||
},
|
},
|
||||||
|
Radio: {
|
||||||
|
buttonColorActive: '#D13B37',
|
||||||
|
buttonTextColorActive: '#FFF',
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @type import('naive-ui').GlobalThemeOverrides
|
||||||
|
*/
|
||||||
|
const _darkThemeOverrides = {
|
||||||
|
common: {
|
||||||
|
bodyColor: '#1A1A1A',
|
||||||
|
tabColor: '#18181C',
|
||||||
|
},
|
||||||
|
Tree: {
|
||||||
|
nodeTextColor: '#ceced0',
|
||||||
|
},
|
||||||
|
Card: {
|
||||||
|
colorEmbedded: '#18181C',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export const darkThemeOverrides = merge({}, themeOverrides, _darkThemeOverrides)
|
||||||
|
|
4
main.go
4
main.go
|
@ -53,7 +53,7 @@ func main() {
|
||||||
AssetServer: &assetserver.Options{
|
AssetServer: &assetserver.Options{
|
||||||
Assets: assets,
|
Assets: assets,
|
||||||
},
|
},
|
||||||
BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 0},
|
BackgroundColour: options.NewRGBA(27, 38, 54, 0),
|
||||||
OnStartup: func(ctx context.Context) {
|
OnStartup: func(ctx context.Context) {
|
||||||
sysSvc.Start(ctx)
|
sysSvc.Start(ctx)
|
||||||
connSvc.Start(ctx)
|
connSvc.Start(ctx)
|
||||||
|
@ -80,7 +80,7 @@ func main() {
|
||||||
Icon: icon,
|
Icon: icon,
|
||||||
},
|
},
|
||||||
WebviewIsTransparent: false,
|
WebviewIsTransparent: false,
|
||||||
WindowIsTranslucent: false,
|
WindowIsTranslucent: true,
|
||||||
},
|
},
|
||||||
Windows: &windows.Options{
|
Windows: &windows.Options{
|
||||||
WebviewIsTransparent: true,
|
WebviewIsTransparent: true,
|
||||||
|
|
Loading…
Reference in New Issue