Refactor: Simplificar botón de asignación rápida y arreglar estilos del modal
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
- Eliminar componente BotonNubeCaustica.vue (ya no necesario) - Reemplazar botón especial por botón estándar con clase cata-button - Arreglar estilos del modal para respetar colores personalizados del usuario - Aplicar clases cata-bg a content, header, body y footer - Aplicar clase cata-text al título mediante slot personalizado - Aplicar clase cata-outline-box al content para bordes consistentes - Agregar backdrop-blur-sm al overlay - Mantener consistencia visual con el resto de la aplicación
This commit is contained in:
@@ -1,233 +0,0 @@
|
||||
<template>
|
||||
<button
|
||||
type="button"
|
||||
class="boton-nube-caustica"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 100 60"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="nube-svg"
|
||||
>
|
||||
<defs>
|
||||
<!-- Gradiente animado para efecto cáustica -->
|
||||
<linearGradient id="caustic-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" class="caustic-stop-1">
|
||||
<animate
|
||||
attributeName="stop-color"
|
||||
values="#60A5FA;#3B82F6;#60A5FA"
|
||||
dur="3s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</stop>
|
||||
<stop offset="50%" class="caustic-stop-2">
|
||||
<animate
|
||||
attributeName="stop-color"
|
||||
values="#3B82F6;#60A5FA;#93C5FD;#3B82F6"
|
||||
dur="2.5s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</stop>
|
||||
<stop offset="100%" class="caustic-stop-3">
|
||||
<animate
|
||||
attributeName="stop-color"
|
||||
values="#93C5FD;#60A5FA;#93C5FD"
|
||||
dur="3.5s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Filtro para efecto de brillo suave -->
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="2" result="coloredBlur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Patrón de ondas cáusticas -->
|
||||
<pattern id="caustic-pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<circle cx="10" cy="10" r="8" fill="rgba(255,255,255,0.15)">
|
||||
<animate
|
||||
attributeName="r"
|
||||
values="6;10;6"
|
||||
dur="2s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="0.1;0.3;0.1"
|
||||
dur="2s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
<circle cx="30" cy="25" r="6" fill="rgba(255,255,255,0.1)">
|
||||
<animate
|
||||
attributeName="r"
|
||||
values="4;8;4"
|
||||
dur="2.5s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="0.05;0.25;0.05"
|
||||
dur="2.5s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<!-- Forma de nube -->
|
||||
<path
|
||||
d="M 25,40
|
||||
C 25,35 20,30 25,25
|
||||
C 25,20 30,15 35,15
|
||||
C 40,15 45,17 47,20
|
||||
C 50,17 55,15 60,15
|
||||
C 70,15 75,20 75,28
|
||||
C 80,28 85,32 85,38
|
||||
C 85,44 80,48 75,48
|
||||
L 30,48
|
||||
C 27,48 25,45 25,40 Z"
|
||||
class="nube-base"
|
||||
fill="url(#caustic-gradient)"
|
||||
filter="url(#glow)"
|
||||
/>
|
||||
|
||||
<!-- Capa de patrones cáusticos -->
|
||||
<path
|
||||
d="M 25,40
|
||||
C 25,35 20,30 25,25
|
||||
C 25,20 30,15 35,15
|
||||
C 40,15 45,17 47,20
|
||||
C 50,17 55,15 60,15
|
||||
C 70,15 75,20 75,28
|
||||
C 80,28 85,32 85,38
|
||||
C 85,44 80,48 75,48
|
||||
L 30,48
|
||||
C 27,48 25,45 25,40 Z"
|
||||
fill="url(#caustic-pattern)"
|
||||
class="caustic-layer"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<!-- Texto del botón -->
|
||||
<span class="boton-texto">Asignación Rápida</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineEmits<{
|
||||
click: []
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.boton-nube-caustica {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.5rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.boton-nube-caustica:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.boton-nube-caustica:active {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.nube-svg {
|
||||
width: 80px;
|
||||
height: 48px;
|
||||
filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.3));
|
||||
transition: filter 0.3s ease;
|
||||
}
|
||||
|
||||
.boton-nube-caustica:hover .nube-svg {
|
||||
filter: drop-shadow(0 6px 12px rgba(59, 130, 246, 0.5));
|
||||
}
|
||||
|
||||
/* Animación de la capa cáustica */
|
||||
.caustic-layer {
|
||||
animation: caustic-flow 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes caustic-flow {
|
||||
0%, 100% {
|
||||
opacity: 0.6;
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
25% {
|
||||
opacity: 0.8;
|
||||
transform: translateX(2px) translateY(-1px);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
transform: translateX(-1px) translateY(1px);
|
||||
}
|
||||
75% {
|
||||
opacity: 0.9;
|
||||
transform: translateX(1px) translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
.boton-texto {
|
||||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
color: rgb(59 130 246);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
white-space: nowrap;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.dark .boton-texto {
|
||||
color: rgb(147 197 253);
|
||||
}
|
||||
|
||||
.boton-nube-caustica:hover .boton-texto {
|
||||
color: rgb(37 99 235);
|
||||
}
|
||||
|
||||
.dark .boton-nube-caustica:hover .boton-texto {
|
||||
color: rgb(191 219 254);
|
||||
}
|
||||
|
||||
/* Efecto de ondas al hacer hover */
|
||||
.boton-nube-caustica:hover .nube-base {
|
||||
animation: wave-pulse 1s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes wave-pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* Modo oscuro - ajustar colores del gradiente */
|
||||
.dark .nube-svg .caustic-stop-1 {
|
||||
stop-color: #3B82F6;
|
||||
}
|
||||
|
||||
.dark .nube-svg .caustic-stop-2 {
|
||||
stop-color: #60A5FA;
|
||||
}
|
||||
|
||||
.dark .nube-svg .caustic-stop-3 {
|
||||
stop-color: #93C5FD;
|
||||
}
|
||||
</style>
|
||||
@@ -77,7 +77,9 @@
|
||||
:muestra="muestra"
|
||||
@aplicar="aplicarAsignacionRapida"
|
||||
>
|
||||
<CataBotonNubeCaustica />
|
||||
<button class="cata-button px-4 py-2 text-sm">
|
||||
Asignación Rápida
|
||||
</button>
|
||||
</CataModalAsignacionRapida>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,11 +1,23 @@
|
||||
<template>
|
||||
<UModal
|
||||
v-model:open="isOpen"
|
||||
title="Asignación Rápida de Puntajes"
|
||||
:ui="{
|
||||
overlay: 'backdrop-blur-sm',
|
||||
content: 'cata-bg cata-outline-box',
|
||||
header: 'cata-bg',
|
||||
body: 'cata-bg',
|
||||
footer: 'cata-bg',
|
||||
title: 'cata-text'
|
||||
}"
|
||||
>
|
||||
<!-- Trigger (slot por defecto) -->
|
||||
<slot />
|
||||
|
||||
<!-- Título personalizado -->
|
||||
<template #title>
|
||||
<span class="cata-text">Asignación Rápida de Puntajes</span>
|
||||
</template>
|
||||
|
||||
<!-- Contenido del modal -->
|
||||
<template #body>
|
||||
<div class="space-y-4">
|
||||
|
||||
Reference in New Issue
Block a user