enhance(client): ノートの操作部をホバー時のみ表示するオプション

This commit is contained in:
syuilo 2023-02-28 20:53:32 +09:00
parent 83a67606a9
commit 7c3a390763
6 changed files with 45 additions and 8 deletions

View File

@ -15,6 +15,7 @@ You should also include the user name that made the change.
### Improvements ### Improvements
- プッシュ通知でカスタム絵文字リアクションを表示できるように - プッシュ通知でカスタム絵文字リアクションを表示できるように
- アンテナでCWも検索対象にするように - アンテナでCWも検索対象にするように
- ノートの操作部をホバー時のみ表示するオプションを追加
### Bugfixes ### Bugfixes
- 外部メディアプロキシ使用時にアバタークロップができない問題を修正 - 外部メディアプロキシ使用時にアバタークロップができない問題を修正

View File

@ -457,6 +457,7 @@ aboutX: "{x}について"
emojiStyle: "絵文字のスタイル" emojiStyle: "絵文字のスタイル"
native: "ネイティブ" native: "ネイティブ"
disableDrawer: "メニューをドロワーで表示しない" disableDrawer: "メニューをドロワーで表示しない"
showNoteActionsOnlyHover: "ノートの操作部をホバー時のみ表示する"
noHistory: "履歴はありません" noHistory: "履歴はありません"
signinHistory: "ログイン履歴" signinHistory: "ログイン履歴"
enableAdvancedMfm: "高度なMFMを有効にする" enableAdvancedMfm: "高度なMFMを有効にする"

View File

@ -4,7 +4,7 @@
v-show="!isDeleted" v-show="!isDeleted"
ref="el" ref="el"
v-hotkey="keymap" v-hotkey="keymap"
:class="$style.root" :class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover }]"
:tabindex="!isDeleted ? '-1' : undefined" :tabindex="!isDeleted ? '-1' : undefined"
> >
<MkNoteSub v-if="appearNote.reply && !renoteCollapsed" :note="appearNote.reply" :class="$style.replyTo"/> <MkNoteSub v-if="appearNote.reply && !renoteCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
@ -76,7 +76,6 @@
</div> </div>
<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA> <MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
</div> </div>
<footer :class="$style.footer">
<MkReactionsViewer :note="appearNote" :max-number="16"> <MkReactionsViewer :note="appearNote" :max-number="16">
<template #more> <template #more>
<button class="_button" :class="$style.reactionDetailsButton" @click="showReactions"> <button class="_button" :class="$style.reactionDetailsButton" @click="showReactions">
@ -84,6 +83,7 @@
</button> </button>
</template> </template>
</MkReactionsViewer> </MkReactionsViewer>
<footer :class="$style.footer">
<button :class="$style.footerButton" class="_button" @click="reply()"> <button :class="$style.footerButton" class="_button" @click="reply()">
<i class="ti ti-arrow-back-up"></i> <i class="ti ti-arrow-back-up"></i>
<p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ appearNote.repliesCount }}</p> <p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ appearNote.repliesCount }}</p>
@ -443,6 +443,33 @@ function showReactions(): void {
&:hover > .article > .main > .footer > .footerButton { &:hover > .article > .main > .footer > .footerButton {
opacity: 1; opacity: 1;
} }
&.showActionsOnlyHover {
.footer {
visibility: hidden;
position: absolute;
top: 12px;
right: 12px;
padding: 0 4px;
background: var(--popup);
border-radius: 6px;
box-shadow: 0px 4px 32px var(--shadow);
}
.footerButton {
font-size: 80%;
&:not(:last-child) {
margin-right: 6px;
}
}
}
&.showActionsOnlyHover:hover {
.footer {
visibility: visible;
}
}
} }
.tip { .tip {

View File

@ -45,6 +45,7 @@
<div class="_gaps_m"> <div class="_gaps_m">
<div class="_gaps_s"> <div class="_gaps_s">
<MkSwitch v-model="showNoteActionsOnlyHover">{{ i18n.ts.showNoteActionsOnlyHover }}</MkSwitch>
<MkSwitch v-model="collapseRenotes">{{ i18n.ts.collapseRenotes }}</MkSwitch> <MkSwitch v-model="collapseRenotes">{{ i18n.ts.collapseRenotes }}</MkSwitch>
<MkSwitch v-model="advancedMfm">{{ i18n.ts.enableAdvancedMfm }}</MkSwitch> <MkSwitch v-model="advancedMfm">{{ i18n.ts.enableAdvancedMfm }}</MkSwitch>
<MkSwitch v-if="advancedMfm" v-model="animatedMfm">{{ i18n.ts.enableAnimatedMfm }}</MkSwitch> <MkSwitch v-if="advancedMfm" v-model="animatedMfm">{{ i18n.ts.enableAnimatedMfm }}</MkSwitch>
@ -140,6 +141,7 @@ async function reloadAsk() {
const overridedDeviceKind = computed(defaultStore.makeGetterSetter('overridedDeviceKind')); const overridedDeviceKind = computed(defaultStore.makeGetterSetter('overridedDeviceKind'));
const serverDisconnectedBehavior = computed(defaultStore.makeGetterSetter('serverDisconnectedBehavior')); const serverDisconnectedBehavior = computed(defaultStore.makeGetterSetter('serverDisconnectedBehavior'));
const showNoteActionsOnlyHover = computed(defaultStore.makeGetterSetter('showNoteActionsOnlyHover'));
const collapseRenotes = computed(defaultStore.makeGetterSetter('collapseRenotes')); const collapseRenotes = computed(defaultStore.makeGetterSetter('collapseRenotes'));
const reduceAnimation = computed(defaultStore.makeGetterSetter('animation', v => !v, v => !v)); const reduceAnimation = computed(defaultStore.makeGetterSetter('animation', v => !v, v => !v));
const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEffectForModal')); const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEffectForModal'));

View File

@ -59,6 +59,8 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
'tl', 'tl',
'overridedDeviceKind', 'overridedDeviceKind',
'serverDisconnectedBehavior', 'serverDisconnectedBehavior',
'collapseRenotes',
'showNoteActionsOnlyHover',
'nsfw', 'nsfw',
'animation', 'animation',
'animatedMfm', 'animatedMfm',

View File

@ -273,6 +273,10 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device', where: 'device',
default: 5, default: 5,
}, },
showNoteActionsOnlyHover: {
where: 'device',
default: false,
},
aiChanMode: { aiChanMode: {
where: 'device', where: 'device',
default: false, default: false,