From e15bf3ab2f3c8551968446290c44e206a1d674ce Mon Sep 17 00:00:00 2001 From: tiny-craft <137850705+tiny-craft@users.noreply.github.com> Date: Thu, 7 Sep 2023 10:13:38 +0800 Subject: [PATCH] style: adjusted style in dark mode feat: add server status entrance button at the bottom of browser pane --- frontend/src/components/icons/Status.vue | 44 +++++++++++++++++++ .../src/components/sidebar/BrowserPane.vue | 17 +++---- .../src/components/sidebar/BrowserTree.vue | 9 ++-- .../src/components/sidebar/ConnectionTree.vue | 17 +++++-- frontend/src/langs/en.json | 1 + frontend/src/langs/zh-cn.json | 1 + frontend/src/main.js | 15 ++++--- 7 files changed, 80 insertions(+), 24 deletions(-) create mode 100644 frontend/src/components/icons/Status.vue diff --git a/frontend/src/components/icons/Status.vue b/frontend/src/components/icons/Status.vue new file mode 100644 index 0000000..4307641 --- /dev/null +++ b/frontend/src/components/icons/Status.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/frontend/src/components/sidebar/BrowserPane.vue b/frontend/src/components/sidebar/BrowserPane.vue index 552e95a..527b2a5 100644 --- a/frontend/src/components/sidebar/BrowserPane.vue +++ b/frontend/src/components/sidebar/BrowserPane.vue @@ -13,6 +13,7 @@ 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() @@ -28,9 +29,8 @@ const currentSelect = computed(() => { return { server, db, key } }) -const onNewKey = () => { - const { server, key, db = 0 } = currentSelect.value - dialogStore.openNewKeyDialog(key, server, db) +const onInfo = () => { + browserTreeRef.value?.handleSelectContextMenu('server_info') } const i18n = useI18n() @@ -74,7 +74,7 @@ const filterTypeOptions = computed(() => { :options="filterTypeOptions" style="width: 120px" /> - + @@ -83,15 +83,8 @@ const filterTypeOptions = computed(() => {
- + - - - - - - -
diff --git a/frontend/src/components/sidebar/BrowserTree.vue b/frontend/src/components/sidebar/BrowserTree.vue index 95f7a44..41c57ba 100644 --- a/frontend/src/components/sidebar/BrowserTree.vue +++ b/frontend/src/components/sidebar/BrowserTree.vue @@ -225,6 +225,10 @@ const handleSelectContextMenu = (key) => { const node = connectionStore.getNode(selectedKey) const { db, key: nodeKey, redisKey } = node || {} switch (key) { + case 'server_info': + tabStore.setSelectedKeys(props.server) + onUpdateSelectedKeys() + break case 'server_reload': expandedKeys.value = [props.server] tabStore.setSelectedKeys(props.server) @@ -320,10 +324,9 @@ const onUpdateSelectedKeys = (keys, options) => { return } } - - // default is load blank key to display server status - connectionStore.loadKeyValue(props.server, 0) } + // default is load blank key to display server status + connectionStore.loadKeyValue(props.server, 0) } finally { tabStore.setSelectedKeys(props.server, keys) } diff --git a/frontend/src/components/sidebar/ConnectionTree.vue b/frontend/src/components/sidebar/ConnectionTree.vue index a2a9fdd..94ac5e8 100644 --- a/frontend/src/components/sidebar/ConnectionTree.vue +++ b/frontend/src/components/sidebar/ConnectionTree.vue @@ -17,12 +17,14 @@ import useTabStore from 'stores/tab.js' import Edit from '@/components/icons/Edit.vue' import { hexGammaCorrection, parseHexColor, toHexColor } from '@/utils/rgb.js' import IconButton from '@/components/common/IconButton.vue' +import usePreferencesStore from 'stores/preferences.js' const themeVars = useThemeVars() const i18n = useI18n() const openingConnection = ref(false) const connectionStore = useConnectionStore() const tabStore = useTabStore() +const prefStore = usePreferencesStore() const dialogStore = useDialogStore() const expandedKeys = ref([]) @@ -168,6 +170,7 @@ const renderIconMenu = (items) => { } const renderPrefix = ({ option }) => { + const iconTransparency = prefStore.isDark ? 0.75 : 1 switch (option.type) { case ConnectionType.Group: const opened = indexOf(expandedKeys.value, option.key) !== -1 @@ -175,7 +178,11 @@ const renderPrefix = ({ option }) => { NIcon, { size: 20 }, { - default: () => h(ToggleFolder, { modelValue: opened }), + default: () => + h(ToggleFolder, { + modelValue: opened, + fillColor: `rgba(255,206,120,${iconTransparency})`, + }), }, ) case ConnectionType.Server: @@ -183,9 +190,13 @@ const renderPrefix = ({ option }) => { const color = getServerMarkColor(option.name) return h( NIcon, - { size: 20, color }, + { size: 20, color: !!!connected ? color : undefined }, { - default: () => h(ToggleServer, { modelValue: !!connected }), + default: () => + h(ToggleServer, { + modelValue: !!connected, + fillColor: `rgba(220,66,60,${iconTransparency})`, + }), }, ) } diff --git a/frontend/src/langs/en.json b/frontend/src/langs/en.json index 5355519..20dc108 100644 --- a/frontend/src/langs/en.json +++ b/frontend/src/langs/en.json @@ -13,6 +13,7 @@ "new_group": "Add New Group", "rename_group": "Rename Group", "disconnect_all": "Disconnect all", + "status": "Status", "filter": "Filter", "sort_conn": "Sort Connections", "close_confirm": "Confirm close this tab and connection", diff --git a/frontend/src/langs/zh-cn.json b/frontend/src/langs/zh-cn.json index 075bcb3..347833d 100644 --- a/frontend/src/langs/zh-cn.json +++ b/frontend/src/langs/zh-cn.json @@ -13,6 +13,7 @@ "new_group": "添加新分组", "rename_group": "重命名分组", "disconnect_all": "断开所有连接", + "status": "状态", "filter": "筛选", "sort_conn": "调整连接顺序", "close_confirm": "是否关闭当前连接", diff --git a/frontend/src/main.js b/frontend/src/main.js index 9fb5609..df27c86 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -24,12 +24,15 @@ async function setupApp() { await setupDiscreteApi() app.config.errorHandler = (err, instance, info) => { // TODO: add "send error message to author" later - $notification.error({ - title: i18n.global.t('error'), - content: err.toString(), - // meta: err.stack, - }) - console.error(err) + try { + const content = err.toString() + $notification.error({ + title: i18n.global.t('error'), + content, + // meta: err.stack, + }) + console.error(err) + } catch (e) {} } app.config.warnHandler = (message) => { console.warn(message)