fix: remove workarounds to properly overlay the top menu bar over everything else

This commit is contained in:
kolaente 2022-05-08 23:26:07 +02:00
parent 0007c30672
commit 4b0d491359
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
4 changed files with 61 additions and 60 deletions

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="content-auth" :class="{'z-unset': modalActive}"> <div class="content-auth">
<BaseButton <BaseButton
v-if="menuActive" v-if="menuActive"
@click="$store.commit('menuActive', false)" @click="$store.commit('menuActive', false)"
@ -129,7 +129,6 @@ const store = useStore()
const background = computed(() => store.state.background) const background = computed(() => store.state.background)
const blurHash = computed(() => store.state.blurHash) const blurHash = computed(() => store.state.blurHash)
const menuActive = computed(() => store.state.menuActive) const menuActive = computed(() => store.state.menuActive)
const modalActive = computed(() => store.state.modalActive)
function showKeyboardShortcuts() { function showKeyboardShortcuts() {
store.commit(KEYBOARD_SHORTCUTS_ACTIVE, true) store.commit(KEYBOARD_SHORTCUTS_ACTIVE, true)

View file

@ -13,7 +13,13 @@
> >
{{ $t('filters.title') }} {{ $t('filters.title') }}
</x-button> </x-button>
<modal @close="() => modalOpen = false" :enabled="modalOpen"> <modal
@close="() => modalOpen = false"
:enabled="modalOpen"
transition-name="fade"
:overflow="true"
variant="hint-modal"
>
<filters <filters
:has-title="true" :has-title="true"
v-model="value" v-model="value"

View file

@ -1,72 +1,71 @@
<template> <template>
<!-- FIXME: transition should not be included in the modal --> <Teleport to="body">
<transition name="modal"> <!-- FIXME: transition should not be included in the modal -->
<section <transition name="modal">
v-if="enabled" <section
class="modal-mask" v-if="enabled"
:class="[ class="modal-mask"
:class="[
{ 'has-overflow': overflow }, { 'has-overflow': overflow },
variant, variant,
]" ]"
ref="modal" ref="modal"
>
<div
class="modal-container"
@click.self.prevent.stop="$emit('close')"
v-shortcut="'Escape'"
> >
<div <div
class="modal-content" class="modal-container"
:class="{ @click.self.prevent.stop="$emit('close')"
v-shortcut="'Escape'"
>
<div
class="modal-content"
:class="{
'has-overflow': overflow, 'has-overflow': overflow,
'is-wide': wide 'is-wide': wide
}" }"
>
<BaseButton
@click="$emit('close')"
class="close"
> >
<icon icon="times"/> <BaseButton
</BaseButton> @click="$emit('close')"
class="close"
>
<icon icon="times"/>
</BaseButton>
<slot> <slot>
<div class="header"> <div class="header">
<slot name="header"></slot> <slot name="header"></slot>
</div> </div>
<div class="content"> <div class="content">
<slot name="text"></slot> <slot name="text"></slot>
</div> </div>
<div class="actions"> <div class="actions">
<x-button <x-button
@click="$emit('close')" @click="$emit('close')"
variant="tertiary" variant="tertiary"
class="has-text-danger" class="has-text-danger"
> >
{{ $t('misc.cancel') }} {{ $t('misc.cancel') }}
</x-button> </x-button>
<x-button <x-button
@click="$emit('submit')" @click="$emit('submit')"
variant="primary" variant="primary"
v-cy="'modalPrimary'" v-cy="'modalPrimary'"
:shadow="false" :shadow="false"
> >
{{ $t('misc.doit') }} {{ $t('misc.doit') }}
</x-button> </x-button>
</div> </div>
</slot> </slot>
</div>
</div> </div>
</div> </section>
</section> </transition>
</transition> </Teleport>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import BaseButton from '@/components/base/BaseButton.vue' import BaseButton from '@/components/base/BaseButton.vue'
import {ref, watch} from 'vue' import {onUnmounted, ref, watch} from 'vue'
import {useScrollLock} from '@vueuse/core' import {useScrollLock} from '@vueuse/core'
import {useStore} from 'vuex'
const store = useStore()
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
enabled?: boolean, enabled?: boolean,
@ -89,9 +88,10 @@ watch(
() => props.enabled, () => props.enabled,
enabled => { enabled => {
scrollLock.value = enabled scrollLock.value = enabled
store.commit('modalActive', enabled)
}, },
) )
onUnmounted(() => scrollLock.value = false)
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View file

@ -51,7 +51,6 @@ export const store = createStore({
menuActive: true, menuActive: true,
keyboardShortcutsActive: false, keyboardShortcutsActive: false,
quickActionsActive: false, quickActionsActive: false,
modalActive: false,
}, },
mutations: { mutations: {
[LOADING](state, loading) { [LOADING](state, loading) {
@ -90,9 +89,6 @@ export const store = createStore({
[BLUR_HASH](state, blurHash) { [BLUR_HASH](state, blurHash) {
state.blurHash = blurHash state.blurHash = blurHash
}, },
modalActive(state, active) {
state.modalActive = active
},
}, },
actions: { actions: {
async [CURRENT_LIST]({state, commit}, {list, forceUpdate = false}) { async [CURRENT_LIST]({state, commit}, {list, forceUpdate = false}) {