feat(frontend): 通知の表示をカスタマイズできるように
This commit is contained in:
syuilo
parent
cc27c1486d
commit
614f12386e
5 changed files with 129 additions and 29 deletions
|
|
@ -24,6 +24,7 @@
|
|||
（デスクトップ表示ではusernameの右側のボタンからも追加可能）
|
||||
|
||||
### Client
|
||||
- 通知の表示をカスタマイズできるように
|
||||
- コントロールパネルのカスタム絵文字ページおよびaboutのカスタム絵文字の検索インプットで、`:emojiname1::emojiname2:`のように検索して絵文字を検索できるように
|
||||
* 絵文字ピッカーから入力可能になります
|
||||
- データセーバーモードを追加
|
||||
|
|
|
|||
|
|
@ -1001,6 +1001,15 @@ accountMoved: "このユーザーは新しいアカウントに引っ越しま
|
|||
forceShowAds: "常に広告を表示する"
|
||||
addMemo: "メモを追加"
|
||||
editMemo: "メモを編集"
|
||||
notificationDisplay: "通知の表示"
|
||||
leftTop: "左上"
|
||||
rightTop: "右上"
|
||||
leftBottom: "左下"
|
||||
rightBottom: "右下"
|
||||
stackAxis: "スタック方向"
|
||||
vertical: "縦"
|
||||
horizontal: "横"
|
||||
position: "位置"
|
||||
|
||||
_accountMigration:
|
||||
moveTo: "このアカウントを新しいアカウントに引っ越す"
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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を同期
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue