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(dock): always show dock (#1217)

Browse Source
This commit is contained in:
Hakadao
2024-12-30 00:37:33 +08:00
parent c9401aa387
commit df62cef2c6
8 changed files with 42 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,6 +9,7 @@ import { AppPage } from '~/enums/appEnums'
import { settings } from '~/logic'
import type { DockItem } from '~/stores/mainStore'
import { useMainStore } from '~/stores/mainStore'
import { isHomePage } from '~/utils/main'
import Tooltip from '../Tooltip.vue'
import type { HoveringDockItem } from './types'
@@ -57,7 +58,7 @@ const showBackToTopOrRefreshButton = computed((): boolean => {
}
return settings.value.moveBackToTopOrRefreshButtonToDock
&& props.activatedPage !== AppPage.Search
&& props.activatedPage !== AppPage.Search && isHomePage()
})
watch(() => settings.value.autoHideDock, (newValue) => {
@@ -137,6 +138,10 @@ function handleBackToTopOrRefresh() {
emit('backToTop')
}
function isDockItemActivated(dockItem: DockItem): boolean {
return props.activatedPage === dockItem.page && isHomePage()
}
const dockContentRef = ref<HTMLElement>()
const { width: windowWidth, height: windowHeight } = useWindowSize()
const { width: dockWidth, height: dockHeight } = useElementSize(dockContentRef)
@@ -182,8 +187,8 @@ const dockTransformStyle = computed((): { transform: string, transformOrigin: st
<template>
<aside
class="dock-wrap"
pos="absolute top-0" flex="~ col justify-center items-center" w-full h-full
z-1 pointer-events-none
pos="fixed top-0" flex="~ col justify-center items-center" w-full h-full
z-10 pointer-events-none
>
<!-- Edge Div -->
<div
@@ -216,19 +221,19 @@ const dockTransformStyle = computed((): { transform: string, transformOrigin: st
<button
class="dock-item group"
:class="{
'active': activatedPage === dockItem.page,
'active': isDockItemActivated(dockItem),
'inactive': hoveringDockItem.themeMode && isDark,
'disable-glowing-effect': settings.disableDockGlowingEffect,
}"
@click="handleDockItemClick(dockItem)"
>
<div
v-show="activatedPage !== dockItem.page"
v-show="!isDockItemActivated(dockItem)"
:class="dockItem.icon"
text-xl
/>
<div
v-show="activatedPage === dockItem.page"
v-show="isDockItemActivated(dockItem)"
:class="dockItem.iconActivated"
text-xl
/>

9
src/components/Settings/DesktopAndDock/DesktopAndDock.vue
View File

@@ -107,6 +107,12 @@ function handleToggleDockItem(dockItem: any) {
</SettingsItemGroup>
<SettingsItemGroup :title="$t('settings.group_dock')">
<SettingsItem :title="$t('settings.always_use_dock')" :desc="$t('settings.always_use_dock_desc')">
<Radio v-model="settings.alwaysUseDock" />
</SettingsItem>
<SettingsItem :title="$t('settings.auto_hide_dock')">
<Radio v-model="settings.autoHideDock" />
</SettingsItem>
<SettingsItem :title="$t('settings.dock_position')" :desc="$t('settings.dock_position_desc')">
<Select
v-model="settings.dockPosition"
@@ -114,9 +120,6 @@ function handleToggleDockItem(dockItem: any) {
w="full"
/>
</SettingsItem>
<SettingsItem :title="$t('settings.auto_hide_dock')">
<Radio v-model="settings.autoHideDock" />
</SettingsItem>
<SettingsItem :desc="$t('settings.dock_content_adjustment_desc')">
<template #title>
<div flex="~ gap-4 items-center">