Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

色々リファ

Browse source
This commit is contained in:
mattyatea 2024-01-03 01:25:32 +09:00
parent 6182194313
commit 1c108927ea
10 changed files with 208 additions and 160 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/backend/src/server/api/endpoints/admin/avatar-decorations/create.ts
View file

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

1
packages/backend/src/server/api/endpoints/admin/avatar-decorations/list.ts
View file

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

4
packages/frontend/src/components/MkEmojiPicker.section.vue
View file

@ -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">

159
packages/frontend/src/components/MkFoldableSection.vue
View file

@ -4,108 +4,113 @@ 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>
<div v-if="openedAtLeastOnce" :class="[$style.body, { [$style.bgSame]: bgSame }]" :style="{ maxHeight: maxHeight ? `${maxHeight}px` : null, overflow: maxHeight ? `auto` : null }" :aria-hidden="!opened">
<Transition
:name="defaultStore.state.animation ? 'folder-toggle' : ''"
: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="showBody">
<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 {
.transition_toggle_enterActive,
.transition_toggle_leaveActive {
overflow-y: clip;
transition: opacity 0.5s, height 0.5s !important;
transition: opacity 0.3s, height 0.3s, transform 0.3s !important;
}
.folder-toggle-enter-from {
opacity: 0;
}
.folder-toggle-leave-to {
.transition_toggle_enterFrom,
.transition_toggle_leaveTo {
opacity: 0;
}
.root {
position: relative;
display: block;
}
.header {
@ -116,14 +121,64 @@ onMounted(() => {
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;
}
.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;
@ -131,14 +186,4 @@ onMounted(() => {
height: 1px;
background: var(--divider);
}
.button {
padding: 12px 0 12px 16px;
}
@container (max-width: 500px) {
.title {
padding: 8px 10px 8px 0;
}
}
</style>

2
packages/frontend/src/components/MkNoteSimple.vue
View file

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

6
packages/frontend/src/components/MkPollEditor.vue
View file

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

10
packages/frontend/src/components/MkPostForm.vue
View file

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

10
packages/frontend/src/pages/admin/instance-block.vue
View file

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

48
packages/frontend/src/pages/settings/general.vue
View file

@ -39,9 +39,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<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">
@ -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>
@ -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">
@ -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'));
@ -334,6 +330,7 @@ watch(lang, () => {
});
document.documentElement.style.setProperty('--gamingspeed', numberOfGamingSpeed.value + 's');
function hexToRgb(hex) {
// 16進数のカラーコードから "#" を除去
hex = hex.replace(/^#/, '');
@ -345,17 +342,18 @@ function hexToRgb(hex) {
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))
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))
})
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');

2
packages/misskey-js/src/autogen/types.ts
View file

@ -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[];
}[];
};