Refactor: simplificar indicadores de cambios pendientes
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 46s
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 46s
Cambios realizados: - Alerta más compacta con variant 'soft' en lugar de 'solid' - Eliminado botón 'Actualizar ahora' redundante de la alerta - Eliminado emoji de advertencia del botón 'Actualizar' - Simplificado borde del card (solo borde amarillo sutil) - Eliminadas sombras y rings del card - Eliminada animación pulse del botón - Mantenido punto amarillo pulsante en la alerta El indicador ahora es más discreto pero sigue siendo evidente.
This commit is contained in:
@@ -103,7 +103,7 @@
|
||||
:class="[
|
||||
'brand-card border transition-all duration-300',
|
||||
hasPendingChanges
|
||||
? 'border-yellow-500 shadow-lg shadow-yellow-500/50 ring-2 ring-yellow-400/50'
|
||||
? 'border-yellow-500/60'
|
||||
: 'border-transparent'
|
||||
]"
|
||||
>
|
||||
@@ -125,32 +125,15 @@
|
||||
<UAlert
|
||||
v-if="hasPendingChanges"
|
||||
color="warning"
|
||||
variant="solid"
|
||||
icon="i-lucide-alert-circle"
|
||||
class="animate-pulse"
|
||||
variant="soft"
|
||||
class="py-2"
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex items-center justify-between gap-3 text-sm">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-bold">¡Cambios pendientes!</span>
|
||||
<span class="inline-flex h-2 w-2 rounded-full bg-yellow-400 animate-ping"></span>
|
||||
<span class="inline-flex h-2 w-2 rounded-full bg-yellow-500 animate-pulse"></span>
|
||||
<span class="font-medium">Cambios pendientes - Haz clic en "Actualizar" para aplicar</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<span>Los filtros han cambiado pero no se han aplicado a los datos mostrados. Haz clic en "Actualizar" para aplicar los cambios.</span>
|
||||
<UButton
|
||||
:loading="loading"
|
||||
:disabled="loading"
|
||||
color="yellow"
|
||||
variant="solid"
|
||||
size="xs"
|
||||
@click="loadData"
|
||||
>
|
||||
<template #leading>
|
||||
<UIcon name="i-lucide-refresh-cw" :class="{ 'animate-spin': loading }" />
|
||||
</template>
|
||||
Actualizar ahora
|
||||
</UButton>
|
||||
</div>
|
||||
</template>
|
||||
</UAlert>
|
||||
@@ -186,7 +169,7 @@
|
||||
:disabled="loading"
|
||||
:ui="{
|
||||
base: hasPendingChanges
|
||||
? 'bg-yellow-500 text-black border border-yellow-600 hover:bg-yellow-400 hover:border-yellow-500 disabled:opacity-50 disabled:cursor-not-allowed animate-pulse'
|
||||
? 'bg-yellow-500 text-black border border-yellow-600 hover:bg-yellow-400 hover:border-yellow-500 disabled:opacity-50 disabled:cursor-not-allowed'
|
||||
: 'bg-[#c08040] text-[#1b1209] border border-[#d99a56] hover:bg-[#d99a56] hover:border-[#f0c07c] disabled:opacity-50 disabled:cursor-not-allowed'
|
||||
}"
|
||||
size="sm"
|
||||
@@ -195,7 +178,7 @@
|
||||
<template #leading>
|
||||
<UIcon name="i-lucide-refresh-cw" :class="{ 'animate-spin': loading }" />
|
||||
</template>
|
||||
{{ hasPendingChanges ? 'Actualizar ⚠️' : 'Actualizar' }}
|
||||
Actualizar
|
||||
</UButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user