From 1a4622cfd04cac48431e8b405473beb5f89b5cb3 Mon Sep 17 00:00:00 2001 From: tiny-craft <137850705+tiny-craft@users.noreply.github.com> Date: Sat, 2 Sep 2023 18:23:40 +0800 Subject: [PATCH] feat: add custom title bar --- frontend/src/App.vue | 2 +- frontend/src/AppContent.vue | 150 ++++++++++---- frontend/src/assets/images/icon.png | Bin 0 -> 8605 bytes .../common/ToolbarControlWidget.vue | 82 ++++++++ .../src/components/content/ContentLogPane.vue | 2 +- .../src/components/content/ContentPane.vue | 24 --- .../components/content/ContentValueTab.vue | 196 +++++++----------- .../content_value/ContentValueHash.vue | 4 +- .../content_value/ContentValueList.vue | 4 +- .../content_value/ContentValueSet.vue | 4 +- .../content_value/ContentValueStream.vue | 4 +- .../content_value/ContentValueString.vue | 1 + .../content_value/ContentValueZSet.vue | 4 +- frontend/src/components/icons/WindowClose.vue | 19 ++ frontend/src/components/icons/WindowMax.vue | 16 ++ frontend/src/components/icons/WindowMin.vue | 16 ++ .../src/components/sidebar/BrowserTree.vue | 19 +- frontend/src/components/sidebar/NavMenu.vue | 6 +- frontend/src/main.js | 2 + frontend/src/styles/content.scss | 4 + frontend/src/styles/style.scss | 1 - frontend/src/utils/platform.js | 12 ++ frontend/src/utils/theme.js | 1 + main.go | 10 +- 24 files changed, 369 insertions(+), 214 deletions(-) create mode 100644 frontend/src/assets/images/icon.png create mode 100644 frontend/src/components/common/ToolbarControlWidget.vue create mode 100644 frontend/src/components/icons/WindowClose.vue create mode 100644 frontend/src/components/icons/WindowMax.vue create mode 100644 frontend/src/components/icons/WindowMin.vue create mode 100644 frontend/src/utils/platform.js diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 7ebeb41..4930fbb 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -63,7 +63,7 @@ watch( class="fill-height"> - +
diff --git a/frontend/src/AppContent.vue b/frontend/src/AppContent.vue index bef1dae..b119d7d 100644 --- a/frontend/src/AppContent.vue +++ b/frontend/src/AppContent.vue @@ -11,6 +11,11 @@ import useTabStore from './stores/tab.js' import usePreferencesStore from './stores/preferences.js' import useConnectionStore from './stores/connections.js' import ContentLogPane from './components/content/ContentLogPane.vue' +import ContentValueTab from '@/components/content/ContentValueTab.vue' +import ToolbarControlWidget from '@/components/common/ToolbarControlWidget.vue' +import { WindowToggleMaximise } from 'wailsjs/runtime/runtime.js' +import { isMacOS } from '@/utils/platform.js' +import iconUrl from '@/assets/images/icon.png' const themeVars = useThemeVars() @@ -19,6 +24,7 @@ const data = reactive({ navMenuWidth: 60, hoverResize: false, resizing: false, + toolbarHeight: 45, }) const tabStore = useTabStore() @@ -69,49 +75,85 @@ watch( @@ -120,12 +162,28 @@ watch( #app-content-wrapper { height: 100%; overflow: hidden; - border-top: v-bind('themeVars.borderColor') 1px solid; box-sizing: border-box; #app-toolbar { - height: 40px; - border-bottom: v-bind('themeVars.borderColor') 1px solid; + background-color: v-bind('themeVars.tabColor'); + border-bottom: 1px solid v-bind('themeVars.borderColor'); + + &-title { + padding-left: 10px; + padding-right: 10px; + box-sizing: border-box; + align-self: center; + align-items: baseline; + } + } + + .app-toolbar-tab { + align-self: flex-end; + margin-bottom: -1px; + } + + #app-content { + height: calc(100% - 60px); } #app-side { @@ -157,4 +215,14 @@ watch( .dragging { cursor: col-resize !important; } + +.fade-enter-from, +.fade-leave-to { + opacity: 0; +} + +.fade-enter-active, +.fade-leave-active { + transition: opacity 0.3s ease; +} diff --git a/frontend/src/assets/images/icon.png b/frontend/src/assets/images/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..e9b73528cc89311022c1a626ed6bf410068ab368 GIT binary patch literal 8605 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

(&1nV5 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 IIg8N$12nRB^Z)<= literal 0 HcmV?d00001 diff --git a/frontend/src/components/common/ToolbarControlWidget.vue b/frontend/src/components/common/ToolbarControlWidget.vue new file mode 100644 index 0000000..bf89612 --- /dev/null +++ b/frontend/src/components/common/ToolbarControlWidget.vue @@ -0,0 +1,82 @@ + + + + + diff --git a/frontend/src/components/content/ContentLogPane.vue b/frontend/src/components/content/ContentLogPane.vue index 15dcf93..717b782 100644 --- a/frontend/src/components/content/ContentLogPane.vue +++ b/frontend/src/components/content/ContentLogPane.vue @@ -90,7 +90,7 @@ defineExpose({ -

+
- - - - {{ t.label }} - - - -
-import { ref } from 'vue' -import { ConnectionType } from '@/consts/connection_type.js' -import Close from '@/components/icons/Close.vue' -import useConnectionStore from 'stores/connections.js' +import ToggleServer from '@/components/icons/ToggleServer.vue' +import useTabStore from 'stores/tab.js' +import { computed } from 'vue' +import { useI18n } from 'vue-i18n' +import { get, map } from 'lodash' import { useThemeVars } from 'naive-ui' - -const emit = defineEmits(['switchTab', 'closeTab', 'update:modelValue']) +import useConnectionStore from 'stores/connections.js' const themeVars = useThemeVars() +const i18n = useI18n() +const tabStore = useTabStore() +const connectionStore = useConnectionStore() + const props = defineProps({ - selectedIndex: { - type: Number, - default: 0, - }, - modelValue: { - type: Object, - default: [ - { - // label: 'tab1', - // key: 'key', - // bgColor: 'white', - }, - ], - }, - tabs: { - type: Array, - default: [ - { - // label: 'tab1', - // key: 'key', - // bgColor: 'white', - }, - ], - }, + backgroundColor: String, }) -const connectionStore = useConnectionStore() -const onCurrentSelectChange = ({ type, group = '', server = '', db = 0, key = '' }) => { - console.log(`group: ${group}\n server: ${server}\n db: ${db}\n key: ${key}`) - if (type === ConnectionType.RedisValue) { - // load and update content value - } -} -// watch(() => databaseStore.currentSelect, throttle(onCurrentSelectChange, 1000)) - -const items = ref(props.modelValue) -const selIndex = ref(props.selectedIndex) - -const onClickTab = (idx, key) => { - if (idx !== selIndex.value) { - selIndex.value = idx - emit('update:modelValue', idx, key) - } +const onCloseTab = (tabIndex) => { + $dialog.warning(i18n.t('close_confirm'), () => { + const tab = get(tabStore.tabs, tabIndex) + if (tab != null) { + connectionStore.closeConnection(tab.name) + } + }) } -const onCloseTab = (idx, key) => { - emit('closeTab', idx, key) -} +const activeTabStyle = computed(() => ({ + backgroundColor: themeVars.value.baseColor, + borderTopWidth: '1px', + borderTopColor: themeVars.value.borderColor, + borderBottomColor: themeVars.value.baseColor, + borderTopLeftRadius: themeVars.value.borderRadius, + borderTopRightRadius: themeVars.value.borderRadius, +})) +const inactiveTabStyle = computed(() => ({ + borderWidth: '0 0 1px', + borderBottomColor: themeVars.value.borderColor, + borderTopLeftRadius: themeVars.value.borderRadius, + borderTopRightRadius: themeVars.value.borderRadius, +})) + +const tab = computed(() => + map(tabStore.tabs, (item) => ({ + key: item.name, + label: item.title, + })), +) - + diff --git a/frontend/src/components/content_value/ContentValueHash.vue b/frontend/src/components/content_value/ContentValueHash.vue index 5b227ef..6f2916f 100644 --- a/frontend/src/components/content_value/ContentValueHash.vue +++ b/frontend/src/components/content_value/ContentValueHash.vue @@ -265,13 +265,15 @@ const onUpdateFilter = (filters, sourceColumn) => { {{ $t('add_row') }}
-
+
{ {{ $t('add_row') }}
-
+
{ {{ $t('add_row') }}
-
+
{ {{ $t('add_row') }}
-
+
{ .value-wrapper { overflow: hidden; border-top: v-bind('themeVars.borderColor') 1px solid; + padding: 5px; } diff --git a/frontend/src/components/content_value/ContentValueZSet.vue b/frontend/src/components/content_value/ContentValueZSet.vue index 8de676d..7978d5d 100644 --- a/frontend/src/components/content_value/ContentValueZSet.vue +++ b/frontend/src/components/content_value/ContentValueZSet.vue @@ -296,13 +296,15 @@ const onUpdateFilter = (filters, sourceColumn) => { {{ $t('add_row') }}
-
+
+const props = defineProps({ + size: { + type: [Number, String], + default: 12, + }, +}) + + + + + diff --git a/frontend/src/components/icons/WindowMax.vue b/frontend/src/components/icons/WindowMax.vue new file mode 100644 index 0000000..2786085 --- /dev/null +++ b/frontend/src/components/icons/WindowMax.vue @@ -0,0 +1,16 @@ + + + + + diff --git a/frontend/src/components/icons/WindowMin.vue b/frontend/src/components/icons/WindowMin.vue new file mode 100644 index 0000000..e154809 --- /dev/null +++ b/frontend/src/components/icons/WindowMin.vue @@ -0,0 +1,16 @@ + + + + + diff --git a/frontend/src/components/sidebar/BrowserTree.vue b/frontend/src/components/sidebar/BrowserTree.vue index 5d18d55..95f7a44 100644 --- a/frontend/src/components/sidebar/BrowserTree.vue +++ b/frontend/src/components/sidebar/BrowserTree.vue @@ -50,14 +50,15 @@ const selectedKeys = computed(() => { const data = computed(() => { const dbs = get(connectionStore.databases, props.server, []) - return [ - { - key: `${props.server}`, - label: props.server, - type: ConnectionType.Server, - children: dbs, - }, - ] + return dbs + // return [ + // { + // key: `${props.server}`, + // label: props.server, + // type: ConnectionType.Server, + // children: dbs, + // }, + // ] }) const backgroundColor = computed(() => { @@ -368,6 +369,8 @@ const renderPrefix = ({ option }) => { // render tree item label const renderLabel = ({ option }) => { switch (option.type) { + case ConnectionType.Server: + return h('b', {}, { default: () => option.label }) case ConnectionType.RedisDB: const { name: server, db } = option let { match: matchPattern, type: typeFilter } = connectionStore.getKeyFilter(server, db) diff --git a/frontend/src/components/sidebar/NavMenu.vue b/frontend/src/components/sidebar/NavMenu.vue index 1098410..ae0fb0a 100644 --- a/frontend/src/components/sidebar/NavMenu.vue +++ b/frontend/src/components/sidebar/NavMenu.vue @@ -32,7 +32,7 @@ const emit = defineEmits(['update:value']) const iconSize = computed(() => Math.floor(props.width * 0.4)) const renderIcon = (icon) => { - return () => h(NIcon, null, { default: () => h(icon, { strokeWidth: 4 }) }) + return () => h(NIcon, null, { default: () => h(icon, { strokeWidth: 3 }) }) } const connectionStore = useConnectionStore() @@ -122,7 +122,7 @@ const openGithub = () => { :render-label="renderContextLabel" trigger="click" @select="onSelectPreferenceMenu"> - +
@@ -131,7 +131,7 @@ const openGithub = () => {