enhance(frontend): リアクションの表示サイズをより大きくできるように

This commit is contained in:
syuilo 2023-09-10 17:16:50 +09:00
parent 55d392818c
commit 295665a177
6 changed files with 37 additions and 18 deletions

View File

@ -30,7 +30,6 @@
- メニューのスイッチの動作を改善 - メニューのスイッチの動作を改善
- 絵文字ピッカーの検索の表示件数を100件に増加 - 絵文字ピッカーの検索の表示件数を100件に増加
- 投稿フォームのプレビューの表示状態を記憶するように - 投稿フォームのプレビューの表示状態を記憶するように
- ノート詳細ページ読み込み時のパフォーマンスを改善
- AiScriptからMisskeyサーバーAPIを呼び出す際の制限を撤廃 - AiScriptからMisskeyサーバーAPIを呼び出す際の制限を撤廃
- Playで直接投稿フォームを埋め込めるように(`Ui:C:postForm`) - Playで直接投稿フォームを埋め込めるように(`Ui:C:postForm`)
- Enhance: ユーザーメニューでスイッチでユーザーリストに追加・削除できるように - Enhance: ユーザーメニューでスイッチでユーザーリストに追加・削除できるように
@ -41,6 +40,8 @@
- Enhance: Renoteを管理者権限で削除可能に - Enhance: Renoteを管理者権限で削除可能に
- `$[rainbow ]`記法が、動きのあるMFMが無効になっていても使用できるようになりました - `$[rainbow ]`記法が、動きのあるMFMが無効になっていても使用できるようになりました
- Playの操作を行うAPI TokenをAPIコンソールから発行できるように - Playの操作を行うAPI TokenをAPIコンソールから発行できるように
- リアクションの表示サイズをより大きくできるように
- ノート詳細ページ読み込み時のパフォーマンスを改善
- Fix: サーバー情報画面(`/instance-info/{domain}`)でブロックができないのを修正 - Fix: サーバー情報画面(`/instance-info/{domain}`)でブロックができないのを修正
- Fix: 未読のお知らせの「わかった」をクリック・タップしてもその場で「わかった」が消えない問題を修正 - Fix: 未読のお知らせの「わかった」をクリック・タップしてもその場で「わかった」が消えない問題を修正
- Fix: iOSで画面を回転させるとテキストサイズが変わる問題を修正 - Fix: iOSで画面を回転させるとテキストサイズが変わる問題を修正

2
locales/index.d.ts vendored
View File

