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

perf: force change icon button color when then state is loading

This commit is contained in:
tiny-craft 2023-10-28 22:42:15 +08:00
parent 6fb0eadfbd
commit faad24d1d5
2 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/common/IconButton.vue
View File

@ -14,7 +14,7 @@ const props = defineProps({
},
color: {
type: String,
default: 'currentColor',
default: '',
},
strokeWidth: {
type: [Number, String],
@ -38,9 +38,10 @@ const hasTooltip = computed(() => {
:focusable="false"
:loading="loading"
:text="!border"
:color="props.color"
@click.prevent="emit('click')">
<template #icon>
<n-icon :color="props.color" :size="props.size">
<n-icon :color="props.color || 'currentColor'" :size="props.size">
<component :is="props.icon" :stroke-width="props.strokeWidth" />
</n-icon>
</template>
@ -54,9 +55,10 @@ const hasTooltip = computed(() => {
:focusable="false"
:loading="loading"
:text="!border"
:color="props.color"
@click.prevent="emit('click')">
<template #icon>
<n-icon :color="props.color" :size="props.size">
<n-icon :color="props.color || 'currentColor'" :size="props.size">
<component :is="props.icon" :stroke-width="props.strokeWidth" />
</n-icon>
</template>

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

@ -1,7 +1,7 @@
<script setup>
import { computed, h, nextTick, onMounted, reactive, ref } from 'vue'
import { ConnectionType } from '@/consts/connection_type.js'
import { NIcon, NSpace, NTag } from 'naive-ui'
import { NIcon, NSpace, NTag, useThemeVars } from 'naive-ui'
import Key from '@/components/icons/Key.vue'
import Binary from '@/components/icons/Binary.vue'
import Database from '@/components/icons/Database.vue'
@ -31,6 +31,7 @@ const props = defineProps({
keyView: String,
})
const themeVars = useThemeVars()
const i18n = useI18n()
const loading = ref(false)
const loadingConnections = ref(false)
@ -532,6 +533,7 @@ const getDatabaseMenu = (opened, loading, end) => {
icon: LoadList,
disabled: end === true,
loading: loading === true,
color: loading === true ? themeVars.value.primaryColor : '',
onClick: () => handleSelectContextMenu('db_loadmore'),
}),
h(IconButton, {
@ -539,6 +541,7 @@ const getDatabaseMenu = (opened, loading, end) => {
icon: LoadAll,
disabled: end === true,
loading: loading === true,
color: loading === true ? themeVars.value.primaryColor : '',
onClick: () => handleSelectContextMenu('db_loadall'),
}),
h(IconButton, {