lingling
/
tiny-rdm
mirror of https://github.com/tiny-craft/tiny-rdm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: update icons' property

This commit is contained in:
tiny-craft 2023-10-23 18:22:43 +08:00
parent acd3fa9304
commit 6f5ea748f5
10 changed files with 88 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/content/ContentValueTab.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import ToggleServer from '@/components/icons/ToggleServer.vue' import Server from '@/components/icons/Server.vue'
import useTabStore from 'stores/tab.js' import useTabStore from 'stores/tab.js'
import { computed } from 'vue' import { computed } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
@ -52,7 +52,7 @@ const tab = computed(() =>
<n-tabs <n-tabs
v-model:value="tabStore.activatedIndex" v-model:value="tabStore.activatedIndex"
:closable="true" :closable="true"
:tabs-padding="2" :tabs-padding="0"
:tab-style="{ :tab-style="{
borderStyle: 'solid', borderStyle: 'solid',
borderWidth: '1px', borderWidth: '1px',
@ -82,7 +82,9 @@ const tab = computed(() =>
:class="tabClass(i)" :class="tabClass(i)"
@dblclick.stop="() => {}"> @dblclick.stop="() => {}">
<n-space :size="5" :wrap-item="false" align="center" inline justify="center"> <n-space :size="5" :wrap-item="false" align="center" inline justify="center">
<n-icon :component="ToggleServer" size="18" /> <n-icon size="18">
<server stroke-width="4" :inverse="tabStore.activatedIndex === i" />
</n-icon>
<n-ellipsis style="max-width: 150px">{{ t.label }}</n-ellipsis> <n-ellipsis style="max-width: 150px">{{ t.label }}</n-ellipsis>
</n-space> </n-space>
</n-tab> </n-tab>

72
frontend/src/components/icons/ToggleCluster.vue → frontend/src/components/icons/Cluster.vue
View File

@ -2,7 +2,7 @@
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue'])
const props = defineProps({ const props = defineProps({
modelValue: { inverse: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
@ -10,18 +10,14 @@ const props = defineProps({
type: [Number, String], type: [Number, String],
default: 3, default: 3,
}, },
fillColor: {
type: String,
default: '#dc423c',
},
}) })
</script> </script>
<template> <template>
<svg v-if="props.modelValue" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <svg v-if="props.inverse" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<rect <rect
:fill="props.fillColor" fill="currentColor"
:stroke="props.fillColor" stroke="currentColor"
:stroke-width="props.strokeWidth" :stroke-width="props.strokeWidth"
height="8" height="8"
stroke-linecap="round" stroke-linecap="round"
@ -30,8 +26,8 @@ const props = defineProps({
x="4" x="4"
y="34" /> y="34" />
<rect <rect
:fill="props.fillColor" fill="currentColor"
:stroke="props.fillColor" stroke="currentColor"
:stroke-width="props.strokeWidth" :stroke-width="props.strokeWidth"
height="12" height="12"
stroke-linecap="round" stroke-linecap="round"
@ -40,20 +36,20 @@ const props = defineProps({
x="8" x="8"
y="6" /> y="6" />
<path <path
:stroke="props.fillColor" stroke="currentColor"
:stroke-width="props.strokeWidth" :stroke-width="props.strokeWidth"
d="M24 34V18" d="M24 34V18"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" /> stroke-linejoin="round" />
<path <path
:stroke="props.fillColor" stroke="currentColor"
:stroke-width="props.strokeWidth" :stroke-width="props.strokeWidth"
d="M8 34V26H40V34" d="M8 34V26H40V34"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" /> stroke-linejoin="round" />
<rect <rect
:fill="props.fillColor" fill="currentColor"
:stroke="props.fillColor" stroke="currentColor"
:stroke-width="props.strokeWidth" :stroke-width="props.strokeWidth"
height="8" height="8"
stroke-linecap="round" stroke-linecap="round"
@ -62,8 +58,8 @@ const props = defineProps({
x="36" x="36"
y="34" /> y="34" />
<rect <rect
:fill="props.fillColor" fill="currentColor"
:stroke="props.fillColor" stroke="currentColor"
:stroke-width="props.strokeWidth" :stroke-width="props.strokeWidth"
height="8" height="8"
stroke-linecap="round" stroke-linecap="round"
@ -78,50 +74,6 @@ const props = defineProps({
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" /> stroke-linejoin="round" />
</svg> </svg>
<svg v-else fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path
:stroke-width="props.strokeWidth"
d="M5 24L43 24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke-width="props.strokeWidth"
d="M28 4H20C18.8954 4 18 4.89543 18 6V14C18 15.1046 18.8954 16 20 16H28C29.1046 16 30 15.1046 30 14V6C30 4.89543 29.1046 4 28 4Z"
fill="none"
stroke="currentColor"
stroke-linejoin="round" />
<path
:stroke-width="props.strokeWidth"
d="M16 32H8C6.89543 32 6 32.8954 6 34V42C6 43.1046 6.89543 44 8 44H16C17.1046 44 18 43.1046 18 42V34C18 32.8954 17.1046 32 16 32Z"
fill="none"
stroke="currentColor"
stroke-linejoin="round" />
<path
:stroke-width="props.strokeWidth"
d="M40 32H32C30.8954 32 30 32.8954 30 34V42C30 43.1046 30.8954 44 32 44H40C41.1046 44 42 43.1046 42 42V34C42 32.8954 41.1046 32 40 32Z"
fill="none"
stroke="currentColor"
stroke-linejoin="round" />
<path
:stroke-width="props.strokeWidth"
d="M24 24V16"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke-width="props.strokeWidth"
d="M36 32V24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke-width="props.strokeWidth"
d="M12 32V24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<svg v-else fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <svg v-else fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<rect <rect
:stroke-width="props.strokeWidth" :stroke-width="props.strokeWidth"

18
frontend/src/components/icons/ToggleDb.vue → frontend/src/components/icons/Database.vue
View File

@ -2,7 +2,7 @@
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue'])
const props = defineProps({ const props = defineProps({
modelValue: { inverse: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
@ -10,39 +10,35 @@ const props = defineProps({
type: [Number, String], type: [Number, String],
default: 3, default: 3,
}, },
fillColor: {
type: String,
default: '#dc423c',
},
}) })
</script> </script>
<template> <template>
<svg v-if="props.modelValue" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <svg v-if="props.inverse" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path <path
:stroke="props.fillColor" stroke="currentColor"
:stroke-width="props.strokeWidth" :stroke-width="props.strokeWidth"
d="M44.0001 11C44.0001 11 44 36.0623 44 38C44 41.3137 35.0457 44 24 44C12.9543 44 4.00003 41.3137 4.00003 38C4.00003 36.1423 4 11 4 11" d="M44.0001 11C44.0001 11 44 36.0623 44 38C44 41.3137 35.0457 44 24 44C12.9543 44 4.00003 41.3137 4.00003 38C4.00003 36.1423 4 11 4 11"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" /> stroke-linejoin="round" />
<path <path
:stroke="props.fillColor" stroke="currentColor"
:stroke-width="props.strokeWidth" :stroke-width="props.strokeWidth"
d="M44 29C44 32.3137 35.0457 35 24 35C12.9543 35 4 32.3137 4 29" d="M44 29C44 32.3137 35.0457 35 24 35C12.9543 35 4 32.3137 4 29"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" /> stroke-linejoin="round" />
<path <path
:stroke="props.fillColor" stroke="currentColor"
:stroke-width="props.strokeWidth" :stroke-width="props.strokeWidth"
d="M44 20C44 23.3137 35.0457 26 24 26C12.9543 26 4 23.3137 4 20" d="M44 20C44 23.3137 35.0457 26 24 26C12.9543 26 4 23.3137 4 20"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" /> stroke-linejoin="round" />
<ellipse <ellipse
:stroke="props.fillColor" stroke="currentColor"
:stroke-width="props.strokeWidth" :stroke-width="props.strokeWidth"
cx="24" cx="24"
cy="10" cy="10"
fill="#dc423c" fill="currentColor"
rx="20" rx="20"
ry="6" ry="6"
stroke-linecap="round" stroke-linecap="round"

8
frontend/src/components/icons/ToggleFolder.vue → frontend/src/components/icons/Folder.vue
View File

@ -2,7 +2,7 @@
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue'])
const props = defineProps({ const props = defineProps({
modelValue: { open: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
@ -18,7 +18,7 @@ const props = defineProps({
</script> </script>
<template> <template>
<svg v-if="props.modelValue" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <svg v-if="props.open" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path <path
:stroke-width="props.strokeWidth" :stroke-width="props.strokeWidth"
d="M4 9V41L9 21H39.5V15C39.5 13.8954 38.6046 13 37.5 13H24L19 7H6C4.89543 7 4 7.89543 4 9Z" d="M4 9V41L9 21H39.5V15C39.5 13.8954 38.6046 13 37.5 13H24L19 7H6C4.89543 7 4 7.89543 4 9Z"
@ -26,7 +26,7 @@ const props = defineProps({
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" /> stroke-linejoin="round" />
<path <path
:fill="props.fillColor" :fill="props.fillColor || 'currentColor'"
:stroke-width="props.strokeWidth" :stroke-width="props.strokeWidth"
d="M40 41L44 21H8.8125L4 41H40Z" d="M40 41L44 21H8.8125L4 41H40Z"
stroke="currentColor" stroke="currentColor"
@ -35,7 +35,7 @@ const props = defineProps({
</svg> </svg>
<svg v-else fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <svg v-else fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path <path
:fill="props.fillColor" :fill="props.fillColor || 'currentColor'"
:stroke-width="props.strokeWidth" :stroke-width="props.strokeWidth"
d="M5 8C5 6.89543 5.89543 6 7 6H19L24 12H41C42.1046 12 43 12.8954 43 14V40C43 41.1046 42.1046 42 41 42H7C5.89543 42 5 41.1046 5 40V8Z" d="M5 8C5 6.89543 5.89543 6 7 6H19L24 12H41C42.1046 12 43 12.8954 43 14V40C43 41.1046 42.1046 42 41 42H7C5.89543 42 5 41.1046 5 40V8Z"
stroke="currentColor" stroke="currentColor"

25
frontend/src/components/icons/Log.vue
View File

@ -1,5 +1,9 @@
<script setup> <script setup>
const props = defineProps({ const props = defineProps({
inverse: {
type: Boolean,
default: false,
},
strokeWidth: { strokeWidth: {
type: [Number, String], type: [Number, String],
default: 3, default: 3,
@ -8,7 +12,26 @@ const props = defineProps({
</script> </script>
<template> <template>
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <svg v-if="props.inverse" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
x="13"
y="10"
width="28"
height="34"
fill="currentColor"
stroke="currentColor"
stroke-width="3"
stroke-linejoin="round" />
<path
d="M35 10V4H8C7.44772 4 7 4.44772 7 5V38H13"
stroke="currentColor"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round" />
<path d="M21 22H33" stroke="#FFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
<path d="M21 30H33" stroke="#FFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg v-else fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<rect <rect
:stroke-width="strokeWidth" :stroke-width="strokeWidth"
fill="none" fill="none"

16
frontend/src/components/icons/ToggleServer.vue → frontend/src/components/icons/Server.vue
View File

@ -2,7 +2,7 @@
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue'])
const props = defineProps({ const props = defineProps({
modelValue: { inverse: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
@ -10,18 +10,14 @@ const props = defineProps({
type: [Number, String], type: [Number, String],
default: 3, default: 3,
}, },
fillColor: {
type: String,
default: '#dc423c',
},
}) })
</script> </script>
<template> <template>
<svg v-if="props.modelValue" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <svg v-if="props.inverse" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path <path
:fill="props.fillColor" fill="currentColor"
:stroke="props.fillColor" stroke="currentColor"
:stroke-width="props.strokeWidth" :stroke-width="props.strokeWidth"
d="M41 4H7C5.34315 4 4 5.34315 4 7V41C4 42.6569 5.34315 44 7 44H41C42.6569 44 44 42.6569 44 41V7C44 5.34315 42.6569 4 41 4Z" d="M41 4H7C5.34315 4 4 5.34315 4 7V41C4 42.6569 5.34315 44 7 44H41C42.6569 44 44 42.6569 44 41V7C44 5.34315 42.6569 4 41 4Z"
stroke-linecap="round" stroke-linecap="round"
@ -40,13 +36,13 @@ const props = defineProps({
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" /> stroke-linejoin="round" />
<path <path
:stroke="props.fillColor" stroke="currentColor"
:stroke-width="props.strokeWidth" :stroke-width="props.strokeWidth"
d="M44 37V27" d="M44 37V27"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" /> stroke-linejoin="round" />
<path <path
:stroke="props.fillColor" stroke="currentColor"
:stroke-width="props.strokeWidth" :stroke-width="props.strokeWidth"
d="M4 37V27" d="M4 37V27"
stroke-linecap="round" stroke-linecap="round"

16
frontend/src/components/icons/Status.vue
View File

@ -1,5 +1,9 @@
<script setup> <script setup>
const props = defineProps({ const props = defineProps({
inverse: {
type: Boolean,
default: false,
},
strokeWidth: { strokeWidth: {
type: [Number, String], type: [Number, String],
default: 3, default: 3,
@ -8,7 +12,17 @@ const props = defineProps({
</script> </script>
<template> <template>
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <svg v-if="props.inverse" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M42 8H6C4.89543 8 4 8.89543 4 10V38C4 39.1046 4.89543 40 6 40H42C43.1046 40 44 39.1046 44 38V10C44 8.89543 43.1046 8 42 8Z"
fill="currentColor"
stroke="currentColor"
stroke-width="3" />
<path d="M24 17V31" stroke="#FFF" :stroke-width="props.strokeWidth" stroke-linecap="round" />
<path d="M32 24V31" stroke="#FFF" :stroke-width="props.strokeWidth" stroke-linecap="round" />
<path d="M16 22V31" stroke="#FFF" :stroke-width="props.strokeWidth" stroke-linecap="round" />
</svg>
<svg v-else fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<rect <rect
:stroke-width="props.strokeWidth" :stroke-width="props.strokeWidth"
fill="none" fill="none"

6
frontend/src/components/sidebar/BrowserTree.vue
View File

@ -4,7 +4,7 @@ import { ConnectionType } from '@/consts/connection_type.js'
import { NIcon, NSpace, NTag } from 'naive-ui' import { NIcon, NSpace, NTag } from 'naive-ui'
import Key from '@/components/icons/Key.vue' import Key from '@/components/icons/Key.vue'
import Binary from '@/components/icons/Binary.vue' import Binary from '@/components/icons/Binary.vue'
import ToggleDb from '@/components/icons/ToggleDb.vue' import Database from '@/components/icons/Database.vue'
import { find, get, includes, indexOf, isEmpty, remove, size, startsWith } from 'lodash' import { find, get, includes, indexOf, isEmpty, remove, size, startsWith } from 'lodash'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import Refresh from '@/components/icons/Refresh.vue' import Refresh from '@/components/icons/Refresh.vue'
@ -399,9 +399,9 @@ const renderPrefix = ({ option }) => {
case ConnectionType.RedisDB: case ConnectionType.RedisDB:
return h( return h(
NIcon, NIcon,
{ size: 20 }, { size: 20, color: option.opened === true ? '#dc423c' : undefined },
{ {
default: () => h(ToggleDb, { modelValue: option.opened === true }), default: () => h(Database, { inverse: option.opened === true }),
}, },
) )
case ConnectionType.RedisKey: case ConnectionType.RedisKey:

16
frontend/src/components/sidebar/ConnectionTree.vue
View File

@ -4,9 +4,9 @@ import { h, nextTick, reactive, ref } from 'vue'
import useConnectionStore from 'stores/connections.js' import useConnectionStore from 'stores/connections.js'
import { NIcon, NSpace, NText, useThemeVars } from 'naive-ui' import { NIcon, NSpace, NText, useThemeVars } from 'naive-ui'
import { ConnectionType } from '@/consts/connection_type.js' import { ConnectionType } from '@/consts/connection_type.js'
import ToggleFolder from '@/components/icons/ToggleFolder.vue' import Folder from '@/components/icons/Folder.vue'
import ToggleServer from '@/components/icons/ToggleServer.vue' import Server from '@/components/icons/Server.vue'
import ToggleCluster from '@/components/icons/ToggleCluster.vue' import Cluster from '@/components/icons/Cluster.vue'
import { debounce, get, includes, indexOf, isEmpty, split } from 'lodash' import { debounce, get, includes, indexOf, isEmpty, split } from 'lodash'
import Config from '@/components/icons/Config.vue' import Config from '@/components/icons/Config.vue'
import Delete from '@/components/icons/Delete.vue' import Delete from '@/components/icons/Delete.vue'
@ -185,8 +185,8 @@ const renderPrefix = ({ option }) => {
{ size: 20 }, { size: 20 },
{ {
default: () => default: () =>
h(ToggleFolder, { h(Folder, {
modelValue: opened, open: opened,
fillColor: `rgba(255,206,120,${iconTransparency})`, fillColor: `rgba(255,206,120,${iconTransparency})`,
}), }),
}, },
@ -194,14 +194,14 @@ const renderPrefix = ({ option }) => {
case ConnectionType.Server: case ConnectionType.Server:
const connected = connectionStore.isConnected(option.name) const connected = connectionStore.isConnected(option.name)
const color = getServerMarkColor(option.name) const color = getServerMarkColor(option.name)
const icon = option.cluster === true ? ToggleCluster : ToggleServer const icon = option.cluster === true ? Cluster : Server
return h( return h(
NIcon, NIcon,
{ size: 20, color: !!!connected ? color : undefined }, { size: 20, color: !!!connected ? color : '#dc423c' },
{ {
default: () => default: () =>
h(icon, { h(icon, {
modelValue: !!connected, inverse: !!connected,
fillColor: `rgba(220,66,60,${iconTransparency})`, fillColor: `rgba(220,66,60,${iconTransparency})`,
}), }),
}, },

8
frontend/src/components/sidebar/NavMenu.vue
View File

@ -1,9 +1,9 @@
<script setup> <script setup>
import { computed, h } from 'vue' import { computed, h } from 'vue'
import { NIcon, useThemeVars } from 'naive-ui' import { NIcon, useThemeVars } from 'naive-ui'
import ToggleDb from '@/components/icons/ToggleDb.vue' import Database from '@/components/icons/Database.vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import ToggleServer from '@/components/icons/ToggleServer.vue' import Server from '@/components/icons/Server.vue'
import IconButton from '@/components/common/IconButton.vue' import IconButton from '@/components/common/IconButton.vue'
import Config from '@/components/icons/Config.vue' import Config from '@/components/icons/Config.vue'
import useDialogStore from 'stores/dialog.js' import useDialogStore from 'stores/dialog.js'
@ -40,13 +40,13 @@ const menuOptions = computed(() => {
{ {
label: i18n.t('ribbon.browser'), label: i18n.t('ribbon.browser'),
key: 'browser', key: 'browser',
icon: renderIcon(ToggleDb), icon: renderIcon(Database),
show: connectionStore.anyConnectionOpened, show: connectionStore.anyConnectionOpened,
}, },
{ {
label: i18n.t('ribbon.server'), label: i18n.t('ribbon.server'),
key: 'server', key: 'server',
icon: renderIcon(ToggleServer), icon: renderIcon(Server),
}, },
{ {
label: i18n.t('ribbon.log'), label: i18n.t('ribbon.log'),