いろいろかえた

This commit is contained in:
mattyatea 2024-01-31 20:12:11 +09:00
parent 942b7f1b3c
commit 121ee723d9
3 changed files with 48 additions and 117 deletions

View File

@ -4,54 +4,48 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div ref="rootEl" :class="$style.root" role="group" :aria-expanded="opened"> <div ref="rootEl" :class="$style.root">
<header :class="[$style.header, { [$style.opened]: opened }]" class="_button" role="button" data-cy-folder-header @click="toggle"> <header :class="$style.header" class="_button" :style="{ background: bg }" @click="showBody = !showBody">
<div :class="$style.title"><div><slot name="header"></slot></div></div> <div :class="$style.title"><div><slot name="header"></slot></div></div>
<div :class="$style.divider"></div> <div :class="$style.divider"></div>
<button class="_button" :class="$style.button"> <button class="_button" :class="$style.button">
<template v-if="opened"><i class="ti ti-chevron-up"></i></template> <template v-if="showBody"><i class="ti ti-chevron-up"></i></template>
<template v-else><i class="ti ti-chevron-down"></i></template> <template v-else><i class="ti ti-chevron-down"></i></template>
</button> </button>
</header> </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
<Transition :enterActiveClass="defaultStore.state.animation ? $style['folder-toggle-enter-active'] : ''"
:enterActiveClass="defaultStore.state.animation ? $style.transition_toggle_enterActive : ''" :leaveActiveClass="defaultStore.state.animation ? $style['folder-toggle-leave-active'] : ''"
:leaveActiveClass="defaultStore.state.animation ? $style.transition_toggle_leaveActive : ''" :enterFromClass="defaultStore.state.animation ? $style['folder-toggle-enter-from'] : ''"
:enterFromClass="defaultStore.state.animation ? $style.transition_toggle_enterFrom : ''" :leaveToClass="defaultStore.state.animation ? $style['folder-toggle-leave-to'] : ''"
:leaveToClass="defaultStore.state.animation ? $style.transition_toggle_leaveTo : ''" @enter="enter"
@enter="enter" @afterEnter="afterEnter"
@afterEnter="afterEnter" @leave="leave"
@leave="leave" @afterLeave="afterLeave"
@afterLeave="afterLeave" >
> <div v-show="showBody">
<div v-show="opened"> <slot></slot>
<slot></slot> </div>
</div> </Transition>
</Transition>
</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { nextTick, onMounted, shallowRef, ref, watch } from 'vue'; import { onMounted, ref, shallowRef, watch } from 'vue';
import tinycolor from 'tinycolor2';
import { miLocalStorage } from '@/local-storage.js';
import { defaultStore } from '@/store.js'; import { defaultStore } from '@/store.js';
const miLocalStoragePrefix = 'ui:folder:' as const; const miLocalStoragePrefix = 'ui:folder:' as const;
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
expanded?: boolean;
persistKey?: string;
defaultOpen?: boolean; defaultOpen?: boolean;
maxHeight?: number | null;
}>(), { }>(), {
defaultOpen: true, expanded: true,
maxHeight: null,
}); });
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';
}
};
const rootEl = shallowRef<HTMLDivElement>(); const rootEl = shallowRef<HTMLDivElement>();
const bg = ref<string>(); const bg = ref<string>();
const showBody = ref((props.persistKey && miLocalStorage.getItem(`${miLocalStoragePrefix}${props.persistKey}`)) ? (miLocalStorage.getItem(`${miLocalStoragePrefix}${props.persistKey}`) === 't') : props.expanded); const showBody = ref((props.persistKey && miLocalStorage.getItem(`${miLocalStoragePrefix}${props.persistKey}`)) ? (miLocalStorage.getItem(`${miLocalStoragePrefix}${props.persistKey}`) === 't') : props.expanded);
@ -62,17 +56,12 @@ watch(showBody, () => {
} }
}); });
const rootEl = shallowRef<HTMLElement>();
const bgSame = ref(false);
const opened = ref(props.defaultOpen);
const openedAtLeastOnce = ref(props.defaultOpen);
function enter(element: Element) { function enter(element: Element) {
const el = element as HTMLElement; const el = element as HTMLElement;
const elementHeight = el.getBoundingClientRect().height; const elementHeight = el.getBoundingClientRect().height;
el.style.height = '0'; el.style.height = '0';
el.offsetHeight; // reflow el.offsetHeight; // reflow
el.style.height = Math.min(elementHeight, props.maxHeight ?? Infinity) + 'px'; el.style.height = elementHeight + 'px';
} }
function afterEnter(element: Element) { function afterEnter(element: Element) {
@ -93,16 +82,6 @@ function afterLeave(element: Element) {
el.style.height = 'unset'; el.style.height = 'unset';
} }
function toggle() {
if (!opened.value) {
openedAtLeastOnce.value = true;
}
nextTick(() => {
opened.value = !opened.value;
});
}
onMounted(() => { onMounted(() => {
function getParentBg(el?: HTMLElement | null): string { function getParentBg(el?: HTMLElement | null): string {
if (el == null || el.tagName === 'BODY') return 'var(--bg)'; if (el == null || el.tagName === 'BODY') return 'var(--bg)';
@ -113,10 +92,7 @@ onMounted(() => {
return getParentBg(el.parentElement); return getParentBg(el.parentElement);
} }
} }
const computedStyle = getComputedStyle(document.documentElement);
const parentBg = getBgColor(rootEl.value.parentElement);
const myBg = computedStyle.getPropertyValue('--panel');
bgSame.value = parentBg === myBg;
const rawBg = getParentBg(rootEl.value); const rawBg = getParentBg(rootEl.value);
const _bg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg); const _bg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
_bg.setAlpha(0.85); _bg.setAlpha(0.85);
@ -125,18 +101,17 @@ onMounted(() => {
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.transition_toggle_enterActive, .folder-toggle-enter-active, .folder-toggle-leave-active {
.transition_toggle_leaveActive {
overflow-y: clip; overflow-y: clip;
transition: opacity 0.3s, height 0.3s, transform 0.3s !important; transition: opacity 0.5s, height 0.5s !important;
} }
.transition_toggle_enterFrom,
.transition_toggle_leaveTo { .folder-toggle-enter-from, .folder-toggle-leave-to {
opacity: 0; opacity: 0;
} }
.root { .root {
display: block; position: relative;
} }
.header { .header {
@ -147,64 +122,14 @@ onMounted(() => {
top: var(--stickyTop, 0px); top: var(--stickyTop, 0px);
-webkit-backdrop-filter: var(--blur, blur(8px)); -webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(20px)); 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 { .title {
display: grid; display: grid;
place-content: center; place-content: center;
margin: 0; margin: 0;
padding: 12px 16px 12px 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 { .divider {
flex: 1; flex: 1;
@ -212,4 +137,14 @@ onMounted(() => {
height: 1px; height: 1px;
background: var(--divider); background: var(--divider);
} }
.button {
padding: 12px 0 12px 16px;
}
@container (max-width: 500px) {
.title {
padding: 8px 10px 8px 0;
}
}
</style> </style>

View File

@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, watch, onUnmounted, provide, ref, shallowRef } from 'vue'; import { computed, watch, onUnmounted, provide, shallowRef } from 'vue';
import Misskey from 'misskey-js'; import Misskey from 'misskey-js';
import { Connection } from 'misskey-js/built/streaming.js'; import { Connection } from 'misskey-js/built/streaming.js';
import MkNotes from '@/components/MkNotes.vue'; import MkNotes from '@/components/MkNotes.vue';

View File

@ -50,7 +50,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSwitch v-model="showGlobalTimeline">{{ i18n.ts.showGlobalTimeline }}</MkSwitch> <MkSwitch v-model="showGlobalTimeline">{{ i18n.ts.showGlobalTimeline }}</MkSwitch>
</div> </div>
</FormSection> </FormSection>
<MkFoldableSection :defaultOpen="false" class="item"> <MkFoldableSection :expanded="false" class="item">
<template #header>{{ i18n.ts.displayOfNote }}</template> <template #header>{{ i18n.ts.displayOfNote }}</template>
<div class="_gaps_m"> <div class="_gaps_m">
@ -108,7 +108,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkRadios> </MkRadios>
</div> </div>
</MkFoldableSection> </MkFoldableSection>
<MkFoldableSection :defaultOpen="false" class="item"> <MkFoldableSection :expanded="false" class="item">
<template #header>{{ i18n.ts.notificationDisplay }}</template> <template #header>{{ i18n.ts.notificationDisplay }}</template>
<div class="_gaps_m"> <div class="_gaps_m">
@ -131,7 +131,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton @click="testNotification">{{ i18n.ts._notification.checkNotificationBehavior }}</MkButton> <MkButton @click="testNotification">{{ i18n.ts._notification.checkNotificationBehavior }}</MkButton>
</div> </div>
</MkFoldableSection> </MkFoldableSection>
<MkFoldableSection :defaultOpen="false" class="item"> <MkFoldableSection :expanded="false" class="item">
<template #header>{{ i18n.ts.appearance }}</template> <template #header>{{ i18n.ts.appearance }}</template>
<div class="_gaps_m"> <div class="_gaps_m">
<div class="_gaps_s"> <div class="_gaps_s">
@ -169,7 +169,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkRadios> </MkRadios>
</div> </div>
</MkFoldableSection> </MkFoldableSection>
<MkFoldableSection :defaultOpen="false" class="item"> <MkFoldableSection :expanded="false" class="item">
<template #header>{{ i18n.ts.behavior }}</template> <template #header>{{ i18n.ts.behavior }}</template>
<div class="_gaps_m"> <div class="_gaps_m">
@ -227,13 +227,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkFolder> </MkFolder>
</div> </div>
</MkFoldableSection> </MkFoldableSection>
<MkFoldableSection :defaultOpen="false"> <MkFoldableSection :expanded="false">
<template #header>他のサーバーのローカルタイムラインを覗けるようにする</template> <template #header>他のサーバーのローカルタイムラインを覗けるようにする</template>
<div class="_gaps_m"> <div class="_gaps_m">
<MkFoldableSection :defaultOpen="false">
<template #header>{{ i18n.ts.accessToken }} の発行の仕方</template>
<img width="400" src="https://files.prismisskey.space/misskey/676e4b79-7897-4ea9-b074-a98139312f76.gif">
</MkFoldableSection>
<div v-if="maxLocalTimeline >= 1"> <div v-if="maxLocalTimeline >= 1">
<MkInput v-model="remoteLocalTimelineName1" placeholder="prismisskey"> <MkInput v-model="remoteLocalTimelineName1" placeholder="prismisskey">
<template #label>{{ i18n.ts.name }}</template> <template #label>{{ i18n.ts.name }}</template>