mirror of
https://github.com/BewlyBewly/BewlyBewly.git
synced 2025-04-14 13:15:29 +00:00
feat: add easter egg in the dock
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { Icon } from '@iconify/vue'
|
||||
import type { DockItem } from './types'
|
||||
import type { DockItem, HoveringDockItem } from './types'
|
||||
import { AppPage } from '~/enums/appEnums'
|
||||
import { settings } from '~/logic'
|
||||
|
||||
@@ -11,6 +11,11 @@ const emit = defineEmits(['change-page', 'settings-visibility-change'])
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const hoveringDockItem = reactive<HoveringDockItem>({
|
||||
themeMode: false,
|
||||
settings: false,
|
||||
})
|
||||
|
||||
const tooltipPlacement = computed(() => {
|
||||
if (settings.value.dockPosition === 'left')
|
||||
return 'right'
|
||||
@@ -81,9 +86,24 @@ function toggleDark() {
|
||||
<div class="divider" />
|
||||
|
||||
<Tooltip :content="currentAppColorScheme === 'dark' ? $t('dock.dark_mode') : $t('dock.light_mode')" :placement="tooltipPlacement">
|
||||
<button class="dock-item" @click="toggleDark()">
|
||||
<line-md:sunny-outline-to-moon-transition v-if="currentAppColorScheme === 'dark'" />
|
||||
<line-md:moon-to-sunny-outline-transition v-else />
|
||||
<button
|
||||
class="dock-item"
|
||||
@click="toggleDark()"
|
||||
@mouseenter="hoveringDockItem.themeMode = true"
|
||||
@mouseleave="hoveringDockItem.themeMode = false"
|
||||
>
|
||||
<Transition name="fade">
|
||||
<div v-show="hoveringDockItem.themeMode" absolute>
|
||||
<line-md:sunny-outline-to-moon-loop-transition v-if="currentAppColorScheme === 'dark'" />
|
||||
<line-md:moon-alt-to-sunny-outline-loop-transition v-else />
|
||||
</div>
|
||||
</Transition>
|
||||
<Transition name="fade">
|
||||
<div v-show="!hoveringDockItem.themeMode" absolute>
|
||||
<line-md:sunny-outline-to-moon-transition v-if="currentAppColorScheme === 'dark'" />
|
||||
<line-md:moon-to-sunny-outline-transition v-else />
|
||||
</div>
|
||||
</Transition>
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
|
||||
@@ -6,3 +6,8 @@ export interface DockItem {
|
||||
iconActivated: string
|
||||
page: AppPage
|
||||
}
|
||||
|
||||
export interface HoveringDockItem {
|
||||
themeMode: boolean
|
||||
settings: boolean
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user