fix(client): メニューなどがウィンドウの裏に隠れる問題を修正

CHANGELOG.md

@@ -17,6 +17,7 @@
 ### Bugfixes
 - クライアント: タッチ機能付きディスプレイを使っていてマウス操作をしている場合に一部機能が動作しない問題を修正
 - クライアント: クリップの設定を編集できない問題を修正
+- クライアント: メニューなどがウィンドウの裏に隠れる問題を修正
 
 ## 12.98.0 (2021/12/03)
 

packages/client/src/components/ui/popup.vue

@@ -1,6 +1,6 @@
 <template>
 <transition :name="$store.state.animation ? 'popup-menu' : ''" appear @after-leave="$emit('closed')" @enter="$emit('opening')">
-	<div v-show="manualShowing != null ? manualShowing : showing" ref="content" class="ccczpooj" :class="{ front, fixed, top: position === 'top' }" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
+	<div v-show="manualShowing != null ? manualShowing : showing" ref="content" class="ccczpooj" :class="{ fixed, top: position === 'top' }" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
 		<slot :max-height="maxHeight" :close="close"></slot>
 	</div>
 </transition>
@@ -8,6 +8,7 @@
 
 <script lang="ts">
 import { defineComponent, nextTick, onMounted, onUnmounted, PropType, ref, watch } from 'vue';
+import * as os from '@/os';
 
 function getFixedContainer(el: Element | null | undefined): Element | null {
 	if (el == null || el.tagName === 'BODY') return null;
@@ -57,6 +58,7 @@ export default defineComponent({
 		const transformOrigin = ref('center');
 		const showing = ref(true);
 		const content = ref<HTMLElement>();
+		const zIndex = os.claimZIndex(props.front);
 
 		const close = () => {
 			// eslint-disable-next-line vue/no-mutating-props
@@ -204,6 +206,7 @@ export default defineComponent({
 			transformOrigin,
 			maxHeight,
 			close,
+			zIndex,
 		};
 	},
 });
@@ -226,14 +229,9 @@ export default defineComponent({
 
 .ccczpooj {
 	position: absolute;
-	z-index: 10000;
 
 	&.fixed {
 		position: fixed;
 	}
-
-	&.front {
-		z-index: 20000;
-	}
 }
 </style>

packages/client/src/components/ui/tooltip.vue

@@ -1,6 +1,6 @@
 <template>
 <transition name="tooltip" appear @after-leave="$emit('closed')">
-	<div v-show="showing" ref="el" class="buebdbiu _acrylic _shadow" :style="{ maxWidth: maxWidth + 'px' }">
+	<div v-show="showing" ref="el" class="buebdbiu _acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }">
 		<slot>{{ text }}</slot>
 	</div>
 </transition>
@@ -8,6 +8,7 @@
 
 <script lang="ts">
 import { defineComponent, nextTick, onMounted, onUnmounted, ref } from 'vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
@@ -33,6 +34,7 @@ export default defineComponent({
 
 	setup(props, context) {
 		const el = ref<HTMLElement>();
+		const zIndex = os.claimZIndex(true);
 
 		const setPosition = () => {
 			if (el.value == null) return;
@@ -88,6 +90,7 @@ export default defineComponent({
 
 		return {
 			el,
+			zIndex,
 		};
 	},
 })
@@ -108,7 +111,6 @@ export default defineComponent({
 
 .buebdbiu {
 	position: absolute;
-	z-index: 11000;
 	font-size: 0.8em;
 	padding: 8px 12px;
 	box-sizing: border-box;

packages/client/src/components/ui/window.vue

@@ -1,6 +1,6 @@
 <template>
 <transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
-	<div v-if="showing" class="ebkgocck" :class="{ front }">
+	<div v-if="showing" class="ebkgocck">
 		<div class="body _window _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
 			<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
 				<span class="left">
@@ -124,10 +124,6 @@ export default defineComponent({
 		this.applyTransformTop((window.innerHeight / 2) - (this.$el.offsetHeight / 2));
 		this.applyTransformLeft((window.innerWidth / 2) - (this.$el.offsetWidth / 2));
 
-		os.windows.set(this.id, {
-			z: Number(document.defaultView.getComputedStyle(this.$el, null).zIndex)
-		});
-
 		// 他のウィンドウ内のボタンなどを押してこのウィンドウが開かれた場合、親が最前面になろうとするのでそれに隠されないようにする
 		this.top();
 
@@ -135,7 +131,6 @@ export default defineComponent({
 	},
 
 	unmounted() {
-		os.windows.delete(this.id);
 		window.removeEventListener('resize', this.onBrowserResize);
 	},
 
@@ -160,17 +155,7 @@ export default defineComponent({
 
 		// 最前面へ移動
 		top() {
-			let z = 0;
-			const ws = Array.from(os.windows.entries()).filter(([k, v]) => k !== this.id).map(([k, v]) => v);
-			for (const w of ws) {
-				if (w.z > z) z = w.z;
-			}
-			if (z > 0) {
-				(this.$el as any).style.zIndex = z + 1;
-				os.windows.set(this.id, {
-					z: z + 1
-				});
-			}
+			(this.$el as any).style.zIndex = os.claimZIndex(this.front);
 		},
 
 		onBodyMousedown() {
@@ -394,11 +379,6 @@ export default defineComponent({
 	position: fixed;
 	top: 0;
 	left: 0;
-	z-index: 10000; // mk-modalのと同じでなければならない
-
-	&.front {
-		z-index: 11000; // front指定の時は、mk-modalのよりも大きくなければならない
-	}
 
 	> .body {
 		overflow: hidden;

packages/client/src/os.ts

@@ -18,8 +18,6 @@ export const pendingApiRequestsCount = ref(0);
 let apiRequestsCount = 0; // for debug
 export const apiRequests = ref([]); // for debug
 
-export const windows = new Map();
-
 const apiClient = new Misskey.api.APIClient({
 	origin: url,
 });
@@ -164,6 +162,18 @@ 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;
+	}
+}
+
 export async function popup(component: Component | typeof import('*.vue') | Promise<Component | typeof import('*.vue')>, props: Record<string, any>, events = {}, disposeEvent?: string) {
 	if (component.then) component = await component;