diff options
Diffstat (limited to 'packages/frontend/src/ui/deck.vue')
| -rw-r--r-- | packages/frontend/src/ui/deck.vue | 152 |
1 files changed, 75 insertions, 77 deletions
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue index 422b00e9c2..91da178a44 100644 --- a/packages/frontend/src/ui/deck.vue +++ b/packages/frontend/src/ui/deck.vue @@ -68,17 +68,7 @@ SPDX-License-Identifier: AGPL-3.0-only <XNavbarH v-if="!isMobile && prefer.r['deck.navbarPosition'].value === 'bottom'"/> - <div v-if="isMobile" :class="$style.nav"> - <button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator" class="_blink"><i class="_indicatorCircle"></i></span></button> - <button :class="$style.navButton" class="_button" @click="mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button> - <button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')"> - <i :class="$style.navButtonIcon" class="ti ti-bell"></i> - <span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator" class="_blink"> - <span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span> - </span> - </button> - <button :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button> - </div> + <XMobileFooterMenu v-if="isMobile" v-model:drawerMenuShowing="drawerMenuShowing" v-model:widgetsShowing="widgetsShowing"/> </div> <Transition @@ -107,19 +97,46 @@ SPDX-License-Identifier: AGPL-3.0-only </div> </Transition> + <Transition + :enterActiveClass="prefer.s.animation ? $style.transition_widgetsDrawerBg_enterActive : ''" + :leaveActiveClass="prefer.s.animation ? $style.transition_widgetsDrawerBg_leaveActive : ''" + :enterFromClass="prefer.s.animation ? $style.transition_widgetsDrawerBg_enterFrom : ''" + :leaveToClass="prefer.s.animation ? $style.transition_widgetsDrawerBg_leaveTo : ''" + > + <div + v-if="widgetsShowing" + :class="$style.widgetsDrawerBg" + class="_modalBg" + @click="widgetsShowing = false" + @touchstart.passive="widgetsShowing = false" + ></div> + </Transition> + + <Transition + :enterActiveClass="prefer.s.animation ? $style.transition_widgetsDrawer_enterActive : ''" + :leaveActiveClass="prefer.s.animation ? $style.transition_widgetsDrawer_leaveActive : ''" + :enterFromClass="prefer.s.animation ? $style.transition_widgetsDrawer_enterFrom : ''" + :leaveToClass="prefer.s.animation ? $style.transition_widgetsDrawer_leaveTo : ''" + > + <div v-if="widgetsShowing" :class="$style.widgetsDrawer"> + <button class="_button" :class="$style.widgetsCloseButton" @click="widgetsShowing = false"><i class="ti ti-x"></i></button> + <XWidgets/> + </div> + </Transition> + <XCommon/> </div> </template> <script lang="ts" setup> -import { computed, defineAsyncComponent, ref, useTemplateRef } from 'vue'; +import { defineAsyncComponent, ref, useTemplateRef } from 'vue'; import { v4 as uuid } from 'uuid'; import XCommon from './_common_/common.vue'; import XSidebar from '@/ui/_common_/navbar.vue'; import XNavbarH from '@/ui/_common_/navbar-h.vue'; import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue'; +import XMobileFooterMenu from '@/ui/_common_/mobile-footer-menu.vue'; import * as os from '@/os.js'; -import { navbarItemDef } from '@/navbar.js'; import { $i } from '@/i.js'; import { i18n } from '@/i18n.js'; import { deviceKind } from '@/utility/device-kind.js'; @@ -139,6 +156,7 @@ import { columns, layout, columnTypes, switchProfileMenu, addColumn as addColumn const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue')); const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue')); +const XWidgets = defineAsyncComponent(() => import('./_common_/widgets.vue')); const columnComponents = { main: XMainColumn, @@ -172,6 +190,7 @@ window.addEventListener('resize', () => { const snapScroll = ref(deviceKind === 'smartphone' || deviceKind === 'tablet'); const withWallpaper = prefer.s['deck.wallpaper'] != null; const drawerMenuShowing = ref(false); +const widgetsShowing = ref(false); const gap = prefer.r['deck.columnGap']; /* @@ -181,14 +200,6 @@ watch(route, () => { }); */ -const menuIndicated = computed(() => { - if ($i == null) return false; - for (const def in navbarItemDef) { - if (navbarItemDef[def].indicated) return true; - } - return false; -}); - function showSettings() { os.pageWindow('/settings/deck'); } @@ -280,6 +291,28 @@ if (prefer.s['deck.wallpaper'] != null) { transform: translateX(-240px); } +.transition_widgetsDrawerBg_enterActive, +.transition_widgetsDrawerBg_leaveActive { + opacity: 1; + transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); +} +.transition_widgetsDrawerBg_enterFrom, +.transition_widgetsDrawerBg_leaveTo { + opacity: 0; +} + +.transition_widgetsDrawer_enterActive, +.transition_widgetsDrawer_leaveActive { + opacity: 1; + transform: translateX(0); + transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); +} +.transition_widgetsDrawer_enterFrom, +.transition_widgetsDrawer_leaveTo { + opacity: 0; + transform: translateX(-240px); +} + .root { $nav-hide-threshold: 650px; // TODO: どこかに集約したい @@ -427,68 +460,33 @@ if (prefer.s['deck.wallpaper'] != null) { background: var(--MI_THEME-navBg); } -.nav { - padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px; - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - grid-gap: 8px; - width: 100%; - box-sizing: border-box; - -webkit-backdrop-filter: var(--MI-blur, blur(32px)); - backdrop-filter: var(--MI-blur, blur(32px)); - background-color: var(--MI_THEME-header); - border-top: solid 0.5px var(--MI_THEME-divider); -} - -.navButton { - position: relative; - padding: 0; - aspect-ratio: 1; - width: 100%; - max-width: 50px; - margin: auto; - border-radius: 100%; - background: var(--MI_THEME-panel); - color: var(--MI_THEME-fg); - - &:hover { - background: var(--MI_THEME-panelHighlight); - } - - &:active { - background: hsl(from var(--MI_THEME-panel) h s calc(l - 2)); - } +.widgetsDrawerBg { + z-index: 1001; } -.postButton { - composes: navButton; - background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB)); - color: var(--MI_THEME-fgOnAccent); - - &:hover { - background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5))); - } - - &:active { - background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5))); - } +.widgetsDrawer { + position: fixed; + top: 0; + left: 0; + z-index: 1001; + width: 310px; + height: 100dvh; + padding: var(--MI-margin) var(--MI-margin) calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px)) !important; + box-sizing: border-box; + overflow: auto; + overscroll-behavior: contain; + background: var(--MI_THEME-bg); } -.navButtonIcon { - font-size: 18px; - vertical-align: middle; +.widgetsCloseButton { + padding: 8px; + display: block; + margin: 0 auto; } -.navButtonIndicator { - position: absolute; - top: 0; - left: 0; - color: var(--MI_THEME-indicator); - font-size: 16px; - - &:has(.itemIndicateValueIcon) { - animation: none; - font-size: 12px; +@media (min-width: 370px) { + .widgetsCloseButton { + display: none; } } </style> |