sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/client/src/components/ui/popup.vue
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>

6
packages/client/src/components/ui/tooltip.vue
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;

24
packages/client/src/components/ui/window.vue
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; // front指定の時は、mk-modalのよりも大きくなければならない
}
> .body {
overflow: hidden;