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

feat: データセーバー強化

This commit is contained in:
mattyatea 2023-09-18 09:11:20 +09:00
parent c8d0c99d61
commit f2ab7a5626
2 changed files with 319 additions and 302 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/frontend/src/components/MkInstanceTicker.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div :class="$style.root" :style="bg">
<img v-if="faviconUrl" :class="$style.icon" :src="faviconUrl"/>
<img v-if="faviconUrl && !defaultStore.state.enableDataSaverMode" :class="$style.icon" :src="faviconUrl"/>
<div :class="$style.name">{{ instance.name }}</div>
</div>
</template>
@ -15,6 +15,7 @@ import { } from 'vue';
import { instanceName } from '@/config';
import { instance as Instance } from '@/instance';
import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
import {defaultStore} from "@/store";
const props = defineProps<{
instance?: {

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

@ -4,10 +4,11 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div :class="$style.root">
<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" :class="$style.announcements"/>
@ -22,14 +23,26 @@ SPDX-License-Identifier: AGPL-3.0-only
<XWidgets/>
</div>
<button v-if="!isDesktop && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
<button v-if="!isDesktop && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true">
<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"><i class="_indicatorCircle"></i></span></button>
<button :class="$style.navButton" class="_button" @click="mainRouter.currentRoute.value.name === 'index' ? 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"><i class="_indicatorCircle"></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" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
<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"><i
class="_indicatorCircle"></i></span></button>
<button :class="$style.navButton" class="_button"
@click="mainRouter.currentRoute.value.name === 'index' ? 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"><i
class="_indicatorCircle"></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" class="_button" @click="os.post()"><i :class="$style.navButtonIcon"
class="ti ti-pencil"></i></button>
</div>
<Transition
@ -80,32 +93,33 @@ 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>
<XCommon/>
</div>
</div>
</template>
<script lang="ts" setup>
import { defineAsyncComponent, provide, onMounted, computed, ref, ComputedRef, watch, shallowRef, Ref } from 'vue';
import {defineAsyncComponent, provide, onMounted, computed, ref, ComputedRef, watch, shallowRef, Ref} from 'vue';
import XCommon from './_common_/common.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 * as os from '@/os';
import { defaultStore } from '@/store';
import { navbarItemDef } from '@/navbar';
import { i18n } from '@/i18n';
import { $i } from '@/account';
import { mainRouter } from '@/router';
import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata';
import { deviceKind } from '@/scripts/device-kind';
import { miLocalStorage } from '@/local-storage';
import { CURRENT_STICKY_BOTTOM } from '@/const';
import { useScrollPositionManager } from '@/nirax';
import {defaultStore} from '@/store';
import {navbarItemDef} from '@/navbar';
import {i18n} from '@/i18n';
import {$i} from '@/account';
import {mainRouter} from '@/router';
import {PageMetadata, provideMetadataReceiver} from '@/scripts/page-metadata';
import {deviceKind} from '@/scripts/device-kind';
import {miLocalStorage} from '@/local-storage';
import {CURRENT_STICKY_BOTTOM} from '@/const';
import {useScrollPositionManager} from '@/nirax';
const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
@ -122,10 +136,8 @@ onMounted(() => {
defaultStore.state.enableCellularWithDataSaver
) {
defaultStore.state.enableDataSaverMode = true;
} else if (
window.navigator.connection.type !== "cellular" &&
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;
}
});
@ -191,7 +203,7 @@ onMounted(() => {
if (!isDesktop.value) {
window.addEventListener('resize', () => {
if (window.innerWidth >= DESKTOP_THRESHOLD) isDesktop.value = true;
}, { passive: true });
}, {passive: true});
}
});
@ -276,6 +288,7 @@ $widgets-hide-threshold: 1090px;
opacity: 1;
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.transition_menuDrawerBg_enterFrom,
.transition_menuDrawerBg_leaveTo {
opacity: 0;
@ -287,6 +300,7 @@ $widgets-hide-threshold: 1090px;
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_menuDrawer_enterFrom,
.transition_menuDrawer_leaveTo {
opacity: 0;
@ -298,6 +312,7 @@ $widgets-hide-threshold: 1090px;
opacity: 1;
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.transition_widgetsDrawerBg_enterFrom,
.transition_widgetsDrawerBg_leaveTo {
opacity: 0;
@ -309,6 +324,7 @@ $widgets-hide-threshold: 1090px;
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;