mirror/hotomoe
1
0
Fork 0
mirror of https://github.com/hotomoe/hotomoe synced 2024-11-25 15:46:17 +09:00
Code

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: [], items: [],
mfmTags: [], mfmTags: [],
select: -1, select: -1,
zIndex: os.claimZIndex(true), zIndex: os.claimZIndex('high'),
} }
}, },

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

@ -1,5 +1,5 @@
<template> <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 class="mk-dialog">
<div v-if="icon" class="icon"> <div v-if="icon" class="icon">
<i :class="icon"></i> <i :class="icon"></i>

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

@ -1,5 +1,5 @@
<template> <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"/> <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> </MkModal>
</template> </template>

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

@ -1,5 +1,5 @@
<template> <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"> <div class="xubzgfga">
<header>{{ image.name }}</header> <header>{{ image.name }}</header>
<img :src="image.url" :alt="image.comment" :title="image.comment" @click="$refs.modal.close()"/> <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() { data() {
return { return {
showing: true, showing: true,
zIndex: os.claimZIndex(true), zIndex: os.claimZIndex('high'),
}; };
}, },
mounted() { mounted() {

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

@ -1,6 +1,6 @@
<template> <template>
<transition :name="$store.state.animation ? 'fade' : ''" appear> <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')"/> <MkMenu :items="items" class="_popup _shadow" :align="'left'" @close="$emit('closed')"/>
</div> </div>
</transition> </transition>
@ -10,6 +10,7 @@
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import contains from '@/scripts/contains'; import contains from '@/scripts/contains';
import MkMenu from './menu.vue'; import MkMenu from './menu.vue';
import * as os from '@/os';
export default defineComponent({ export default defineComponent({
components: { components: {
@ -29,6 +30,11 @@ export default defineComponent({
}, },
}, },
emits: ['closed'], emits: ['closed'],
data() {
return {
zIndex: os.claimZIndex('high'),
};
},
computed: { computed: {
keymap(): any { keymap(): any {
return { return {
@ -82,7 +88,6 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.nvlagfpb { .nvlagfpb {
position: absolute; position: absolute;
z-index: 65535;
} }
.fade-enter-active, .fade-leave-active { .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, type: String,
default: 'auto', default: 'auto',
}, },
front: { zPriority: {
type: Boolean, type: String as PropType<'low' | 'middle' | 'high'>,
required: false, required: false,
default: false, default: 'low',
}, },
noOverlap: { noOverlap: {
type: Boolean, type: Boolean,
@ -74,7 +74,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 zIndex = os.claimZIndex(props.zPriority);
const type = computed(() => { const type = computed(() => {
if (props.preferType === 'auto') { if (props.preferType === 'auto') {
if (isTouchUsing && window.innerWidth < 500 && window.innerHeight < 1000) { if (isTouchUsing && window.innerWidth < 500 && window.innerHeight < 1000) {

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

@ -1,5 +1,5 @@
<template> <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()"/> <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> </MkModal>
</template> </template>

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

@ -34,7 +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 zIndex = os.claimZIndex('high');
const setPosition = () => { const setPosition = () => {
if (el.value == null) return; if (el.value == null) return;

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

@ -155,7 +155,7 @@ export default defineComponent({
// 最前面へ移動 // 最前面へ移動
top() { top() {
(this.$el as any).style.zIndex = os.claimZIndex(this.front); (this.$el as any).style.zIndex = os.claimZIndex(this.front ? 'middle' : 'low');
}, },
onBodyMousedown() { onBodyMousedown() {

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

@ -1,5 +1,5 @@
<template> <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="ewlycnyt">
<div class="title">{{ $ts.misskeyUpdated }}</div> <div class="title">{{ $ts.misskeyUpdated }}</div>
<div class="version">✨{{ version }}🚀</div> <div class="version">✨{{ version }}🚀</div>

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

@ -1,5 +1,5 @@
<template> <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"> <div class="gqyayizv _popup">
<button key="public" class="_button" :class="{ active: v == 'public' }" data-index="1" @click="choose('public')"> <button key="public" class="_button" :class="{ active: v == 'public' }" data-index="1" @click="choose('public')">
<div><i class="fas fa-globe"></i></div> <div><i class="fas fa-globe"></i></div>

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

@ -1,5 +1,5 @@
<template> <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 }"> <div class="iuyakobc" :class="{ iconOnly: (text == null) || success }">
<i v-if="success" class="fas fa-check icon success"></i> <i v-if="success" class="fas fa-check icon success"></i>
<i v-else class="fas fa-spinner fa-pulse icon waiting"></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>; props: Record<string, any>;
}[]>; }[]>;
let popupZIndex = 1000000; const zIndexes = {
let popupZIndexForFront = 2000000; low: 1000000,
export function claimZIndex(front = false): number { middle: 2000000,
if (front) { high: 3000000,
popupZIndexForFront += 100; };
return popupZIndexForFront; export function claimZIndex(priority: 'low' | 'middle' | 'high'): number {
} else { zIndexes[priority] += 100;
popupZIndex += 100; return zIndexes[priority];
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) {

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

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

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

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