renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add activated style for dock and settings item icons

Browse Source
This commit is contained in:
Hakadao
2024-02-02 12:09:33 +08:00
parent 25e7d98649
commit 04d844a8ca
2 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Dock/Dock.vue
View File

@@ -202,7 +202,14 @@ function toggleDockHide(hide: boolean) {
:class="{ active: activatedPage === dockItemVisibility.page }"
@click="emit('change-page', dockItemVisibility.page)"
>
<Icon :icon="currentDockItems.find((item) => item.page === dockItemVisibility.page)?.icon as string" />
<Icon
v-show="activatedPage !== dockItemVisibility.page"
:icon="currentDockItems.find((item) => item.page === dockItemVisibility.page)?.icon as string"
/>
<Icon
v-show="activatedPage === dockItemVisibility.page"
:icon="currentDockItems.find((item) => item.page === dockItemVisibility.page)?.iconActivated as string"
/>
</button>
</Tooltip>
</template>

10
src/components/Settings/Settings.vue
View File

@@ -139,19 +139,15 @@ function setCurrentTitle() {
@click="changeMenuItem(menuItem.value)"
>
<Icon
v-show="menuItem.value !== activatedMenuItem"
text="xl center" w-40px h-20px flex="~ shrink-0" justify-center
:icon="menuItem.icon"
/>
<!-- <Icon
v-if="menuItem.value === activatedMenuItem"
<Icon
v-show="menuItem.value === activatedMenuItem"
text="xl center" w-40px h-20px flex="~ shrink-0" justify-center
:icon="menuItem.iconActivated"
/>
<Icon
v-else
text="xl center" w-40px h-20px flex="~ shrink-0" justify-center
:icon="menuItem.icon"
/> -->
<span shrink-0>{{ menuItem.title }}</span>
</a>
</li>