forked from mirror/misskey
enhance(client): ノートの操作部をホバー時のみ表示するオプション
This commit is contained in:
parent
83a67606a9
commit
7c3a390763
@ -15,6 +15,7 @@ You should also include the user name that made the change.
|
|||||||
### Improvements
|
### Improvements
|
||||||
- プッシュ通知でカスタム絵文字リアクションを表示できるように
|
- プッシュ通知でカスタム絵文字リアクションを表示できるように
|
||||||
- アンテナでCWも検索対象にするように
|
- アンテナでCWも検索対象にするように
|
||||||
|
- ノートの操作部をホバー時のみ表示するオプションを追加
|
||||||
|
|
||||||
### Bugfixes
|
### Bugfixes
|
||||||
- 外部メディアプロキシ使用時にアバタークロップができない問題を修正
|
- 外部メディアプロキシ使用時にアバタークロップができない問題を修正
|
||||||
|
@ -457,6 +457,7 @@ aboutX: "{x}について"
|
|||||||
emojiStyle: "絵文字のスタイル"
|
emojiStyle: "絵文字のスタイル"
|
||||||
native: "ネイティブ"
|
native: "ネイティブ"
|
||||||
disableDrawer: "メニューをドロワーで表示しない"
|
disableDrawer: "メニューをドロワーで表示しない"
|
||||||
|
showNoteActionsOnlyHover: "ノートの操作部をホバー時のみ表示する"
|
||||||
noHistory: "履歴はありません"
|
noHistory: "履歴はありません"
|
||||||
signinHistory: "ログイン履歴"
|
signinHistory: "ログイン履歴"
|
||||||
enableAdvancedMfm: "高度なMFMを有効にする"
|
enableAdvancedMfm: "高度なMFMを有効にする"
|
||||||
|
@ -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,14 +76,14 @@
|
|||||||
</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>
|
||||||
|
<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">
|
<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()">
|
<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 {
|
||||||
|
@ -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'));
|
||||||
|
@ -59,6 +59,8 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
|
|||||||
'tl',
|
'tl',
|
||||||
'overridedDeviceKind',
|
'overridedDeviceKind',
|
||||||
'serverDisconnectedBehavior',
|
'serverDisconnectedBehavior',
|
||||||
|
'collapseRenotes',
|
||||||
|
'showNoteActionsOnlyHover',
|
||||||
'nsfw',
|
'nsfw',
|
||||||
'animation',
|
'animation',
|
||||||
'animatedMfm',
|
'animatedMfm',
|
||||||
|
@ -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,
|
||||||
|
Loading…
Reference in New Issue
Block a user