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
- プッシュ通知でカスタム絵文字リアクションを表示できるように
- アンテナでCWも検索対象にするように
- ノートの操作部をホバー時のみ表示するオプションを追加
### Bugfixes
- 外部メディアプロキシ使用時にアバタークロップができない問題を修正

View file

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

View file

@ -4,7 +4,7 @@
v-show="!isDeleted"
ref="el"
v-hotkey="keymap"
:class="$style.root"
:class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover }]"
:tabindex="!isDeleted ? '-1' : undefined"
>
<MkNoteSub v-if="appearNote.reply && !renoteCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
@ -76,7 +76,6 @@
</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>
</div>
<footer :class="$style.footer">
<MkReactionsViewer :note="appearNote" :max-number="16">
<template #more>
<button class="_button" :class="$style.reactionDetailsButton" @click="showReactions">
@ -84,6 +83,7 @@
</button>
</template>
</MkReactionsViewer>
<footer :class="$style.footer">
<button :class="$style.footerButton" class="_button" @click="reply()">
<i class="ti ti-arrow-back-up"></i>
<p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ appearNote.repliesCount }}</p>
@ -443,6 +443,33 @@ function showReactions(): void {
&:hover > .article > .main > .footer > .footerButton {
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 {

View file

@ -45,6 +45,7 @@
<div class="_gaps_m">
<div class="_gaps_s">
<MkSwitch v-model="showNoteActionsOnlyHover">{{ i18n.ts.showNoteActionsOnlyHover }}</MkSwitch>
<MkSwitch v-model="collapseRenotes">{{ i18n.ts.collapseRenotes }}</MkSwitch>
<MkSwitch v-model="advancedMfm">{{ i18n.ts.enableAdvancedMfm }}</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 serverDisconnectedBehavior = computed(defaultStore.makeGetterSetter('serverDisconnectedBehavior'));
const showNoteActionsOnlyHover = computed(defaultStore.makeGetterSetter('showNoteActionsOnlyHover'));
const collapseRenotes = computed(defaultStore.makeGetterSetter('collapseRenotes'));
const reduceAnimation = computed(defaultStore.makeGetterSetter('animation', v => !v, v => !v));
const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEffectForModal'));

View file

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

View file

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