feat(frontend): 通知の表示をカスタマイズできるように

This commit is contained in:
syuilo 2023-04-17 13:12:58 +09:00
parent cc27c1486d
commit 614f12386e
5 changed files with 129 additions and 29 deletions

View file

@ -24,6 +24,7 @@
デスクトップ表示ではusernameの右側のボタンからも追加可能
### Client
- 通知の表示をカスタマイズできるように
- コントロールパネルのカスタム絵文字ページおよびaboutのカスタム絵文字の検索インプットで、`:emojiname1::emojiname2:`のように検索して絵文字を検索できるように
* 絵文字ピッカーから入力可能になります
- データセーバーモードを追加

View file

@ -1001,6 +1001,15 @@ accountMoved: "このユーザーは新しいアカウントに引っ越しま
forceShowAds: "常に広告を表示する"
addMemo: "メモを追加"
editMemo: "メモを編集"
notificationDisplay: "通知の表示"
leftTop: "左上"
rightTop: "右上"
leftBottom: "左下"
rightBottom: "右下"
stackAxis: "スタック方向"
vertical: "縦"
horizontal: "横"
position: "位置"
_accountMigration:
moveTo: "このアカウントを新しいアカウントに引っ越す"

View file

@ -92,6 +92,26 @@
</div>
</FormSection>
<FormSection>
<template #label>{{ i18n.ts.notificationDisplay }}</template>
<div class="_gaps_m">
<MkRadios v-model="notificationPosition">
<template #label>{{ i18n.ts.position }}</template>
<option value="leftTop"><i class="ti ti-align-box-left-top"></i> {{ i18n.ts.leftTop }}</option>
<option value="rightTop"><i class="ti ti-align-box-right-top"></i> {{ i18n.ts.rightTop }}</option>
<option value="leftBottom"><i class="ti ti-align-box-left-bottom"></i> {{ i18n.ts.leftBottom }}</option>
<option value="rightBottom"><i class="ti ti-align-box-right-bottom"></i> {{ i18n.ts.rightBottom }}</option>
</MkRadios>
<MkRadios v-model="notificationStackAxis">
<template #label>{{ i18n.ts.stackAxis }}</template>
<option value="vertical"><i class="ti ti-carousel-vertical"></i> {{ i18n.ts.vertical }}</option>
<option value="horizontal"><i class="ti ti-carousel-horizontal"></i> {{ i18n.ts.horizontal }}</option>
</MkRadios>
</div>
</FormSection>
<FormSection>
<MkSwitch v-model="aiChanMode">{{ i18n.ts.aiChanMode }}</MkSwitch>
</FormSection>
@ -181,6 +201,8 @@ const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('
const squareAvatars = computed(defaultStore.makeGetterSetter('squareAvatars'));
const aiChanMode = computed(defaultStore.makeGetterSetter('aiChanMode'));
const mediaListWithOneImageAppearance = computed(defaultStore.makeGetterSetter('mediaListWithOneImageAppearance'));
const notificationPosition = computed(defaultStore.makeGetterSetter('notificationPosition'));
const notificationStackAxis = computed(defaultStore.makeGetterSetter('notificationStackAxis'));
watch(lang, () => {
miLocalStorage.setItem('lang', lang.value as string);

View file

@ -314,6 +314,14 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device',
default: 'expand' as 'expand' | '16_9' | '1_1' | '2_3',
},
notificationPosition: {
where: 'device',
default: 'rightBottom' as 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom',
},
notificationStackAxis: {
where: 'device',
default: 'horizontal' as 'vertical' | 'horizontal',
},
}));
// TODO: 他のタブと永続化されたstateを同期

View file

@ -10,14 +10,16 @@
<XUpload v-if="uploads.length > 0"/>
<TransitionGroup
tag="div" :class="$style.notifications"
tag="div" :class="[$style.notifications, $style[`notificationsPosition-${defaultStore.state.notificationPosition}`], $style[`notificationsStackAxis-${defaultStore.state.notificationStackAxis}`]]"
:move-class="defaultStore.state.animation ? $style.transition_notification_move : ''"
:enter-active-class="defaultStore.state.animation ? $style.transition_notification_enterActive : ''"
:leave-active-class="defaultStore.state.animation ? $style.transition_notification_leaveActive : ''"
:enter-from-class="defaultStore.state.animation ? $style.transition_notification_enterFrom : ''"
:leave-to-class="defaultStore.state.animation ? $style.transition_notification_leaveTo : ''"
>
<XNotification v-for="notification in notifications" :key="notification.id" :notification="notification" :class="$style.notification"/>
<div v-for="notification in notifications" :key="notification.id" :class="$style.notification">
<XNotification :notification="notification"/>
</div>
</TransitionGroup>
<XStreamIndicator/>
@ -30,7 +32,7 @@
</template>
<script lang="ts" setup>
import { defineAsyncComponent } from 'vue';
import { defineAsyncComponent, ref } from 'vue';
import * as misskey from 'misskey-js';
import { swInject } from './sw-inject';
import XNotification from './notification.vue';
@ -85,7 +87,10 @@ if ($i) {
.transition_notification_leaveActive {
transition: opacity 0.3s, transform 0.3s !important;
}
.transition_notification_enterFrom,
.transition_notification_enterFrom {
opacity: 0;
transform: translateX(250px);
}
.transition_notification_leaveTo {
opacity: 0;
transform: translateX(-250px);
@ -94,35 +99,90 @@ if ($i) {
.notifications {
position: fixed;
z-index: 3900000;
left: 0;
width: 250px;
top: 32px;
padding: 0 32px;
padding: 0 var(--margin);
pointer-events: none;
container-type: inline-size;
display: flex;
&.notificationsPosition-leftTop {
top: var(--margin);
left: 0;
}
&.notificationsPosition-rightTop {
top: var(--margin);
right: 0;
}
&.notificationsPosition-leftBottom {
bottom: calc(var(--minBottomSpacing) + var(--margin));
left: 0;
}
&.notificationsPosition-rightBottom {
bottom: calc(var(--minBottomSpacing) + var(--margin));
right: 0;
}
&.notificationsStackAxis-vertical {
width: 250px;
&.notificationsPosition-leftTop,
&.notificationsPosition-rightTop {
flex-direction: column;
.notification {
& + .notification {
margin-top: 8px;
}
}
}
&.notificationsPosition-leftBottom,
&.notificationsPosition-rightBottom {
flex-direction: column-reverse;
.notification {
& + .notification {
margin-bottom: 8px;
}
}
}
}
&.notificationsStackAxis-horizontal {
width: 100%;
&.notificationsPosition-leftTop,
&.notificationsPosition-leftBottom {
flex-direction: row;
.notification {
& + .notification {
margin-left: 8px;
}
}
}
&.notificationsPosition-rightTop,
&.notificationsPosition-rightBottom {
flex-direction: row-reverse;
.notification {
& + .notification {
margin-right: 8px;
}
}
}
.notification {
width: 250px;
flex-shrink: 0;
}
}
}
.notification {
& + .notification {
margin-top: 8px;
}
}
@media (max-width: 500px) {
.notifications {
top: initial;
bottom: calc(var(--minBottomSpacing) + var(--margin));
padding: 0 var(--margin);
display: flex;
flex-direction: column-reverse;
}
.notification {
& + .notification {
margin-top: 0;
margin-bottom: 8px;
}
}
container-type: inline-size;
}
</style>