diff --git a/packages/client/src/components/launch-pad.vue b/packages/client/src/components/launch-pad.vue index ff8e995fd2..4fe36bfefc 100644 --- a/packages/client/src/components/launch-pad.vue +++ b/packages/client/src/components/launch-pad.vue @@ -1,5 +1,5 @@ <template> -<MkModal ref="modal" v-slot="{ type, maxHeight }" :prefer-type="preferedModalType" :transparent-bg="true" :src="src" @click="modal.close()" @closed="emit('closed')"> +<MkModal ref="modal" v-slot="{ type, maxHeight }" :prefer-type="preferedModalType" :anchor="{ x: 'right', y: 'center' }" :transparent-bg="true" :src="src" @click="modal.close()" @closed="emit('closed')"> <div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }"> <div class="main"> <template v-for="item in items"> diff --git a/packages/client/src/components/ui/modal.vue b/packages/client/src/components/ui/modal.vue index cba02c9355..ba29575dc4 100644 --- a/packages/client/src/components/ui/modal.vue +++ b/packages/client/src/components/ui/modal.vue @@ -30,7 +30,7 @@ type ModalTypes = 'popup' | 'dialog' | 'dialog:top' | 'drawer'; const props = withDefaults(defineProps<{ manualShowing?: boolean | null; - srcCenter?: boolean; + anchor?: { x: string; y: string; }; src?: HTMLElement; preferType?: ModalTypes | 'auto'; zPriority?: 'low' | 'middle' | 'high'; @@ -39,6 +39,7 @@ const props = withDefaults(defineProps<{ }>(), { manualShowing: null, src: null, + anchor: { x: 'center', y: 'bottom' }, preferType: 'auto', zPriority: 'low', noOverlap: true, @@ -113,16 +114,23 @@ const align = () => { let left; let top; - if (props.srcCenter) { - const x = rect.left + (fixed.value ? 0 : window.pageXOffset) + (props.src.offsetWidth / 2); - const y = rect.top + (fixed.value ? 0 : window.pageYOffset) + (props.src.offsetHeight / 2); - left = (x - (width / 2)); + const x = rect.left + (fixed.value ? 0 : window.pageXOffset); + const y = rect.top + (fixed.value ? 0 : window.pageYOffset); + + if (props.anchor.x === 'center') { + left = x + (props.src.offsetWidth / 2) - (width / 2); + } else if (props.anchor.x === 'left') { + // TODO + } else if (props.anchor.x === 'right') { + left = x + props.src.offsetWidth; + } + + if (props.anchor.y === 'center') { top = (y - (height / 2)); - } else { - const x = rect.left + (fixed.value ? 0 : window.pageXOffset) + (props.src.offsetWidth / 2); - const y = rect.top + (fixed.value ? 0 : window.pageYOffset) + props.src.offsetHeight; - left = (x - (width / 2)); - top = y; + } else if (props.anchor.y === 'top') { + // TODO + } else if (props.anchor.y === 'bottom') { + top = y + props.src.offsetHeight; } if (fixed.value) { @@ -136,7 +144,7 @@ const align = () => { // 画面から縦にはみ出る場合 if (top + height > (window.innerHeight - MARGIN)) { - if (props.noOverlap) { + if (props.noOverlap && props.anchor.x === 'center') { if (underSpace >= (upperSpace / 3)) { maxHeight.value = underSpace; } else { @@ -160,7 +168,7 @@ const align = () => { // 画面から縦にはみ出る場合 if (top + height - window.pageYOffset > (window.innerHeight - MARGIN)) { - if (props.noOverlap) { + if (props.noOverlap && props.anchor.x === 'center') { if (underSpace >= (upperSpace / 3)) { maxHeight.value = underSpace; } else { @@ -183,14 +191,23 @@ const align = () => { left = 0; } + let transformOriginX = 'center'; + let transformOriginY = 'center'; + if (top > rect.top + (fixed.value ? 0 : window.pageYOffset)) { - transformOrigin.value = 'center top'; + transformOriginY = 'top'; } else if ((top + height) <= rect.top + (fixed.value ? 0 : window.pageYOffset)) { - transformOrigin.value = 'center bottom'; - } else { - transformOrigin.value = 'center'; + transformOriginY = 'bottom'; } + if (left > rect.left + (fixed.value ? 0 : window.pageXOffset)) { + transformOriginY = 'left'; + } else if ((left + width) <= rect.left + (fixed.value ? 0 : window.pageXOffset)) { + transformOriginY = 'right'; + } + + transformOrigin.value = `${transformOriginX} ${transformOriginY}`; + popover.style.left = left + 'px'; popover.style.top = top + 'px'; }; diff --git a/packages/client/src/directives/click-anime.ts b/packages/client/src/directives/click-anime.ts index 001dcca46e..099aac28f7 100644 --- a/packages/client/src/directives/click-anime.ts +++ b/packages/client/src/directives/click-anime.ts @@ -3,6 +3,7 @@ import { defaultStore } from '@/store'; export default { mounted(el, binding, vn) { + /* if (!defaultStore.state.animation) return; el.classList.add('_anime_bounce_standBy'); @@ -25,5 +26,6 @@ export default { el.classList.remove('_anime_bounce'); el.classList.add('_anime_bounce_standBy'); }); + */ } } as Directive;