diff --git a/CHANGELOG.md b/CHANGELOG.md index a1fb4fe48c..be72b76c56 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ - Feat: マウスでもタイムラインを引っ張って更新できるように - アクセシビリティ設定からオフにすることもできます - Enhance: タイムラインのパフォーマンスを向上 +- Enhance: ノートの公開範囲に応じて色分けできるように - Fix: 一部のブラウザでアコーディオンメニューのアニメーションが動作しない問題を修正 ### Server diff --git a/locales/index.d.ts b/locales/index.d.ts index 0ac96939aa..aa70ea78f6 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -5413,6 +5413,14 @@ export interface Locale extends ILocale { * フォルダを作って整理することもできます。 */ "driveAboutTip": string; + /** + * 公開範囲に応じて色分けする + */ + "enableNoteVisibilityColor": string; + /** + * ノートの詳細表示ページなど、一部の箇所には適用されません。 + */ + "enableNoteVisibilityColorDescription": string; "_chat": { /** * まだメッセージはありません diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index c189685464..6f1d05baf2 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1348,6 +1348,8 @@ readonly: "読み取り専用" goToDeck: "デッキへ戻る" federationJobs: "連合ジョブ" driveAboutTip: "ドライブでは、過去にアップロードしたファイルの一覧が表示されます。
\nノートに添付する際に再利用したり、あとで投稿するファイルを予めアップロードしておくこともできます。
\nファイルを削除すると、今までそのファイルを使用した全ての場所(ノート、ページ、アバター、バナー等)からも見えなくなるので注意してください。
\nフォルダを作って整理することもできます。" +enableNoteVisibilityColor: "公開範囲に応じて色分けする" +enableNoteVisibilityColorDescription: "ノートの詳細表示ページなど、一部の箇所には適用されません。" _chat: noMessagesYet: "まだメッセージはありません" diff --git a/packages/frontend-shared/themes/_dark.json5 b/packages/frontend-shared/themes/_dark.json5 index 8ebaf20b64..05f283c403 100644 --- a/packages/frontend-shared/themes/_dark.json5 +++ b/packages/frontend-shared/themes/_dark.json5 @@ -72,6 +72,10 @@ codeBoolean: '#c59eff', deckBg: '#000', htmlThemeColor: '@bg', + notePublic: 'transparent', + noteHome: '#43b3f4', + noteSpecified: '#f09e05', + noteFollowers: '#c54630', }, codeHighlighter: { diff --git a/packages/frontend-shared/themes/_light.json5 b/packages/frontend-shared/themes/_light.json5 index 63ad95ff84..6d82b85dc4 100644 --- a/packages/frontend-shared/themes/_light.json5 +++ b/packages/frontend-shared/themes/_light.json5 @@ -72,6 +72,10 @@ codeBoolean: '#62b70c', deckBg: ':darken<3<@bg', htmlThemeColor: '@bg', + notePublic: 'transparent', + noteHome: '#43b3f4', + noteSpecified: '#f09e05', + noteFollowers: '#c54630', }, codeHighlighter: { diff --git a/packages/frontend/src/components/MkDateSeparatedList.vue b/packages/frontend/src/components/MkDateSeparatedList.vue index 1cf6f0b744..ddd9f7f4bf 100644 --- a/packages/frontend/src/components/MkDateSeparatedList.vue +++ b/packages/frontend/src/components/MkDateSeparatedList.vue @@ -185,6 +185,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 980636f551..415f55c5ac 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]: prefer.s.showNoteActionsOnlyHover, [$style.skipRender]: prefer.s.skipNoteRender }]" + :class="[$style.root, { + [$style.showActionsOnlyHover]: prefer.s.showNoteActionsOnlyHover, + [$style.skipRender]: prefer.s.skipNoteRender, + [$style.noteVisibilityColor]: prefer.s.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'" > @@ -661,6 +669,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; @@ -720,6 +730,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 { @@ -902,7 +932,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 ea115c2cd8..570791ccb1 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 - + @@ -41,6 +51,7 @@ import { i18n } from '@/i18n.js'; import { notePage } from '@/filters/note.js'; import { userPage } from '@/filters/user.js'; import { DI } from '@/di.js'; +import { prefer } from '@/preferences.js'; defineProps<{ note: Misskey.entities.Note; @@ -56,6 +67,20 @@ const mock = inject(DI.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/preferences.vue b/packages/frontend/src/pages/settings/preferences.vue index 4d718d21b4..e0443a1bad 100644 --- a/packages/frontend/src/pages/settings/preferences.vue +++ b/packages/frontend/src/pages/settings/preferences.vue @@ -210,6 +210,15 @@ SPDX-License-Identifier: AGPL-3.0-only + + + + + + + + + @@ -782,6 +791,7 @@ const useGroupedNotifications = prefer.model('useGroupedNotifications'); const alwaysConfirmFollow = prefer.model('alwaysConfirmFollow'); const confirmWhenRevealingSensitiveMedia = prefer.model('confirmWhenRevealingSensitiveMedia'); const confirmOnReact = prefer.model('confirmOnReact'); +const enableNoteVisibilityColor = prefer.model('enableNoteVisibilityColor'); const defaultNoteVisibility = prefer.model('defaultNoteVisibility'); const defaultNoteLocalOnly = prefer.model('defaultNoteLocalOnly'); const rememberNoteVisibility = prefer.model('rememberNoteVisibility'); @@ -849,6 +859,7 @@ watch([ disableStreamingTimeline, alwaysConfirmFollow, confirmWhenRevealingSensitiveMedia, + enableNoteVisibilityColor, showGapBetweenNotesInTimeline, mediaListWithOneImageAppearance, reactionsDisplaySize, diff --git a/packages/frontend/src/preferences/def.ts b/packages/frontend/src/preferences/def.ts index 37c7098511..4ca78b88d2 100644 --- a/packages/frontend/src/preferences/def.ts +++ b/packages/frontend/src/preferences/def.ts @@ -327,6 +327,9 @@ export const PREF_DEF = { confirmOnReact: { default: false, }, + enableNoteVisibilityColor: { + default: false, + }, defaultFollowWithReplies: { default: false, },