diff --git a/locales/index.d.ts b/locales/index.d.ts index 408420fa7c..c8562a2c36 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -832,6 +832,7 @@ export interface Locale { "GamingSpeedChangeInfo": string; "emailNotConfiguredWarning": string; "ratio": string; + "showVisibilityColor": string; "previewNoteText": string; "customCss": string; "customCssWarn": string; diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index ff31c96a77..e9a5576ca1 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -829,6 +829,7 @@ GamingSpeedChange: "ゲーミングの光るスピードの調整" GamingSpeedChangeInfo: "左にすれば早くなる、右にすれば遅くなる。それだけ。" emailNotConfiguredWarning: "メールアドレスの設定がされていません。" ratio: "比率" +showVisibilityColor: "ノートの公開範囲を色付けする" previewNoteText: "本文をプレビュー" customCss: "カスタムCSS" customCssWarn: "この設定は必ず知識のある方が行ってください。不適切な設定を行うとクライアントが正常に使用できなくなる恐れがあります。" diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index b397f3eee9..223e8f818d 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -9,7 +9,8 @@ SPDX-License-Identifier: AGPL-3.0-only v-show="!isDeleted" ref="el" v-hotkey="keymap" - :class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover }]" + :class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover } ,{[$style.home] : defaultStore.state.showVisibilityColor && note.visibility === 'home',[$style.followers] : defaultStore.state.showVisibilityColor && note.visibility === 'followers',[$style.specified] : defaultStore.state.showVisibilityColor && note.visibility === 'specified'}]" + :tabindex="!isDeleted ? '-1' : undefined" > @@ -33,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only - + @@ -176,8 +177,7 @@ const props = defineProps<{ }>(); const inChannel = inject('inChannel', null); -const currentClip = inject | null>('currentClip', null); - +const currentClip = inject | null>('currentClip', null);; let note = $ref(deepClone(props.note)); // plugin @@ -480,6 +480,8 @@ function focusAfter() { focusNext(el.value); } + + function readPromo() { os.api('promo/read', { noteId: appearNote.id, @@ -489,13 +491,22 @@ function readPromo() { diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue index ba4a630ecf..1c1207770a 100644 --- a/packages/frontend/src/pages/settings/general.vue +++ b/packages/frontend/src/pages/settings/general.vue @@ -48,6 +48,16 @@ SPDX-License-Identifier: AGPL-3.0-only {{ i18n.ts.showNoteActionsOnlyHover }} {{ i18n.ts.showClipButtonInNoteFooter }} {{ i18n.ts.collapseRenotes }} + {{ i18n.ts.showVisibilityColor}} + + + + + + + + + {{ i18n.ts.enableAdvancedMfm }} {{ i18n.ts.enableAnimatedMfm }} {{ i18n.ts.showGapBetweenNotesInTimeline }} @@ -212,6 +222,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js'; import { miLocalStorage } from '@/local-storage.js'; import { globalEvents } from '@/events'; import { claimAchievement } from '@/scripts/achievements.js'; +import MkColorInput from "@/components/MkColorInput.vue"; const lang = ref(miLocalStorage.getItem('lang')); const fontSize = ref(miLocalStorage.getItem('fontSize')); @@ -255,6 +266,9 @@ const showFixedPostForm = computed(defaultStore.makeGetterSetter('showFixedPostF const showFixedPostFormInChannel = computed(defaultStore.makeGetterSetter('showFixedPostFormInChannel')); const numberOfPageCache = computed(defaultStore.makeGetterSetter('numberOfPageCache')); const numberOfGamingSpeed = computed(defaultStore.makeGetterSetter('numberOfGamingSpeed')); +const homeColor = computed(defaultStore.makeGetterSetter('homeColor')); +const followerColor = computed(defaultStore.makeGetterSetter('followerColor')); +const specifiedColor = computed(defaultStore.makeGetterSetter('specifiedColor')); const instanceTicker = computed(defaultStore.makeGetterSetter('instanceTicker')); const enableInfiniteScroll = computed(defaultStore.makeGetterSetter('enableInfiniteScroll')); const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('useReactionPickerForContextMenu')); @@ -266,12 +280,32 @@ const showTimelineReplies = computed(defaultStore.makeGetterSetter('showTimeline const keepScreenOn = computed(defaultStore.makeGetterSetter('keepScreenOn')); const enableGamingMode = computed(defaultStore.makeGetterSetter('gamingMode')); const showMediaTimeline = computed(defaultStore.makeGetterSetter('showMediaTimeline')); - +const showVisibilityColor = computed(defaultStore.makeGetterSetter('showVisibilityColor')) watch(lang, () => { miLocalStorage.setItem('lang', lang.value as string); miLocalStorage.removeItem('locale'); }); + document.documentElement.style.setProperty('--gamingspeed', numberOfGamingSpeed.value+'s'); +function hexToRgb(hex) { + // 16進数のカラーコードから "#" を除去 + hex = hex.replace(/^#/, ''); + + // 16進数をRGBに変換 + const r = parseInt(hex.substring(0, 2), 16); + const g = parseInt(hex.substring(2, 4), 16); + const b = parseInt(hex.substring(4, 6), 16); + + return `${r},${g},${b}`; +} +document.documentElement.style.setProperty('--homeColor', hexToRgb(homeColor.value)); +document.documentElement.style.setProperty("--followerColor",hexToRgb(followerColor.value)); +document.documentElement.style.setProperty("--specifiedColor",hexToRgb(specifiedColor.value)) +watch([homeColor,specifiedColor,followerColor], ()=>{ + document.documentElement.style.setProperty('--homeColor', hexToRgb(homeColor.value)); + document.documentElement.style.setProperty("--followerColor",hexToRgb(followerColor.value)); + document.documentElement.style.setProperty("--specifiedColor",hexToRgb(specifiedColor.value)) +}) watch(numberOfGamingSpeed, () =>{ document.documentElement.style.setProperty('--gamingspeed', numberOfGamingSpeed.value+'s'); }) @@ -290,7 +324,6 @@ watch(useSystemFont, () => { miLocalStorage.removeItem('useSystemFont'); } }); - watch([ lang, fontSize, @@ -306,6 +339,7 @@ watch([ highlightSensitiveMedia, keepScreenOn, showMediaTimeline, + showVisibilityColor, ], async () => { await reloadAsk(); }); diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts index 18aef358bd..d48517aaf2 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -348,6 +348,18 @@ export const defaultStore = markRaw(new Storage('base', { where: 'device', default: 3, }, + specifiedColor:{ + where: 'device', + default: '#FFFF64', + }, + followerColor:{ + where: 'device', + default: '#FF00FF', + }, + homeColor:{ + where: 'device', + default: '#00FFFF', + }, numberOfGamingSpeed: { where: 'device', default: 44, @@ -364,6 +376,10 @@ export const defaultStore = markRaw(new Storage('base', { where: 'device', default: true, }, + showVisibilityColor:{ + where: 'device', + default: false, + }, reactionsDisplaySize: { where: 'device', default: 'medium' as 'small' | 'medium' | 'large', diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue index 33e9522d4b..47a3a7d6ad 100644 --- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue +++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue @@ -84,9 +84,23 @@ import {instance} from '@/instance'; let bannerUrl = ref(defaultStore.state.bannerUrl); let iconUrl = ref(defaultStore.state.iconUrl); +function hexToRgb(hex) { + // 16進数のカラーコードから "#" を除去 + hex = hex.replace(/^#/, ''); + // 16進数をRGBに変換 + const r = parseInt(hex.substring(0, 2), 16); + const g = parseInt(hex.substring(2, 4), 16); + const b = parseInt(hex.substring(4, 6), 16); + + return `${r},${g},${b}`; +} const darkMode = computed(defaultStore.makeGetterSetter('darkMode')); const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode')); +document.documentElement.style.setProperty('--homeColor', hexToRgb(defaultStore.state.homeColor)); +document.documentElement.style.setProperty("--followerColor",hexToRgb(defaultStore.state.followerColor)); +document.documentElement.style.setProperty("--specifiedColor",hexToRgb(defaultStore.state.specifiedColor)) +document.documentElement.style.setProperty('--gamingspeed', defaultStore.state.numberOfGamingSpeed+'s'); let gaming = ref() if (darkMode.value) { diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue index f3ebf38ccc..93e986e638 100644 --- a/packages/frontend/src/ui/_common_/navbar.vue +++ b/packages/frontend/src/ui/_common_/navbar.vue @@ -94,6 +94,21 @@ import {$i, openAccountMenu as openAccountMenu_} from '@/account'; import {bannerDark, bannerLight, defaultStore, iconDark, iconLight} from '@/store'; import {i18n} from '@/i18n'; import {instance} from '@/instance'; +function hexToRgb(hex) { + // 16進数のカラーコードから "#" を除去 + hex = hex.replace(/^#/, ''); + + // 16進数をRGBに変換 + const r = parseInt(hex.substring(0, 2), 16); + const g = parseInt(hex.substring(2, 4), 16); + const b = parseInt(hex.substring(4, 6), 16); + + return `${r},${g},${b}`; +} +document.documentElement.style.setProperty('--homeColor', hexToRgb(defaultStore.state.homeColor)); +document.documentElement.style.setProperty("--followerColor",hexToRgb(defaultStore.state.followerColor)); +document.documentElement.style.setProperty("--specifiedColor",hexToRgb(defaultStore.state.specifiedColor)) +document.documentElement.style.setProperty('--gamingspeed', defaultStore.state.numberOfGamingSpeed+'s'); const iconOnly = ref(false); let bannerUrl = ref(defaultStore.state.bannerUrl);