diff --git a/CHANGELOG.md b/CHANGELOG.md index 6b9ae480af..1349dff465 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - ### Client +- Enhance: ノートの公開範囲に応じて色分けできるように - Fix: 画面サイズが変わった際にナビゲーションバーが自動で折りたたまれない問題を修正 - Fix: サーバー情報メニューに区切り線が不足していたのを修正 - Fix: ノートがログインしているユーザーしか見れない場合にログインダイアログを閉じるとその後の動線がなくなる問題を修正 diff --git a/locales/index.d.ts b/locales/index.d.ts index 0ae188f1f7..3f7e8ea356 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -5222,6 +5222,14 @@ export interface Locale extends ILocale { * 注意事項を理解した上でオンにします。 */ "acknowledgeNotesAndEnable": string; + /** + * 公開範囲に応じて色分けする + */ + "enableNoteVisibilityColor": string; + /** + * ノートの詳細表示ページなど、一部の箇所には適用されません。 + */ + "enableNoteVisibilityColorDescription": string; "_accountSettings": { /** * コンテンツの表示にログインを必須にする diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 1b59708d85..4e4966827a 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1301,6 +1301,8 @@ lockdown: "ロックダウン" pleaseSelectAccount: "アカウントを選択してください" availableRoles: "利用可能なロール" acknowledgeNotesAndEnable: "注意事項を理解した上でオンにします。" +enableNoteVisibilityColor: "公開範囲に応じて色分けする" +enableNoteVisibilityColorDescription: "ノートの詳細表示ページなど、一部の箇所には適用されません。" _accountSettings: requireSigninToViewContents: "コンテンツの表示にログインを必須にする" 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/MkDateSeparatedList.vue b/packages/frontend/src/components/MkDateSeparatedList.vue index 9c75f91cb2..0f73d2e31a 100644 --- a/packages/frontend/src/components/MkDateSeparatedList.vue +++ b/packages/frontend/src/components/MkDateSeparatedList.vue @@ -195,6 +195,8 @@ export default defineComponent({ border: none; border-radius: 0; box-shadow: none; + box-sizing: border-box; + background-clip: padding-box; &:not(:last-child) { border-bottom: solid 0.5px var(--MI_THEME-divider); diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 1a8814b7cb..daf6363fa7 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'" > @@ -632,6 +640,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; @@ -691,6 +701,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 { @@ -868,7 +898,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 1d981e897b..328188afea 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -474,6 +474,10 @@ export const defaultStore = markRaw(new Storage('base', { where: 'device', default: true, }, + enableNoteVisibilityColor: { + where: 'device', + default: false, + }, sound_masterVolume: { where: 'device',