Feat: Personalizar backdrop del modal y agregar puntaje target en footer
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m5s
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m5s
- Cambiar color del backdrop/overlay del modal - Usar color de fondo del usuario (var(--cata-bg)) - Aplicar opacidad de 0.85 - Mantener blur de 4px para efecto de profundidad - Agregar puntaje target en footer del paso 2 - Mostrar "Target: [puntaje]" alineado a la izquierda - Botones (Cancelar/Aplicar) alineados a la derecha - Usar justify-between para distribución espaciada - Mejorar experiencia visual con colores personalizados del usuario
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
<UModal
|
||||
v-model:open="isOpen"
|
||||
:ui="{
|
||||
overlay: 'backdrop-blur-sm',
|
||||
overlay: 'modal-overlay',
|
||||
content: 'cata-bg cata-outline-box',
|
||||
header: 'cata-bg',
|
||||
body: 'cata-bg',
|
||||
@@ -77,33 +77,42 @@
|
||||
|
||||
<!-- Footer con botones -->
|
||||
<template #footer>
|
||||
<div class="flex items-center justify-end gap-2 w-full">
|
||||
<button
|
||||
class="cata-button px-4 py-2"
|
||||
@click="cerrar"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<!-- Puntaje target a la izquierda -->
|
||||
<div v-if="paso === 2" class="cata-text font-semibold">
|
||||
Target: {{ puntajeDeseado }}
|
||||
</div>
|
||||
<div v-else></div>
|
||||
|
||||
<button
|
||||
v-if="paso === 1"
|
||||
class="cata-button px-4 py-2"
|
||||
:disabled="!puntajeValido"
|
||||
:class="{ 'opacity-50 cursor-not-allowed': !puntajeValido }"
|
||||
@click="siguientePaso"
|
||||
>
|
||||
Continuar
|
||||
</button>
|
||||
<!-- Botones a la derecha -->
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
class="cata-button px-4 py-2"
|
||||
@click="cerrar"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="paso === 2"
|
||||
class="cata-button px-4 py-2"
|
||||
:disabled="categoriasSeleccionadas.length !== diferencia"
|
||||
:class="{ 'opacity-50 cursor-not-allowed': categoriasSeleccionadas.length !== diferencia }"
|
||||
@click="aplicarAsignacion"
|
||||
>
|
||||
Aplicar
|
||||
</button>
|
||||
<button
|
||||
v-if="paso === 1"
|
||||
class="cata-button px-4 py-2"
|
||||
:disabled="!puntajeValido"
|
||||
:class="{ 'opacity-50 cursor-not-allowed': !puntajeValido }"
|
||||
@click="siguientePaso"
|
||||
>
|
||||
Continuar
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="paso === 2"
|
||||
class="cata-button px-4 py-2"
|
||||
:disabled="categoriasSeleccionadas.length !== diferencia"
|
||||
:class="{ 'opacity-50 cursor-not-allowed': categoriasSeleccionadas.length !== diferencia }"
|
||||
@click="aplicarAsignacion"
|
||||
>
|
||||
Aplicar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
@@ -241,6 +250,14 @@ const cerrar = () => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.modal-overlay {
|
||||
background-color: var(--cata-bg) !important;
|
||||
opacity: 0.85 !important;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.selected-category {
|
||||
background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
|
||||
|
||||
Reference in New Issue
Block a user