公開範囲、見やすく。

This commit is contained in:
mattyatea 2023-09-25 21:12:22 +09:00
parent 6fef96e657
commit b8c4c09e59
7 changed files with 102 additions and 7 deletions

1
locales/index.d.ts vendored
View File

@ -832,6 +832,7 @@ export interface Locale {
"GamingSpeedChangeInfo": string; "GamingSpeedChangeInfo": string;
"emailNotConfiguredWarning": string; "emailNotConfiguredWarning": string;
"ratio": string; "ratio": string;
"showVisibilityColor": string;
"previewNoteText": string; "previewNoteText": string;
"customCss": string; "customCss": string;
"customCssWarn": string; "customCssWarn": string;

View File

@ -829,6 +829,7 @@ GamingSpeedChange: "ゲーミングの光るスピードの調整"
GamingSpeedChangeInfo: "左にすれば早くなる、右にすれば遅くなる。それだけ。" GamingSpeedChangeInfo: "左にすれば早くなる、右にすれば遅くなる。それだけ。"
emailNotConfiguredWarning: "メールアドレスの設定がされていません。" emailNotConfiguredWarning: "メールアドレスの設定がされていません。"
ratio: "比率" ratio: "比率"
showVisibilityColor: "ノートの公開範囲を色付けする"
previewNoteText: "本文をプレビュー" previewNoteText: "本文をプレビュー"
customCss: "カスタムCSS" customCss: "カスタムCSS"
customCssWarn: "この設定は必ず知識のある方が行ってください。不適切な設定を行うとクライアントが正常に使用できなくなる恐れがあります。" customCssWarn: "この設定は必ず知識のある方が行ってください。不適切な設定を行うとクライアントが正常に使用できなくなる恐れがあります。"

View File

@ -9,7 +9,8 @@ SPDX-License-Identifier: AGPL-3.0-only
v-show="!isDeleted" v-show="!isDeleted"
ref="el" ref="el"
v-hotkey="keymap" 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" :tabindex="!isDeleted ? '-1' : undefined"
> >
<MkNoteSub v-if="appearNote.reply && !renoteCollapsed" :note="appearNote.reply" :class="$style.replyTo"/> <MkNoteSub v-if="appearNote.reply && !renoteCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
@ -33,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkTime :time="note.createdAt"/> <MkTime :time="note.createdAt"/>
</button> </button>
<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;" :title="i18n.ts._visibility[note.visibility]">
<i v-if="note.visibility === 'home'" class="ti ti-home"></i> <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 === 'followers'" class="ti ti-lock"></i>
<i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i> <i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
</span> </span>
@ -176,8 +177,7 @@ const props = defineProps<{
}>(); }>();
const inChannel = inject('inChannel', null); const inChannel = inject('inChannel', null);
const currentClip = inject<Ref<Misskey.entities.Clip> | null>('currentClip', null); const currentClip = inject<Ref<Misskey.entities.Clip> | null>('currentClip', null);;
let note = $ref(deepClone(props.note)); let note = $ref(deepClone(props.note));
// plugin // plugin
@ -480,6 +480,8 @@ function focusAfter() {
focusNext(el.value); focusNext(el.value);
} }
function readPromo() { function readPromo() {
os.api('promo/read', { os.api('promo/read', {
noteId: appearNote.id, noteId: appearNote.id,
@ -489,13 +491,22 @@ function readPromo() {
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.root { .root {
position: relative; position: relative;
transition: box-shadow 0.1s ease; transition: box-shadow 0.1s ease;
font-size: 1.05em; font-size: 1.05em;
overflow: clip; overflow: clip;
contain: content; contain: content;
&.home{
background-color: rgba( var(--homeColor) , 0.20) !important;
}
&.followers{
background-color: rgba(var(--followerColor), 0.20) !important;
}
&.specified{
background-color: rgba(var(--specifiedColor), 0.20) !important;
}
// //
// //
// contain-intrinsic-size // contain-intrinsic-size
@ -940,4 +951,7 @@ function readPromo() {
padding: 0 6px; padding: 0 6px;
opacity: .8; opacity: .8;
} }
.root:has(.ti-home){
background-color: rgba(255, 255, 100, 0.10) !important;
}
</style> </style>

View File

@ -48,6 +48,16 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSwitch v-model="showNoteActionsOnlyHover">{{ i18n.ts.showNoteActionsOnlyHover }}</MkSwitch> <MkSwitch v-model="showNoteActionsOnlyHover">{{ i18n.ts.showNoteActionsOnlyHover }}</MkSwitch>
<MkSwitch v-model="showClipButtonInNoteFooter">{{ i18n.ts.showClipButtonInNoteFooter }}</MkSwitch> <MkSwitch v-model="showClipButtonInNoteFooter">{{ i18n.ts.showClipButtonInNoteFooter }}</MkSwitch>
<MkSwitch v-model="collapseRenotes">{{ i18n.ts.collapseRenotes }}</MkSwitch> <MkSwitch v-model="collapseRenotes">{{ i18n.ts.collapseRenotes }}</MkSwitch>
<MkSwitch v-model="showVisibilityColor">{{ i18n.ts.showVisibilityColor}}</MkSwitch>
<MkColorInput v-if="showVisibilityColor" v-model="homeColor">
<template #label>{{ i18n.ts._visibility.home }}</template>
</MkColorInput>
<MkColorInput v-if="showVisibilityColor" v-model="followerColor">
<template #label>{{ i18n.ts._visibility.followers }}</template>
</MkColorInput>
<MkColorInput v-if="showVisibilityColor" v-model="specifiedColor">
<template #label>{{ i18n.ts._visibility.specified }}</template>
</MkColorInput>
<MkSwitch v-model="advancedMfm">{{ i18n.ts.enableAdvancedMfm }}</MkSwitch> <MkSwitch v-model="advancedMfm">{{ i18n.ts.enableAdvancedMfm }}</MkSwitch>
<MkSwitch v-if="advancedMfm" v-model="animatedMfm">{{ i18n.ts.enableAnimatedMfm }}</MkSwitch> <MkSwitch v-if="advancedMfm" v-model="animatedMfm">{{ i18n.ts.enableAnimatedMfm }}</MkSwitch>
<MkSwitch v-model="showGapBetweenNotesInTimeline">{{ i18n.ts.showGapBetweenNotesInTimeline }}</MkSwitch> <MkSwitch v-model="showGapBetweenNotesInTimeline">{{ i18n.ts.showGapBetweenNotesInTimeline }}</MkSwitch>
@ -212,6 +222,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
import { miLocalStorage } from '@/local-storage.js'; import { miLocalStorage } from '@/local-storage.js';
import { globalEvents } from '@/events'; import { globalEvents } from '@/events';
import { claimAchievement } from '@/scripts/achievements.js'; import { claimAchievement } from '@/scripts/achievements.js';
import MkColorInput from "@/components/MkColorInput.vue";
const lang = ref(miLocalStorage.getItem('lang')); const lang = ref(miLocalStorage.getItem('lang'));
const fontSize = ref(miLocalStorage.getItem('fontSize')); const fontSize = ref(miLocalStorage.getItem('fontSize'));
@ -255,6 +266,9 @@ const showFixedPostForm = computed(defaultStore.makeGetterSetter('showFixedPostF
const showFixedPostFormInChannel = computed(defaultStore.makeGetterSetter('showFixedPostFormInChannel')); const showFixedPostFormInChannel = computed(defaultStore.makeGetterSetter('showFixedPostFormInChannel'));
const numberOfPageCache = computed(defaultStore.makeGetterSetter('numberOfPageCache')); const numberOfPageCache = computed(defaultStore.makeGetterSetter('numberOfPageCache'));
const numberOfGamingSpeed = computed(defaultStore.makeGetterSetter('numberOfGamingSpeed')); 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 instanceTicker = computed(defaultStore.makeGetterSetter('instanceTicker'));
const enableInfiniteScroll = computed(defaultStore.makeGetterSetter('enableInfiniteScroll')); const enableInfiniteScroll = computed(defaultStore.makeGetterSetter('enableInfiniteScroll'));
const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('useReactionPickerForContextMenu')); const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('useReactionPickerForContextMenu'));
@ -266,12 +280,32 @@ const showTimelineReplies = computed(defaultStore.makeGetterSetter('showTimeline
const keepScreenOn = computed(defaultStore.makeGetterSetter('keepScreenOn')); const keepScreenOn = computed(defaultStore.makeGetterSetter('keepScreenOn'));
const enableGamingMode = computed(defaultStore.makeGetterSetter('gamingMode')); const enableGamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
const showMediaTimeline = computed(defaultStore.makeGetterSetter('showMediaTimeline')); const showMediaTimeline = computed(defaultStore.makeGetterSetter('showMediaTimeline'));
const showVisibilityColor = computed(defaultStore.makeGetterSetter('showVisibilityColor'))
watch(lang, () => { watch(lang, () => {
miLocalStorage.setItem('lang', lang.value as string); miLocalStorage.setItem('lang', lang.value as string);
miLocalStorage.removeItem('locale'); miLocalStorage.removeItem('locale');
}); });
document.documentElement.style.setProperty('--gamingspeed', numberOfGamingSpeed.value+'s'); document.documentElement.style.setProperty('--gamingspeed', numberOfGamingSpeed.value+'s');
function hexToRgb(hex) {
// 16 "#"
hex = hex.replace(/^#/, '');
// 16RGB
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, () =>{ watch(numberOfGamingSpeed, () =>{
document.documentElement.style.setProperty('--gamingspeed', numberOfGamingSpeed.value+'s'); document.documentElement.style.setProperty('--gamingspeed', numberOfGamingSpeed.value+'s');
}) })
@ -290,7 +324,6 @@ watch(useSystemFont, () => {
miLocalStorage.removeItem('useSystemFont'); miLocalStorage.removeItem('useSystemFont');
} }
}); });
watch([ watch([
lang, lang,
fontSize, fontSize,
@ -306,6 +339,7 @@ watch([
highlightSensitiveMedia, highlightSensitiveMedia,
keepScreenOn, keepScreenOn,
showMediaTimeline, showMediaTimeline,
showVisibilityColor,
], async () => { ], async () => {
await reloadAsk(); await reloadAsk();
}); });

View File

@ -348,6 +348,18 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device', where: 'device',
default: 3, default: 3,
}, },
specifiedColor:{
where: 'device',
default: '#FFFF64',
},
followerColor:{
where: 'device',
default: '#FF00FF',
},
homeColor:{
where: 'device',
default: '#00FFFF',
},
numberOfGamingSpeed: { numberOfGamingSpeed: {
where: 'device', where: 'device',
default: 44, default: 44,
@ -364,6 +376,10 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device', where: 'device',
default: true, default: true,
}, },
showVisibilityColor:{
where: 'device',
default: false,
},
reactionsDisplaySize: { reactionsDisplaySize: {
where: 'device', where: 'device',
default: 'medium' as 'small' | 'medium' | 'large', default: 'medium' as 'small' | 'medium' | 'large',

View File

@ -84,9 +84,23 @@ import {instance} from '@/instance';
let bannerUrl = ref(defaultStore.state.bannerUrl); let bannerUrl = ref(defaultStore.state.bannerUrl);
let iconUrl = ref(defaultStore.state.iconUrl); let iconUrl = ref(defaultStore.state.iconUrl);
function hexToRgb(hex) {
// 16 "#"
hex = hex.replace(/^#/, '');
// 16RGB
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 darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode')); 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() let gaming = ref()
if (darkMode.value) { if (darkMode.value) {

View File

@ -94,6 +94,21 @@ import {$i, openAccountMenu as openAccountMenu_} from '@/account';
import {bannerDark, bannerLight, defaultStore, iconDark, iconLight} from '@/store'; import {bannerDark, bannerLight, defaultStore, iconDark, iconLight} from '@/store';
import {i18n} from '@/i18n'; import {i18n} from '@/i18n';
import {instance} from '@/instance'; import {instance} from '@/instance';
function hexToRgb(hex) {
// 16 "#"
hex = hex.replace(/^#/, '');
// 16RGB
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); const iconOnly = ref(false);
let bannerUrl = ref(defaultStore.state.bannerUrl); let bannerUrl = ref(defaultStore.state.bannerUrl);