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

Merge pull request #13 from josedario87/feat/per-module-table-backgrounds

Browse Source 
Feat/per module table backgrounds
This commit is contained in:
josedario87
2025-05-31 01:05:23 -06:00
committed by GitHub
parent 256f5c3994 8ddaf975f7
commit 8fd1ba672e
7 changed files with 124 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
ui/src/App.vue
View File

@@ -21,6 +21,16 @@ watchEffect(() => {
root.style.setProperty('--accent-color-tareas', ui.accentColorTareas)
root.style.setProperty('--accent-color-planillas', ui.accentColorPlanillas)
root.style.setProperty('--accent-color-asistencias', ui.accentColorAsistencias)
// Note: Configuracion accent color is missing here, should be added if used for CSS vars.
// root.style.setProperty('--accent-color-configuracion', ui.accentColorConfiguracion)
// Per-module table background colors
root.style.setProperty('--table-bg-color-empleados', ui.tableBgColorEmpleados)
root.style.setProperty('--table-bg-color-tareas', ui.tableBgColorTareas)
root.style.setProperty('--table-bg-color-planillas', ui.tableBgColorPlanillas)
root.style.setProperty('--table-bg-color-asistencias', ui.tableBgColorAsistencias)
root.style.setProperty('--table-bg-color-configuracion', ui.tableBgColorConfiguracion)
if (ui.theme === 'dark') {
root.classList.add('theme-dark')

2
ui/src/components/asistencias/tablaAsistencias.vue
View File

@@ -94,6 +94,8 @@ const deleteAsistenciaInternal = async (id) => {
}
.tabla-asistencias {
/* Apply module-specific background color */
background-color: var(--table-bg-color-asistencias);
width: 100%;
border-collapse: collapse;
margin-top: 1em;

6
ui/src/components/empleados/tablaEmpleados.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="overflow-x-auto bg-white shadow-md rounded-lg p-4">
<table class="min-w-full divide-y divide-gray-200">
<table class="min-w-full divide-y divide-gray-200 table-empleados">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
@@ -172,4 +172,8 @@ button:hover svg {
.overflow-x-auto {
border: 1px solid #e5e7eb; /* Tailwind's gray-200 */
}
table.table-empleados {
background-color: var(--table-bg-color-empleados);
}
</style>

1
ui/src/components/planillas/tablaPlanillas.vue
View File

@@ -97,6 +97,7 @@ const deletePlanillaInternal = async (id) => {
}
.tabla-planillas {
background-color: var(--table-bg-color-planillas); /* Added */
width: 100%;
border-collapse: collapse;
margin-top: 1em;

1
ui/src/components/tareas/tablaTareas.vue
View File

@@ -99,6 +99,7 @@ const deleteTareaInternal = async (id) => {
}
.tabla-tareas {
background-color: var(--table-bg-color-tareas); /* Added */
width: 100%;
border-collapse: collapse;
margin-top: 1em;

34
ui/src/stores/useUi.js
View File

@@ -17,6 +17,12 @@ const appearanceSettingKeys = [
'accentColorPlanillas',
'accentColorAsistencias',
'accentColorConfiguracion',
// Per-module table background colors
'tableBgColorEmpleados',
'tableBgColorTareas',
'tableBgColorPlanillas',
'tableBgColorAsistencias',
'tableBgColorConfiguracion',
]
const loadSettingsFromLocalStorage = () => {
@@ -78,6 +84,12 @@ export const useUi = defineStore('ui', {
accentColorPlanillas: '#FF9800', // Orange
accentColorAsistencias: '#E91E63', // Pink
accentColorConfiguracion: '#607D8B', // Blue Grey
// Per-module table background colors - default to white
tableBgColorEmpleados: '#FFFFFF',
tableBgColorTareas: '#FFFFFF',
tableBgColorPlanillas: '#FFFFFF',
tableBgColorAsistencias: '#FFFFFF',
tableBgColorConfiguracion: '#FFFFFF',
}
const loadedSettings = loadSettingsFromLocalStorage()
@@ -163,6 +175,28 @@ export const useUi = defineStore('ui', {
setAccentColorConfiguracion(color) {
this.accentColorConfiguracion = color
_saveAppearanceState(this)
},
// Actions for per-module table background colors
setTableBgColorEmpleados(color) {
this.tableBgColorEmpleados = color
_saveAppearanceState(this)
},
setTableBgColorTareas(color) {
this.tableBgColorTareas = color
_saveAppearanceState(this)
},
setTableBgColorPlanillas(color) {
this.tableBgColorPlanillas = color
_saveAppearanceState(this)
},
setTableBgColorAsistencias(color) {
this.tableBgColorAsistencias = color
_saveAppearanceState(this)
},
setTableBgColorConfiguracion(color) {
this.tableBgColorConfiguracion = color
_saveAppearanceState(this)
}
},
})

94
ui/src/views/SettingsView.vue
View File

@@ -52,7 +52,7 @@
</section>
<!-- Typography Section -->
<section>
<section class="mb-10">
<h2 class="text-2xl font-semibold mb-6 text-[var(--primary-color)]">Typography</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="setting-item">
@@ -70,38 +70,86 @@
</div>
</section>
<!-- Module Accent Colors Section -->
<section class="mb-10"> <!-- Changed from no margin to mb-10 for consistency -->
<h2 class="text-2xl font-semibold mb-6 text-[var(--primary-color)]">Module Accent Colors</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Per-Module Color Settings -->
<section class="mb-10 module-settings-group">
<h3 class="text-xl font-semibold mb-4 text-[var(--primary-color)] border-b border-[var(--secondary-color)] pb-2">Empleados Module</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div class="setting-item">
<label for="accentColorEmpleados" class="block text-sm font-medium mb-1">Empleados Accent</label>
<label for="accentColorEmpleados" class="block text-sm font-medium mb-1">Accent Color</label>
<input type="color" id="accentColorEmpleados" v-model="ui.accentColorEmpleados" @input="ui.setAccentColorEmpleados($event.target.value)"
class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
</div>
<div class="setting-item">
<label for="accentColorTareas" class="block text-sm font-medium mb-1">Tareas Accent</label>
<input type="color" id="accentColorTareas" v-model="ui.accentColorTareas" @input="ui.setAccentColorTareas($event.target.value)"
class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
</div>
<div class="setting-item">
<label for="accentColorPlanillas" class="block text-sm font-medium mb-1">Planillas Accent</label>
<input type="color" id="accentColorPlanillas" v-model="ui.accentColorPlanillas" @input="ui.setAccentColorPlanillas($event.target.value)"
class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
</div>
<div class="setting-item">
<label for="accentColorAsistencias" class="block text-sm font-medium mb-1">Asistencias Accent</label>
<input type="color" id="accentColorAsistencias" v-model="ui.accentColorAsistencias" @input="ui.setAccentColorAsistencias($event.target.value)"
class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
</div>
<div class="setting-item">
<label for="accentColorConfiguracion" class="block text-sm font-medium mb-1">Configuracion Accent</label>
<input type="color" id="accentColorConfiguracion" v-model="ui.accentColorConfiguracion" @input="ui.setAccentColorConfiguracion($event.target.value)"
<label for="tableBgColorEmpleados" class="block text-sm font-medium mb-1">Table Background</label>
<input type="color" id="tableBgColorEmpleados" v-model="ui.tableBgColorEmpleados" @input="ui.setTableBgColorEmpleados($event.target.value)"
class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
</div>
</div>
</section>
<section class="mb-10 module-settings-group">
<h3 class="text-xl font-semibold mb-4 text-[var(--primary-color)] border-b border-[var(--secondary-color)] pb-2">Tareas Module</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div class="setting-item">
<label for="accentColorTareas" class="block text-sm font-medium mb-1">Accent Color</label>
<input type="color" id="accentColorTareas" v-model="ui.accentColorTareas" @input="ui.setAccentColorTareas($event.target.value)"
class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
</div>
<div class="setting-item">
<label for="tableBgColorTareas" class="block text-sm font-medium mb-1">Table Background</label>
<input type="color" id="tableBgColorTareas" v-model="ui.tableBgColorTareas" @input="ui.setTableBgColorTareas($event.target.value)"
class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
</div>
</div>
</section>
<section class="mb-10 module-settings-group">
<h3 class="text-xl font-semibold mb-4 text-[var(--primary-color)] border-b border-[var(--secondary-color)] pb-2">Planillas Module</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div class="setting-item">
<label for="accentColorPlanillas" class="block text-sm font-medium mb-1">Accent Color</label>
<input type="color" id="accentColorPlanillas" v-model="ui.accentColorPlanillas" @input="ui.setAccentColorPlanillas($event.target.value)"
class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
</div>
<div class="setting-item">
<label for="tableBgColorPlanillas" class="block text-sm font-medium mb-1">Table Background</label>
<input type="color" id="tableBgColorPlanillas" v-model="ui.tableBgColorPlanillas" @input="ui.setTableBgColorPlanillas($event.target.value)"
class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
</div>
</div>
</section>
<section class="mb-10 module-settings-group">
<h3 class="text-xl font-semibold mb-4 text-[var(--primary-color)] border-b border-[var(--secondary-color)] pb-2">Asistencias Module</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div class="setting-item">
<label for="accentColorAsistencias" class="block text-sm font-medium mb-1">Accent Color</label>
<input type="color" id="accentColorAsistencias" v-model="ui.accentColorAsistencias" @input="ui.setAccentColorAsistencias($event.target.value)"
class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
</div>
<div class="setting-item">
<label for="tableBgColorAsistencias" class="block text-sm font-medium mb-1">Table Background</label>
<input type="color" id="tableBgColorAsistencias" v-model="ui.tableBgColorAsistencias" @input="ui.setTableBgColorAsistencias($event.target.value)"
class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
</div>
</div>
</section>
<section class="mb-10 module-settings-group">
<h3 class="text-xl font-semibold mb-4 text-[var(--primary-color)] border-b border-[var(--secondary-color)] pb-2">Configuración Module</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div class="setting-item">
<label for="accentColorConfiguracion" class="block text-sm font-medium mb-1">Accent Color</label>
<input type="color" id="accentColorConfiguracion" v-model="ui.accentColorConfiguracion" @input="ui.setAccentColorConfiguracion($event.target.value)"
class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
</div>
<div class="setting-item">
<label for="tableBgColorConfiguracion" class="block text-sm font-medium mb-1">Table Background</label>
<input type="color" id="tableBgColorConfiguracion" v-model="ui.tableBgColorConfiguracion" @input="ui.setTableBgColorConfiguracion($event.target.value)"
class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
</div>
</div>
</section>
</div>
</template>