SWREI/switched
0
0
Fork 0
Code

🎨

Browse Source
This commit is contained in:
tamaina 2023-02-11 11:35:28 +00:00
parent 19c0027605
commit 998c2b692a
2 changed files with 46 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
packages/frontend/src/components/global/MkPageHeader.tabs.vue
View File

@ -10,7 +10,7 @@
:class="$style.tabTitle">{{ t.title }}</div> :class="$style.tabTitle">{{ t.title }}</div>
<Transition v-else @enter="enter" @after-enter="afterEnter" @leave="leave" @after-leave="afterLeave" <Transition v-else @enter="enter" @after-enter="afterEnter" @leave="leave" @after-leave="afterLeave"
mode="in-out"> mode="in-out">
<div v-if="t.key === tab" :class="$style.tabTitle">{{ t.title }}</div> <div v-show="t.key === tab" :class="[$style.tabTitle, $style.animate]">{{ t.title }}</div>
</Transition> </Transition>
</div> </div>
</button> </button>
@ -34,7 +34,7 @@ export type Tab = {
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, onUnmounted, watch, nextTick } from 'vue'; import { onMounted, onUnmounted, watch, nextTick, Transition, shallowRef } from 'vue';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
@ -50,9 +50,9 @@ const emit = defineEmits<{
(ev: 'tabClick', key: string); (ev: 'tabClick', key: string);
}>(); }>();
let el = $shallowRef<HTMLElement | null>(null); const el = shallowRef<HTMLElement | null>(null);
const tabRefs: Record<string, HTMLElement | null> = {}; const tabRefs: Record<string, HTMLElement | null> = {};
let tabHighlightEl = $shallowRef<HTMLElement | null>(null); const tabHighlightEl = shallowRef<HTMLElement | null>(null);
function onTabMousedown(tab: Tab, ev: MouseEvent): void { function onTabMousedown(tab: Tab, ev: MouseEvent): void {
// ユーザビリティの観点からmousedown時にはonClickは呼ばない // ユーザビリティの観点からmousedown時にはonClickは呼ばない
@ -77,13 +77,13 @@ function onTabClick(t: Tab, ev: MouseEvent): void {
function renderTab() { function renderTab() {
const tabEl = props.tab ? tabRefs[props.tab] : undefined; const tabEl = props.tab ? tabRefs[props.tab] : undefined;
if (tabEl && tabHighlightEl && tabHighlightEl.parentElement) { if (tabEl && tabHighlightEl.value && tabHighlightEl.value.parentElement) {
// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある // offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4 // https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
const parentRect = tabHighlightEl.parentElement.getBoundingClientRect(); const parentRect = tabHighlightEl.value.parentElement.getBoundingClientRect();
const rect = tabEl.getBoundingClientRect(); const rect = tabEl.getBoundingClientRect();
tabHighlightEl.style.width = rect.width + 'px'; tabHighlightEl.value.style.width = rect.width + 'px';
tabHighlightEl.style.left = (rect.left - parentRect.left + tabHighlightEl.parentElement.scrollLeft) + 'px'; tabHighlightEl.value.style.left = (rect.left - parentRect.left + tabHighlightEl.value.parentElement.scrollLeft) + 'px';
} }
} }
@ -99,22 +99,32 @@ function onTabWheel(ev: WheelEvent) {
return false; return false;
} }
function enter(el: HTMLElement) { let entering = false;
async function enter(el: HTMLElement) {
entering = true;
const elementWidth = el.getBoundingClientRect().width; const elementWidth = el.getBoundingClientRect().width;
el.style.width = '0'; el.style.width = '0';
el.offsetWidth; // reflow el.style.paddingLeft = '0';
el.offsetWidth; // force reflow
el.style.width = elementWidth + 'px'; el.style.width = elementWidth + 'px';
setTimeout(renderTab, 70); el.style.paddingLeft = '';
nextTick(() => {
entering = false;
});
setTimeout(renderTab, 170);
} }
function afterEnter(el: HTMLElement) { function afterEnter(el: HTMLElement) {
el.style.width = ''; //el.style.width = '';
nextTick(renderTab);
} }
function leave(el: HTMLElement) { async function leave(el: HTMLElement) {
const elementWidth = el.getBoundingClientRect().width; const elementWidth = el.getBoundingClientRect().width;
el.style.width = elementWidth + 'px'; el.style.width = elementWidth + 'px';
el.offsetWidth; // reflow el.style.paddingLeft = '';
el.offsetWidth; // force reflow
el.style.width = '0'; el.style.width = '0';
el.style.paddingLeft = '0';
} }
function afterLeave(el: HTMLElement) { function afterLeave(el: HTMLElement) {
el.style.width = ''; el.style.width = '';
@ -124,14 +134,17 @@ let ro2: ResizeObserver | null;
onMounted(() => { onMounted(() => {
watch([() => props.tab, () => props.tabs], () => { watch([() => props.tab, () => props.tabs], () => {
nextTick(() => renderTab()); nextTick(() => {
if (entering) return;
renderTab();
});
}, { }, {
immediate: true, immediate: true,
}); });
if (props.rootEl) { if (props.rootEl) {
ro2 = new ResizeObserver((entries, observer) => { ro2 = new ResizeObserver((entries, observer) => {
if (document.body.contains(el as HTMLElement)) { if (document.body.contains(el.value as HTMLElement)) {
nextTick(() => renderTab()); nextTick(() => renderTab());
} }
}); });
@ -194,12 +207,15 @@ onUnmounted(() => {
} }
.tabIcon+.tabTitle { .tabIcon+.tabTitle {
margin-left: 8px; padding-left: 8px;
} }
.tabTitle { .tabTitle {
overflow: hidden; overflow: hidden;
transition: width 0.15s ease-in-out;
&.animate {
transition: width .15s linear, padding-left .15s linear;
}
} }
.tabHighlight { .tabHighlight {

31
packages/frontend/src/components/global/MkPageHeader.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div v-if="show" ref="el" :class="[$style.root]" :style="{ background: bg }"> <div v-if="show" ref="el" :class="[$style.root]" :style="{ background: bg }">
<div :class="[$style.upper, { [$style.slim]: narrow, [$style.thin]: thin_ }]"> <div :class="[$style.upper, { [$style.slim]: narrow, [$style.thin]: thin_ }]">
<div v-if="narrow && props.displayMyAvatar && $i" class="_button" :class="$style.buttonsLeft" @click="openAccountMenu"> <div v-if="!thin_ && narrow && props.displayMyAvatar && $i" class="_button" :class="$style.buttonsLeft" @click="openAccountMenu">
<MkAvatar :class="$style.avatar" :user="$i" /> <MkAvatar :class="$style.avatar" :user="$i" />
</div> </div>
<div v-else-if="narrow && !hideTitle" :class="$style.buttonsLeft" /> <div v-else-if="!thin_ && narrow && !hideTitle" :class="$style.buttonsLeft" />
<template v-if="metadata"> <template v-if="metadata">
<div v-if="!hideTitle" :class="$style.titleContainer" @click="top"> <div v-if="!hideTitle" :class="$style.titleContainer" @click="top">
@ -21,7 +21,7 @@
</div> </div>
<XTabs v-if="!narrow || hideTitle" :class="$style.tabs" :tab="tab" @update:tab="key => emit('update:tab', key)" :tabs="tabs" :root-el="el" @tab-click="onTabClick"/> <XTabs v-if="!narrow || hideTitle" :class="$style.tabs" :tab="tab" @update:tab="key => emit('update:tab', key)" :tabs="tabs" :root-el="el" @tab-click="onTabClick"/>
</template> </template>
<div v-if="(narrow && !hideTitle) || (actions && actions.length > 0)" :class="$style.buttonsRight"> <div v-if="(!thin_ && narrow && !hideTitle) || (actions && actions.length > 0)" :class="$style.buttonsRight">
<template v-for="action in actions"> <template v-for="action in actions">
<button v-tooltip.noDelay="action.text" class="_button" :class="[$style.button, { [$style.highlighted]: action.highlighted }]" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button> <button v-tooltip.noDelay="action.text" class="_button" :class="[$style.button, { [$style.highlighted]: action.highlighted }]" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
</template> </template>
@ -142,6 +142,7 @@ onUnmounted(() => {
.upper { .upper {
--height: 50px; --height: 50px;
display: flex; display: flex;
gap: var(--margin);
height: var(--height); height: var(--height);
.tabs:first-child { .tabs:first-child {
@ -151,12 +152,9 @@ onUnmounted(() => {
padding-left: 16px; padding-left: 16px;
mask-image: linear-gradient(90deg, rgba(0,0,0,0), rgb(0,0,0) 16px, rgb(0,0,0) 100%); mask-image: linear-gradient(90deg, rgba(0,0,0,0), rgb(0,0,0) 16px, rgb(0,0,0) 100%);
} }
.tabs:last-child { .tabs {
margin-right: auto; margin-right: auto;
} }
.tabs:not(:last-child) {
margin-right: 0;
}
&.thin { &.thin {
--height: 42px; --height: 42px;
@ -170,19 +168,14 @@ onUnmounted(() => {
&.slim { &.slim {
text-align: center; text-align: center;
gap: 0;
.tabs:first-child {
margin-left: 0;
}
> .titleContainer { > .titleContainer {
flex: 1;
margin: 0 auto; margin: 0 auto;
max-width: 100%; max-width: 100%;
> *:first-child {
margin-left: auto;
}
> *:last-child {
margin-right: auto;
}
} }
} }
} }
@ -198,8 +191,6 @@ onUnmounted(() => {
align-items: center; align-items: center;
min-width: var(--height); min-width: var(--height);
height: var(--height); height: var(--height);
margin: 0 var(--margin);
&:empty { &:empty {
width: var(--height); width: var(--height);
} }
@ -207,12 +198,12 @@ onUnmounted(() => {
.buttonsLeft { .buttonsLeft {
composes: buttons; composes: buttons;
margin-right: auto; margin: 0 var(--margin) 0 0;
} }
.buttonsRight { .buttonsRight {
composes: buttons; composes: buttons;
margin-left: auto; margin: 0 0 0 var(--margin);
} }
.avatar { .avatar {