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

公開範囲に色付け(localonly)

This commit is contained in:
mattyatea 2023-09-26 10:54:46 +09:00
parent bc12bba97d
commit dd7b6f92df
2 changed files with 206 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,140 +4,160 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div <div
v-if="!muted" v-if="!muted"
v-show="!isDeleted" v-show="!isDeleted"
ref="el" ref="el"
v-hotkey="keymap" v-hotkey="keymap"
: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'}]" :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'
},{[$style.localonly] : defaultStore.state.showVisibilityColor && note.localOnly }
]"
: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"/>
<div v-if="pinned" :class="$style.tip"><i class="ti ti-pin"></i> {{ i18n.ts.pinnedNote }}</div> <div v-if="pinned" :class="$style.tip"><i class="ti ti-pin"></i> {{ i18n.ts.pinnedNote }}</div>
<!--<div v-if="appearNote._prId_" class="tip"><i class="ti ti-speakerphone"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ti ti-x"></i></button></div>--> <!--<div v-if="appearNote._prId_" class="tip"><i class="ti ti-speakerphone"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ti ti-x"></i></button></div>-->
<!--<div v-if="appearNote._featuredId_" class="tip"><i class="ti ti-bolt"></i> {{ i18n.ts.featured }}</div>--> <!--<div v-if="appearNote._featuredId_" class="tip"><i class="ti ti-bolt"></i> {{ i18n.ts.featured }}</div>-->
<div v-if="isRenote" :class="$style.renote"> <div v-if="isRenote" :class="$style.renote">
<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div> <div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
<MkAvatar :class="$style.renoteAvatar" :user="note.user" link preview/> <MkAvatar :class="$style.renoteAvatar" :user="note.user" link preview/>
<i class="ti ti-repeat" style="margin-right: 4px;"></i> <i class="ti ti-repeat" style="margin-right: 4px;"></i>
<I18n :src="i18n.ts.renotedBy" tag="span" :class="$style.renoteText"> <I18n :src="i18n.ts.renotedBy" tag="span" :class="$style.renoteText">
<template #user> <template #user>
<MkA v-user-preview="note.userId" :class="$style.renoteUserName" :to="userPage(note.user)"> <MkA v-user-preview="note.userId" :class="$style.renoteUserName" :to="userPage(note.user)">
<MkUserName :user="note.user"/> <MkUserName :user="note.user"/>
</MkA> </MkA>
</template> </template>
</I18n> </I18n>
<div :class="$style.renoteInfo"> <div :class="$style.renoteInfo">
<button ref="renoteTime" :class="$style.renoteTime" class="_button" @click="showRenoteMenu()"> <button ref="renoteTime" :class="$style.renoteTime" class="_button" @click="showRenoteMenu()">
<i class="ti ti-dots" :class="$style.renoteMenu"></i> <i class="ti ti-dots" :class="$style.renoteMenu"></i>
<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;"
<i v-if="note.visibility === 'home'" class="ti ti-home" ></i> :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 === '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>
<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span> <span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i
<span v-if="note.channel" style="margin-left: 0.5em;" :title="note.channel.name"><i class="ti ti-device-tv"></i></span> class="ti ti-rocket-off"></i></span>
<span v-if="note.channel" style="margin-left: 0.5em;" :title="note.channel.name"><i class="ti ti-device-tv"></i></span>
</div>
</div> </div>
</div> <div v-if="renoteCollapsed" :class="$style.collapsedRenoteTarget">
<div v-if="renoteCollapsed" :class="$style.collapsedRenoteTarget"> <MkAvatar :class="$style.collapsedRenoteTargetAvatar" :user="appearNote.user" link preview/>
<MkAvatar :class="$style.collapsedRenoteTargetAvatar" :user="appearNote.user" link preview/> <Mfm :text="getNoteSummary(appearNote)" :plain="true" :nowrap="true" :author="appearNote.user"
<Mfm :text="getNoteSummary(appearNote)" :plain="true" :nowrap="true" :author="appearNote.user" :class="$style.collapsedRenoteTargetText" @click="renoteCollapsed = false"/> :class="$style.collapsedRenoteTargetText" @click="renoteCollapsed = false"/>
</div> </div>
<article v-else :class="$style.article" @contextmenu.stop="onContextmenu"> <article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div> <div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
<MkAvatar :class="$style.avatar" :user="appearNote.user" link preview/> <MkAvatar :class="$style.avatar" :user="appearNote.user" link preview/>
<div :class="$style.main"> <div :class="$style.main">
<MkNoteHeader :note="appearNote" :mini="true"/> <MkNoteHeader :note="appearNote" :mini="true"/>
<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/> <MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
<div style="container-type: inline-size;"> <div style="container-type: inline-size;">
<p v-if="appearNote.cw != null" :class="$style.cw"> <p v-if="appearNote.cw != null" :class="$style.cw">
<Mfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :author="appearNote.user" :i="$i"/> <Mfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :author="appearNote.user"
<MkCwButton v-model="showContent" :note="appearNote"/> :i="$i"/>
</p> <MkCwButton v-model="showContent" :note="appearNote"/>
<div v-show="appearNote.cw == null || showContent" :class="[{ [$style.contentCollapsed]: collapsed }]"> </p>
<div :class="$style.text"> <div v-show="appearNote.cw == null || showContent" :class="[{ [$style.contentCollapsed]: collapsed }]">
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span> <div :class="$style.text">
<MkA v-if="appearNote.replyId" :class="$style.replyIcon" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA> <span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :emojiUrls="appearNote.emojis"/> <MkA v-if="appearNote.replyId" :class="$style.replyIcon" :to="`/notes/${appearNote.replyId}`"><i
<div v-if="translating || translation" :class="$style.translation"> class="ti ti-arrow-back-up"></i></MkA>
<MkLoading v-if="translating" mini/> <Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i"
<div v-else> :emojiUrls="appearNote.emojis"/>
<b>{{ i18n.t('translatedFrom', { x: translation.sourceLang }) }}: </b> <div v-if="translating || translation" :class="$style.translation">
<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :emojiUrls="appearNote.emojis"/> <MkLoading v-if="translating" mini/>
<div v-else>
<b>{{ i18n.t('translatedFrom', {x: translation.sourceLang}) }}: </b>
<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :emojiUrls="appearNote.emojis"/>
</div>
</div> </div>
</div> </div>
<div v-if="appearNote.files.length > 0">
<MkMediaList :mediaList="appearNote.files"/>
</div>
<MkPoll v-if="appearNote.poll" :note="appearNote" :class="$style.poll"/>
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false"
:class="$style.urlPreview"/>
<div v-if="appearNote.renote" :class="$style.quote">
<MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/>
</div>
<button v-if="isLong && collapsed" :class="$style.collapsed" class="_button" @click="collapsed = false">
<span :class="$style.collapsedLabel">{{ i18n.ts.showMore }}</span>
</button>
<button v-else-if="isLong && !collapsed" :class="$style.showLess" class="_button" @click="collapsed = true">
<span :class="$style.showLessLabel">{{ i18n.ts.showLess }}</span>
</button>
</div> </div>
<div v-if="appearNote.files.length > 0"> <MkA v-if="appearNote.channel && !inChannel" :class="$style.channel"
<MkMediaList :mediaList="appearNote.files"/> :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}
</div> </MkA>
<MkPoll v-if="appearNote.poll" :note="appearNote" :class="$style.poll"/>
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" :class="$style.urlPreview"/>
<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>
<button v-if="isLong && collapsed" :class="$style.collapsed" class="_button" @click="collapsed = false">
<span :class="$style.collapsedLabel">{{ i18n.ts.showMore }}</span>
</button>
<button v-else-if="isLong && !collapsed" :class="$style.showLess" class="_button" @click="collapsed = true">
<span :class="$style.showLessLabel">{{ i18n.ts.showLess }}</span>
</button>
</div> </div>
<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA> <MkReactionsViewer :note="appearNote" :maxNumber="16">
<template #more>
<div :class="$style.reactionOmitted">{{ i18n.ts.more }}</div>
</template>
</MkReactionsViewer>
<footer :class="$style.footer">
<button :class="$style.footerButton" class="_button" @click="reply()">
<i class="ti ti-arrow-back-up"></i>
<p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ appearNote.repliesCount }}</p>
</button>
<button
v-if="canRenote"
ref="renoteButton"
:class="$style.footerButton"
class="_button"
@mousedown="renote()"
>
<i class="ti ti-repeat"></i>
<p v-if="appearNote.renoteCount > 0" :class="$style.footerButtonCount">{{ appearNote.renoteCount }}</p>
</button>
<button v-else :class="$style.footerButton" class="_button" disabled>
<i class="ti ti-ban"></i>
</button>
<button v-if="appearNote.myReaction == null" ref="reactButton" :class="$style.footerButton" class="_button"
@mousedown="react()">
<i v-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
<i v-else class="ti ti-plus"></i>
</button>
<button v-if="appearNote.myReaction != null" ref="reactButton" :class="$style.footerButton" class="_button"
@click="undoReact(appearNote)">
<i class="ti ti-minus"></i>
</button>
<button v-if="defaultStore.state.showClipButtonInNoteFooter" ref="clipButton" :class="$style.footerButton"
class="_button" @mousedown="clip()">
<i class="ti ti-paperclip"></i>
</button>
<button ref="menuButton" :class="$style.footerButton" class="_button" @mousedown="menu()">
<i class="ti ti-dots"></i>
</button>
</footer>
</div> </div>
<MkReactionsViewer :note="appearNote" :maxNumber="16"> </article>
<template #more> </div>
<div :class="$style.reactionOmitted">{{ i18n.ts.more }}</div> <div v-else :class="$style.muted" @click="muted = false">
</template> <I18n :src="i18n.ts.userSaysSomething" tag="small">
</MkReactionsViewer> <template #name>
<footer :class="$style.footer"> <MkA v-user-preview="appearNote.userId" :to="userPage(appearNote.user)">
<button :class="$style.footerButton" class="_button" @click="reply()"> <MkUserName :user="appearNote.user"/>
<i class="ti ti-arrow-back-up"></i> </MkA>
<p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ appearNote.repliesCount }}</p> </template>
</button> </I18n>
<button </div>
v-if="canRenote"
ref="renoteButton"
:class="$style.footerButton"
class="_button"
@mousedown="renote()"
>
<i class="ti ti-repeat"></i>
<p v-if="appearNote.renoteCount > 0" :class="$style.footerButtonCount">{{ appearNote.renoteCount }}</p>
</button>
<button v-else :class="$style.footerButton" class="_button" disabled>
<i class="ti ti-ban"></i>
</button>
<button v-if="appearNote.myReaction == null" ref="reactButton" :class="$style.footerButton" class="_button" @mousedown="react()">
<i v-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
<i v-else class="ti ti-plus"></i>
</button>
<button v-if="appearNote.myReaction != null" ref="reactButton" :class="$style.footerButton" class="_button" @click="undoReact(appearNote)">
<i class="ti ti-minus"></i>
</button>
<button v-if="defaultStore.state.showClipButtonInNoteFooter" ref="clipButton" :class="$style.footerButton" class="_button" @mousedown="clip()">
<i class="ti ti-paperclip"></i>
</button>
<button ref="menuButton" :class="$style.footerButton" class="_button" @mousedown="menu()">
<i class="ti ti-dots"></i>
</button>
</footer>
</div>
</article>
</div>
<div v-else :class="$style.muted" @click="muted = false">
<I18n :src="i18n.ts.userSaysSomething" tag="small">
<template #name>
<MkA v-user-preview="appearNote.userId" :to="userPage(appearNote.user)">
<MkUserName :user="appearNote.user"/>
</MkA>
</template>
</I18n>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, inject, onMounted, ref, shallowRef, Ref, defineAsyncComponent } from 'vue'; import {computed, inject, onMounted, ref, shallowRef, Ref, defineAsyncComponent} from 'vue';
import * as mfm from 'mfm-js'; import * as mfm from 'mfm-js';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import MkNoteSub from '@/components/MkNoteSub.vue'; import MkNoteSub from '@/components/MkNoteSub.vue';
@ -150,26 +170,26 @@ import MkPoll from '@/components/MkPoll.vue';
import MkUsersTooltip from '@/components/MkUsersTooltip.vue'; import MkUsersTooltip from '@/components/MkUsersTooltip.vue';
import MkUrlPreview from '@/components/MkUrlPreview.vue'; import MkUrlPreview from '@/components/MkUrlPreview.vue';
import MkInstanceTicker from '@/components/MkInstanceTicker.vue'; import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
import { pleaseLogin } from '@/scripts/please-login.js'; import {pleaseLogin} from '@/scripts/please-login.js';
import { focusPrev, focusNext } from '@/scripts/focus.js'; import {focusPrev, focusNext} from '@/scripts/focus.js';
import { checkWordMute } from '@/scripts/check-word-mute.js'; import {checkWordMute} from '@/scripts/check-word-mute.js';
import { userPage } from '@/filters/user.js'; import {userPage} from '@/filters/user.js';
import * as os from '@/os.js'; import * as os from '@/os.js';
import { defaultStore, noteViewInterruptors } from '@/store.js'; import {defaultStore, noteViewInterruptors} from '@/store.js';
import { reactionPicker } from '@/scripts/reaction-picker.js'; import {reactionPicker} from '@/scripts/reaction-picker.js';
import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm.js'; import {extractUrlFromMfm} from '@/scripts/extract-url-from-mfm.js';
import { $i } from '@/account.js'; import {$i} from '@/account.js';
import { i18n } from '@/i18n.js'; import {i18n} from '@/i18n.js';
import { getAbuseNoteMenu, getCopyNoteLinkMenu, getNoteClipMenu, getNoteMenu } from '@/scripts/get-note-menu.js'; import {getAbuseNoteMenu, getCopyNoteLinkMenu, getNoteClipMenu, getNoteMenu} from '@/scripts/get-note-menu.js';
import { useNoteCapture } from '@/scripts/use-note-capture.js'; import {useNoteCapture} from '@/scripts/use-note-capture.js';
import { deepClone } from '@/scripts/clone.js'; import {deepClone} from '@/scripts/clone.js';
import { useTooltip } from '@/scripts/use-tooltip.js'; import {useTooltip} from '@/scripts/use-tooltip.js';
import { claimAchievement } from '@/scripts/achievements.js'; import {claimAchievement} from '@/scripts/achievements.js';
import { getNoteSummary } from '@/scripts/get-note-summary.js'; import {getNoteSummary} from '@/scripts/get-note-summary.js';
import { MenuItem } from '@/types/menu'; import {MenuItem} from '@/types/menu';
import MkRippleEffect from '@/components/MkRippleEffect.vue'; import MkRippleEffect from '@/components/MkRippleEffect.vue';
import { showMovedDialog } from '@/scripts/show-moved-dialog.js'; import {showMovedDialog} from '@/scripts/show-moved-dialog.js';
import { shouldCollapsed } from '@/scripts/collapsed.js'; import {shouldCollapsed} from '@/scripts/collapsed.js';
const props = defineProps<{ const props = defineProps<{
note: Misskey.entities.Note; note: Misskey.entities.Note;
@ -177,7 +197,8 @@ 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
@ -280,7 +301,7 @@ function renote(viaKeyboard = false) {
const rect = el.getBoundingClientRect(); const rect = el.getBoundingClientRect();
const x = rect.left + (el.offsetWidth / 2); const x = rect.left + (el.offsetWidth / 2);
const y = rect.top + (el.offsetHeight / 2); const y = rect.top + (el.offsetHeight / 2);
os.popup(MkRippleEffect, { x, y }, {}, 'end'); os.popup(MkRippleEffect, {x, y}, {}, 'end');
} }
os.api('notes/create', { os.api('notes/create', {
@ -311,7 +332,7 @@ function renote(viaKeyboard = false) {
const rect = el.getBoundingClientRect(); const rect = el.getBoundingClientRect();
const x = rect.left + (el.offsetWidth / 2); const x = rect.left + (el.offsetWidth / 2);
const y = rect.top + (el.offsetHeight / 2); const y = rect.top + (el.offsetHeight / 2);
os.popup(MkRippleEffect, { x, y }, {}, 'end'); os.popup(MkRippleEffect, {x, y}, {}, 'end');
} }
const configuredVisibility = defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility; const configuredVisibility = defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility;
@ -370,7 +391,7 @@ function react(viaKeyboard = false): void {
const rect = el.getBoundingClientRect(); const rect = el.getBoundingClientRect();
const x = rect.left + (el.offsetWidth / 2); const x = rect.left + (el.offsetWidth / 2);
const y = rect.top + (el.offsetHeight / 2); const y = rect.top + (el.offsetHeight / 2);
os.popup(MkRippleEffect, { x, y }, {}, 'end'); os.popup(MkRippleEffect, {x, y}, {}, 'end');
} }
} else { } else {
blur(); blur();
@ -412,20 +433,38 @@ function onContextmenu(ev: MouseEvent): void {
ev.preventDefault(); ev.preventDefault();
react(); react();
} else { } else {
const { menu, cleanup } = getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClip: currentClip?.value }); const {menu, cleanup} = getNoteMenu({
note: note,
translating,
translation,
menuButton,
isDeleted,
currentClip: currentClip?.value
});
os.contextMenu(menu, ev).then(focus).finally(cleanup); os.contextMenu(menu, ev).then(focus).finally(cleanup);
} }
} }
function menu(viaKeyboard = false): void { function menu(viaKeyboard = false): void {
const { menu, cleanup } = getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClip: currentClip?.value }); const {menu, cleanup} = getNoteMenu({
note: note,
translating,
translation,
menuButton,
isDeleted,
currentClip: currentClip?.value
});
os.popupMenu(menu, menuButton.value, { os.popupMenu(menu, menuButton.value, {
viaKeyboard, viaKeyboard,
}).then(focus).finally(cleanup); }).then(focus).finally(cleanup);
} }
async function clip() { async function clip() {
os.popupMenu(await getNoteClipMenu({ note: note, isDeleted, currentClip: currentClip?.value }), clipButton.value).then(focus); os.popupMenu(await getNoteClipMenu({
note: note,
isDeleted,
currentClip: currentClip?.value
}), clipButton.value).then(focus);
} }
function showRenoteMenu(viaKeyboard = false): void { function showRenoteMenu(viaKeyboard = false): void {
@ -481,7 +520,6 @@ function focusAfter() {
} }
function readPromo() { function readPromo() {
os.api('promo/read', { os.api('promo/read', {
noteId: appearNote.id, noteId: appearNote.id,
@ -498,14 +536,20 @@ function readPromo() {
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; &.home {
} background-color: rgba(var(--homeColor), 0.20) !important;
&.followers{ }
background-color: rgba(var(--followerColor), 0.20) !important;
} &.followers {
&.specified{ background-color: rgba(var(--followerColor), 0.20) !important;
background-color: rgba(var(--specifiedColor), 0.20) !important; }
&.specified {
background-color: rgba(var(--specifiedColor), 0.20) !important;
}
&.localonly {
background-color: rgba(var(--localOnlyColor), 0.20) !important;
} }
// これらの指定はパフォーマンス向上には有効だが、ノートの高さは一定でないため、 // これらの指定はパフォーマンス向上には有効だが、ノートの高さは一定でないため、
// 下の方までスクロールすると上のノートの高さがここで決め打ちされたものに変化し、表示しているノートの位置が変わってしまう // 下の方までスクロールすると上のノートの高さがここで決め打ちされたものに変化し、表示しているノートの位置が変わってしまう
@ -513,7 +557,7 @@ function readPromo() {
// 今度はその処理自体がパフォーマンス低下の原因にならないか懸念される。また、被リアクションでも高さは変化するため、やはり多少のズレは生じる // 今度はその処理自体がパフォーマンス低下の原因にならないか懸念される。また、被リアクションでも高さは変化するため、やはり多少のズレは生じる
// 一度レンダリングされた要素はブラウザがよしなにサイズを覚えておいてくれるような実装になるまで待った方が良さそう(なるのか？) // 一度レンダリングされた要素はブラウザがよしなにサイズを覚えておいてくれるような実装になるまで待った方が良さそう(なるのか？)
//content-visibility: auto; //content-visibility: auto;
//contain-intrinsic-size: 0 128px; //contain-intrinsic-size: 0 128px;
&:focus-visible { &:focus-visible {
outline: none; outline: none;
@ -951,7 +995,8 @@ function readPromo() {
padding: 0 6px; padding: 0 6px;
opacity: .8; opacity: .8;
} }
.root:has(.ti-home){
.root:has(.ti-home) {
background-color: rgba(255, 255, 100, 0.10) !important; background-color: rgba(255, 255, 100, 0.10) !important;
} }
</style> </style>

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

@ -57,6 +57,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkColorInput> </MkColorInput>
<MkColorInput v-if="showVisibilityColor" v-model="specifiedColor"> <MkColorInput v-if="showVisibilityColor" v-model="specifiedColor">
<template #label>{{ i18n.ts._visibility.specified }}</template> <template #label>{{ i18n.ts._visibility.specified }}</template>
</MkColorInput>
<MkColorInput v-if="showVisibilityColor" v-model="localOnlyColor">
<template #label>{{ i18n.ts.localOnly }}</template>
</MkColorInput> </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>
@ -269,6 +272,7 @@ const numberOfGamingSpeed = computed(defaultStore.makeGetterSetter('numberOfGami
const homeColor = computed(defaultStore.makeGetterSetter('homeColor')); const homeColor = computed(defaultStore.makeGetterSetter('homeColor'));
const followerColor = computed(defaultStore.makeGetterSetter('followerColor')); const followerColor = computed(defaultStore.makeGetterSetter('followerColor'));
const specifiedColor = computed(defaultStore.makeGetterSetter('specifiedColor')); const specifiedColor = computed(defaultStore.makeGetterSetter('specifiedColor'));
const localOnlyColor = computed(defaultStore.makeGetterSetter('localOnlyColor'));
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'));