summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorsyuilo <4439005+syuilo@users.noreply.github.com>2025-03-29 21:02:31 +0900
committersyuilo <4439005+syuilo@users.noreply.github.com>2025-03-29 21:02:31 +0900
commiteb4062cf636ccb11ebacbfc9f877d9e8af083635 (patch)
tree5d5fa62ed19ed58b4ef18e59c462a6d336d5b29c
parentenhance(frontend): アイコンのスクロール追従を無効化してパ... (diff)
downloadsharkey-eb4062cf636ccb11ebacbfc9f877d9e8af083635.tar.gz
sharkey-eb4062cf636ccb11ebacbfc9f877d9e8af083635.tar.bz2
sharkey-eb4062cf636ccb11ebacbfc9f877d9e8af083635.zip
(test)
-rw-r--r--packages/frontend/src/ui/universal.vue113
1 files changed, 1 insertions, 112 deletions
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index 4719595729..f8f10155c3 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -5,117 +5,30 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div :class="$style.root">
- <XSidebar v-if="!isMobile" :class="$style.sidebar" :showWidgetButton="!isDesktop" @widgetButtonClick="widgetsShowing = true"/>
-
<div :class="$style.contents" @contextmenu.stop="onContextmenu">
- <div>
- <XPreferenceRestore v-if="shouldSuggestRestoreBackup"/>
- <XAnnouncements v-if="$i"/>
- <XStatusBars :class="$style.statusbars"/>
- </div>
<StackingRouterView v-if="prefer.s['experimental.stackingRouterView']" :class="$style.content"/>
<RouterView v-else :class="$style.content"/>
- <div v-if="isMobile" ref="navFooter" :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.navButton" class="_button" @click="widgetsShowing = true"><i :class="$style.navButtonIcon" class="ti ti-apps"></i></button>
- <button :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
- </div>
- </div>
-
- <div v-if="isDesktop && !pageMetadata?.needWideArea" :class="$style.widgets">
- <XWidgets/>
</div>
- <Transition
- :enterActiveClass="prefer.s.animation ? $style.transition_menuDrawerBg_enterActive : ''"
- :leaveActiveClass="prefer.s.animation ? $style.transition_menuDrawerBg_leaveActive : ''"
- :enterFromClass="prefer.s.animation ? $style.transition_menuDrawerBg_enterFrom : ''"
- :leaveToClass="prefer.s.animation ? $style.transition_menuDrawerBg_leaveTo : ''"
- >
- <div
- v-if="drawerMenuShowing"
- :class="$style.menuDrawerBg"
- class="_modalBg"
- @click="drawerMenuShowing = false"
- @touchstart.passive="drawerMenuShowing = false"
- ></div>
- </Transition>
-
- <Transition
- :enterActiveClass="prefer.s.animation ? $style.transition_menuDrawer_enterActive : ''"
- :leaveActiveClass="prefer.s.animation ? $style.transition_menuDrawer_leaveActive : ''"
- :enterFromClass="prefer.s.animation ? $style.transition_menuDrawer_enterFrom : ''"
- :leaveToClass="prefer.s.animation ? $style.transition_menuDrawer_leaveTo : ''"
- >
- <div v-if="drawerMenuShowing" :class="$style.menuDrawer">
- <XDrawerMenu/>
- </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 { defineAsyncComponent, provide, onMounted, computed, ref, watch, useTemplateRef } from 'vue';
+import { provide, onMounted, computed, ref } from 'vue';
import { instanceName } from '@@/js/config.js';
import { isLink } from '@@/js/is-link.js';
import XCommon from './_common_/common.vue';
-import type { Ref } from 'vue';
import type { PageMetadata } from '@/page.js';
-import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
import * as os from '@/os.js';
-import { navbarItemDef } from '@/navbar.js';
import { i18n } from '@/i18n.js';
-import { $i } from '@/i.js';
import { provideMetadataReceiver, provideReactiveMetadata } from '@/page.js';
import { deviceKind } from '@/utility/device-kind.js';
import { miLocalStorage } from '@/local-storage.js';
import { mainRouter } from '@/router.js';
import { prefer } from '@/preferences.js';
-import { shouldSuggestRestoreBackup } from '@/preferences/utility.js';
import { DI } from '@/di.js';
-const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
-const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
-const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
-const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));
-const XPreferenceRestore = defineAsyncComponent(() => import('@/ui/_common_/PreferenceRestore.vue'));
-
const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
const DESKTOP_THRESHOLD = 1100;
@@ -129,8 +42,6 @@ window.addEventListener('resize', () => {
});
const pageMetadata = ref<null | PageMetadata>(null);
-const widgetsShowing = ref(false);
-const navFooter = useTemplateRef('navFooter');
provide(DI.router, mainRouter);
provideMetadataReceiver((metadataGetter) => {
@@ -146,14 +57,6 @@ provideMetadataReceiver((metadataGetter) => {
});
provideReactiveMetadata(pageMetadata);
-const menuIndicated = computed(() => {
- for (const def in navbarItemDef) {
- if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
- if (navbarItemDef[def].indicated) return true;
- }
- return false;
-});
-
const drawerMenuShowing = ref(false);
mainRouter.on('change', () => {
@@ -193,20 +96,6 @@ const onContextmenu = (ev) => {
},
}], ev);
};
-
-const navFooterHeight = ref(0);
-
-watch(navFooter, () => {
- if (navFooter.value) {
- navFooterHeight.value = navFooter.value.offsetHeight;
- window.document.body.style.setProperty('--MI-minBottomSpacing', 'var(--MI-minBottomSpacingMobile)');
- } else {
- navFooterHeight.value = 0;
- window.document.body.style.setProperty('--MI-minBottomSpacing', '0px');
- }
-}, {
- immediate: true,
-});
</script>
<style>