From 5d01cbd81c28c6c82ad97dfc9012834c346eac64 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'),
 		};
 	},
 });