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> <template>
<div :class="$style.root" :style="bg"> <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 :class="$style.name">{{ instance.name }}</div>
</div> </div>
</template> </template>
@ -15,6 +15,7 @@ import { } from 'vue';
import { instanceName } from '@/config'; import { instanceName } from '@/config';
import { instance as Instance } from '@/instance'; import { instance as Instance } from '@/instance';
import { getProxiedImageUrlNullable } from '@/scripts/media-proxy'; import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
import {defaultStore} from "@/store";
const props = defineProps<{ const props = defineProps<{
instance?: { instance?: {

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

@ -7,7 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<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;" @contextmenu.stop="onContextmenu"> <MkStickyContainer ref="contents" :class="$style.contents" style="container-type: inline-size;"
@contextmenu.stop="onContextmenu">
<template #header> <template #header>
<div> <div>
<XAnnouncements v-if="$i" :class="$style.announcements"/> <XAnnouncements v-if="$i" :class="$style.announcements"/>
@ -22,14 +23,26 @@ SPDX-License-Identifier: AGPL-3.0-only
<XWidgets/> <XWidgets/>
</div> </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"> <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="drawerMenuShowing = true"><i
<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> :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated"
<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> :class="$style.navButtonIndicator"><i
<button :class="$style.navButton" class="_button" @click="widgetsShowing = true"><i :class="$style.navButtonIcon" class="ti ti-apps"></i></button> class="_indicatorCircle"></i></span></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="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> </div>
<Transition <Transition
@ -80,7 +93,8 @@ 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 class="ti ti-x"></i></button> <button class="_button" :class="$style.widgetsCloseButton" @click="widgetsShowing = false"><i
class="ti ti-x"></i></button>
<XWidgets/> <XWidgets/>
</div> </div>
</Transition> </Transition>
@ -122,10 +136,8 @@ onMounted(() => {
defaultStore.state.enableCellularWithDataSaver defaultStore.state.enableCellularWithDataSaver
) { ) {
defaultStore.state.enableDataSaverMode = true; defaultStore.state.enableDataSaverMode = true;
} else if (
window.navigator.connection.type !== "cellular" && } else if (window.navigator.connection.type !== "cellular" && window.navigator.connection.type !== "undefined" && defaultStore.state.enableDataSaverMode && defaultStore.state.enableCellularWithDataSaver) {
defaultStore.state.enableDataSaverMode &&
!defaultStore.state.enableCellularWithDataSaver) {
defaultStore.state.enableDataSaverMode = false; defaultStore.state.enableDataSaverMode = false;
} }
}); });
@ -276,6 +288,7 @@ $widgets-hide-threshold: 1090px;
opacity: 1; opacity: 1;
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
} }
.transition_menuDrawerBg_enterFrom, .transition_menuDrawerBg_enterFrom,
.transition_menuDrawerBg_leaveTo { .transition_menuDrawerBg_leaveTo {
opacity: 0; opacity: 0;
@ -287,6 +300,7 @@ $widgets-hide-threshold: 1090px;
transform: translateX(0); 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: 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_enterFrom,
.transition_menuDrawer_leaveTo { .transition_menuDrawer_leaveTo {
opacity: 0; opacity: 0;
@ -298,6 +312,7 @@ $widgets-hide-threshold: 1090px;
opacity: 1; opacity: 1;
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
} }
.transition_widgetsDrawerBg_enterFrom, .transition_widgetsDrawerBg_enterFrom,
.transition_widgetsDrawerBg_leaveTo { .transition_widgetsDrawerBg_leaveTo {
opacity: 0; opacity: 0;
@ -309,6 +324,7 @@ $widgets-hide-threshold: 1090px;
transform: translateX(0); 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: 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_enterFrom,
.transition_widgetsDrawer_leaveTo { .transition_widgetsDrawer_leaveTo {
opacity: 0; opacity: 0;