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

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

@ -7,8 +7,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.root">
<XSidebar v-if="!isMobile" :class="$style.sidebar"/>
<MkStickyContainer ref="contents" :class="$style.contents" style="container-type: inline-size;"
@contextmenu.stop="onContextmenu">
<MkStickyContainer
ref="contents" :class="$style.contents" style="container-type: inline-size;"
@contextmenu.stop="onContextmenu"
>
<template #header>
<div>
<XAnnouncements v-if="$i"/>
@ -24,28 +26,53 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<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">
<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,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"><i
class="_indicatorCircle"></i></span></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'}]">
<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,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"
><i
class="_indicatorCircle"
></i></span>
</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></button>
<button :class="$style.navButton" class="_button" @click="widgetsShowing = true"><i :class="$style.navButtonIcon"
class="ti ti-apps"></i>
</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_gamingDark]: gaming === 'dark',[$style.postButton_gamingLight]: gaming === 'light',[$style.postButton]: gaming === ''}]"
class="_button" @click="os.post()"><i :class="$style.navButtonIcon"
class="ti ti-pencil"></i></button>
class="_button" @click="os.post()"
>
<i
:class="$style.navButtonIcon"
class="ti ti-pencil"
></i>
</button>
</div>
<Transition
@ -96,8 +123,11 @@ SPDX-License-Identifier: AGPL-3.0-only
:leaveToClass="defaultStore.state.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>
<button class="_button" :class="$style.widgetsCloseButton" @click="widgetsShowing = false">
<i
class="ti ti-x"
></i>
</button>
<XWidgets/>
</div>
</Transition>
@ -118,7 +148,7 @@ import {navbarItemDef} from '@/navbar';
import { i18n } from '@/i18n';
import { $i } from '@/account';
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 { miLocalStorage } from '@/local-storage';
import { CURRENT_STICKY_BOTTOM } from '@/const';
@ -127,7 +157,7 @@ import {useScrollPositionManager} from '@/nirax';
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
const indicatorCounterToggle = computed(defaultStore.makeGetterSetter('indicatorCounterToggle'));
let gaming = ref()
let gaming = ref();
// gaming.valueに新しい値を代入する
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
@ -145,7 +175,7 @@ watch(darkMode, () => {
} else {
gaming.value = '';
}
})
});
watch(gamingMode, () => {
if (darkMode.value && gamingMode.value == true) {
@ -155,7 +185,7 @@ watch(gamingMode, () => {
} else {
gaming.value = '';
}
})
});
const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
@ -168,25 +198,24 @@ const MOBILE_THRESHOLD = 500;
onMounted(() => {
if (
window.navigator.connection.type === "cellular" &&
window.navigator.connection.type === 'cellular' &&
!defaultStore.state.enableUltimateDataSaverMode &&
defaultStore.state.enableCellularWithUltimateDataSaver
) {
defaultStore.state.enableDataSaverMode = 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.enableUltimateDataSaverMode = true;
}
if (
window.navigator.connection.type === "cellular" &&
window.navigator.connection.type === 'cellular' &&
!defaultStore.state.enableDataSaverMode &&
defaultStore.state.enableCellularWithDataSaver
) {
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;
}
if (defaultStore.state.enableUltimateDataSaverMode) {
@ -214,7 +243,8 @@ provideMetadataReceiver((metadataGetter) => {
document.title = pageMetadata.value.title;
} else {
document.title = `${pageMetadata.value.title} | ${instanceName}`;
}}
}
}
});
provideReactiveMetadata(pageMetadata);
@ -569,7 +599,6 @@ $widgets-hide-threshold: 1090px;
background: linear-gradient(90deg, var(--X8), var(--X8));
}
}
.navButtonIcon {