usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

a

This commit is contained in:
mattyatea 2024-02-16 19:49:16 +09:00
parent 332a3f2737
commit 9e1d276bbd
1 changed files with 239 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
packages/frontend/src/ui/universal.vue
View File

@ -4,11 +4,13 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div :class="$style.root"> <div :class="$style.root">
<XSidebar v-if="!isMobile" :class="$style.sidebar"/> <XSidebar v-if="!isMobile" :class="$style.sidebar"/>
<MkStickyContainer ref="contents" :class="$style.contents" style="container-type: inline-size;" <MkStickyContainer
@contextmenu.stop="onContextmenu"> ref="contents" :class="$style.contents" style="container-type: inline-size;"
@contextmenu.stop="onContextmenu"
>
<template #header> <template #header>
<div> <div>
<XAnnouncements v-if="$i"/> <XAnnouncements v-if="$i"/>
@ -24,28 +26,53 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
<button v-if="(!isDesktop || pageMetadata?.needWideArea) && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true"> <button v-if="(!isDesktop || pageMetadata?.needWideArea) && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true">
<i class="ti ti-apps"></i></button> <i class="ti ti-apps"></i>
</button>
<div v-if="isMobile" ref="navFooter" :class="$style.nav"> <div v-if="isMobile" ref="navFooter" :class="$style.nav">
<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i <button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true">
:class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" <i
:class="[$style.navButtonIndicator,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"><i :class="$style.navButtonIcon" class="ti ti-menu-2"
class="_indicatorCircle"></i></span></button> ></i><span
<button :class="$style.navButton" class="_button" v-if="menuIndicated"
@click="isRoot ? top() : mainRouter.push('/')"><i :class="[$style.navButtonIndicator,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"
:class="$style.navButtonIcon" class="ti ti-home"></i></button> ><i
<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')"><i class="_indicatorCircle"
:class="$style.navButtonIcon" class="ti ti-bell"></i><span v-if="$i?.hasUnreadNotification" ></i></span>
:class="[$style.navButtonIndicator,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"> </button>
<button
:class="$style.navButton" class="_button"
@click="isRoot ? top() : 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,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"
>
<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 && indicatorCounterToggle ? '99+' : $i.unreadNotificationsCount }}</span> <span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 && indicatorCounterToggle ? '99+' : $i.unreadNotificationsCount }}</span>
</span></button> </span>
<button :class="$style.navButton" class="_button" @click="widgetsShowing = true"><i :class="$style.navButtonIcon" </button>
class="ti ti-apps"></i> <button :class="$style.navButton" class="_button" @click="widgetsShowing = true">
<i
:class="$style.navButtonIcon"
class="ti ti-apps"
></i>
</button> </button>
<button <button
:class="[{[$style.postButton_gamingDark]: gaming === 'dark',[$style.postButton_gamingLight]: gaming === 'light',[$style.postButton]: gaming === ''}]" :class="[{[$style.postButton_gamingDark]: gaming === 'dark',[$style.postButton_gamingLight]: gaming === 'light',[$style.postButton]: gaming === ''}]"
class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="_button" @click="os.post()"
class="ti ti-pencil"></i></button> >
<i
:class="$style.navButtonIcon"
class="ti ti-pencil"
></i>
</button>
</div> </div>
<Transition <Transition
@ -96,38 +123,41 @@ SPDX-License-Identifier: AGPL-3.0-only
:leaveToClass="defaultStore.state.animation ? $style.transition_widgetsDrawer_leaveTo : ''" :leaveToClass="defaultStore.state.animation ? $style.transition_widgetsDrawer_leaveTo : ''"
> >
<div v-if="widgetsShowing" :class="$style.widgetsDrawer"> <div v-if="widgetsShowing" :class="$style.widgetsDrawer">
<button class="_button" :class="$style.widgetsCloseButton" @click="widgetsShowing = false"><i <button class="_button" :class="$style.widgetsCloseButton" @click="widgetsShowing = false">
class="ti ti-x"></i></button> <i
class="ti ti-x"
></i>
</button>
<XWidgets/> <XWidgets/>
</div> </div>
</Transition> </Transition>
<XCommon/> <XCommon/>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {defineAsyncComponent, provide, onMounted, computed, ref, watch, shallowRef, Ref} from 'vue'; import { defineAsyncComponent, provide, onMounted, computed, ref, watch, shallowRef, Ref } from 'vue';
import XCommon from './_common_/common.vue'; import XCommon from './_common_/common.vue';
import type MkStickyContainer from '@/components/global/MkStickyContainer.vue'; import type MkStickyContainer from '@/components/global/MkStickyContainer.vue';
import {instanceName} from '@/config'; import { instanceName } from '@/config';
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue'; import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
import * as os from '@/os'; import * as os from '@/os';
import {defaultStore} from '@/store'; import { defaultStore } from '@/store';
import {navbarItemDef} from '@/navbar'; import { navbarItemDef } from '@/navbar';
import {i18n} from '@/i18n'; import { i18n } from '@/i18n';
import {$i} from '@/account'; import { $i } from '@/account';
import { mainRouter } from '@/router/main.js'; import { mainRouter } from '@/router/main.js';
import {PageMetadata, provideMetadataReceiver} from '@/scripts/page-metadata'; import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata';
import {deviceKind} from '@/scripts/device-kind'; import { deviceKind } from '@/scripts/device-kind';
import {miLocalStorage} from '@/local-storage'; import { miLocalStorage } from '@/local-storage';
import {CURRENT_STICKY_BOTTOM} from '@/const'; import { CURRENT_STICKY_BOTTOM } from '@/const';
import {useScrollPositionManager} from '@/nirax'; import { useScrollPositionManager } from '@/nirax';
const darkMode = computed(defaultStore.makeGetterSetter('darkMode')); const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode')); const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
const indicatorCounterToggle = computed(defaultStore.makeGetterSetter('indicatorCounterToggle')); const indicatorCounterToggle = computed(defaultStore.makeGetterSetter('indicatorCounterToggle'));
let gaming = ref() let gaming = ref();
// gaming.valueに新しい値を代入する // gaming.valueに新しい値を代入する
if (darkMode.value && gamingMode.value == true) { if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark'; gaming.value = 'dark';
@ -145,7 +175,7 @@ watch(darkMode, () => {
} else { } else {
gaming.value = ''; gaming.value = '';
} }
}) });
watch(gamingMode, () => { watch(gamingMode, () => {
if (darkMode.value && gamingMode.value == true) { if (darkMode.value && gamingMode.value == true) {
@ -155,7 +185,7 @@ watch(gamingMode, () => {
} else { } else {
gaming.value = ''; gaming.value = '';
} }
}) });
const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue')); const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue')); const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue')); const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
@ -168,25 +198,24 @@ const MOBILE_THRESHOLD = 500;
onMounted(() => { onMounted(() => {
if ( if (
window.navigator.connection.type === "cellular" && window.navigator.connection.type === 'cellular' &&
!defaultStore.state.enableUltimateDataSaverMode && !defaultStore.state.enableUltimateDataSaverMode &&
defaultStore.state.enableCellularWithUltimateDataSaver defaultStore.state.enableCellularWithUltimateDataSaver
) { ) {
defaultStore.state.enableDataSaverMode = true; defaultStore.state.enableDataSaverMode = true;
defaultStore.state.enableUltimateDataSaverMode = true; defaultStore.state.enableUltimateDataSaverMode = true;
} else if (window.navigator.connection.type !== "cellular" && window.navigator.connection.type !== "undefined" && defaultStore.state.enableDataSaverMode && defaultStore.state.enableCellularWithDataSaver) { } else if (window.navigator.connection.type !== 'cellular' && window.navigator.connection.type !== 'undefined' && defaultStore.state.enableDataSaverMode && defaultStore.state.enableCellularWithDataSaver) {
defaultStore.state.enableDataSaverMode = false; defaultStore.state.enableDataSaverMode = false;
defaultStore.state.enableUltimateDataSaverMode = true; defaultStore.state.enableUltimateDataSaverMode = true;
} }
if ( if (
window.navigator.connection.type === "cellular" && window.navigator.connection.type === 'cellular' &&
!defaultStore.state.enableDataSaverMode && !defaultStore.state.enableDataSaverMode &&
defaultStore.state.enableCellularWithDataSaver defaultStore.state.enableCellularWithDataSaver
) { ) {
defaultStore.state.enableDataSaverMode = true; defaultStore.state.enableDataSaverMode = true;
} else if (window.navigator.connection.type !== 'cellular' && window.navigator.connection.type !== 'undefined' && defaultStore.state.enableDataSaverMode && defaultStore.state.enableCellularWithDataSaver) {
} else if (window.navigator.connection.type !== "cellular" && window.navigator.connection.type !== "undefined" && defaultStore.state.enableDataSaverMode && defaultStore.state.enableCellularWithDataSaver) {
defaultStore.state.enableDataSaverMode = false; defaultStore.state.enableDataSaverMode = false;
} }
if (defaultStore.state.enableUltimateDataSaverMode) { if (defaultStore.state.enableUltimateDataSaverMode) {
@ -214,7 +243,8 @@ provideMetadataReceiver((metadataGetter) => {
document.title = pageMetadata.value.title; document.title = pageMetadata.value.title;
} else { } else {
document.title = `${pageMetadata.value.title} | ${instanceName}`; document.title = `${pageMetadata.value.title} | ${instanceName}`;
}} }
}
}); });
provideReactiveMetadata(pageMetadata); provideReactiveMetadata(pageMetadata);
@ -260,7 +290,7 @@ onMounted(() => {
if (!isDesktop.value) { if (!isDesktop.value) {
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
if (window.innerWidth >= DESKTOP_THRESHOLD) isDesktop.value = true; if (window.innerWidth >= DESKTOP_THRESHOLD) isDesktop.value = true;
}, {passive: true}); }, { passive: true });
} }
}); });
@ -569,7 +599,6 @@ $widgets-hide-threshold: 1090px;
background: linear-gradient(90deg, var(--X8), var(--X8)); background: linear-gradient(90deg, var(--X8), var(--X8));
} }
} }
.navButtonIcon { .navButtonIcon {