From dc19f20153fbdb7c3ad26119bbd243c1175f105d Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Sat, 14 Jan 2023 21:04:20 +0900 Subject: [PATCH] refactor --- packages/frontend/src/components/MkDialog.vue | 1 + packages/frontend/src/components/MkModal.vue | 20 +++---------------- .../src/components/MkPostFormDialog.vue | 4 ++-- .../frontend/src/components/MkUpdated.vue | 1 + .../src/components/MkWaitingDialog.vue | 1 + 5 files changed, 8 insertions(+), 19 deletions(-) diff --git a/packages/frontend/src/components/MkDialog.vue b/packages/frontend/src/components/MkDialog.vue index 160ea23e05..74cb534859 100644 --- a/packages/frontend/src/components/MkDialog.vue +++ b/packages/frontend/src/components/MkDialog.vue @@ -146,6 +146,7 @@ onBeforeUnmount(() => { <style lang="scss" module> .root { position: relative; + margin: auto; padding: 32px; min-width: 320px; max-width: 480px; diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue index 9c11aa0640..6265e637d6 100644 --- a/packages/frontend/src/components/MkModal.vue +++ b/packages/frontend/src/components/MkModal.vue @@ -7,9 +7,9 @@ :leave-to-class="$style['transition_' + transitionName + '_leaveTo']" :duration="transitionDuration" appear @after-leave="emit('closed')" @enter="emit('opening')" @after-enter="onOpened" > - <div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog' || type === 'dialog:top', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }"> + <div v-show="manualShowing != null ? manualShowing : showing" 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 class="_modalBg" :class="[$style.bg, { [$style.bgTransparent]: transparentBg && (type === 'popup') }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div> - <div ref="content" :class="[$style.content, { [$style.fixed]: fixed, [$style.top]: type === 'dialog:top' }]" :style="{ zIndex }" @click.self="onBgClick"> + <div ref="content" :class="[$style.content, { [$style.fixed]: fixed }]" :style="{ zIndex }" @click.self="onBgClick"> <slot :max-height="maxHeight" :type="type"></slot> </div> </div> @@ -33,7 +33,7 @@ function getFixedContainer(el: Element | null): Element | null { } } -type ModalTypes = 'popup' | 'dialog' | 'dialog:top' | 'drawer'; +type ModalTypes = 'popup' | 'dialog' | 'drawer'; const props = withDefaults(defineProps<{ manualShowing?: boolean | null; @@ -413,16 +413,6 @@ defineExpose({ -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%); mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%); } - - &:global > * { - margin: auto; - } - - &.top { - &:global > * { - margin-top: 0; - } - } } } @@ -450,10 +440,6 @@ defineExpose({ left: 0; right: 0; margin: auto; - - &:global > * { - margin: auto; - } } } } diff --git a/packages/frontend/src/components/MkPostFormDialog.vue b/packages/frontend/src/components/MkPostFormDialog.vue index f71dbdfdab..6326c498d7 100644 --- a/packages/frontend/src/components/MkPostFormDialog.vue +++ b/packages/frontend/src/components/MkPostFormDialog.vue @@ -1,6 +1,6 @@ <template> -<MkModal ref="modal" :prefer-type="'dialog:top'" @click="modal.close()" @closed="onModalClosed()"> - <MkPostForm ref="form" v-bind="props" autofocus freeze-after-posted @posted="onPosted" @cancel="modal.close()" @esc="modal.close()"/> +<MkModal ref="modal" :prefer-type="'dialog'" @click="modal.close()" @closed="onModalClosed()"> + <MkPostForm ref="form" style="margin: 0 auto auto auto;" v-bind="props" autofocus freeze-after-posted @posted="onPosted" @cancel="modal.close()" @esc="modal.close()"/> </MkModal> </template> diff --git a/packages/frontend/src/components/MkUpdated.vue b/packages/frontend/src/components/MkUpdated.vue index ba6b7853d4..eed7fa71f6 100644 --- a/packages/frontend/src/components/MkUpdated.vue +++ b/packages/frontend/src/components/MkUpdated.vue @@ -34,6 +34,7 @@ onMounted(() => { <style lang="scss" module> .root { + margin: auto; position: relative; padding: 32px; min-width: 320px; diff --git a/packages/frontend/src/components/MkWaitingDialog.vue b/packages/frontend/src/components/MkWaitingDialog.vue index 984cdc5266..da835d21cc 100644 --- a/packages/frontend/src/components/MkWaitingDialog.vue +++ b/packages/frontend/src/components/MkWaitingDialog.vue @@ -37,6 +37,7 @@ watch(() => props.showing, () => { <style lang="scss" scoped> .iuyakobc { + margin: auto; position: relative; padding: 32px; box-sizing: border-box;