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

This commit is contained in:
syuilo 2021-12-10 18:20:41 +09:00
parent 7e26daa51b
commit 0b038f6477
5 changed files with 23 additions and 32 deletions

View file

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

View file

@ -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>

View file

@ -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;

View file

@ -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; // frontmk-modal
}
> .body {
overflow: hidden;

View file

@ -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;