Merge 80cc233e24 into a5fa9a2cef

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Feat: マウスでもタイムラインを引っ張って更新できるように
   - アクセシビリティ設定からオフにすることもできます
 - Enhance: タイムラインのパフォーマンスを向上
+- Enhance: ノートの公開範囲に応じて色分けできるように
 - Fix: 一部のブラウザでアコーディオンメニューのアニメーションが動作しない問題を修正
 
 ### Server

locales/index.d.ts

@@ -5413,6 +5413,14 @@ export interface Locale extends ILocale {
      * フォルダを作って整理することもできます。
      */
     "driveAboutTip": string;
+    /**
+     * 公開範囲に応じて色分けする
+     */
+    "enableNoteVisibilityColor": string;
+    /**
+     * ノートの詳細表示ページなど、一部の箇所には適用されません。
+     */
+    "enableNoteVisibilityColorDescription": string;
     "_chat": {
         /**
          * まだメッセージはありません

locales/ja-JP.yml

@@ -1348,6 +1348,8 @@ readonly: "読み取り専用"
 goToDeck: "デッキへ戻る"
 federationJobs: "連合ジョブ"
 driveAboutTip: "ドライブでは、過去にアップロードしたファイルの一覧が表示されます。<br>\nノートに添付する際に再利用したり、あとで投稿するファイルを予めアップロードしておくこともできます。<br>\n<b>ファイルを削除すると、今までそのファイルを使用した全ての場所(ノート、ページ、アバター、バナー等)からも見えなくなるので注意してください。</b><br>\nフォルダを作って整理することもできます。"
+enableNoteVisibilityColor: "公開範囲に応じて色分けする"
+enableNoteVisibilityColorDescription: "ノートの詳細表示ページなど、一部の箇所には適用されません。"
 
 _chat:
   noMessagesYet: "まだメッセージはありません"

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: {

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: {

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);

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'"
 >
 	<MkNoteSub v-if="appearNote.reply && !renoteCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
@@ -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);

packages/frontend/src/components/MkNoteHeader.vue

@@ -23,7 +23,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkA v-else :to="notePage(note)">
 			<MkTime :time="note.createdAt" colored/>
 		</MkA>
-		<span v-if="note.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[note.visibility]">
+		<span
+			v-if="note.visibility !== 'public'"
+			style="margin-left: 0.5em;"
+			:class="{
+				[$style.enableColorlize]: prefer.s.enableNoteVisibilityColor,
+				[$style.colorHome]: note.visibility === 'home',
+				[$style.colorFollowers]: note.visibility === 'followers',
+				[$style.colorSpecified]: note.visibility === 'specified',
+			}"
+			:title="i18n.ts._visibility[note.visibility]"
+		>
 			<i v-if="note.visibility === 'home'" class="ti ti-home"></i>
 			<i v-else-if="note.visibility === 'followers'" class="ti ti-lock"></i>
 			<i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
@@ -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;

packages/frontend/src/pages/settings/preferences.vue

@@ -210,6 +210,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 									</MkPreferenceContainer>
 								</SearchMarker>
 
+								<SearchMarker :keywords="['reaction', 'confirm', 'remove']">
+									<MkPreferenceContainer k="enableNoteVisibilityColor">
+										<MkSwitch v-model="enableNoteVisibilityColor">
+											<template #label><SearchLabel>{{ i18n.ts.enableNoteVisibilityColor }}</SearchLabel></template>
+											<template #caption>{{ i18n.ts.enableNoteVisibilityColorDescription }}</template>
+										</MkSwitch>
+									</MkPreferenceContainer>
+								</SearchMarker>
+
 								<SearchMarker :keywords="['image', 'photo', 'picture', 'media', 'thumbnail', 'quality', 'raw', 'attachment']">
 									<MkPreferenceContainer k="loadRawImages">
 										<MkSwitch v-model="loadRawImages">
@@ -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,

packages/frontend/src/preferences/def.ts

@@ -327,6 +327,9 @@ export const PREF_DEF = {
 	confirmOnReact: {
 		default: false,
 	},
+	enableNoteVisibilityColor: {
+		default: false,
+	},
 	defaultFollowWithReplies: {
 		default: false,
 	},