diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2021-12-17 13:15:06 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2021-12-17 13:15:06 +0900 |
| commit | e96a914b6bc8711ff0e026eb4c80214593caca02 (patch) | |
| tree | 00aeb8ca23afb8cedfd65ea9ddec5d92ee5135d4 /packages/client/src/components | |
| parent | enhance(client): improve modal menu for mobile (diff) | |
| download | misskey-e96a914b6bc8711ff0e026eb4c80214593caca02.tar.gz misskey-e96a914b6bc8711ff0e026eb4c80214593caca02.tar.bz2 misskey-e96a914b6bc8711ff0e026eb4c80214593caca02.zip | |
:art:
Diffstat (limited to 'packages/client/src/components')
| -rw-r--r-- | packages/client/src/components/emoji-picker-dialog.vue | 2 | ||||
| -rw-r--r-- | packages/client/src/components/ui/modal.vue | 15 | ||||
| -rw-r--r-- | packages/client/src/components/ui/popup-menu.vue | 2 |
3 files changed, 16 insertions, 3 deletions
diff --git a/packages/client/src/components/emoji-picker-dialog.vue b/packages/client/src/components/emoji-picker-dialog.vue index f4b040c049..703b27a3e2 100644 --- a/packages/client/src/components/emoji-picker-dialog.vue +++ b/packages/client/src/components/emoji-picker-dialog.vue @@ -1,5 +1,5 @@ <template> -<MkModal ref="modal" v-slot="{ type, maxHeight }" :manual-showing="manualShowing" :src="src" :front="true" @click="$refs.modal.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')"> +<MkModal ref="modal" v-slot="{ type, maxHeight }" :transparent-bg="true" :manual-showing="manualShowing" :src="src" :front="true" @click="$refs.modal.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')"> <MkEmojiPicker ref="picker" class="ryghynhb _popup _shadow" :class="{ drawer: type === 'drawer' }" :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" :as-drawer="type === 'drawer'" :max-height="maxHeight" @chosen="chosen"/> </MkModal> </template> diff --git a/packages/client/src/components/ui/modal.vue b/packages/client/src/components/ui/modal.vue index db390e0944..1d0b79a87e 100644 --- a/packages/client/src/components/ui/modal.vue +++ b/packages/client/src/components/ui/modal.vue @@ -1,7 +1,7 @@ <template> <transition :name="$store.state.animation ? (type === 'drawer') ? 'modal-drawer' : (type === 'popup') ? 'modal-popup' : 'modal' : ''" :duration="$store.state.animation ? 200 : 0" appear @after-leave="$emit('closed')" @enter="$emit('opening')" @after-enter="childRendered"> <div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" class="qzhlnise" :class="{ drawer: type === 'drawer', dialog: type === 'dialog' || type === 'dialog:top', popup: type === 'popup' }" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }"> - <div class="bg _modalBg" :style="{ zIndex }" @click="onBgClick" @contextmenu.prevent.stop="() => {}"></div> + <div class="bg _modalBg" :class="{ transparent: transparentBg && (type === 'popup') }" :style="{ zIndex }" @click="onBgClick" @contextmenu.prevent.stop="() => {}"></div> <div ref="content" class="content" :class="{ fixed, top: type === 'dialog:top' }" :style="{ zIndex }" @click.self="onBgClick"> <slot :max-height="maxHeight" :type="type"></slot> </div> @@ -59,6 +59,11 @@ export default defineComponent({ required: false, default: true, }, + transparentBg: { + type: Boolean, + required: false, + default: false, + }, }, emits: ['opening', 'click', 'esc', 'close', 'closed'], @@ -327,6 +332,14 @@ export default defineComponent({ } .qzhlnise { + > .bg { + &.transparent { + background: transparent; + -webkit-backdrop-filter: none; + backdrop-filter: none; + } + } + &.dialog { > .content { position: fixed; diff --git a/packages/client/src/components/ui/popup-menu.vue b/packages/client/src/components/ui/popup-menu.vue index c14343db7b..f1eedcc622 100644 --- a/packages/client/src/components/ui/popup-menu.vue +++ b/packages/client/src/components/ui/popup-menu.vue @@ -1,5 +1,5 @@ <template> -<MkModal ref="modal" v-slot="{ type, maxHeight }" :src="src" @click="$refs.modal.close()" @closed="$emit('closed')"> +<MkModal ref="modal" v-slot="{ type, maxHeight }" :src="src" :transparent-bg="true" @click="$refs.modal.close()" @closed="$emit('closed')"> <MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :as-drawer="type === 'drawer'" class="sfhdhdhq _popup _shadow" :class="{ drawer: type === 'drawer' }" @close="$refs.modal.close()"/> </MkModal> </template> |