@ -1026,7 +1026,7 @@ export interface Locale {
"enableChartsForRemoteUser": string; "enableChartsForRemoteUser": string;
"enableChartsForFederatedInstances": string; "enableChartsForFederatedInstances": string;
"showClipButtonInNoteFooter": string; "showClipButtonInNoteFooter": string;
"largeNoteReactions": string; "reactionsDisplaySize": string;
"noteIdOrUrl": string; "noteIdOrUrl": string;
"video": string; "video": string;
"videos": string; "videos": string;

View File

@ -1023,7 +1023,7 @@ retryAllQueuesConfirmText: "一時的にサーバーの負荷が増大するこ
enableChartsForRemoteUser: "リモートユーザーのチャートを生成" enableChartsForRemoteUser: "リモートユーザーのチャートを生成"
enableChartsForFederatedInstances: "リモートサーバーのチャートを生成" enableChartsForFederatedInstances: "リモートサーバーのチャートを生成"
showClipButtonInNoteFooter: "ノートのアクションにクリップを追加" showClipButtonInNoteFooter: "ノートのアクションにクリップを追加"
largeNoteReactions: "ノートのリアクションを大きく表示" reactionsDisplaySize: "リアクションの表示サイズ"
noteIdOrUrl: "ートIDまたはURL" noteIdOrUrl: "ートIDまたはURL"
video: "動画" video: "動画"
videos: "動画" videos: "動画"

View File

@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
ref="buttonEl" ref="buttonEl"
v-ripple="canToggle" v-ripple="canToggle"
class="_button" class="_button"
:class="[$style.root, { [$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle, [$style.large]: defaultStore.state.largeNoteReactions }]" :class="[$style.root, { [$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle, [$style.small]: defaultStore.state.reactionsDisplaySize === 'small', [$style.large]: defaultStore.state.reactionsDisplaySize === 'large' }]"
@click="toggleReaction()" @click="toggleReaction()"
> >
<MkReactionIcon :class="$style.icon" :reaction="reaction" :emojiUrl="note.reactionEmojis[reaction.substring(1, reaction.length - 1)]"/> <MkReactionIcon :class="$style.icon" :reaction="reaction" :emojiUrl="note.reactionEmojis[reaction.substring(1, reaction.length - 1)]"/>
@ -115,10 +115,11 @@ useTooltip(buttonEl, async (showing) => {
<style lang="scss" module> <style lang="scss" module>
.root { .root {
display: inline-block; display: inline-block;
height: 32px; height: 42px;
margin: 2px; margin: 2px;
padding: 0 6px; padding: 0 6px;
border-radius: 4px; font-size: 1.5em;
border-radius: 6px;
&.canToggle { &.canToggle {
background: var(--buttonBg); background: var(--buttonBg);
@ -132,14 +133,25 @@ useTooltip(buttonEl, async (showing) => {
cursor: default; cursor: default;
} }
&.large { &.small {
height: 42px; height: 32px;
font-size: 1.5em; font-size: 1em;
border-radius: 6px; border-radius: 4px;
> .count { > .count {
font-size: 0.7em; font-size: 0.9em;
line-height: 42px; line-height: 32px;
}
}
&.large {
height: 52px;
font-size: 2em;
border-radius: 8px;
> .count {
font-size: 0.6em;
line-height: 52px;
} }
} }
@ -159,8 +171,8 @@ useTooltip(buttonEl, async (showing) => {
} }
.count { .count {
font-size: 0.9em; font-size: 0.7em;
line-height: 32px; line-height: 42px;
margin: 0 0 0 4px; margin: 0 0 0 4px;
} }
</style> </style>

View File

@ -40,13 +40,18 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="_gaps_s"> <div class="_gaps_s">
<MkSwitch v-model="showNoteActionsOnlyHover">{{ i18n.ts.showNoteActionsOnlyHover }}</MkSwitch> <MkSwitch v-model="showNoteActionsOnlyHover">{{ i18n.ts.showNoteActionsOnlyHover }}</MkSwitch>
<MkSwitch v-model="showClipButtonInNoteFooter">{{ i18n.ts.showClipButtonInNoteFooter }}</MkSwitch> <MkSwitch v-model="showClipButtonInNoteFooter">{{ i18n.ts.showClipButtonInNoteFooter }}</MkSwitch>
<MkSwitch v-model="largeNoteReactions">{{ i18n.ts.largeNoteReactions }}</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>
<MkSwitch v-model="showGapBetweenNotesInTimeline">{{ i18n.ts.showGapBetweenNotesInTimeline }}</MkSwitch> <MkSwitch v-model="showGapBetweenNotesInTimeline">{{ i18n.ts.showGapBetweenNotesInTimeline }}</MkSwitch>
<MkSwitch v-model="loadRawImages">{{ i18n.ts.loadRawImages }}</MkSwitch> <MkSwitch v-model="loadRawImages">{{ i18n.ts.loadRawImages }}</MkSwitch>
<MkSwitch v-model="useReactionPickerForContextMenu">{{ i18n.ts.useReactionPickerForContextMenu }}</MkSwitch> <MkSwitch v-model="useReactionPickerForContextMenu">{{ i18n.ts.useReactionPickerForContextMenu }}</MkSwitch>
<MkRadios v-model="reactionsDisplaySize">
<template #label>{{ i18n.ts.reactionsDisplaySize }}</template>
<option value="small">{{ i18n.ts.small }}</option>
<option value="medium">{{ i18n.ts.medium }}</option>
<option value="large">{{ i18n.ts.large }}</option>
</MkRadios>
</div> </div>
<MkSelect v-model="instanceTicker"> <MkSelect v-model="instanceTicker">
@ -204,7 +209,7 @@ const overridedDeviceKind = computed(defaultStore.makeGetterSetter('overridedDev
const serverDisconnectedBehavior = computed(defaultStore.makeGetterSetter('serverDisconnectedBehavior')); const serverDisconnectedBehavior = computed(defaultStore.makeGetterSetter('serverDisconnectedBehavior'));
const showNoteActionsOnlyHover = computed(defaultStore.makeGetterSetter('showNoteActionsOnlyHover')); const showNoteActionsOnlyHover = computed(defaultStore.makeGetterSetter('showNoteActionsOnlyHover'));
const showClipButtonInNoteFooter = computed(defaultStore.makeGetterSetter('showClipButtonInNoteFooter')); const showClipButtonInNoteFooter = computed(defaultStore.makeGetterSetter('showClipButtonInNoteFooter'));
const largeNoteReactions = computed(defaultStore.makeGetterSetter('largeNoteReactions')); const reactionsDisplaySize = computed(defaultStore.makeGetterSetter('reactionsDisplaySize'));
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'));
@ -264,6 +269,7 @@ watch([
instanceTicker, instanceTicker,
overridedDeviceKind, overridedDeviceKind,
mediaListWithOneImageAppearance, mediaListWithOneImageAppearance,
reactionsDisplaySize,
], async () => { ], async () => {
await reloadAsk(); await reloadAsk();
}); });

View File

@ -316,9 +316,9 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device', where: 'device',
default: false, default: false,
}, },
largeNoteReactions: { reactionsDisplaySize: {
where: 'device', where: 'device',
default: false, default: 'medium' as 'small' | 'medium' | 'large',
}, },
forceShowAds: { forceShowAds: {
where: 'device', where: 'device',