Merge c4859f8310 into e8bf6285cb

CHANGELOG.md

@@ -4,6 +4,7 @@
 -
 
 ### Client
+- Enhance: ノートの公開範囲に応じて色分けできるように
 - Fix: 画面サイズが変わった際にナビゲーションバーが自動で折りたたまれない問題を修正
 - Fix: サーバー情報メニューに区切り線が不足していたのを修正
 - Fix: ノートがログインしているユーザーしか見れない場合にログインダイアログを閉じるとその後の動線がなくなる問題を修正

locales/index.d.ts

@@ -5222,6 +5222,14 @@ export interface Locale extends ILocale {
      * 注意事項を理解した上でオンにします。
      */
     "acknowledgeNotesAndEnable": string;
+    /**
+     * 公開範囲に応じて色分けする
+     */
+    "enableNoteVisibilityColor": string;
+    /**
+     * ノートの詳細表示ページなど、一部の箇所には適用されません。
+     */
+    "enableNoteVisibilityColorDescription": string;
     "_accountSettings": {
         /**
          * コンテンツの表示にログインを必須にする

locales/ja-JP.yml

@@ -1301,6 +1301,8 @@ lockdown: "ロックダウン"
 pleaseSelectAccount: "アカウントを選択してください"
 availableRoles: "利用可能なロール"
 acknowledgeNotesAndEnable: "注意事項を理解した上でオンにします。"
+enableNoteVisibilityColor: "公開範囲に応じて色分けする"
+enableNoteVisibilityColorDescription: "ノートの詳細表示ページなど、一部の箇所には適用されません。"
 
 _accountSettings:
   requireSigninToViewContents: "コンテンツの表示にログインを必須にする"

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)',

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)',

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

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

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]: defaultStore.state.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>
@@ -56,6 +66,20 @@ const mock = inject<boolean>('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/general.vue

@@ -47,6 +47,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #label>{{ i18n.ts.collapseRenotes }}</template>
 					<template #caption>{{ i18n.ts.collapseRenotesDescription }}</template>
 				</MkSwitch>
+				<MkSwitch v-model="enableNoteVisibilityColor">
+					<template #label>{{ i18n.ts.enableNoteVisibilityColor }}</template>
+					<template #caption>{{ i18n.ts.enableNoteVisibilityColorDescription }}</template>
+				</MkSwitch>
 				<MkSwitch v-model="showNoteActionsOnlyHover">{{ i18n.ts.showNoteActionsOnlyHover }}</MkSwitch>
 				<MkSwitch v-model="showClipButtonInNoteFooter">{{ i18n.ts.showClipButtonInNoteFooter }}</MkSwitch>
 				<MkSwitch v-model="advancedMfm">{{ i18n.ts.enableAdvancedMfm }}</MkSwitch>
@@ -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,

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',