2018-09-12 06:22:17 +00:00
|
|
|
<template>
|
2021-11-08 14:46:39 +00:00
|
|
|
<!-- FIXME: transition should not be included in the modal -->
|
2018-09-12 06:22:17 +00:00
|
|
|
<transition name="modal">
|
2021-09-24 18:08:48 +00:00
|
|
|
<section
|
|
|
|
v-if="enabled"
|
|
|
|
class="modal-mask"
|
|
|
|
:class="[
|
|
|
|
{ 'has-overflow': overflow },
|
|
|
|
variant,
|
|
|
|
]"
|
2022-03-22 21:48:32 +00:00
|
|
|
ref="modal"
|
2021-09-24 18:08:48 +00:00
|
|
|
>
|
|
|
|
<div
|
|
|
|
class="modal-container"
|
|
|
|
@click.self.prevent.stop="$emit('close')"
|
2021-11-13 20:28:29 +00:00
|
|
|
v-shortcut="'Escape'"
|
2021-09-21 16:37:56 +00:00
|
|
|
>
|
2021-09-24 18:08:48 +00:00
|
|
|
<div
|
|
|
|
class="modal-content"
|
|
|
|
:class="{
|
|
|
|
'has-overflow': overflow,
|
|
|
|
'is-wide': wide
|
|
|
|
}"
|
|
|
|
>
|
2022-02-05 16:29:15 +00:00
|
|
|
<BaseButton
|
2022-02-08 19:05:27 +00:00
|
|
|
@click="$emit('close')"
|
2022-02-05 16:29:15 +00:00
|
|
|
class="close"
|
|
|
|
>
|
|
|
|
<icon icon="times"/>
|
|
|
|
</BaseButton>
|
|
|
|
|
2021-01-16 21:15:48 +00:00
|
|
|
<slot>
|
2021-01-17 17:57:57 +00:00
|
|
|
<div class="header">
|
|
|
|
<slot name="header"></slot>
|
|
|
|
</div>
|
|
|
|
<div class="content">
|
|
|
|
<slot name="text"></slot>
|
|
|
|
</div>
|
|
|
|
<div class="actions">
|
|
|
|
<x-button
|
|
|
|
@click="$emit('close')"
|
2022-01-04 18:58:06 +00:00
|
|
|
variant="tertiary"
|
2021-01-17 17:57:57 +00:00
|
|
|
class="has-text-danger"
|
|
|
|
>
|
2021-06-23 23:24:57 +00:00
|
|
|
{{ $t('misc.cancel') }}
|
2021-01-17 17:57:57 +00:00
|
|
|
</x-button>
|
|
|
|
<x-button
|
|
|
|
@click="$emit('submit')"
|
2022-01-04 18:58:06 +00:00
|
|
|
variant="primary"
|
|
|
|
v-cy="'modalPrimary'"
|
2021-01-17 17:57:57 +00:00
|
|
|
:shadow="false"
|
|
|
|
>
|
2021-06-23 23:24:57 +00:00
|
|
|
{{ $t('misc.doit') }}
|
2021-01-17 17:57:57 +00:00
|
|
|
</x-button>
|
|
|
|
</div>
|
2021-01-16 21:15:48 +00:00
|
|
|
</slot>
|
2018-09-12 06:22:17 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2021-09-24 18:08:48 +00:00
|
|
|
</section>
|
2018-09-12 06:22:17 +00:00
|
|
|
</transition>
|
|
|
|
</template>
|
|
|
|
|
2022-02-27 15:08:46 +00:00
|
|
|
<script lang="ts" setup>
|
2022-02-05 16:29:15 +00:00
|
|
|
import BaseButton from '@/components/base/BaseButton.vue'
|
2022-03-22 21:48:32 +00:00
|
|
|
import {ref, watch} from 'vue'
|
|
|
|
import {useScrollLock} from '@vueuse/core'
|
2022-02-05 16:29:15 +00:00
|
|
|
|
2022-02-27 15:08:46 +00:00
|
|
|
const props = withDefaults(defineProps<{
|
|
|
|
enabled?: boolean,
|
|
|
|
overflow?: boolean,
|
|
|
|
wide?: boolean,
|
|
|
|
transitionName?: 'modal' | 'fade',
|
|
|
|
variant?: 'default' | 'hint-modal' | 'scrolling',
|
|
|
|
}>(), {
|
|
|
|
enabled: true,
|
|
|
|
transitionName: 'modal',
|
|
|
|
variant: 'default',
|
|
|
|
})
|
2021-09-24 18:08:48 +00:00
|
|
|
|
2022-03-22 21:48:32 +00:00
|
|
|
defineEmits(['close', 'submit'])
|
2021-09-24 18:08:48 +00:00
|
|
|
|
2022-03-22 21:48:32 +00:00
|
|
|
const modal = ref<HTMLElement | null>(null)
|
|
|
|
const scrollLock = useScrollLock(modal)
|
2021-09-24 18:08:48 +00:00
|
|
|
|
2022-02-27 15:08:46 +00:00
|
|
|
watch(
|
|
|
|
() => props.enabled,
|
|
|
|
enabled => {
|
2022-03-22 21:48:32 +00:00
|
|
|
scrollLock.value = enabled
|
2022-02-05 16:29:15 +00:00
|
|
|
},
|
2022-02-27 15:08:46 +00:00
|
|
|
{
|
|
|
|
immediate: true,
|
2021-01-21 22:33:16 +00:00
|
|
|
},
|
2022-02-27 15:08:46 +00:00
|
|
|
)
|
2018-09-12 06:22:17 +00:00
|
|
|
</script>
|
2021-09-24 18:08:48 +00:00
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.modal-mask {
|
|
|
|
position: fixed;
|
|
|
|
z-index: 4000;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
background-color: rgba(0, 0, 0, .8);
|
|
|
|
transition: opacity 150ms ease;
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
|
|
|
|
.modal-container {
|
|
|
|
transition: all 150ms ease;
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
max-height: 100vh;
|
|
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
.default .modal-content,
|
|
|
|
.hint-modal .modal-content {
|
|
|
|
text-align: center;
|
|
|
|
position: absolute;
|
|
|
|
top: 50%;
|
|
|
|
left: 50%;
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
|
|
|
@media screen and (max-width: $tablet) {
|
|
|
|
margin: 0;
|
|
|
|
top: 25%;
|
|
|
|
transform: translate(-50%, -25%);
|
|
|
|
}
|
|
|
|
|
|
|
|
.header {
|
|
|
|
font-size: 2rem;
|
|
|
|
font-weight: 700;
|
|
|
|
}
|
|
|
|
|
|
|
|
.button {
|
|
|
|
margin: 0 0.5rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// scrolling-content
|
|
|
|
// used e.g. for <TaskDetailViewModal>
|
|
|
|
.scrolling .modal-content {
|
|
|
|
max-width: 1024px;
|
|
|
|
width: 100%;
|
|
|
|
margin: 4rem auto;
|
|
|
|
|
|
|
|
max-height: none; // reset bulma
|
|
|
|
overflow: visible; // reset bulma
|
|
|
|
|
|
|
|
@media screen and (min-width: $tablet) {
|
|
|
|
max-height: none; // reset bulma
|
|
|
|
margin: 4rem auto; // reset bulma
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: $desktop) {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.is-wide {
|
|
|
|
max-width: $desktop;
|
|
|
|
width: calc(100% - 2rem);
|
|
|
|
}
|
|
|
|
|
|
|
|
.hint-modal {
|
|
|
|
z-index: 4600;
|
|
|
|
|
2021-10-20 12:33:36 +00:00
|
|
|
:deep(.card-content) {
|
2021-09-24 18:08:48 +00:00
|
|
|
text-align: left;
|
|
|
|
|
|
|
|
.info {
|
|
|
|
font-style: italic;
|
|
|
|
}
|
|
|
|
|
|
|
|
p {
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2022-02-05 16:29:15 +00:00
|
|
|
|
|
|
|
.close {
|
|
|
|
position: fixed;
|
|
|
|
top: 5px;
|
|
|
|
right: 26px;
|
|
|
|
color: var(--white);
|
|
|
|
font-size: 2rem;
|
|
|
|
|
|
|
|
@media screen and (max-width: $desktop) {
|
2022-03-22 21:55:23 +00:00
|
|
|
color: var(--grey-900);
|
2022-02-05 16:29:15 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
// Close icon SVG uses currentColor, change the color to keep it visible
|
2022-03-22 21:55:23 +00:00
|
|
|
.dark .close {
|
2022-02-05 16:29:15 +00:00
|
|
|
color: var(--grey-900);
|
|
|
|
}
|
2021-09-24 18:08:48 +00:00
|
|
|
</style>
|