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: optimized the appearance

This commit is contained in:
Lykin 2023-12-01 18:03:19 +08:00
parent e2f33af1c7
commit eb8f68b628
3 changed files with 18 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/components/common/ResizeableWrapper.vue
View File

@ -101,6 +101,7 @@ const handleMouseOver = () => {
top: 0; top: 0;
bottom: 0; bottom: 0;
transition: background-color 0.3s ease-in; transition: background-color 0.3s ease-in;
z-index: 1;
} }
.resize-divider-hide { .resize-divider-hide {

4
frontend/src/components/content_value/ContentEntryEditor.vue
View File

@ -266,8 +266,8 @@ const onSave = () => {
} }
:deep(.pin-btn) { :deep(.pin-btn) {
border-color: v-bind('themeVars.borderColor'); border-color: v-bind('themeVars.iconColorDisabled');
background-color: v-bind('themeVars.borderColor'); background-color: v-bind('themeVars.iconColorDisabled');
} }
//:deep(.n-card--bordered) { //:deep(.n-card--bordered) {

33
frontend/src/components/sidebar/Ribbon.vue
View File

@ -13,8 +13,10 @@ import usePreferencesStore from 'stores/preferences.js'
import Record from '@/components/icons/Record.vue' import Record from '@/components/icons/Record.vue'
import { extraTheme } from '@/utils/extra_theme.js' import { extraTheme } from '@/utils/extra_theme.js'
import useBrowserStore from 'stores/browser.js' import useBrowserStore from 'stores/browser.js'
import { useRender } from '@/utils/render.js'
const themeVars = useThemeVars() const themeVars = useThemeVars()
const render = useRender()
const props = defineProps({ const props = defineProps({
value: { value: {
@ -30,9 +32,6 @@ const props = defineProps({
const emit = defineEmits(['update:value']) const emit = defineEmits(['update:value'])
const iconSize = computed(() => Math.floor(props.width * 0.45)) const iconSize = computed(() => Math.floor(props.width * 0.45))
const renderIcon = (icon) => {
return () => h(NIcon, null, { default: () => h(icon, { strokeWidth: 3 }) })
}
const browserStore = useBrowserStore() const browserStore = useBrowserStore()
const i18n = useI18n() const i18n = useI18n()
@ -62,12 +61,12 @@ const preferencesOptions = computed(() => {
{ {
label: i18n.t('menu.preferences'), label: i18n.t('menu.preferences'),
key: 'preferences', key: 'preferences',
icon: renderIcon(Config), icon: render.renderIcon(Config, { strokeWidth: 3 }),
}, },
// { // {
// label: i18n.t('menu.help'), // label: i18n.t('menu.help'),
// key: 'help', // key: 'help',
// icon: renderIcon(Help), // icon: render.renderIcon(Help, { strokeWidth: 3 }),
// }, // },
{ {
label: i18n.t('menu.check_update'), label: i18n.t('menu.check_update'),
@ -122,22 +121,20 @@ const exThemeVars = computed(() => {
}" }"
class="flex-box-v"> class="flex-box-v">
<div class="ribbon-wrapper flex-box-v"> <div class="ribbon-wrapper flex-box-v">
<div <n-tooltip v-for="(m, i) in menuOptions" :key="i" :delay="2" :show-arrow="false" placement="right">
v-for="(m, i) in menuOptions" <template #trigger>
v-show="m.show !== false" <div
:key="i" v-show="m.show !== false"
:class="{ 'ribbon-item-active': props.value === m.key }" :class="{ 'ribbon-item-active': props.value === m.key }"
class="ribbon-item clickable" class="ribbon-item clickable"
@click="emit('update:value', m.key)"> @click="emit('update:value', m.key)">
<n-tooltip :delay="2" :show-arrow="false" placement="right">
<template #trigger>
<n-icon :size="iconSize"> <n-icon :size="iconSize">
<component :is="m.icon" :stroke-width="3.5" /> <component :is="m.icon" :stroke-width="3.5" />
</n-icon> </n-icon>
</template> </div>
{{ m.label }} </template>
</n-tooltip> {{ m.label }}
</div> </n-tooltip>
</div> </div>
<div class="flex-item-expand"></div> <div class="flex-item-expand"></div>
<div class="nav-menu-item flex-box-v"> <div class="nav-menu-item flex-box-v">