MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(style): add prop `overPopover` prop to render Modal over any popover

This commit is contained in:
upsiflu 2024-12-17 12:13:48 +01:00
parent bddbb813dc
commit 74958dcf34
2 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
front/src/components/ui/Modal.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import Button from '~/components/ui/Button.vue' import Button from '~/components/ui/Button.vue'
const { title } = defineProps<{ title:string }>() const { title, overPopover = false } = defineProps<{ title:string, overPopover?:true }>()
const isOpen = defineModel<boolean>({ default:false }) const isOpen = defineModel<boolean>({ default:false })
// TODO: // TODO:
@ -14,7 +14,7 @@ const isOpen = defineModel<boolean>({ default:false })
<Teleport to="body"> <Teleport to="body">
<Transition mode="out-in"> <Transition mode="out-in">
<div v-if="isOpen" @click.exact.stop="isOpen = false" class="funkwhale overlay"> <div v-if="isOpen" @click.exact.stop="isOpen = false" class="funkwhale overlay">
<div @click.stop class="funkwhale modal" :class="$slots.alert && 'has-alert'" > <div @click.stop class="funkwhale modal" :class="[$slots.alert && 'has-alert', overPopover && 'over-popover']" >
<h2> <h2>
{{ title }} {{ title }}
<Button icon="bi-x-lg" ghost @click="isOpen = false" /> <Button icon="bi-x-lg" ghost @click="isOpen = false" />

5
front/src/components/ui/modal.scss
View File

@ -71,6 +71,11 @@
} }
} }
.funkwhale.overlay:has(.over-popover) {
// override z-index
z-index: 999999;
}
.funkwhale.overlay { .funkwhale.overlay {
background: rgba(#000, .2); background: rgba(#000, .2);