usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

公開範囲、見やすく。

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
locales/index.d.ts vendored
View File

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

1
locales/ja-JP.yml
View File

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

22
packages/frontend/src/components/MkNote.vue
View File

@ -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"
>
<MkNoteSub v-if="appearNote.reply && !renoteCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
@ -176,8 +177,7 @@ const props = defineProps<{
}>();
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));
// 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() {
</script>
<style lang="scss" module>
.root {
position: relative;
transition: box-shadow 0.1s ease;
font-size: 1.05em;
overflow: clip;
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 を設定しなおせばほぼ解決できそうだが、
@ -940,4 +951,7 @@ function readPromo() {
padding: 0 6px;
opacity: .8;
}
.root:has(.ti-home){
background-color: rgba(255, 255, 100, 0.10) !important;
}
</style>

38
packages/frontend/src/pages/settings/general.vue
View File

@ -48,6 +48,16 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSwitch v-model="showNoteActionsOnlyHover">{{ i18n.ts.showNoteActionsOnlyHover }}</MkSwitch>
<MkSwitch v-model="showClipButtonInNoteFooter">{{ i18n.ts.showClipButtonInNoteFooter }}</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-if="advancedMfm" v-model="animatedMfm">{{ i18n.ts.enableAnimatedMfm }}</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 { 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();
});

16
packages/frontend/src/store.ts
View File

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

14
packages/frontend/src/ui/_common_/navbar-for-mobile.vue
View File

@ -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) {

15
packages/frontend/src/ui/_common_/navbar.vue
View File

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