Revert "fix(frontend): modalの中でtabsを使用する際にハイライトが変な位置に出る問題を修正"
This reverts commit 3b0ec46990
.
This commit is contained in:
parent
dcd6237789
commit
b018e8e2e3
|
@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
[$style.transition_modal_leaveTo]: transitionName === 'modal',
|
||||
[$style.transition_send_leaveTo]: transitionName === 'send',
|
||||
})"
|
||||
:duration="transitionDuration" appear @afterLeave="onClosed" @enter="onOpening" @afterEnter="onOpened"
|
||||
:duration="transitionDuration" appear @afterLeave="onClosed" @enter="emit('opening')" @afterEnter="onOpened"
|
||||
>
|
||||
<div v-show="manualShowing != null ? manualShowing : showing" ref="modalRootEl" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
|
||||
<div data-cy-bg :data-cy-transparent="isEnableBgTransparent" class="_modalBg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
|
||||
|
@ -97,14 +97,6 @@ const emit = defineEmits<{
|
|||
|
||||
provide(DI.inModal, true);
|
||||
|
||||
const isTransitioning = ref((() => {
|
||||
if (!prefer.s.animation) return false;
|
||||
if (props.manualShowing === false) return false;
|
||||
return true;
|
||||
})());
|
||||
|
||||
provide(DI.modalTransitioning, isTransitioning);
|
||||
|
||||
const maxHeight = ref<number>();
|
||||
const fixed = ref(false);
|
||||
const transformOrigin = ref('center');
|
||||
|
@ -293,14 +285,8 @@ const align = () => {
|
|||
content.value.style.top = top + 'px';
|
||||
};
|
||||
|
||||
const onOpening = () => {
|
||||
emit('opening');
|
||||
isTransitioning.value = true;
|
||||
};
|
||||
|
||||
const onOpened = () => {
|
||||
emit('opened');
|
||||
isTransitioning.value = false;
|
||||
|
||||
// contentの子要素にアクセスするためレンダリングの完了を待つ必要がある(nextTickが必要)
|
||||
nextTick(() => {
|
||||
|
|
|
@ -53,9 +53,8 @@ export type Tab<K = string> = {
|
|||
</script>
|
||||
|
||||
<script lang="ts" setup generic="const T extends Tab">
|
||||
import { nextTick, onMounted, onUnmounted, useTemplateRef, ref, watch, inject } from 'vue';
|
||||
import { nextTick, onMounted, onUnmounted, useTemplateRef, watch } from 'vue';
|
||||
import { prefer } from '@/preferences.js';
|
||||
import { DI } from '@/di.js';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
tabs?: T[];
|
||||
|
@ -72,8 +71,6 @@ const emit = defineEmits<{
|
|||
|
||||
const tab = defineModel<T['key']>('tab');
|
||||
|
||||
const modalTransitioning = inject(DI.modalTransitioning, ref(false));
|
||||
|
||||
const tabHighlightEl = useTemplateRef('tabHighlightEl');
|
||||
const tabRefs: Record<string, HTMLElement | null> = {};
|
||||
|
||||
|
@ -154,14 +151,6 @@ onMounted(() => {
|
|||
if (entering) return;
|
||||
renderTab();
|
||||
});
|
||||
});
|
||||
|
||||
const modalTransitioningWatchStop = watch(modalTransitioning, (to) => {
|
||||
if (!to) {
|
||||
entering = false;
|
||||
renderTab();
|
||||
modalTransitioningWatchStop();
|
||||
}
|
||||
}, { immediate: true });
|
||||
});
|
||||
|
||||
|
|
|
@ -16,6 +16,5 @@ export const DI = {
|
|||
currentStickyBottom: Symbol() as InjectionKey<Ref<number>>,
|
||||
mfmEmojiReactCallback: Symbol() as InjectionKey<(emoji: string) => void>,
|
||||
inModal: Symbol() as InjectionKey<boolean>,
|
||||
modalTransitioning: Symbol() as InjectionKey<Ref<boolean>>,
|
||||
inAppSearchMarkerId: Symbol() as InjectionKey<Ref<string | null>>,
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue