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

refactor: separate the Dock component

Browse Source
This commit is contained in:
Hakadao
2023-10-08 02:46:10 +08:00
parent 39a016cb52
commit 04436bb759
2 changed files with 201 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
src/contentScripts/views/App.vue
View File

@@ -155,24 +155,6 @@ onMounted(() => {
}
document.documentElement.style.setProperty('font-size', '14px')
// if (mainAppRef.value) {
// mainAppRef.value.addEventListener('scroll', () => {
// if (
// mainAppRef.value.clientHeight + mainAppRef.value.scrollTop
// >= mainAppRef.value.scrollHeight - 20
// ) {
// nextTick(() => {
// emitter.emit('reachBottom')
// })
// }
// if (mainAppRef.value.scrollTop === 0)
// showTopbarMask.value = false
// else
// showTopbarMask.value = true
// })
// }
document.addEventListener('scroll', () => {
if (window.scrollY > 0)
showTopbarMask.value = true
@@ -364,7 +346,7 @@ function handleOsScroll() {
</template>
<div
ref="mainAppRef" class="bewly-wrapper" text="$bew-text-1" transition="opacity duration-300" overflow-y-hidden z-60
id="main-app" ref="mainAppRef" class="bewly-wrapper" text="$bew-text-1" transition="opacity duration-300" overflow-y-hidden z-60
:style="{ opacity: 1, height: isHomePage ? '100vh' : '0' }"
>
<!-- Dock -->
@@ -378,99 +360,7 @@ function handleOsScroll() {
}"
pos="absolute top-0" flex="~ col" h-full justify-center z-1 pointer-events-none
>
<div
class="dock-content"
p-2 m-2 bg="$bew-content-1" flex="~ col gap-2 shrink-0"
rounded="$bew-radius" border="1px $bew-border-color"
shadow="$bew-shadow-2"
backdrop-glass pointer-events-auto
>
<Tooltip :content="$t('dock.search')" :placement="tooltipPlacement">
<button
class="dock-item"
:class="{ active: activatedPage === AppPage.Search }"
@click="changeActivatePage(AppPage.Search)"
>
<tabler:search />
</button>
</Tooltip>
<Tooltip :content="$t('dock.home')" :placement="tooltipPlacement">
<button
class="dock-item"
:class="{ active: activatedPage === AppPage.Home }"
@click="changeActivatePage(AppPage.Home)"
>
<tabler:home />
</button>
</Tooltip>
<Tooltip :content="$t('dock.anime')" :placement="tooltipPlacement">
<button
class="dock-item"
:class="{ active: activatedPage === AppPage.Anime }"
@click="changeActivatePage(AppPage.Anime)"
>
<tabler:device-tv />
</button>
</Tooltip>
<Tooltip :content="$t('dock.history')" :placement="tooltipPlacement">
<button
class="dock-item"
:class="{ active: activatedPage === AppPage.History }"
@click="changeActivatePage(AppPage.History)"
>
<tabler:clock />
</button>
</Tooltip>
<Tooltip :content="$t('dock.favorites')" :placement="tooltipPlacement">
<div
class="dock-item"
:class="{ active: activatedPage === AppPage.Favorites }"
@click="changeActivatePage(AppPage.Favorites)"
>
<tabler:star />
</div>
</Tooltip>
<Tooltip :content="$t('dock.watch_later')" :placement="tooltipPlacement">
<button
class="dock-item"
:class="{ active: activatedPage === AppPage.WatchLater }"
@click="changeActivatePage(AppPage.WatchLater)"
>
<iconoir:playlist-play />
</button>
</Tooltip>
<template v-if="isVideoPage">
<!-- dividing line -->
<div class="divider" />
<!-- video page -->
<button class="dock-item video active">
<tabler:player-play />
</button>
</template>
<!-- dividing line -->
<div class="divider" />
<Tooltip :content="currentAppColorScheme === 'dark' ? $t('dock.dark_mode') : $t('dock.light_mode')" :placement="tooltipPlacement">
<button class="dock-item" @click="toggleDark()">
<tabler:moon-stars v-if="currentAppColorScheme === 'dark'" />
<tabler:sun v-else />
</button>
</Tooltip>
<Tooltip :content="$t('dock.settings')" :placement="tooltipPlacement">
<button class="dock-item" @click="toggleSettings()">
<tabler:settings />
</button>
</Tooltip>
</div>
<Dock :activated-page="activatedPage" @change-page="pageName => changeActivatePage(pageName)" @settings-visibility-change="showSettings = !showSettings" />
</aside>
<aside v-else pos="fixed top-0 right-6px" h-full flex items-center z-1 pointer-events-none>
<div flex="~ gap-2 col" pointer-events-auto>
@@ -576,11 +466,11 @@ function handleOsScroll() {
</main>
</div>
</div>
<!-- settings dialog -->
<KeepAlive>
<Settings v-if="showSettings" @close="showSettings = false" />
</KeepAlive>
</OverlayScrollbarsComponent>
<!-- settings dialog -->
<KeepAlive>
<Settings v-if="showSettings" @close="showSettings = false" />
</KeepAlive>
</div>
</template>
@@ -624,41 +514,6 @@ function handleOsScroll() {
--at-apply: w-2px h-auto my-0 mx-2;
}
.dock-item {
--shadow: 0 0 30px 4px var(--bew-theme-color-50);
--shadow-dark: 0 0 30px 4px rgba(255, 255, 255, 0.6);
--shadow-active: 0 0 20px var(--bew-theme-color-50);
--shadow-dark-active: 0 0 20px rgba(255, 255, 255, 0.6);
--at-apply: transform active:scale-90
md:w-45px w-35px
md:p-3 p-2
md:text-2xl text-xl
aspect-square relative
text-$bew-text-1 leading-0 duration-300
rounded-$bew-radius
bg-$bew-fill-2 cursor-pointer
hover:bg-$bew-theme-color hover:text-white hover:shadow-$shadow
active:shadow-$shadow-active dark-active:shadow-$shadow-dark-active
dark-hover:bg-white dark-hover:text-black dark-hover:shadow-$shadow-dark;
&.active {
--at-apply: bg-$bew-theme-color dark-bg-white
text-white dark-text-black
shadow-$shadow dark:shadow-$shadow-dark
active:shadow-$shadow-active dark-active:shadow-$shadow-dark-active;
}
&.active.video {
--shadow: 0 0 30px 4px var(--bew-warning-color-50);
--shadow-dark: var(--shadow);
--shadow-active: 0 0 20px var(--bew-warning-color-50);
--shadow-dark-active: var(--shadow-active);
--at-apply: bg-$bew-warning-color text-black;
}
}
}
</style>