merge upstream
This commit is contained in:
Hazelnoot
commit
d8908ef2d8
1065 changed files with 32953 additions and 20092 deletions
64
packages/frontend/src/ui/_common_/PreferenceRestore.vue
Normal file
64
packages/frontend/src/ui/_common_/PreferenceRestore.vue
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div :class="$style.root">
|
||||
<span :class="$style.icon">
|
||||
<i class="ti ti-info-circle"></i>
|
||||
</span>
|
||||
<span :class="$style.title">{{ i18n.ts._preferencesBackup.backupFound }}</span>
|
||||
<span :class="$style.body"><button class="_textButton" @click="restore">{{ i18n.ts.restore }}</button> | <button class="_textButton" @click="skip">{{ i18n.ts.skip }}</button></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { $i } from '@/i.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { hideRestoreBackupSuggestion, restoreFromCloudBackup } from '@/preferences/utility.js';
|
||||
|
||||
function restore() {
|
||||
restoreFromCloudBackup();
|
||||
}
|
||||
|
||||
function skip() {
|
||||
hideRestoreBackupSuggestion();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
--height: 24px;
|
||||
font-size: 0.85em;
|
||||
display: flex;
|
||||
vertical-align: bottom;
|
||||
width: 100%;
|
||||
line-height: var(--height);
|
||||
height: var(--height);
|
||||
overflow: clip;
|
||||
contain: strict;
|
||||
background: var(--MI_THEME-panel);
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 0 10px;
|
||||
font-weight: bold;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
overflow: clip;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { $i } from '@/account.js';
|
||||
import { $i } from '@/i.js';
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import * as os from '@/os.js';
|
|||
import { instance } from '@/instance.js';
|
||||
import { host } from '@@/js/config.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { $i } from '@/account.js';
|
||||
import { $i } from '@/i.js';
|
||||
|
||||
function toolsMenuItems(): MenuItem[] {
|
||||
return [{
|
||||
|
|
|
|||
|
|
@ -17,18 +17,18 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<TransitionGroup
|
||||
tag="div"
|
||||
:class="[$style.notifications, {
|
||||
[$style.notificationsPosition_leftTop]: defaultStore.state.notificationPosition === 'leftTop',
|
||||
[$style.notificationsPosition_leftBottom]: defaultStore.state.notificationPosition === 'leftBottom',
|
||||
[$style.notificationsPosition_rightTop]: defaultStore.state.notificationPosition === 'rightTop',
|
||||
[$style.notificationsPosition_rightBottom]: defaultStore.state.notificationPosition === 'rightBottom',
|
||||
[$style.notificationsStackAxis_vertical]: defaultStore.state.notificationStackAxis === 'vertical',
|
||||
[$style.notificationsStackAxis_horizontal]: defaultStore.state.notificationStackAxis === 'horizontal',
|
||||
[$style.notificationsPosition_leftTop]: prefer.s.notificationPosition === 'leftTop',
|
||||
[$style.notificationsPosition_leftBottom]: prefer.s.notificationPosition === 'leftBottom',
|
||||
[$style.notificationsPosition_rightTop]: prefer.s.notificationPosition === 'rightTop',
|
||||
[$style.notificationsPosition_rightBottom]: prefer.s.notificationPosition === 'rightBottom',
|
||||
[$style.notificationsStackAxis_vertical]: prefer.s.notificationStackAxis === 'vertical',
|
||||
[$style.notificationsStackAxis_horizontal]: prefer.s.notificationStackAxis === 'horizontal',
|
||||
}]"
|
||||
:moveClass="defaultStore.state.animation ? $style.transition_notification_move : ''"
|
||||
:enterActiveClass="defaultStore.state.animation ? $style.transition_notification_enterActive : ''"
|
||||
:leaveActiveClass="defaultStore.state.animation ? $style.transition_notification_leaveActive : ''"
|
||||
:enterFromClass="defaultStore.state.animation ? $style.transition_notification_enterFrom : ''"
|
||||
:leaveToClass="defaultStore.state.animation ? $style.transition_notification_leaveTo : ''"
|
||||
:moveClass="prefer.s.animation ? $style.transition_notification_move : ''"
|
||||
:enterActiveClass="prefer.s.animation ? $style.transition_notification_enterActive : ''"
|
||||
:leaveActiveClass="prefer.s.animation ? $style.transition_notification_leaveActive : ''"
|
||||
:enterFromClass="prefer.s.animation ? $style.transition_notification_enterFrom : ''"
|
||||
:leaveToClass="prefer.s.animation ? $style.transition_notification_leaveTo : ''"
|
||||
>
|
||||
<div
|
||||
v-for="notification in notifications" :key="notification.id" :class="$style.notification" :style="{
|
||||
|
|
@ -56,13 +56,13 @@ import * as Misskey from 'misskey-js';
|
|||
import { swInject } from './sw-inject.js';
|
||||
import XNotification from './notification.vue';
|
||||
import { popups } from '@/os.js';
|
||||
import { pendingApiRequestsCount } from '@/scripts/misskey-api.js';
|
||||
import { uploads } from '@/scripts/upload.js';
|
||||
import * as sound from '@/scripts/sound.js';
|
||||
import { $i } from '@/account.js';
|
||||
import { pendingApiRequestsCount } from '@/utility/misskey-api.js';
|
||||
import { uploads } from '@/utility/upload.js';
|
||||
import * as sound from '@/utility/sound.js';
|
||||
import { $i } from '@/i.js';
|
||||
import { useStream } from '@/stream.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { defaultStore } from '@/store.js';
|
||||
import { prefer } from '@/preferences.js';
|
||||
import { globalEvents } from '@/events.js';
|
||||
|
||||
const SkOneko = defineAsyncComponent(() => import('@/components/SkOneko.vue'));
|
||||
|
|
@ -75,7 +75,7 @@ const dev = _DEV_;
|
|||
const notifications = ref<Misskey.entities.Notification[]>([]);
|
||||
|
||||
function onNotification(notification: Misskey.entities.Notification, isClient = false) {
|
||||
if (document.visibilityState === 'visible') {
|
||||
if (window.document.visibilityState === 'visible') {
|
||||
if (!isClient && notification.type !== 'test') {
|
||||
// サーバーサイドのテスト通知の際は自動で既読をつけない（テストできないので）
|
||||
useStream().send('readNotification');
|
||||
|
|
|
|||
|
|
@ -53,12 +53,13 @@ import { computed, defineAsyncComponent, toRef } from 'vue';
|
|||
import { openInstanceMenu } from './common.js';
|
||||
import * as os from '@/os.js';
|
||||
import { navbarItemDef } from '@/navbar.js';
|
||||
import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js';
|
||||
import { defaultStore } from '@/store.js';
|
||||
import { prefer } from '@/preferences.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { instance } from '@/instance.js';
|
||||
import { openAccountMenu as openAccountMenu_ } from '@/accounts.js';
|
||||
import { $i } from '@/i.js';
|
||||
|
||||
const menu = toRef(defaultStore.state, 'menu');
|
||||
const menu = toRef(prefer.s, 'menu');
|
||||
const otherMenuItemIndicated = computed(() => {
|
||||
for (const def in navbarItemDef) {
|
||||
if (menu.value.includes(def)) continue;
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div :class="$style.top">
|
||||
<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
|
||||
<button v-tooltip.noDelay.right="instance.name ?? i18n.ts.instance" class="_button" :class="$style.instance" @click="openInstanceMenu">
|
||||
<img :src="instance.sidebarLogoUrl && !iconOnly ? instance.sidebarLogoUrl : instance.iconUrl || '/apple-touch-icon.png'" alt="" :class="instance.sidebarLogoUrl && !iconOnly ? $style.wideInstanceIcon : $style.instanceIcon"/>
|
||||
<img :src="instance.sidebarLogoUrl && !iconOnly ? instance.sidebarLogoUrl : instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="instance.sidebarLogoUrl && !iconOnly ? $style.wideInstanceIcon : $style.instanceIcon" style="viewTransitionName: navbar-serverIcon;"/>
|
||||
</button>
|
||||
</div>
|
||||
<div :class="$style.middle">
|
||||
<MkA v-tooltip.noDelay.right="i18n.ts.timeline" :class="$style.item" :activeClass="$style.active" to="/" exact>
|
||||
<i :class="$style.itemIcon" class="ti ti-home ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.timeline }}</span>
|
||||
<i :class="$style.itemIcon" class="ti ti-home ti-fw" style="viewTransitionName: navbar-homeIcon;"></i><span :class="$style.itemText">{{ i18n.ts.timeline }}</span>
|
||||
</MkA>
|
||||
<template v-for="item in menu">
|
||||
<div v-if="item === '-'" :class="$style.divider"></div>
|
||||
|
|
@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
:to="navbarItemDef[item].to"
|
||||
v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
|
||||
>
|
||||
<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span :class="$style.itemText">{{ navbarItemDef[item].title }}</span>
|
||||
<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]" :style="{ viewTransitionName: 'navbar-item-' + item }"></i><span :class="$style.itemText">{{ navbarItemDef[item].title }}</span>
|
||||
<span v-if="navbarItemDef[item].indicated" :class="$style.itemIndicator" class="_blink">
|
||||
<span v-if="navbarItemDef[item].indicateValue" class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span>
|
||||
<i v-else class="_indicatorCircle"></i>
|
||||
|
|
@ -37,14 +37,14 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
<div :class="$style.divider"></div>
|
||||
<MkA v-if="$i != null && ($i.isAdmin || $i.isModerator)" v-tooltip.noDelay.right="i18n.ts.controlPanel" :class="$style.item" :activeClass="$style.active" to="/admin">
|
||||
<i :class="$style.itemIcon" class="ti ti-dashboard ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.controlPanel }}</span>
|
||||
<i :class="$style.itemIcon" class="ti ti-dashboard ti-fw" style="viewTransitionName: navbar-controlPanel;"></i><span :class="$style.itemText">{{ i18n.ts.controlPanel }}</span>
|
||||
</MkA>
|
||||
<button class="_button" :class="$style.item" @click="more">
|
||||
<i :class="$style.itemIcon" class="ti ti-grid-dots ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.more }}</span>
|
||||
<i :class="$style.itemIcon" class="ti ti-grid-dots ti-fw" style="viewTransitionName: navbar-more;"></i><span :class="$style.itemText">{{ i18n.ts.more }}</span>
|
||||
<span v-if="otherMenuItemIndicated" :class="$style.itemIndicator" class="_blink"><i class="_indicatorCircle"></i></span>
|
||||
</button>
|
||||
<MkA v-tooltip.noDelay.right="i18n.ts.settings" :class="$style.item" :activeClass="$style.active" to="/settings">
|
||||
<i :class="$style.itemIcon" class="ti ti-settings ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.settings }}</span>
|
||||
<i :class="$style.itemIcon" class="ti ti-settings ti-fw" style="viewTransitionName: navbar-settings;"></i><span :class="$style.itemText">{{ i18n.ts.settings }}</span>
|
||||
</MkA>
|
||||
</div>
|
||||
<div :class="$style.bottom">
|
||||
|
|
@ -52,25 +52,39 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<i class="ti ti-pencil ti-fw" :class="$style.postIcon"></i><span :class="$style.postText">{{ i18n.ts.note }}</span>
|
||||
</button>
|
||||
<button v-if="$i != null" v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="_button" :class="[$style.account]" @click="openAccountMenu">
|
||||
<MkAvatar :user="$i" :class="$style.avatar"/><MkAcct class="_nowrap" :class="$style.acct" :user="$i"/>
|
||||
<MkAvatar :user="$i" :class="$style.avatar" style="viewTransitionName: navbar-avatar;"/><MkAcct class="_nowrap" :class="$style.acct" :user="$i"/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button v-if="!forceIconOnly" class="_button" :class="$style.toggleButton" @click="toggleIconOnly">
|
||||
<!--
|
||||
<svg viewBox="0 0 16 48" :class="$style.toggleButtonShape">
|
||||
<g transform="matrix(0.333333,0,0,0.222222,0.000895785,13.3333)">
|
||||
<path d="M23.935,-24C37.223,-24 47.995,-7.842 47.995,12.09C47.995,34.077 47.995,62.07 47.995,84.034C47.995,93.573 45.469,102.721 40.972,109.466C36.475,116.211 30.377,120 24.018,120L23.997,120C10.743,120 -0.003,136.118 -0.003,156C-0.003,156 -0.003,156 -0.003,156L-0.003,-60L-0.003,-59.901C-0.003,-50.379 2.519,-41.248 7.007,-34.515C11.496,-27.782 17.584,-24 23.931,-24C23.932,-24 23.934,-24 23.935,-24Z" style="fill:var(--MI_THEME-navBg);"/>
|
||||
</g>
|
||||
</svg>
|
||||
-->
|
||||
<svg viewBox="0 0 16 64" :class="$style.toggleButtonShape">
|
||||
<g transform="matrix(0.333333,0,0,0.222222,0.000895785,21.3333)">
|
||||
<path d="M47.488,7.995C47.79,10.11 47.943,12.266 47.943,14.429C47.997,26.989 47.997,84 47.997,84C47.997,84 44.018,118.246 23.997,133.5C-0.374,152.07 -0.003,192 -0.003,192L-0.003,-96C-0.003,-96 0.151,-56.216 23.997,-37.5C40.861,-24.265 46.043,-1.243 47.488,7.995Z" style="fill:var(--MI_THEME-navBg);"/>
|
||||
</g>
|
||||
</svg>
|
||||
<i :class="'ti ' + `ti-chevron-${ iconOnly ? 'right' : 'left' }`" style="font-size: 12px; margin-left: -8px;"></i>
|
||||
</button>
|
||||
|
||||
<!--
|
||||
<svg viewBox="0 0 16 48" :class="$style.subButtonShape">
|
||||
<g transform="matrix(0.333333,0,0,0.222222,0.000895785,13.3333)">
|
||||
<path d="M23.935,-24C37.223,-24 47.995,-7.842 47.995,12.09C47.995,34.077 47.995,62.07 47.995,84.034C47.995,93.573 45.469,102.721 40.972,109.466C36.475,116.211 30.377,120 24.018,120L23.997,120C10.743,120 -0.003,136.118 -0.003,156C-0.003,156 -0.003,156 -0.003,156L-0.003,-60L-0.003,-59.901C-0.003,-50.379 2.519,-41.248 7.007,-34.515C11.496,-27.782 17.584,-24 23.931,-24C23.932,-24 23.934,-24 23.935,-24Z" style="fill:var(--MI_THEME-navBg);"/>
|
||||
</g>
|
||||
</svg>
|
||||
-->
|
||||
|
||||
<div v-if="!forceIconOnly" :class="$style.subButtons">
|
||||
<div :class="[$style.subButton, $style.menuEditButton]">
|
||||
<svg viewBox="0 0 16 64" :class="$style.subButtonShape">
|
||||
<g transform="matrix(0.333333,0,0,0.222222,0.000895785,21.3333)">
|
||||
<path d="M47.488,7.995C47.79,10.11 47.943,12.266 47.943,14.429C47.997,26.989 47.997,84 47.997,84C47.997,84 44.018,118.246 23.997,133.5C-0.374,152.07 -0.003,192 -0.003,192L-0.003,-96C-0.003,-96 0.151,-56.216 23.997,-37.5C40.861,-24.265 46.043,-1.243 47.488,7.995Z" style="fill:var(--MI_THEME-navBg);"/>
|
||||
</g>
|
||||
</svg>
|
||||
<button class="_button" :class="$style.subButtonClickable" @click="menuEdit"><i :class="$style.subButtonIcon" class="ti ti-settings-2"></i></button>
|
||||
</div>
|
||||
<div :class="$style.subButtonGapFill"></div>
|
||||
<div :class="$style.subButtonGapFillDivider"></div>
|
||||
<div :class="[$style.subButton, $style.toggleButton]">
|
||||
<svg viewBox="0 0 16 64" :class="$style.subButtonShape">
|
||||
<g transform="matrix(0.333333,0,0,0.222222,0.000895785,21.3333)">
|
||||
<path d="M47.488,7.995C47.79,10.11 47.943,12.266 47.943,14.429C47.997,26.989 47.997,84 47.997,84C47.997,84 44.018,118.246 23.997,133.5C-0.374,152.07 -0.003,192 -0.003,192L-0.003,-96C-0.003,-96 0.151,-56.216 23.997,-37.5C40.861,-24.265 46.043,-1.243 47.488,7.995Z" style="fill:var(--MI_THEME-navBg);"/>
|
||||
</g>
|
||||
</svg>
|
||||
<button class="_button" :class="$style.subButtonClickable" @click="toggleIconOnly"><i v-if="iconOnly" class="ti ti-chevron-right" :class="$style.subButtonIcon"></i><i v-else class="ti ti-chevron-left" :class="$style.subButtonIcon"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -79,18 +93,23 @@ import { computed, defineAsyncComponent, ref, watch } from 'vue';
|
|||
import { openInstanceMenu } from './common.js';
|
||||
import * as os from '@/os.js';
|
||||
import { navbarItemDef } from '@/navbar.js';
|
||||
import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js';
|
||||
import { defaultStore } from '@/store.js';
|
||||
import { store } from '@/store.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { instance } from '@/instance.js';
|
||||
import { getHTMLElementOrNull } from '@/scripts/get-dom-node-or-null.js';
|
||||
import { getHTMLElementOrNull } from '@/utility/get-dom-node-or-null.js';
|
||||
import { useRouter } from '@/router.js';
|
||||
import { prefer } from '@/preferences.js';
|
||||
import { openAccountMenu as openAccountMenu_ } from '@/accounts.js';
|
||||
import { $i } from '@/i.js';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const forceIconOnly = ref(window.innerWidth <= 1279);
|
||||
const iconOnly = computed(() => {
|
||||
return forceIconOnly.value || (defaultStore.reactiveState.menuDisplay.value === 'sideIcon');
|
||||
return forceIconOnly.value || (store.r.menuDisplay.value === 'sideIcon');
|
||||
});
|
||||
|
||||
const menu = computed(() => defaultStore.state.menu);
|
||||
const menu = computed(() => prefer.s.menu);
|
||||
const otherMenuItemIndicated = computed(() => {
|
||||
for (const def in navbarItemDef) {
|
||||
if (menu.value.includes(def)) continue;
|
||||
|
|
@ -105,12 +124,18 @@ function calcViewState() {
|
|||
|
||||
window.addEventListener('resize', calcViewState);
|
||||
|
||||
watch(defaultStore.reactiveState.menuDisplay, () => {
|
||||
watch(store.r.menuDisplay, () => {
|
||||
calcViewState();
|
||||
});
|
||||
|
||||
function toggleIconOnly() {
|
||||
defaultStore.set('menuDisplay', iconOnly.value ? 'sideFull' : 'sideIcon');
|
||||
if (window.document.startViewTransition && prefer.s.animation) {
|
||||
window.document.startViewTransition(() => {
|
||||
store.set('menuDisplay', iconOnly.value ? 'sideFull' : 'sideIcon');
|
||||
});
|
||||
} else {
|
||||
store.set('menuDisplay', iconOnly.value ? 'sideFull' : 'sideIcon');
|
||||
}
|
||||
}
|
||||
|
||||
function openAccountMenu(ev: MouseEvent) {
|
||||
|
|
@ -128,6 +153,10 @@ function more(ev: MouseEvent) {
|
|||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
function menuEdit() {
|
||||
router.push('/settings/navbar');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
|
|
@ -136,6 +165,8 @@ function more(ev: MouseEvent) {
|
|||
--nav-icon-only-width: 80px;
|
||||
--nav-bg-transparent: color(from var(--MI_THEME-navBg) srgb r g b / 0.5);
|
||||
|
||||
--subButtonWidth: 20px;
|
||||
|
||||
flex: 0 0 var(--nav-width);
|
||||
width: var(--nav-width);
|
||||
box-sizing: border-box;
|
||||
|
|
@ -171,23 +202,80 @@ function more(ev: MouseEvent) {
|
|||
direction: ltr;
|
||||
}
|
||||
|
||||
.toggleButton {
|
||||
.subButtons {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: var(--nav-width);
|
||||
bottom: 80px;
|
||||
z-index: 1001;
|
||||
width: 16px;
|
||||
height: 64px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.toggleButtonShape {
|
||||
.subButton {
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 1002;
|
||||
width: var(--subButtonWidth);
|
||||
height: 50px;
|
||||
box-sizing: border-box;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.subButtonShape {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 16px;
|
||||
margin: auto;
|
||||
width: var(--subButtonWidth);
|
||||
height: calc(var(--subButtonWidth) * 4);
|
||||
}
|
||||
|
||||
.subButtonClickable {
|
||||
position: absolute;
|
||||
display: block;
|
||||
max-width: unset;
|
||||
width: 24px;
|
||||
height: 42px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: -4px;
|
||||
margin: auto;
|
||||
font-size: 10px;
|
||||
|
||||
&:hover {
|
||||
color: var(--MI_THEME-fgHighlighted);
|
||||
|
||||
.subButtonIcon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subButtonIcon {
|
||||
margin-left: -4px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.subButtonGapFill {
|
||||
position: relative;
|
||||
z-index: 1001;
|
||||
width: var(--subButtonWidth);
|
||||
height: 64px;
|
||||
margin-top: -32px;
|
||||
margin-bottom: -32px;
|
||||
pointer-events: none;
|
||||
background: var(--MI_THEME-navBg);
|
||||
}
|
||||
|
||||
.subButtonGapFillDivider {
|
||||
position: relative;
|
||||
z-index: 1010;
|
||||
margin-left: -2px;
|
||||
width: 14px;
|
||||
height: 1px;
|
||||
background: var(--MI_THEME-divider);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.root:not(.iconOnly) {
|
||||
|
|
@ -426,7 +514,7 @@ function more(ev: MouseEvent) {
|
|||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.toggleButton {
|
||||
.subButtons {
|
||||
left: var(--nav-width);
|
||||
}
|
||||
}
|
||||
|
|
@ -630,7 +718,7 @@ function more(ev: MouseEvent) {
|
|||
}
|
||||
}
|
||||
|
||||
.toggleButton {
|
||||
.subButtons {
|
||||
left: var(--nav-icon-only-width);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,9 +34,9 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
import { ref } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import MarqueeText from '@/components/MkMarquee.vue';
|
||||
import { misskeyApi } from '@/scripts/misskey-api.js';
|
||||
import { misskeyApi } from '@/utility/misskey-api.js';
|
||||
import { useInterval } from '@@/js/use-interval.js';
|
||||
import { getProxiedImageUrlNullable } from '@/scripts/media-proxy.js';
|
||||
import { getProxiedImageUrlNullable } from '@/utility/media-proxy.js';
|
||||
|
||||
const props = defineProps<{
|
||||
display?: 'marquee' | 'oneByOne';
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ import { ref } from 'vue';
|
|||
import * as Misskey from 'misskey-js';
|
||||
import MarqueeText from '@/components/MkMarquee.vue';
|
||||
import { useInterval } from '@@/js/use-interval.js';
|
||||
import { shuffle } from '@/scripts/shuffle.js';
|
||||
import { shuffle } from '@/utility/shuffle.js';
|
||||
|
||||
const props = defineProps<{
|
||||
url?: string;
|
||||
|
|
|
|||
|
|
@ -34,9 +34,9 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
import { ref, watch } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import MarqueeText from '@/components/MkMarquee.vue';
|
||||
import { misskeyApi } from '@/scripts/misskey-api.js';
|
||||
import { misskeyApi } from '@/utility/misskey-api.js';
|
||||
import { useInterval } from '@@/js/use-interval.js';
|
||||
import { getNoteSummary } from '@/scripts/get-note-summary.js';
|
||||
import { getNoteSummary } from '@/utility/get-note-summary.js';
|
||||
import { notePage } from '@/filters/note.js';
|
||||
|
||||
const props = defineProps<{
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<template>
|
||||
<div :class="$style.root">
|
||||
<div
|
||||
v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" :class="[$style.item, { [$style.black]: x.black,
|
||||
v-for="x in prefer.r.statusbars.value" :key="x.id" :class="[$style.item, { [$style.black]: x.black,
|
||||
[$style.verySmall]: x.size === 'verySmall',
|
||||
[$style.small]: x.size === 'small',
|
||||
[$style.large]: x.size === 'large',
|
||||
|
|
@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<script lang="ts" setup>
|
||||
import { defineAsyncComponent } from 'vue';
|
||||
import { instance } from '@/instance.js';
|
||||
import { defaultStore } from '@/store.js';
|
||||
import { prefer } from '@/preferences.js';
|
||||
const XRss = defineAsyncComponent(() => import('./statusbar-rss.vue'));
|
||||
const XFederation = defineAsyncComponent(() => import('./statusbar-federation.vue'));
|
||||
const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue'));
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<div v-if="hasDisconnected && defaultStore.state.serverDisconnectedBehavior === 'quiet'" :class="$style.root" class="_panel _shadow" @click="resetDisconnected">
|
||||
<div v-if="hasDisconnected && prefer.s.serverDisconnectedBehavior === 'quiet'" :class="$style.root" class="_panel _shadow" @click="resetDisconnected">
|
||||
<div><i class="ti ti-alert-triangle"></i> {{ i18n.ts.disconnectedFromServer }}</div>
|
||||
<div :class="$style.command" class="_buttons">
|
||||
<MkButton small primary @click="reload">{{ i18n.ts.reload }}</MkButton>
|
||||
|
|
@ -19,7 +19,7 @@ import { useStream } from '@/stream.js';
|
|||
import { i18n } from '@/i18n.js';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import * as os from '@/os.js';
|
||||
import { defaultStore } from '@/store.js';
|
||||
import { prefer } from '@/preferences.js';
|
||||
|
||||
const zIndex = os.claimZIndex('high');
|
||||
|
||||
|
|
@ -34,7 +34,7 @@ function resetDisconnected() {
|
|||
}
|
||||
|
||||
function reload() {
|
||||
location.reload();
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
useStream().on('_disconnected_', onDisconnected);
|
||||
|
|
|
|||
|
|
@ -4,11 +4,12 @@
|
|||
*/
|
||||
|
||||
import { post } from '@/os.js';
|
||||
import { misskeyApi } from '@/scripts/misskey-api.js';
|
||||
import { $i, login } from '@/account.js';
|
||||
import { getAccountFromId } from '@/scripts/get-account-from-id.js';
|
||||
import { deepClone } from '@/scripts/clone.js';
|
||||
import { mainRouter } from '@/router/main.js';
|
||||
import { misskeyApi } from '@/utility/misskey-api.js';
|
||||
import { $i } from '@/i.js';
|
||||
import { getAccountFromId } from '@/utility/get-account-from-id.js';
|
||||
import { deepClone } from '@/utility/clone.js';
|
||||
import { mainRouter } from '@/router.js';
|
||||
import { login } from '@/accounts.js';
|
||||
|
||||
export function swInject() {
|
||||
navigator.serviceWorker.addEventListener('message', async ev => {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import * as os from '@/os.js';
|
||||
import { uploads } from '@/scripts/upload.js';
|
||||
import { uploads } from '@/utility/upload.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
|
||||
const zIndex = os.claimZIndex('high');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue