nucleo000/cataRio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: Extender personalización de colores a fuente y fondo
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m7s
Details

Browse Source 
- Modificar useColorCustomization para manejar tres colores (primary, foreground, background)
- Actualizar interfaz ThemeColors con los tres colores
- Agregar selectores de color para fuente y fondo en el modal
- Implementar vista previa con los tres colores aplicados
- Actualizar funciones setCustomColors y resetColors para manejar múltiples colores
- Mantener almacenamiento separado por tema (light/dark)
- Aplicar colores a variables --cata-fg y --cata-bg además de --cata-primary
This commit is contained in:
josedario87
2025-10-18 03:18:52 -06:00
parent 9ffba43ab4
commit 6712439846
1 changed files with 86 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
nuxt4/app/components/cata/UserInfo.vue
View File

@@ -37,21 +37,42 @@
<!-- Modal body -->
<template #body>
<!-- Color picker -->
<div class="mb-6">
<!-- Color Principal -->
<div class="mb-4">
<label class="cata-text text-sm font-medium mb-2 block">
Color Principal
</label>
<div class="flex items-center gap-3">
<input
type="color"
v-model="colorSeleccionado"
v-model="colorPrimario"
class="color-picker"
@change="previsualizarColor"
/>
<input
type="text"
v-model="colorSeleccionado"
v-model="colorPrimario"
class="cata-input flex-1 px-3 py-2 rounded-md"
placeholder="#4682B4"
maxlength="7"
pattern="^#[0-9A-Fa-f]{6}$"
/>
</div>
</div>
<!-- Color de Fuente -->
<div class="mb-4">
<label class="cata-text text-sm font-medium mb-2 block">
Color de Fuente
</label>
<div class="flex items-center gap-3">
<input
type="color"
v-model="colorFuente"
class="color-picker"
/>
<input
type="text"
v-model="colorFuente"
class="cata-input flex-1 px-3 py-2 rounded-md"
placeholder="#000000"
maxlength="7"
@@ -60,18 +81,51 @@
</div>
</div>
<!-- Vista previa del color -->
<!-- Color de Fondo -->
<div class="mb-6">
<label class="cata-text text-sm font-medium mb-2 block">
Color de Fondo
</label>
<div class="flex items-center gap-3">
<input
type="color"
v-model="colorFondo"
class="color-picker"
/>
<input
type="text"
v-model="colorFondo"
class="cata-input flex-1 px-3 py-2 rounded-md"
placeholder="#ffffff"
maxlength="7"
pattern="^#[0-9A-Fa-f]{6}$"
/>
</div>
</div>
<!-- Vista previa -->
<div class="mb-6">
<p class="cata-text text-sm font-medium mb-2">
Vista previa
</p>
<div class="preview-box cata-outline-box rounded-md p-4">
<div
class="preview-box cata-outline-box rounded-md p-4"
:style="{
backgroundColor: colorFondo,
borderColor: colorPrimario
}"
>
<p
class="text-sm mb-2"
:style="{ color: colorFuente }"
>
Texto de ejemplo
</p>
<button
class="cata-button px-4 py-2"
:style="{
'--preview-color': colorSeleccionado,
borderColor: colorSeleccionado,
color: colorSeleccionado
borderColor: colorPrimario,
color: colorPrimario
}"
>
Botón de ejemplo
@@ -84,9 +138,9 @@
<template #footer>
<div class="flex items-center justify-end gap-2 w-full">
<button
v-if="hasCustomColor"
v-if="hasCustomColors"
class="cata-button px-4 py-2"
@click="resetearColor"
@click="resetearColores"
>
Restablecer
</button>
@@ -98,7 +152,7 @@
</button>
<button
class="cata-button px-4 py-2"
@click="aplicarColor"
@click="aplicarColores"
>
Aplicar
</button>
@@ -141,18 +195,22 @@
<script setup lang="ts">
const { user, checkSessionStatus } = useAuthentik()
const colorMode = useColorMode()
const { getCurrentColor, hasCustomColor, setCustomColor, resetColor } = useColorCustomization()
const { getCurrentColors, hasCustomColors, setCustomColors, resetColors } = useColorCustomization()
// Estado del tema
const isDark = computed(() => colorMode.value === 'dark')
// Estado del modal de color picker
const mostrarColorPicker = ref(false)
const colorSeleccionado = ref(getCurrentColor.value)
const colorPrimario = ref(getCurrentColors.value.primary)
const colorFuente = ref(getCurrentColors.value.foreground)
const colorFondo = ref(getCurrentColors.value.background)
// Actualizar color seleccionado cuando cambia el tema
watch(getCurrentColor, (newColor) => {
colorSeleccionado.value = newColor
// Actualizar colores seleccionados cuando cambia el tema
watch(getCurrentColors, (newColors) => {
colorPrimario.value = newColors.primary
colorFuente.value = newColors.foreground
colorFondo.value = newColors.background
})
// Obtener la inicial del usuario
@@ -183,21 +241,19 @@ const handleLogout = () => {
window.location.href = '/outpost.goauthentik.io/sign_out'
}
// Previsualizar color
const previsualizarColor = () => {
// La vista previa se maneja con el binding :style en el template
}
// Aplicar color personalizado
const aplicarColor = () => {
setCustomColor(colorSeleccionado.value)
// Aplicar colores personalizados
const aplicarColores = () => {
setCustomColors(colorPrimario.value, colorFuente.value, colorFondo.value)
mostrarColorPicker.value = false
}
// Resetear color al por defecto
const resetearColor = () => {
resetColor()
colorSeleccionado.value = getCurrentColor.value
// Resetear colores a los por defecto
const resetearColores = () => {
resetColors()
const colors = getCurrentColors.value
colorPrimario.value = colors.primary
colorFuente.value = colors.foreground
colorFondo.value = colors.background
}
</script>