perf: add mark color to the border of icon in connection pane
This commit is contained in:
parent
94bcbdfe13
commit
96a11bdb9c
|
@ -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)`
|
||||
})
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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)
|
||||
|
|
2
main.go
2
main.go
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue