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

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

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