perf: add mark color to the border of icon in connection pane

This commit is contained in:
tiny-craft 2023-08-25 00:44:00 +08:00
parent 94bcbdfe13
commit 96a11bdb9c
4 changed files with 32 additions and 24 deletions

View File

@ -62,6 +62,9 @@ const data = computed(() => {
const backgroundColor = computed(() => {
const { markColor: hex = '' } = connectionStore.serverProfile[props.server] || {}
if (isEmpty(hex)) {
return ''
}
const { r, g, b } = parseHexColor(hex)
return `rgba(${r}, ${g}, ${b}, 0.2)`
})

View File

@ -14,10 +14,6 @@ const themeVars = useThemeVars()
const dialogStore = useDialogStore()
const connectionStore = useConnectionStore()
const filterPattern = ref('')
const onDisconnectAll = () => {
connectionStore.closeAllConnection()
}
</script>
<template>
@ -38,13 +34,6 @@ const onDisconnectAll = () => {
stroke-width="4"
t-tooltip="new_group"
@click="dialogStore.openNewGroupDialog()" />
<icon-button
:disabled="!connectionStore.anyConnectionOpened"
:icon="Unlink"
size="20"
stroke-width="4"
t-tooltip="disconnect_all"
@click="onDisconnectAll" />
<n-input v-model:value="filterPattern" :placeholder="$t('filter')" clearable>
<template #prefix>
<n-icon :component="Filter" size="20" />

View File

@ -117,18 +117,29 @@ const menuOptions = {
},
}
const renderLabel = ({ option }) => {
if (option.type === ConnectionType.Server) {
const { markColor = '' } = connectionStore.serverProfile[option.name] || {}
/**
* get mark color of server saved in preferences
* @param name
* @return {null|string}
*/
const getServerMarkColor = (name) => {
const { markColor = '' } = connectionStore.serverProfile[name] || {}
if (!isEmpty(markColor)) {
const rgb = parseHexColor(markColor)
const rgb2 = hexGammaCorrection(rgb, 0.75)
return toHexColor(rgb2)
}
return null
}
const renderLabel = ({ option }) => {
if (option.type === ConnectionType.Server) {
const color = getServerMarkColor(option.name)
if (color != null) {
return h(
NText,
{
style: {
color: toHexColor(rgb2),
},
style: { color },
},
() => option.label,
)
@ -166,9 +177,10 @@ const renderPrefix = ({ option }) => {
)
case ConnectionType.Server:
const connected = connectionStore.isConnected(option.name)
const color = getServerMarkColor(option.name)
return h(
NIcon,
{ size: 20 },
{ size: 20, color },
{
default: () => h(ToggleServer, { modelValue: !!connected }),
},
@ -362,9 +374,11 @@ const handleSelectContextMenu = (key) => {
removeConnection(name)
break
case 'server_close':
if (!isEmpty(group)) {
connectionStore.closeConnection(name)
connectionStore.closeConnection(name).then((closed) => {
if (closed) {
$message.success(i18n.t('handle_succ'))
}
})
break
case 'group_rename':
if (!isEmpty(group)) {
@ -372,7 +386,9 @@ const handleSelectContextMenu = (key) => {
}
break
case 'group_delete':
if (!isEmpty(group)) {
removeGroup(group)
}
break
default:
console.warn('TODO: handle context menu:' + key)

View File

@ -67,7 +67,7 @@ func main() {
},
About: &mac.AboutInfo{
Title: "Tiny RDM",
Message: "A modern lightweight cross-platform Redis desktop client\nCopyright © 2023",
Message: "A modern lightweight cross-platform Redis desktop client.\n\nCopyright © 2023",
Icon: icon,
},
//WebviewIsTransparent: true,