Alter IconButton component as NButton to support disable property
This commit is contained in:
tiny-craft
parent
19c8e153c3
commit
8e3adbf0c3
|
|
@ -85,6 +85,7 @@ func (c *ConnectionsStorage) GetConnection(name string) *types.Connection {
|
|||
for _, group := range conns {
|
||||
for _, conn := range group.Connections {
|
||||
if conn.Name == name {
|
||||
conn.Group = group.GroupName
|
||||
return &conn
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,15 +5,9 @@ import { NIcon } from 'naive-ui'
|
|||
const emit = defineEmits(['click'])
|
||||
|
||||
const props = defineProps({
|
||||
tooltip: {
|
||||
type: String,
|
||||
},
|
||||
tTooltip: {
|
||||
type: String,
|
||||
},
|
||||
icon: {
|
||||
type: [String, Object],
|
||||
},
|
||||
tooltip: String,
|
||||
tTooltip: String,
|
||||
icon: [String, Object],
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 20,
|
||||
|
|
@ -26,6 +20,18 @@ const props = defineProps({
|
|||
type: [Number, String],
|
||||
default: 3,
|
||||
},
|
||||
disabled: Boolean,
|
||||
})
|
||||
|
||||
const disableColor = computed(() => {
|
||||
const baseColor = props.color
|
||||
const grayScale = Math.round(
|
||||
0.299 * parseInt(baseColor.substring(1, 2), 16) +
|
||||
0.587 * parseInt(baseColor.substring(3, 2), 16) +
|
||||
0.114 * parseInt(baseColor.substring(5, 2), 16)
|
||||
)
|
||||
const color = `#${grayScale.toString(16).repeat(3)}`
|
||||
return color
|
||||
})
|
||||
|
||||
const hasTooltip = computed(() => {
|
||||
|
|
@ -36,15 +42,19 @@ const hasTooltip = computed(() => {
|
|||
<template>
|
||||
<n-tooltip v-if="hasTooltip">
|
||||
<template #trigger>
|
||||
<n-icon :color="props.color" :size="props.size" class="icon-btn" @click="emit('click')">
|
||||
<component :is="props.icon" :stroke-width="props.strokeWidth"></component>
|
||||
<n-button text :disabled="disabled" @click="emit('click')">
|
||||
<n-icon :size="props.size" :color="props.color">
|
||||
<component :is="props.icon" :stroke-width="props.strokeWidth" />
|
||||
</n-icon>
|
||||
</n-button>
|
||||
</template>
|
||||
{{ props.tTooltip ? $t(props.tTooltip) : props.tooltip }}
|
||||
</n-tooltip>
|
||||
<n-icon v-else :color="props.color" :size="props.size" class="icon-btn" @click="emit('click')">
|
||||
<component :is="props.icon" :stroke-width="props.strokeWidth"></component>
|
||||
<n-button v-else text :disabled="disabled" @click="emit('click')">
|
||||
<n-icon :size="props.size" :color="props.color">
|
||||
<component :is="props.icon" :stroke-width="props.strokeWidth" />
|
||||
</n-icon>
|
||||
</n-button>
|
||||
</template>
|
||||
|
||||
<style lang="scss"></style>
|
||||
|
|
|
|||
|
|
@ -7,8 +7,11 @@ import Sort from '../icons/Sort.vue'
|
|||
import IconButton from '../common/IconButton.vue'
|
||||
import Filter from '../icons/Filter.vue'
|
||||
import ConnectionTree from './ConnectionTree.vue'
|
||||
import Unlink from '../icons/Unlink.vue'
|
||||
import useConnectionStore from '../../stores/connections.js'
|
||||
|
||||
const dialogStore = useDialogStore()
|
||||
const connectionStore = useConnectionStore()
|
||||
|
||||
const onSort = () => {
|
||||
dialogStore.openPreferencesDialog()
|
||||
|
|
@ -37,6 +40,15 @@ const onSort = () => {
|
|||
t-tooltip="new_group"
|
||||
@click="dialogStore.openNewKeyDialog('aa:bb')"
|
||||
/>
|
||||
<icon-button
|
||||
:disabled="!connectionStore.anyConnectionOpened"
|
||||
:icon="Unlink"
|
||||
color="#555"
|
||||
size="20"
|
||||
stroke-width="4"
|
||||
t-tooltip="disconnect_all"
|
||||
@click="dialogStore.openNewKeyDialog('aa:bb')"
|
||||
/>
|
||||
<n-divider style="margin: 0 4px; --n-color: #aaa; width: 2px" vertical />
|
||||
<icon-button :icon="Sort" color="#555" size="20" stroke-width="4" t-tooltip="sort_conn" @click="onSort" />
|
||||
<n-input placeholder="">
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ const menuOptions = {
|
|||
icon: renderIcon(CopyLink),
|
||||
},
|
||||
{
|
||||
key: 'server_config',
|
||||
key: 'server_edit',
|
||||
label: i18n.t('edit_conn'),
|
||||
icon: renderIcon(Config),
|
||||
},
|
||||
|
|
@ -171,7 +171,7 @@ const openConnection = async (name) => {
|
|||
await connectionStore.openConnection(name)
|
||||
}
|
||||
tabStore.upsertTab({
|
||||
server: nae,
|
||||
server: name,
|
||||
})
|
||||
} catch (e) {
|
||||
message.error(e.message)
|
||||
|
|
@ -185,7 +185,7 @@ const dialog = useDialog()
|
|||
const removeConnection = async (name) => {
|
||||
dialog.warning({
|
||||
title: i18n.t('warning'),
|
||||
content: i18n.t('delete_key_tip', { key: name }),
|
||||
content: i18n.t('remove_conn_tip', { conn: name }),
|
||||
closable: false,
|
||||
autoFocus: false,
|
||||
transformOrigin: 'center',
|
||||
|
|
@ -195,8 +195,6 @@ const removeConnection = async (name) => {
|
|||
connectionStore.removeConnection(name).then(({ success, msg }) => {
|
||||
if (!success) {
|
||||
message.error(msg)
|
||||
} else {
|
||||
message.success(i18n.t('delete_key_succ', { key: name }))
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
|
|||
|
|
@ -7,11 +7,13 @@
|
|||
"save": "Save",
|
||||
"new_conn": "Add New Connection",
|
||||
"new_group": "Add New Group",
|
||||
"disconnect_all": "Disconnect all connections",
|
||||
"sort_conn": "Resort Connections",
|
||||
"reload_key": "Reload Current Key",
|
||||
"close_confirm_title": "Confirm Close",
|
||||
"close_confirm": "Confirm close this tab and connection",
|
||||
"opening_connection": "Opening Connection...",
|
||||
"remove_conn_tip": "Connection \"{conn}\" will be deleted",
|
||||
"ttl": "TTL",
|
||||
"forever": "Forever",
|
||||
"rename_key": "Rename Key",
|
||||
|
|
|
|||
|
|
@ -7,11 +7,13 @@
|
|||
"save": "保存",
|
||||
"new_conn": "添加新连接",
|
||||
"new_group": "添加新分组",
|
||||
"disconnect_all": "断开所有连接",
|
||||
"sort_conn": "调整连接顺序",
|
||||
"reload_key": "重新载入此键内容",
|
||||
"close_confirm_title": "关闭确认",
|
||||
"close_confirm": "是否关闭当前连接",
|
||||
"opening_connection": "正在打开连接...",
|
||||
"remove_conn_tip": "连接 \"{conn}\" 将会被删除",
|
||||
"ttl": "TTL",
|
||||
"forever": "永久",
|
||||
"rename_key": "重命名键",
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import {
|
|||
SetListItem,
|
||||
SetSetItem,
|
||||
UpdateSetItem,
|
||||
UpdateZSetValue
|
||||
UpdateZSetValue,
|
||||
} from '../../wailsjs/go/services/connectionService.js'
|
||||
import { ConnectionType } from '../consts/connection_type.js'
|
||||
import useTabStore from './tab.js'
|
||||
|
|
@ -56,7 +56,7 @@ const useConnectionStore = defineStore('connections', {
|
|||
state: () => ({
|
||||
groups: [], // all group name
|
||||
connections: [], // all connections
|
||||
databases: {, // all databases in opened connections group by name
|
||||
databases: {}, // all databases in opened connections group by name
|
||||
}),
|
||||
getters: {
|
||||
anyConnectionOpened() {
|
||||
|
|
@ -111,7 +111,7 @@ const useConnectionStore = defineStore('connections', {
|
|||
key: group.groupName,
|
||||
label: group.groupName,
|
||||
type: ConnectionType.Group,
|
||||
children
|
||||
children,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -127,6 +127,7 @@ const useConnectionStore = defineStore('connections', {
|
|||
async getConnectionProfile(name) {
|
||||
try {
|
||||
const { data, success } = await GetConnection(name)
|
||||
console.log(JSON.stringify(data))
|
||||
if (success) {
|
||||
return data
|
||||
}
|
||||
|
|
@ -152,7 +153,7 @@ const useConnectionStore = defineStore('connections', {
|
|||
keySeparator: ':',
|
||||
connTimeout: 60,
|
||||
execTimeout: 60,
|
||||
markColor: ''
|
||||
markColor: '',
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue