YunoHost/yunohost-admin
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-admin.git synced 2024-09-03 20:06:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: rework ModalOverlay to new requests

Browse source
This commit is contained in:
axolotle 2024-08-05 17:14:21 +02:00
parent 4979058f54
commit 13ce366d9c
1 changed files with 49 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

119
app/src/components/modals/ModalOverlay.vue
View file

@ -1,87 +1,66 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue' import type { APIRequest } from '@/composables/useRequests'
import QueryHeader from '@/components/QueryHeader.vue' withDefaults(
import { useStoreGetters } from '@/store/utils' defineProps<{
import { useSettings } from '@/composables/useSettings' request: APIRequest
import { hideFooter?: boolean
ErrorDisplay, }>(),
ReconnectingDisplay, {
WaitingDisplay, hideFooter: true,
WarningDisplay, },
} from '@/views/_partials' )
const { dark } = useSettings() const emit = defineEmits<{
const { waiting, reconnecting, error, currentRequest } = useStoreGetters() dismiss: [value: boolean]
const component = computed(() => { }>()
const request = currentRequest.value
// FIXME should we pass refs or unwrap refs as props? defineSlots<{
if (error.value) { default(props: Record<string, any>): any
return { is: ErrorDisplay, request: error.value } footer(props: Record<string, any>): any
} else if (request.showWarningMessage) { }>()
return { is: WarningDisplay, request: currentRequest.value }
} else if (reconnecting.value) {
return { is: ReconnectingDisplay }
} else {
return { is: WaitingDisplay, request: currentRequest.value }
}
})
</script> </script>
<template> <template>
<BOverlay <BModal
:variant="dark ? 'dark' : 'light'" :model-value="true"
opacity="0.75" class="modal-overlay"
no-center centered
:show="waiting || reconnecting || error !== null" hide-backdrop
no-close-on-backdrop
no-close-on-esc
:hide-footer="hideFooter"
> >
<template #header>
<QueryHeader type="overlay" :request="request" tabindex="0" />
</template>
<slot name="default" /> <slot name="default" />
<template #overlay> <template #footer>
<BCard no-body class="card-overlay"> <slot name="footer">
<BCardHeader header-bg-variant="white"> <BButton
<QueryHeader :request="error || currentRequest" status-size="lg" /> v-t="'ok'"
</BCardHeader> variant="light"
size="sm"
<Component :is="component.is" :request="component.request" /> @click="emit('dismiss', true)"
</BCard> />
</slot>
</template> </template>
</BOverlay> </BModal>
</template> </template>
<style lang="scss" scoped> <style lang="scss">
// Style for `*Display`'s cards .modal-overlay {
.card-overlay { .modal-header {
position: sticky;
top: 10vh;
margin: 0 5%;
@include media-breakpoint-up(md) {
margin: 0 10%;
}
@include media-breakpoint-up(lg) {
margin: 0 15%;
}
:deep(.card-body) {
padding: 1.5rem;
padding-bottom: 0;
max-height: 60vh;
overflow-y: auto;
& > :last-child {
margin-bottom: 1.5rem;
}
}
:deep(.card-footer) {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
display: flex;
justify-content: flex-end;
} }
&-status {
.card-header { display: inline-block;
padding: 0.5rem 0.75rem; border-radius: 50%;
width: 1rem;
height: 1rem;
margin-right: 0.5rem;
} }
} }
</style> </style>