From ba1e14443c2a4666937094f491675df0dc93e7a1 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Sat, 18 Dec 2021 12:12:47 +0900 Subject: [PATCH] fix(client): fix zindex issue Fix #8064 Fix #8063 --- .../client/src/components/autocomplete.vue | 2 +- packages/client/src/components/dialog.vue | 2 +- .../src/components/emoji-picker-dialog.vue | 2 +- .../client/src/components/image-viewer.vue | 2 +- packages/client/src/components/toast.vue | 2 +- .../client/src/components/ui/context-menu.vue | 9 +++++++-- packages/client/src/components/ui/modal.vue | 8 ++++---- .../client/src/components/ui/popup-menu.vue | 2 +- packages/client/src/components/ui/tooltip.vue | 2 +- packages/client/src/components/ui/window.vue | 2 +- packages/client/src/components/updated.vue | 2 +- .../src/components/visibility-picker.vue | 2 +- .../client/src/components/waiting-dialog.vue | 2 +- packages/client/src/os.ts | 18 ++++++++---------- packages/client/src/ui/_common_/common.vue | 2 +- packages/client/src/ui/_common_/upload.vue | 2 +- 16 files changed, 32 insertions(+), 29 deletions(-) diff --git a/packages/client/src/components/autocomplete.vue b/packages/client/src/components/autocomplete.vue index c50f032a5..30be2ac74 100644 --- a/packages/client/src/components/autocomplete.vue +++ b/packages/client/src/components/autocomplete.vue @@ -157,7 +157,7 @@ export default defineComponent({ items: [], mfmTags: [], select: -1, - zIndex: os.claimZIndex(true), + zIndex: os.claimZIndex('high'), } }, diff --git a/packages/client/src/components/dialog.vue b/packages/client/src/components/dialog.vue index 90cac9b5e..c2fa1b02b 100644 --- a/packages/client/src/components/dialog.vue +++ b/packages/client/src/components/dialog.vue @@ -1,5 +1,5 @@ <template> -<MkModal ref="modal" :prefer-type="'dialog'" :front="true" @click="done(true)" @closed="$emit('closed')"> +<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="done(true)" @closed="$emit('closed')"> <div class="mk-dialog"> <div v-if="icon" class="icon"> <i :class="icon"></i> diff --git a/packages/client/src/components/emoji-picker-dialog.vue b/packages/client/src/components/emoji-picker-dialog.vue index d2a405ef5..51c634dd8 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 }" :prefer-type="asReactionPicker && $store.state.reactionPickerUseDrawerForMobile === false ? 'popup' : 'auto'" :transparent-bg="true" :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 }" :z-priority="'middle'" :prefer-type="asReactionPicker && $store.state.reactionPickerUseDrawerForMobile === false ? 'popup' : 'auto'" :transparent-bg="true" :manual-showing="manualShowing" :src="src" @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/image-viewer.vue b/packages/client/src/components/image-viewer.vue index fc28c30b5..8584b91a6 100644 --- a/packages/client/src/components/image-viewer.vue +++ b/packages/client/src/components/image-viewer.vue @@ -1,5 +1,5 @@ <template> -<MkModal ref="modal" @click="$refs.modal.close()" @closed="$emit('closed')"> +<MkModal ref="modal" :z-priority="'middle'" @click="$refs.modal.close()" @closed="$emit('closed')"> <div class="xubzgfga"> <header>{{ image.name }}</header> <img :src="image.url" :alt="image.comment" :title="image.comment" @click="$refs.modal.close()"/> diff --git a/packages/client/src/components/toast.vue b/packages/client/src/components/toast.vue index 6561ba385..02b61e5be 100644 --- a/packages/client/src/components/toast.vue +++ b/packages/client/src/components/toast.vue @@ -25,7 +25,7 @@ export default defineComponent({ data() { return { showing: true, - zIndex: os.claimZIndex(true), + zIndex: os.claimZIndex('high'), }; }, mounted() { diff --git a/packages/client/src/components/ui/context-menu.vue b/packages/client/src/components/ui/context-menu.vue index 0438d3323..85606bf6d 100644 --- a/packages/client/src/components/ui/context-menu.vue +++ b/packages/client/src/components/ui/context-menu.vue @@ -1,6 +1,6 @@ <template> <transition :name="$store.state.animation ? 'fade' : ''" appear> - <div class="nvlagfpb" @contextmenu.prevent.stop="() => {}"> + <div class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}"> <MkMenu :items="items" class="_popup _shadow" :align="'left'" @close="$emit('closed')"/> </div> </transition> @@ -10,6 +10,7 @@ import { defineComponent } from 'vue'; import contains from '@/scripts/contains'; import MkMenu from './menu.vue'; +import * as os from '@/os'; export default defineComponent({ components: { @@ -29,6 +30,11 @@ export default defineComponent({ }, }, emits: ['closed'], + data() { + return { + zIndex: os.claimZIndex('high'), + }; + }, computed: { keymap(): any { return { @@ -82,7 +88,6 @@ export default defineComponent({ <style lang="scss" scoped> .nvlagfpb { position: absolute; - z-index: 65535; } .fade-enter-active, .fade-leave-active { diff --git a/packages/client/src/components/ui/modal.vue b/packages/client/src/components/ui/modal.vue index 81394be63..b09d04c45 100644 --- a/packages/client/src/components/ui/modal.vue +++ b/packages/client/src/components/ui/modal.vue @@ -49,10 +49,10 @@ export default defineComponent({ type: String, default: 'auto', }, - front: { - type: Boolean, + zPriority: { + type: String as PropType<'low' | 'middle' | 'high'>, required: false, - default: false, + default: 'low', }, noOverlap: { type: Boolean, @@ -74,7 +74,7 @@ export default defineComponent({ const transformOrigin = ref('center'); const showing = ref(true); const content = ref<HTMLElement>(); - const zIndex = os.claimZIndex(props.front); + const zIndex = os.claimZIndex(props.zPriority); const type = computed(() => { if (props.preferType === 'auto') { if (isTouchUsing && window.innerWidth < 500 && window.innerHeight < 1000) { diff --git a/packages/client/src/components/ui/popup-menu.vue b/packages/client/src/components/ui/popup-menu.vue index f1eedcc62..8ffc4ad19 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" :transparent-bg="true" @click="$refs.modal.close()" @closed="$emit('closed')"> +<MkModal ref="modal" v-slot="{ type, maxHeight }" :z-priority="'high'" :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> diff --git a/packages/client/src/components/ui/tooltip.vue b/packages/client/src/components/ui/tooltip.vue index 90326a0ff..2e48ab623 100644 --- a/packages/client/src/components/ui/tooltip.vue +++ b/packages/client/src/components/ui/tooltip.vue @@ -34,7 +34,7 @@ export default defineComponent({ setup(props, context) { const el = ref<HTMLElement>(); - const zIndex = os.claimZIndex(true); + const zIndex = os.claimZIndex('high'); const setPosition = () => { if (el.value == null) return; diff --git a/packages/client/src/components/ui/window.vue b/packages/client/src/components/ui/window.vue index 265d86acd..d01498d8d 100644 --- a/packages/client/src/components/ui/window.vue +++ b/packages/client/src/components/ui/window.vue @@ -155,7 +155,7 @@ export default defineComponent({ // 最前面へ移動 top() { - (this.$el as any).style.zIndex = os.claimZIndex(this.front); + (this.$el as any).style.zIndex = os.claimZIndex(this.front ? 'middle' : 'low'); }, onBodyMousedown() { diff --git a/packages/client/src/components/updated.vue b/packages/client/src/components/updated.vue index c021c6066..74f54524b 100644 --- a/packages/client/src/components/updated.vue +++ b/packages/client/src/components/updated.vue @@ -1,5 +1,5 @@ <template> -<MkModal ref="modal" @click="$refs.modal.close()" @closed="$emit('closed')"> +<MkModal ref="modal" :z-priority="'middle'" @click="$refs.modal.close()" @closed="$emit('closed')"> <div class="ewlycnyt"> <div class="title">{{ $ts.misskeyUpdated }}</div> <div class="version">✨{{ version }}🚀</div> diff --git a/packages/client/src/components/visibility-picker.vue b/packages/client/src/components/visibility-picker.vue index c75202d95..4200f4354 100644 --- a/packages/client/src/components/visibility-picker.vue +++ b/packages/client/src/components/visibility-picker.vue @@ -1,5 +1,5 @@ <template> -<MkModal ref="modal" :src="src" @click="$refs.modal.close()" @closed="$emit('closed')"> +<MkModal ref="modal" :z-priority="'high'" :src="src" @click="$refs.modal.close()" @closed="$emit('closed')"> <div class="gqyayizv _popup"> <button key="public" class="_button" :class="{ active: v == 'public' }" data-index="1" @click="choose('public')"> <div><i class="fas fa-globe"></i></div> diff --git a/packages/client/src/components/waiting-dialog.vue b/packages/client/src/components/waiting-dialog.vue index e9ca3b33b..10aedbd8f 100644 --- a/packages/client/src/components/waiting-dialog.vue +++ b/packages/client/src/components/waiting-dialog.vue @@ -1,5 +1,5 @@ <template> -<MkModal ref="modal" :prefer-type="'dialog'" @click="success ? done() : () => {}" @closed="$emit('closed')"> +<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="success ? done() : () => {}" @closed="$emit('closed')"> <div class="iuyakobc" :class="{ iconOnly: (text == null) || success }"> <i v-if="success" class="fas fa-check icon success"></i> <i v-else class="fas fa-spinner fa-pulse icon waiting"></i> diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts index 404fe24d8..b2acdcd6e 100644 --- a/packages/client/src/os.ts +++ b/packages/client/src/os.ts @@ -162,16 +162,14 @@ export const popups = ref([]) as Ref<{ props: Record<string, any>; }[]>; -let popupZIndex = 1000000; -let popupZIndexForFront = 2000000; -export function claimZIndex(front = false): number { - if (front) { - popupZIndexForFront += 100; - return popupZIndexForFront; - } else { - popupZIndex += 100; - return popupZIndex; - } +const zIndexes = { + low: 1000000, + middle: 2000000, + high: 3000000, +}; +export function claimZIndex(priority: 'low' | 'middle' | 'high'): number { + zIndexes[priority] += 100; + return zIndexes[priority]; } export async function popup(component: Component | typeof import('*.vue') | Promise<Component | typeof import('*.vue')>, props: Record<string, any>, events = {}, disposeEvent?: string) { diff --git a/packages/client/src/ui/_common_/common.vue b/packages/client/src/ui/_common_/common.vue index 4f93cf5e7..68f5f779f 100644 --- a/packages/client/src/ui/_common_/common.vue +++ b/packages/client/src/ui/_common_/common.vue @@ -60,7 +60,7 @@ export default defineComponent({ #wait { display: block; position: fixed; - z-index: 3000000; + z-index: 4000000; top: 15px; right: 15px; diff --git a/packages/client/src/ui/_common_/upload.vue b/packages/client/src/ui/_common_/upload.vue index 09d1529e7..a1c5dcdec 100644 --- a/packages/client/src/ui/_common_/upload.vue +++ b/packages/client/src/ui/_common_/upload.vue @@ -25,7 +25,7 @@ export default defineComponent({ data() { return { uploads: os.uploads, - zIndex: os.claimZIndex(true), + zIndex: os.claimZIndex('high'), }; }, });