From c67918a8143634cfe540bb95225374815d4c7b32 Mon Sep 17 00:00:00 2001 From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Sun, 20 Oct 2024 14:37:57 +0900 Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20TL=E4=B8=8A=E3=81=AE?= =?UTF-8?q?=E3=83=8E=E3=83=BC=E3=83=88=E3=82=92=E5=85=AC=E9=96=8B=E7=AF=84?= =?UTF-8?q?=E5=9B=B2=E3=81=AB=E5=BF=9C=E3=81=98=E3=81=A6=E8=89=B2=E5=88=86?= =?UTF-8?q?=E3=81=91=E3=81=99=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- locales/index.d.ts | 4 +++ locales/ja-JP.yml | 2 ++ packages/frontend-shared/themes/_dark.json5 | 4 +++ packages/frontend-shared/themes/_light.json5 | 4 +++ packages/frontend/src/components/MkNote.vue | 34 +++++++++++++++++-- .../frontend/src/components/MkNoteHeader.vue | 26 +++++++++++++- .../frontend/src/pages/settings/general.vue | 6 ++++ packages/frontend/src/store.ts | 4 +++ 8 files changed, 81 insertions(+), 3 deletions(-) diff --git a/locales/index.d.ts b/locales/index.d.ts index b5af5909a3..0d8e1edd86 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -5190,6 +5190,10 @@ export interface Locale extends ILocale { * 名前に禁止されている文字列が含まれています。この名前を使用したい場合は、サーバー管理者にお問い合わせください。 */ "yourNameContainsProhibitedWordsDescription": string; + /** + * 公開範囲に応じて色分けする + */ + "enableNoteVisibilityColor": string; "_abuseUserReport": { /** * 転送 diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index c448d4d50a..bba91b4ff1 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1293,6 +1293,8 @@ prohibitedWordsForNameOfUser: "禁止ワード（ユーザーの名前）" prohibitedWordsForNameOfUserDescription: "このリストに含まれる文字列がユーザーの名前に含まれる場合、ユーザーの名前の変更を拒否します。モデレーター権限を持つユーザーはこの制限の影響を受けません。" yourNameContainsProhibitedWords: "変更しようとした名前に禁止された文字列が含まれています" yourNameContainsProhibitedWordsDescription: "名前に禁止されている文字列が含まれています。この名前を使用したい場合は、サーバー管理者にお問い合わせください。" +enableNoteVisibilityColor: "公開範囲に応じて色分けする" +enableNoteVisibilityColor: "ノートの詳細表示ページなど、一部の箇所には適用されません。" _abuseUserReport: forward: "転送" diff --git a/packages/frontend-shared/themes/_dark.json5 b/packages/frontend-shared/themes/_dark.json5 index 5271785e62..27603d4162 100644 --- a/packages/frontend-shared/themes/_dark.json5 +++ b/packages/frontend-shared/themes/_dark.json5 @@ -79,6 +79,10 @@ codeBoolean: '#c59eff', deckBg: '#000', htmlThemeColor: '@bg', + notePublic: 'transparent', + noteHome: '#43b3f4', + noteSpecified: '#f09e05', + noteFollowers: '#c54630', X3: 'rgba(255, 255, 255, 0.05)', X4: 'rgba(255, 255, 255, 0.1)', X5: 'rgba(255, 255, 255, 0.05)', diff --git a/packages/frontend-shared/themes/_light.json5 b/packages/frontend-shared/themes/_light.json5 index be331ce58f..665d7b843b 100644 --- a/packages/frontend-shared/themes/_light.json5 +++ b/packages/frontend-shared/themes/_light.json5 @@ -79,6 +79,10 @@ codeBoolean: '#62b70c', deckBg: ':darken<3<@bg', htmlThemeColor: '@bg', + notePublic: 'transparent', + noteHome: '#43b3f4', + noteSpecified: '#f09e05', + noteFollowers: '#c54630', X3: 'rgba(0, 0, 0, 0.05)', X4: 'rgba(0, 0, 0, 0.1)', X5: 'rgba(0, 0, 0, 0.05)', diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 828ad2e872..6c6e0b0a1e 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -9,7 +9,15 @@ SPDX-License-Identifier: AGPL-3.0-only v-show="!isDeleted" ref="rootEl" v-hotkey="keymap" - :class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover, [$style.skipRender]: defaultStore.state.skipNoteRender }]" + :class="[$style.root, { + [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover, + [$style.skipRender]: defaultStore.state.skipNoteRender, + [$style.noteVisibilityColor]: defaultStore.state.enableNoteVisibilityColor, + [$style.bgPublic]: appearNote.visibility === 'public', + [$style.bgHome]: appearNote.visibility === 'home', + [$style.bgFollowers]: appearNote.visibility === 'followers', + [$style.bgSpecified]: appearNote.visibility === 'specified', + }]" :tabindex="isDeleted ? '-1' : '0'" > @@ -618,6 +626,8 @@ function emitUpdReaction(emoji: string, delta: number) { font-size: 1.05em; overflow: clip; contain: content; + --noteBg: var(--MI_THEME-panel); + background-color: var(--noteBg); &:focus-visible { outline: none; @@ -677,6 +687,26 @@ function emitUpdReaction(emoji: string, delta: number) { visibility: visible; } } + + &.noteVisibilityColor { + --noteBg: color-mix(in srgb, var(--MI_THEME-panel), var(--noteThemeColor) 10%); + + &.bgPublic { + --noteThemeColor: var(--MI_THEME-notePublic); + } + + &.bgHome { + --noteThemeColor: var(--MI_THEME-noteHome); + } + + &.bgFollowers { + --noteThemeColor: var(--MI_THEME-noteFollowers); + } + + &.bgSpecified { + --noteThemeColor: var(--MI_THEME-noteSpecified); + } + } } .skipRender { @@ -854,7 +884,7 @@ function emitUpdReaction(emoji: string, delta: number) { z-index: 2; width: 100%; height: 64px; - background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0)); + background: linear-gradient(0deg, var(--noteBg), color(from var(--noteBg) srgb r g b / 0)); &:hover > .collapsedLabel { background: var(--MI_THEME-panelHighlight); diff --git a/packages/frontend/src/components/MkNoteHeader.vue b/packages/frontend/src/components/MkNoteHeader.vue index 750e32a9ff..835451e5b8 100644 --- a/packages/frontend/src/components/MkNoteHeader.vue +++ b/packages/frontend/src/components/MkNoteHeader.vue @@ -23,7 +23,17 @@ SPDX-License-Identifier: AGPL-3.0-only - + @@ -56,6 +66,20 @@ const mock = inject('mock', false); white-space: nowrap; } +.enableColorlize { + &.colorHome { + color: var(--MI_THEME-noteHome); + } + + &.colorFollowers { + color: var(--MI_THEME-noteFollowers); + } + + &.colorSpecified { + color: var(--MI_THEME-noteSpecified); + } +} + .name { flex-shrink: 1; display: block; diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue index 1bfdfd0e76..ee3cdcf5ea 100644 --- a/packages/frontend/src/pages/settings/general.vue +++ b/packages/frontend/src/pages/settings/general.vue @@ -47,6 +47,10 @@ SPDX-License-Identifier: AGPL-3.0-only + + + + {{ i18n.ts.showNoteActionsOnlyHover }} {{ i18n.ts.showClipButtonInNoteFooter }} {{ i18n.ts.enableAdvancedMfm }} @@ -297,6 +301,7 @@ const menuStyle = computed(defaultStore.makeGetterSetter('menuStyle')); const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('disableShowingAnimatedImages')); const forceShowAds = computed(defaultStore.makeGetterSetter('forceShowAds')); const loadRawImages = computed(defaultStore.makeGetterSetter('loadRawImages')); +const enableNoteVisibilityColor = computed(defaultStore.makeGetterSetter('enableNoteVisibilityColor')); const highlightSensitiveMedia = computed(defaultStore.makeGetterSetter('highlightSensitiveMedia')); const imageNewTab = computed(defaultStore.makeGetterSetter('imageNewTab')); const nsfw = computed(defaultStore.makeGetterSetter('nsfw')); @@ -352,6 +357,7 @@ watch([ squareAvatars, showNoteActionsOnlyHover, showGapBetweenNotesInTimeline, + enableNoteVisibilityColor, instanceTicker, overridedDeviceKind, mediaListWithOneImageAppearance, diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts index aab67e0b5c..987612e64c 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -472,6 +472,10 @@ export const defaultStore = markRaw(new Storage('base', { where: 'device', default: true, }, + enableNoteVisibilityColor: { + where: 'device', + default: false, + }, sound_masterVolume: { where: 'device',