Michcio/FoundKey-0x7f
1
1
Fork 0
forked from FoundKeyGang/FoundKey
Code Pull requests Releases Activity

tweak client

Browse source
This commit is contained in:
syuilo 2022-03-06 23:21:19 +09:00
parent 69a801b472
commit 0f736e7e9d
3 changed files with 36 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/client/src/components/launch-pad.vue
View file

@ -1,5 +1,5 @@
<template> <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="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
<div class="main"> <div class="main">
<template v-for="item in items"> <template v-for="item in items">

49
packages/client/src/components/ui/modal.vue
View file

@ -30,7 +30,7 @@ type ModalTypes = 'popup' | 'dialog' | 'dialog:top' | 'drawer';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
manualShowing?: boolean | null; manualShowing?: boolean | null;
srcCenter?: boolean; anchor?: { x: string; y: string; };
src?: HTMLElement; src?: HTMLElement;
preferType?: ModalTypes | 'auto'; preferType?: ModalTypes | 'auto';
zPriority?: 'low' | 'middle' | 'high'; zPriority?: 'low' | 'middle' | 'high';
@ -39,6 +39,7 @@ const props = withDefaults(defineProps<{
}>(), { }>(), {
manualShowing: null, manualShowing: null,
src: null, src: null,
anchor: { x: 'center', y: 'bottom' },
preferType: 'auto', preferType: 'auto',
zPriority: 'low', zPriority: 'low',
noOverlap: true, noOverlap: true,
@ -113,16 +114,23 @@ const align = () => {
let left; let left;
let top; let top;
if (props.srcCenter) { const x = rect.left + (fixed.value ? 0 : window.pageXOffset);
const x = rect.left + (fixed.value ? 0 : window.pageXOffset) + (props.src.offsetWidth / 2); const y = rect.top + (fixed.value ? 0 : window.pageYOffset);
const y = rect.top + (fixed.value ? 0 : window.pageYOffset) + (props.src.offsetHeight / 2);
left = (x - (width / 2)); 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)); top = (y - (height / 2));
} else { } else if (props.anchor.y === 'top') {
const x = rect.left + (fixed.value ? 0 : window.pageXOffset) + (props.src.offsetWidth / 2); // TODO
const y = rect.top + (fixed.value ? 0 : window.pageYOffset) + props.src.offsetHeight; } else if (props.anchor.y === 'bottom') {
left = (x - (width / 2)); top = y + props.src.offsetHeight;
top = y;
} }
if (fixed.value) { if (fixed.value) {
@ -136,7 +144,7 @@ const align = () => {
// 画面から縦にはみ出る場合 // 画面から縦にはみ出る場合
if (top + height > (window.innerHeight - MARGIN)) { if (top + height > (window.innerHeight - MARGIN)) {
if (props.noOverlap) { if (props.noOverlap && props.anchor.x === 'center') {
if (underSpace >= (upperSpace / 3)) { if (underSpace >= (upperSpace / 3)) {
maxHeight.value = underSpace; maxHeight.value = underSpace;
} else { } else {
@ -160,7 +168,7 @@ const align = () => {
// 画面から縦にはみ出る場合 // 画面から縦にはみ出る場合
if (top + height - window.pageYOffset > (window.innerHeight - MARGIN)) { if (top + height - window.pageYOffset > (window.innerHeight - MARGIN)) {
if (props.noOverlap) { if (props.noOverlap && props.anchor.x === 'center') {
if (underSpace >= (upperSpace / 3)) { if (underSpace >= (upperSpace / 3)) {
maxHeight.value = underSpace; maxHeight.value = underSpace;
} else { } else {
@ -183,14 +191,23 @@ const align = () => {
left = 0; left = 0;
} }
let transformOriginX = 'center';
let transformOriginY = 'center';
if (top > rect.top + (fixed.value ? 0 : window.pageYOffset)) { 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)) { } else if ((top + height) <= rect.top + (fixed.value ? 0 : window.pageYOffset)) {
transformOrigin.value = 'center bottom'; transformOriginY = 'bottom';
} else {
transformOrigin.value = 'center';
} }
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.left = left + 'px';
popover.style.top = top + 'px'; popover.style.top = top + 'px';
}; };

2
packages/client/src/directives/click-anime.ts
View file

@ -3,6 +3,7 @@ import { defaultStore } from '@/store';
export default { export default {
mounted(el, binding, vn) { mounted(el, binding, vn) {
/*
if (!defaultStore.state.animation) return; if (!defaultStore.state.animation) return;
el.classList.add('_anime_bounce_standBy'); el.classList.add('_anime_bounce_standBy');
@ -25,5 +26,6 @@ export default {
el.classList.remove('_anime_bounce'); el.classList.remove('_anime_bounce');
el.classList.add('_anime_bounce_standBy'); el.classList.add('_anime_bounce_standBy');
}); });
*/
} }
} as Directive; } as Directive;