forked from mirror/misskey
fix(client): メニューなどがウィンドウの裏に隠れる問題を修正
This commit is contained in:
parent
7e26daa51b
commit
0b038f6477
@ -17,6 +17,7 @@
|
|||||||
### Bugfixes
|
### Bugfixes
|
||||||
- クライアント: タッチ機能付きディスプレイを使っていてマウス操作をしている場合に一部機能が動作しない問題を修正
|
- クライアント: タッチ機能付きディスプレイを使っていてマウス操作をしている場合に一部機能が動作しない問題を修正
|
||||||
- クライアント: クリップの設定を編集できない問題を修正
|
- クライアント: クリップの設定を編集できない問題を修正
|
||||||
|
- クライアント: メニューなどがウィンドウの裏に隠れる問題を修正
|
||||||
|
|
||||||
## 12.98.0 (2021/12/03)
|
## 12.98.0 (2021/12/03)
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<transition :name="$store.state.animation ? 'popup-menu' : ''" appear @after-leave="$emit('closed')" @enter="$emit('opening')">
|
<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>
|
<slot :max-height="maxHeight" :close="close"></slot>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
@ -8,6 +8,7 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, nextTick, onMounted, onUnmounted, PropType, ref, watch } from 'vue';
|
import { defineComponent, nextTick, onMounted, onUnmounted, PropType, ref, watch } from 'vue';
|
||||||
|
import * as os from '@/os';
|
||||||
|
|
||||||
function getFixedContainer(el: Element | null | undefined): Element | null {
|
function getFixedContainer(el: Element | null | undefined): Element | null {
|
||||||
if (el == null || el.tagName === 'BODY') return null;
|
if (el == null || el.tagName === 'BODY') return null;
|
||||||
@ -57,6 +58,7 @@ export default defineComponent({
|
|||||||
const transformOrigin = ref('center');
|
const transformOrigin = ref('center');
|
||||||
const showing = ref(true);
|
const showing = ref(true);
|
||||||
const content = ref<HTMLElement>();
|
const content = ref<HTMLElement>();
|
||||||
|
const zIndex = os.claimZIndex(props.front);
|
||||||
|
|
||||||
const close = () => {
|
const close = () => {
|
||||||
// eslint-disable-next-line vue/no-mutating-props
|
// eslint-disable-next-line vue/no-mutating-props
|
||||||
@ -204,6 +206,7 @@ export default defineComponent({
|
|||||||
transformOrigin,
|
transformOrigin,
|
||||||
maxHeight,
|
maxHeight,
|
||||||
close,
|
close,
|
||||||
|
zIndex,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@ -226,14 +229,9 @@ export default defineComponent({
|
|||||||
|
|
||||||
.ccczpooj {
|
.ccczpooj {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 10000;
|
|
||||||
|
|
||||||
&.fixed {
|
&.fixed {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.front {
|
|
||||||
z-index: 20000;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<transition name="tooltip" appear @after-leave="$emit('closed')">
|
<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>
|
<slot>{{ text }}</slot>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
@ -8,6 +8,7 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, nextTick, onMounted, onUnmounted, ref } from 'vue';
|
import { defineComponent, nextTick, onMounted, onUnmounted, ref } from 'vue';
|
||||||
|
import * as os from '@/os';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
props: {
|
props: {
|
||||||
@ -33,6 +34,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
setup(props, context) {
|
setup(props, context) {
|
||||||
const el = ref<HTMLElement>();
|
const el = ref<HTMLElement>();
|
||||||
|
const zIndex = os.claimZIndex(true);
|
||||||
|
|
||||||
const setPosition = () => {
|
const setPosition = () => {
|
||||||
if (el.value == null) return;
|
if (el.value == null) return;
|
||||||
@ -88,6 +90,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
el,
|
el,
|
||||||
|
zIndex,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
@ -108,7 +111,6 @@ export default defineComponent({
|
|||||||
|
|
||||||
.buebdbiu {
|
.buebdbiu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 11000;
|
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
|
<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="body _window _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
|
||||||
<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
|
<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
|
||||||
<span class="left">
|
<span class="left">
|
||||||
@ -124,10 +124,6 @@ export default defineComponent({
|
|||||||
this.applyTransformTop((window.innerHeight / 2) - (this.$el.offsetHeight / 2));
|
this.applyTransformTop((window.innerHeight / 2) - (this.$el.offsetHeight / 2));
|
||||||
this.applyTransformLeft((window.innerWidth / 2) - (this.$el.offsetWidth / 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();
|
this.top();
|
||||||
|
|
||||||
@ -135,7 +131,6 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
unmounted() {
|
unmounted() {
|
||||||
os.windows.delete(this.id);
|
|
||||||
window.removeEventListener('resize', this.onBrowserResize);
|
window.removeEventListener('resize', this.onBrowserResize);
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -160,17 +155,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
// 最前面へ移動
|
// 最前面へ移動
|
||||||
top() {
|
top() {
|
||||||
let z = 0;
|
(this.$el as any).style.zIndex = os.claimZIndex(this.front);
|
||||||
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
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
onBodyMousedown() {
|
onBodyMousedown() {
|
||||||
@ -394,11 +379,6 @@ export default defineComponent({
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 10000; // mk-modalのと同じでなければならない
|
|
||||||
|
|
||||||
&.front {
|
|
||||||
z-index: 11000; // front指定の時は、mk-modalのよりも大きくなければならない
|
|
||||||
}
|
|
||||||
|
|
||||||
> .body {
|
> .body {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@ -18,8 +18,6 @@ export const pendingApiRequestsCount = ref(0);
|
|||||||
let apiRequestsCount = 0; // for debug
|
let apiRequestsCount = 0; // for debug
|
||||||
export const apiRequests = ref([]); // for debug
|
export const apiRequests = ref([]); // for debug
|
||||||
|
|
||||||
export const windows = new Map();
|
|
||||||
|
|
||||||
const apiClient = new Misskey.api.APIClient({
|
const apiClient = new Misskey.api.APIClient({
|
||||||
origin: url,
|
origin: url,
|
||||||
});
|
});
|
||||||
@ -164,6 +162,18 @@ export const popups = ref([]) as Ref<{
|
|||||||
props: Record<string, any>;
|
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) {
|
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;
|
if (component.then) component = await component;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user