diff --git a/CHANGELOG.md b/CHANGELOG.md index c5e8ac11f7..6be07e3244 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ You should also include the user name that made the change. ### Improvements - プッシュ通知でカスタム絵文字リアクションを表示できるように - アンテナでCWも検索対象にするように +- ノートの操作部をホバー時のみ表示するオプションを追加 ### Bugfixes - 外部メディアプロキシ使用時にアバタークロップができない問題を修正 diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 75b09698e8..ef5e1853b8 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -457,6 +457,7 @@ aboutX: "{x}について" emojiStyle: "絵文字のスタイル" native: "ネイティブ" disableDrawer: "メニューをドロワーで表示しない" +showNoteActionsOnlyHover: "ノートの操作部をホバー時のみ表示する" noHistory: "履歴はありません" signinHistory: "ログイン履歴" enableAdvancedMfm: "高度なMFMを有効にする" diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 1040dac12e..a3237c5e93 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -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,14 +76,14 @@ </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> + <MkReactionsViewer :note="appearNote" :max-number="16"> + <template #more> + <button class="_button" :class="$style.reactionDetailsButton" @click="showReactions"> + {{ i18n.ts.more }} + </button> + </template> + </MkReactionsViewer> <footer :class="$style.footer"> - <MkReactionsViewer :note="appearNote" :max-number="16"> - <template #more> - <button class="_button" :class="$style.reactionDetailsButton" @click="showReactions"> - {{ i18n.ts.more }} - </button> - </template> - </MkReactionsViewer> <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 { diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue index 1b492b15cf..a578c5c747 100644 --- a/packages/frontend/src/pages/settings/general.vue +++ b/packages/frontend/src/pages/settings/general.vue @@ -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')); diff --git a/packages/frontend/src/pages/settings/preferences-backups.vue b/packages/frontend/src/pages/settings/preferences-backups.vue index 0512a8d0c9..83ce0e6c07 100644 --- a/packages/frontend/src/pages/settings/preferences-backups.vue +++ b/packages/frontend/src/pages/settings/preferences-backups.vue @@ -59,6 +59,8 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [ 'tl', 'overridedDeviceKind', 'serverDisconnectedBehavior', + 'collapseRenotes', + 'showNoteActionsOnlyHover', 'nsfw', 'animation', 'animatedMfm', diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts index 54c159ed6b..fd2f2523c9 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -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,