m33/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix(client): fix zindex issue

Browse source 
Fix #8064
Fix #8063
This commit is contained in:
syuilo 2021-12-18 12:12:47 +09:00
parent 35cd9e621a
commit ba1e14443c
16 changed files with 32 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/client/src/components/autocomplete.vue
View file

@ -157,7 +157,7 @@ export default defineComponent({
items: [],
mfmTags: [],
select: -1,
zIndex: os.claimZIndex(true),
zIndex: os.claimZIndex('high'),
}
},

2
packages/client/src/components/dialog.vue
View file

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

2
packages/client/src/components/emoji-picker-dialog.vue
View file

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

2
packages/client/src/components/image-viewer.vue
View file

@ -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()"/>

2
packages/client/src/components/toast.vue
View file

@ -25,7 +25,7 @@ export default defineComponent({
data() {
return {
showing: true,
zIndex: os.claimZIndex(true),
zIndex: os.claimZIndex('high'),
};
},
mounted() {

9
packages/client/src/components/ui/context-menu.vue
View file

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

8
packages/client/src/components/ui/modal.vue
View file

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

2
packages/client/src/components/ui/popup-menu.vue
View file

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

2
packages/client/src/components/ui/tooltip.vue
View file

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

2
packages/client/src/components/ui/window.vue
View file

@ -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() {

2
packages/client/src/components/updated.vue
View file

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

2
packages/client/src/components/visibility-picker.vue
View file

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

2
packages/client/src/components/waiting-dialog.vue
View file

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

18
packages/client/src/os.ts
View file

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

2
packages/client/src/ui/_common_/common.vue
View file

@ -60,7 +60,7 @@ export default defineComponent({
#wait {
display: block;
position: fixed;
z-index: 3000000;
z-index: 4000000;
top: 15px;
right: 15px;

2
packages/client/src/ui/_common_/upload.vue
View file

@ -25,7 +25,7 @@ export default defineComponent({
data() {
return {
uploads: os.uploads,
zIndex: os.claimZIndex(true),
zIndex: os.claimZIndex('high'),
};
},
});