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 1/6] =?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', From 6023d75f8410ff2db3e39975d797b68a6bc8c6cc Mon Sep 17 00:00:00 2001 From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Sun, 20 Oct 2024 14:38:44 +0900 Subject: [PATCH 2/6] fix --- locales/index.d.ts | 4 ++++ locales/ja-JP.yml | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/locales/index.d.ts b/locales/index.d.ts index 0d8e1edd86..3c8043bddf 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -5194,6 +5194,10 @@ export interface Locale extends ILocale { * 公開範囲に応じて色分けする */ "enableNoteVisibilityColor": string; + /** + * ノートの詳細表示ページなど、一部の箇所には適用されません。 + */ + "enableNoteVisibilityColorDescription": string; "_abuseUserReport": { /** * 転送 diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index bba91b4ff1..9be4ba20aa 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1294,7 +1294,7 @@ prohibitedWordsForNameOfUserDescription: "このリストに含まれる文字 yourNameContainsProhibitedWords: "変更しようとした名前に禁止された文字列が含まれています" yourNameContainsProhibitedWordsDescription: "名前に禁止されている文字列が含まれています。この名前を使用したい場合は、サーバー管理者にお問い合わせください。" enableNoteVisibilityColor: "公開範囲に応じて色分けする" -enableNoteVisibilityColor: "ノートの詳細表示ページなど、一部の箇所には適用されません。" +enableNoteVisibilityColorDescription: "ノートの詳細表示ページなど、一部の箇所には適用されません。" _abuseUserReport: forward: "転送" From dcdfc61bd8b2f12fbb14b2ea9832fac02298d33f Mon Sep 17 00:00:00 2001 From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Sun, 20 Oct 2024 14:39:06 +0900 Subject: [PATCH 3/6] Update Changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8f3dcb7bbd..06a6ee9061 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,7 @@ - ### Client -- +- Enhance: ノートの公開範囲に応じて色分けできるように ### Server - From 6544a861989d80842d015dc1e4cba21d3aa3e11a Mon Sep 17 00:00:00 2001 From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Sun, 20 Oct 2024 19:30:29 +0900 Subject: [PATCH 4/6] introduce background-clip --- packages/frontend/src/components/MkDateSeparatedList.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/frontend/src/components/MkDateSeparatedList.vue b/packages/frontend/src/components/MkDateSeparatedList.vue index f04e5cf7c6..d4be58aec3 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); From 0fc6fd6eda8efe36a971c9b03b62e03989f57ee8 Mon Sep 17 00:00:00 2001 From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Sat, 14 Dec 2024 21:52:09 +0900 Subject: [PATCH 5/6] fix changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6c87d823d3..8236e8d0e4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - ### Client +- Enhance: ノートの公開範囲に応じて色分けできるように - Fix: 画面サイズが変わった際にナビゲーションバーが自動で折りたたまれない問題を修正 - Fix: サーバー情報メニューに区切り線が不足していたのを修正 - Fix: ノートがログインしているユーザーしか見れない場合にログインダイアログを閉じるとその後の動線がなくなる問題を修正 @@ -50,7 +51,6 @@ - Enhance: リノートメニューに「リノートの詳細」を追加 - Enhance: 非ログイン状態でMisskeyを開いた際のパフォーマンスを向上 - Enhance: ドライブでソートができるように -- Enhance: ノートの公開範囲に応じて色分けできるように - Fix: 通知の範囲指定の設定項目が必要ない通知設定でも範囲指定の設定がでている問題を修正 - Fix: Turnstileが失敗・期限切れした際にも成功扱いとなってしまう問題を修正 (Cherry-picked from https://github.com/MisskeyIO/misskey/pull/768) From c4859f83104c8f2df17e4f633bbfbaf60bed53d6 Mon Sep 17 00:00:00 2001 From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Sat, 14 Dec 2024 21:52:52 +0900 Subject: [PATCH 6/6] fix changelog --- CHANGELOG.md | 1 - 1 file changed, 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8236e8d0e4..1349dff465 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -50,7 +50,6 @@ - Enhance: サイドバーを簡単に展開・折りたたみできるように ( #14981 ) - Enhance: リノートメニューに「リノートの詳細」を追加 - Enhance: 非ログイン状態でMisskeyを開いた際のパフォーマンスを向上 -- Enhance: ドライブでソートができるように - Fix: 通知の範囲指定の設定項目が必要ない通知設定でも範囲指定の設定がでている問題を修正 - Fix: Turnstileが失敗・期限切れした際にも成功扱いとなってしまう問題を修正 (Cherry-picked from https://github.com/MisskeyIO/misskey/pull/768)