色々リファ
This commit is contained in:
mattyatea
parent
6182194313
commit
1c108927ea
|
|
@ -24,6 +24,7 @@ export const paramDef = {
|
|||
roleIdsThatCanBeUsedThisDecoration: { type: 'array', items: {
|
||||
type: 'string',
|
||||
} },
|
||||
category: { type: 'string', nullable: true },
|
||||
},
|
||||
required: ['name', 'description', 'url'],
|
||||
} as const;
|
||||
|
|
@ -39,6 +40,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
|
|||
description: ps.description,
|
||||
url: ps.url,
|
||||
roleIdsThatCanBeUsedThisDecoration: ps.roleIdsThatCanBeUsedThisDecoration,
|
||||
category: ps.category ?? '',
|
||||
}, me);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -95,6 +95,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
|
|||
name: avatarDecoration.name,
|
||||
description: avatarDecoration.description,
|
||||
url: avatarDecoration.url,
|
||||
category: avatarDecoration.category,
|
||||
roleIdsThatCanBeUsedThisDecoration: avatarDecoration.roleIdsThatCanBeUsedThisDecoration,
|
||||
}));
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<template>
|
||||
<!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
|
||||
<!-- フォルダの中にはカスタム絵文字だけ（Unicode絵文字もこっち） -->
|
||||
<section v-if="!hasChildSection" style="border-radius: 6px; padding-top: 9px;">
|
||||
<header class="_acrylic" @click="shown = !shown" style="border-radius: 6px;">
|
||||
<section v-if="!hasChildSection" style="border-radius: 6px;">
|
||||
<header class="_acrylic" @click="shown = !shown" >
|
||||
<i class="toggle ti-fw" :class="shown ? 'ti ti-chevron-down' : 'ti ti-chevron-up'"></i> <slot></slot> ({{ emojis.length }})
|
||||
</header>
|
||||
<div v-if="shown" class="body">
|
||||
|
|
|
|||
|
|
@ -4,141 +4,186 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<div ref="el" :class="$style.root">
|
||||
<header :class="$style.header" class="_button" :style="{ background: bg }" @click="showBody = !showBody">
|
||||
<div ref="rootEl" :class="$style.root" role="group" :aria-expanded="opened">
|
||||
<header :class="[$style.header, { [$style.opened]: opened }]" class="_button" role="button" data-cy-folder-header @click="toggle">
|
||||
<div :class="$style.title"><div><slot name="header"></slot></div></div>
|
||||
<div :class="$style.divider"></div>
|
||||
<button class="_button" :class="$style.button">
|
||||
<template v-if="showBody"><i class="ti ti-chevron-up"></i></template>
|
||||
<template v-if="opened"><i class="ti ti-chevron-up"></i></template>
|
||||
<template v-else><i class="ti ti-chevron-down"></i></template>
|
||||
</button>
|
||||
</header>
|
||||
<Transition
|
||||
:name="defaultStore.state.animation ? 'folder-toggle' : ''"
|
||||
@enter="enter"
|
||||
@afterEnter="afterEnter"
|
||||
@leave="leave"
|
||||
@afterLeave="afterLeave"
|
||||
>
|
||||
<div v-show="showBody">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</Transition>
|
||||
<div v-if="openedAtLeastOnce" :class="[$style.body, { [$style.bgSame]: bgSame }]" :style="{ maxHeight: maxHeight ? `${maxHeight}px` : null, overflow: maxHeight ? `auto` : null }" :aria-hidden="!opened">
|
||||
<Transition
|
||||
:enterActiveClass="defaultStore.state.animation ? $style.transition_toggle_enterActive : ''"
|
||||
:leaveActiveClass="defaultStore.state.animation ? $style.transition_toggle_leaveActive : ''"
|
||||
:enterFromClass="defaultStore.state.animation ? $style.transition_toggle_enterFrom : ''"
|
||||
:leaveToClass="defaultStore.state.animation ? $style.transition_toggle_leaveTo : ''"
|
||||
@enter="enter"
|
||||
@afterEnter="afterEnter"
|
||||
@leave="leave"
|
||||
@afterLeave="afterLeave"
|
||||
>
|
||||
<div v-show="opened">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, shallowRef, watch } from 'vue';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import { miLocalStorage } from '@/local-storage.js';
|
||||
import { nextTick, onMounted, shallowRef, ref } from 'vue';
|
||||
import { defaultStore } from '@/store.js';
|
||||
|
||||
const miLocalStoragePrefix = 'ui:folder:' as const;
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
expanded?: boolean;
|
||||
persistKey?: string;
|
||||
defaultOpen?: boolean;
|
||||
maxHeight?: number | null;
|
||||
}>(), {
|
||||
expanded: true,
|
||||
defaultOpen: true,
|
||||
maxHeight: null,
|
||||
});
|
||||
|
||||
const el = shallowRef<HTMLDivElement>();
|
||||
const bg = ref<string | null>(null);
|
||||
const showBody = ref((props.persistKey && miLocalStorage.getItem(`${miLocalStoragePrefix}${props.persistKey}`)) ? (miLocalStorage.getItem(`${miLocalStoragePrefix}${props.persistKey}`) === 't') : props.expanded);
|
||||
|
||||
watch(showBody, () => {
|
||||
if (props.persistKey) {
|
||||
miLocalStorage.setItem(`${miLocalStoragePrefix}${props.persistKey}`, showBody.value ? 't' : 'f');
|
||||
const getBgColor = (el: HTMLElement) => {
|
||||
const style = window.getComputedStyle(el);
|
||||
if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
|
||||
return style.backgroundColor;
|
||||
} else {
|
||||
return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function enter(el: Element) {
|
||||
const rootEl = shallowRef<HTMLElement>();
|
||||
const bgSame = ref(false);
|
||||
const opened = ref(props.defaultOpen);
|
||||
const openedAtLeastOnce = ref(props.defaultOpen);
|
||||
|
||||
function enter(el) {
|
||||
const elementHeight = el.getBoundingClientRect().height;
|
||||
el.style.height = 0;
|
||||
el.offsetHeight; // reflow
|
||||
el.style.height = elementHeight + 'px';
|
||||
el.style.height = Math.min(elementHeight, props.maxHeight ?? Infinity) + 'px';
|
||||
}
|
||||
|
||||
function afterEnter(el: Element) {
|
||||
function afterEnter(el) {
|
||||
el.style.height = null;
|
||||
}
|
||||
|
||||
function leave(el: Element) {
|
||||
function leave(el) {
|
||||
const elementHeight = el.getBoundingClientRect().height;
|
||||
el.style.height = elementHeight + 'px';
|
||||
el.offsetHeight; // reflow
|
||||
el.style.height = 0;
|
||||
}
|
||||
|
||||
function afterLeave(el: Element) {
|
||||
function afterLeave(el) {
|
||||
el.style.height = null;
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
if (!opened.value) {
|
||||
openedAtLeastOnce.value = true;
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
opened.value = !opened.value;
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
function getParentBg(el: HTMLElement | null): string {
|
||||
if (el == null || el.tagName === 'BODY') return 'var(--bg)';
|
||||
const bg = el.style.background || el.style.backgroundColor;
|
||||
if (bg) {
|
||||
return bg;
|
||||
} else {
|
||||
return getParentBg(el.parentElement);
|
||||
}
|
||||
}
|
||||
|
||||
const rawBg = getParentBg(el.value);
|
||||
const _bg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
|
||||
_bg.setAlpha(0.85);
|
||||
bg.value = _bg.toRgbString();
|
||||
const computedStyle = getComputedStyle(document.documentElement);
|
||||
const parentBg = getBgColor(rootEl.value.parentElement);
|
||||
const myBg = computedStyle.getPropertyValue('--panel');
|
||||
bgSame.value = parentBg === myBg;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.folder-toggle-enter-active, .folder-toggle-leave-active {
|
||||
overflow-y: clip;
|
||||
transition: opacity 0.5s, height 0.5s !important;
|
||||
.transition_toggle_enterActive,
|
||||
.transition_toggle_leaveActive {
|
||||
overflow-y: clip;
|
||||
transition: opacity 0.3s, height 0.3s, transform 0.3s !important;
|
||||
}
|
||||
.folder-toggle-enter-from {
|
||||
opacity: 0;
|
||||
}
|
||||
.folder-toggle-leave-to {
|
||||
opacity: 0;
|
||||
.transition_toggle_enterFrom,
|
||||
.transition_toggle_leaveTo {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.root {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
position: sticky;
|
||||
top: var(--stickyTop, 0px);
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
backdrop-filter: var(--blur, blur(20px));
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
position: sticky;
|
||||
top: var(--stickyTop, 0px);
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
backdrop-filter: var(--blur, blur(20px));
|
||||
|
||||
&.opened {
|
||||
border-radius: 6px 6px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.headerUpper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.headerLower {
|
||||
color: var(--fgTransparentWeak);
|
||||
font-size: .85em;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.headerIcon {
|
||||
margin-right: 0.75em;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
opacity: 0.8;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
|
||||
& + .headerText {
|
||||
padding-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
margin: 0;
|
||||
padding: 12px 16px 12px 0;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
margin: 0;
|
||||
padding: 12px 16px 12px 0;
|
||||
}
|
||||
.headerText {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.headerTextSub {
|
||||
color: var(--fgTransparentWeak);
|
||||
font-size: .85em;
|
||||
}
|
||||
|
||||
.headerRight {
|
||||
margin-left: auto;
|
||||
color: var(--fgTransparentWeak);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.headerRightText:not(:empty) {
|
||||
margin-right: 0.75em;
|
||||
}
|
||||
|
||||
.divider {
|
||||
flex: 1;
|
||||
margin: auto;
|
||||
height: 1px;
|
||||
background: var(--divider);
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 12px 0 12px 16px;
|
||||
}
|
||||
|
||||
@container (max-width: 500px) {
|
||||
.title {
|
||||
padding: 8px 10px 8px 0;
|
||||
}
|
||||
flex: 1;
|
||||
margin: auto;
|
||||
height: 1px;
|
||||
background: var(--divider);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ const showContent = ref(false);
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0.95em;
|
||||
border-bottom: solid 0.5px var(--divider);
|
||||
|
||||
}
|
||||
.button{
|
||||
margin-right: var(--margin);
|
||||
|
|
|
|||
|
|
@ -149,8 +149,10 @@ watch([choices, multiple, expiration, atDate, atTime, after, unit], () => emit('
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.zmdxowus {
|
||||
padding: 8px 16px;
|
||||
|
||||
margin: 4px 8px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 8px;
|
||||
border: solid 2px var(--divider);
|
||||
> .caution {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 0.8em;
|
||||
|
|
|
|||
|
|
@ -1274,23 +1274,21 @@ defineExpose({
|
|||
.cw {
|
||||
z-index: 1;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: solid 0.5px var(--divider);
|
||||
border-bottom: solid 1px var(--divider);
|
||||
}
|
||||
|
||||
.postOptionsRoot {
|
||||
>* {
|
||||
border-bottom: solid 0.5px var(--divider);
|
||||
}
|
||||
>:last-child {
|
||||
border-bottom: none;
|
||||
border-bottom: solid 1px var(--divider);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hashtags {
|
||||
z-index: 1;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
border-top: solid 1px var(--divider);
|
||||
}
|
||||
|
||||
.textOuter {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<template>
|
||||
<MkStickyContainer>
|
||||
<template #header>
|
||||
<XHeader :actions="headerActions" :tabs="headerTabs"/>
|
||||
<MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/>
|
||||
</template>
|
||||
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
|
||||
<FormSuspense :p="init">
|
||||
|
|
@ -34,8 +34,8 @@ import * as os from '@/os.js';
|
|||
import { fetchInstance } from '@/instance.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { definePageMetadata } from '@/scripts/page-metadata.js';
|
||||
import MkSpacer from "@/components/global/MkSpacer.vue";
|
||||
import MkStickyContainer from "@/components/global/MkStickyContainer.vue";
|
||||
import MkSpacer from '@/components/global/MkSpacer.vue';
|
||||
import MkStickyContainer from '@/components/global/MkStickyContainer.vue';
|
||||
|
||||
const blockedHosts = ref<string>('');
|
||||
const silencedHosts = ref<string>('');
|
||||
|
|
@ -43,8 +43,8 @@ const tab = ref('block');
|
|||
|
||||
async function init() {
|
||||
const meta = await os.api('admin/meta');
|
||||
blockedHosts.value = meta.blockedHosts.join('\n');
|
||||
silencedHosts.value = meta.silencedHosts.join('\n');
|
||||
blockedHosts.value = meta.blockedHosts ? meta.blockedHosts.join('\n') : '';
|
||||
silencedHosts.value = meta.silencedHosts ? meta.silencedHosts.join('\n') : '';
|
||||
}
|
||||
|
||||
function save() {
|
||||
|
|
|
|||
|
|
@ -35,32 +35,31 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<MkButton v-if="defaultStore.reactiveState.pinnedUserLists.value.length === 0" @click="setPinnedList()">{{ i18n.ts.add }}</MkButton>
|
||||
<MkButton v-else danger @click="removePinnedList()"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
|
||||
</MkFolder>
|
||||
<MkSwitch v-model="showMediaTimeline">{{ i18n.ts.showMediaTimeline}}<template #caption>{{ i18n.ts.showMediaTimelineInfo }} </template></MkSwitch>
|
||||
<MkSwitch v-model="showGlobalTimeline">{{ i18n.ts.showGlobalTimeline }}</MkSwitch>
|
||||
<MkSwitch v-model="showMediaTimeline">{{ i18n.ts.showMediaTimeline }}<template #caption>{{ i18n.ts.showMediaTimelineInfo }} </template></MkSwitch>
|
||||
<MkSwitch v-model="showGlobalTimeline">{{ i18n.ts.showGlobalTimeline }}</MkSwitch>
|
||||
</div>
|
||||
</FormSection>
|
||||
|
||||
<FormSection>
|
||||
<template #label>{{ i18n.ts.displayOfNote }}</template>
|
||||
<MkFoldableSection :defaultOpen="false" class="item">
|
||||
<template #header>{{ i18n.ts.displayOfNote }}</template>
|
||||
|
||||
<div class="_gaps_m">
|
||||
<div class="_gaps_s">
|
||||
<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>
|
||||
<MkColorInput v-if="showVisibilityColor" v-model="localOnlyColor">
|
||||
<template #label>{{ i18n.ts.localOnly }}</template>
|
||||
</MkColorInput>
|
||||
<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>
|
||||
<MkColorInput v-if="showVisibilityColor" v-model="localOnlyColor">
|
||||
<template #label>{{ i18n.ts.localOnly }}</template>
|
||||
</MkColorInput>
|
||||
<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="enableQuickAddMfmFunction">{{ i18n.ts.enableQuickAddMfmFunction }}</MkSwitch>
|
||||
|
|
@ -97,10 +96,9 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<option value="2_3">{{ i18n.t('limitTo', { x: '2:3' }) }}</option>
|
||||
</MkRadios>
|
||||
</div>
|
||||
</FormSection>
|
||||
|
||||
<FormSection>
|
||||
<template #label>{{ i18n.ts.notificationDisplay }}</template>
|
||||
</MkFoldableSection>
|
||||
<MkFoldableSection :defaultOpen="false" class="item">
|
||||
<template #header>{{ i18n.ts.notificationDisplay }}</template>
|
||||
|
||||
<div class="_gaps_m">
|
||||
<MkSwitch v-model="useGroupedNotifications">{{ i18n.ts.useGroupedNotifications }}</MkSwitch>
|
||||
|
|
@ -121,11 +119,9 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
|
||||
<MkButton @click="testNotification">{{ i18n.ts._notification.checkNotificationBehavior }}</MkButton>
|
||||
</div>
|
||||
</FormSection>
|
||||
|
||||
<FormSection>
|
||||
<template #label>{{ i18n.ts.appearance }}</template>
|
||||
|
||||
</MkFoldableSection>
|
||||
<MkFoldableSection :defaultOpen="false" class="item">
|
||||
<template #header>{{ i18n.ts.appearance }}</template>
|
||||
<div class="_gaps_m">
|
||||
<div class="_gaps_s">
|
||||
<MkSwitch v-model="reduceAnimation">{{ i18n.ts.reduceUiAnimation }}</MkSwitch>
|
||||
|
|
@ -139,8 +135,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<MkSwitch v-model="disableDrawer">{{ i18n.ts.disableDrawer }}</MkSwitch>
|
||||
<MkSwitch v-model="forceShowAds">{{ i18n.ts.forceShowAds }}</MkSwitch>
|
||||
<MkSwitch v-model="enableGamingMode">{{ i18n.ts.gamingMode }} <template #caption>{{ i18n.ts.gamingModeInfo }} </template></MkSwitch>
|
||||
<MkSwitch v-model="enableonlyAndWithSave">{{ i18n.ts.onlyAndWithSave}}<template #caption>{{ i18n.ts.onlyAndWithSaveInfo }} </template></MkSwitch>
|
||||
<MkSwitch v-model="enablehanntenn">{{ i18n.ts.hanntenn }}<template #caption>{{ i18n.ts.hanntennInfo }} </template></MkSwitch>
|
||||
<MkSwitch v-model="enableonlyAndWithSave">{{ i18n.ts.onlyAndWithSave }}<template #caption>{{ i18n.ts.onlyAndWithSaveInfo }} </template></MkSwitch>
|
||||
<MkSwitch v-model="enablehanntenn">{{ i18n.ts.hanntenn }}<template #caption>{{ i18n.ts.hanntennInfo }} </template></MkSwitch>
|
||||
<MkSwitch v-model="enableSeasonalScreenEffect">{{ i18n.ts.seasonalScreenEffect }}</MkSwitch>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -161,10 +157,9 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<option value="3"><span style="font-size: 17px;">Aa</span></option>
|
||||
</MkRadios>
|
||||
</div>
|
||||
</FormSection>
|
||||
|
||||
<FormSection>
|
||||
<template #label>{{ i18n.ts.behavior }}</template>
|
||||
</MkFoldableSection>
|
||||
<MkFoldableSection :defaultOpen="false" class="item">
|
||||
<template #header>{{ i18n.ts.behavior }}</template>
|
||||
|
||||
<div class="_gaps_m">
|
||||
<div class="_gaps_s">
|
||||
|
|
@ -184,10 +179,10 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<template #label>{{ i18n.ts.numberOfPageCache }}</template>
|
||||
<template #caption>{{ i18n.ts.numberOfPageCacheDescription }}</template>
|
||||
</MkRange>
|
||||
<MkRange v-model="numberOfGamingSpeed" :min="1" :max="60" :step="1" easing>
|
||||
<template #label>{{ i18n.ts.GamingSpeedChange }}</template>
|
||||
<template #caption>{{ i18n.ts.GamingSpeedChangeInfo }}</template>
|
||||
</MkRange>
|
||||
<MkRange v-model="numberOfGamingSpeed" :min="1" :max="60" :step="1" easing>
|
||||
<template #label>{{ i18n.ts.GamingSpeedChange }}</template>
|
||||
<template #caption>{{ i18n.ts.GamingSpeedChangeInfo }}</template>
|
||||
</MkRange>
|
||||
<MkFolder>
|
||||
<template #label>{{ i18n.ts.dataSaver }}</template>
|
||||
|
||||
|
|
@ -219,7 +214,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</div>
|
||||
</MkFolder>
|
||||
</div>
|
||||
</FormSection>
|
||||
</MkFoldableSection>
|
||||
|
||||
<FormSection>
|
||||
<template #label>{{ i18n.ts.other }}</template>
|
||||
|
|
@ -261,7 +256,8 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
|
|||
import { miLocalStorage } from '@/local-storage.js';
|
||||
import { globalEvents } from '@/events.js';
|
||||
import { claimAchievement } from '@/scripts/achievements.js';
|
||||
import MkColorInput from "@/components/MkColorInput.vue";
|
||||
import MkColorInput from '@/components/MkColorInput.vue';
|
||||
import MkFoldableSection from '@/components/MkFoldableSection.vue';
|
||||
|
||||
const lang = ref(miLocalStorage.getItem('lang'));
|
||||
const fontSize = ref(miLocalStorage.getItem('fontSize'));
|
||||
|
|
@ -323,7 +319,7 @@ const enableonlyAndWithSave = computed(defaultStore.makeGetterSetter('onlyAndWit
|
|||
const enablehanntenn = computed(defaultStore.makeGetterSetter('enablehanntenn'));
|
||||
const showMediaTimeline = computed(defaultStore.makeGetterSetter('showMediaTimeline'));
|
||||
const showGlobalTimeline = computed(defaultStore.makeGetterSetter('showGlobalTimeline'));
|
||||
const showVisibilityColor = computed(defaultStore.makeGetterSetter('showVisibilityColor'))
|
||||
const showVisibilityColor = computed(defaultStore.makeGetterSetter('showVisibilityColor'));
|
||||
const disableStreamingTimeline = computed(defaultStore.makeGetterSetter('disableStreamingTimeline'));
|
||||
const useGroupedNotifications = computed(defaultStore.makeGetterSetter('useGroupedNotifications'));
|
||||
const enableSeasonalScreenEffect = computed(defaultStore.makeGetterSetter('enableSeasonalScreenEffect'));
|
||||
|
|
@ -333,29 +329,31 @@ watch(lang, () => {
|
|||
miLocalStorage.removeItem('localeVersion');
|
||||
});
|
||||
|
||||
document.documentElement.style.setProperty('--gamingspeed', numberOfGamingSpeed.value+'s');
|
||||
document.documentElement.style.setProperty('--gamingspeed', numberOfGamingSpeed.value + 's');
|
||||
|
||||
function hexToRgb(hex) {
|
||||
// 16進数のカラーコードから "#" を除去
|
||||
hex = hex.replace(/^#/, '');
|
||||
// 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);
|
||||
// 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}`;
|
||||
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');
|
||||
})
|
||||
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');
|
||||
});
|
||||
watch(fontSize, () => {
|
||||
if (fontSize.value == null) {
|
||||
miLocalStorage.removeItem('fontSize');
|
||||
|
|
@ -388,9 +386,9 @@ watch([
|
|||
highlightSensitiveMedia,
|
||||
keepScreenOn,
|
||||
showMediaTimeline,
|
||||
showVisibilityColor,
|
||||
enableonlyAndWithSave,
|
||||
showGlobalTimeline,
|
||||
showVisibilityColor,
|
||||
enableonlyAndWithSave,
|
||||
showGlobalTimeline,
|
||||
disableStreamingTimeline,
|
||||
enableSeasonalScreenEffect,
|
||||
], async () => {
|
||||
|
|
|
|||
|
|
@ -5431,6 +5431,7 @@ export type operations = {
|
|||
updatedAt: string | null;
|
||||
name: string;
|
||||
description: string;
|
||||
category: string;
|
||||
url: string;
|
||||
roleIdsThatCanBeUsedThisDecoration: string[];
|
||||
})[];
|
||||
|
|
@ -14879,6 +14880,7 @@ export type operations = {
|
|||
name: string;
|
||||
description: string;
|
||||
url: string;
|
||||
category: string;
|
||||
roleIdsThatCanBeUsedThisDecoration: string[];
|
||||
}[];
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue