feat(ui): Add per-module configurable table background colors

This commit introduces the ability for you to customize the background color of tables individually for each application module (Empleados, Tareas, Planillas, Asistencias, Configuracion). This enhances user experience by providing more granular control over the application's appearance, similar to the existing per-module accent colors. Key changes: - **UI Store (`ui/src/stores/useUi.js`):** - Removed the previous single `tableBackgroundColor` state. - Added new state properties for each module's table background: - `tableBgColorEmpleados` - `tableBgColorTareas` - `tableBgColorPlanillas` - `tableBgColorAsistencias` - `tableBgColorConfiguracion` - These are included in `appearanceSettingKeys` for local storage persistence and initialized to `#FFFFFF` (white) by default. - Added corresponding actions (e.g., `setTableBgColorEmpleados`) for each new property. - **Settings View (`ui/src/views/SettingsView.vue`):** - Removed the previous single global table background color input. - Added new color picker inputs for each module's table background color, integrated within the "Module Colors" section. - These inputs are bound to their respective store properties and actions. - **Global Styles & Application (`ui/src/App.vue` & component styles):** - The previous global `--table-bg-color` CSS variable was removed. - `App.vue` now dynamically creates and updates CSS variables for each module's table background color on the root element (e.g., `--table-bg-color-empleados`). - Table components within each module (e.g., `tablaAsistencias.vue`, `tablaEmpleados.vue`, etc.) have been updated to use their respective CSS variable for the `background-color` property, typically by applying it to a module-specific class on the table. - **Reverted Previous Implementation:** - The initial implementation for a single, global table background color was reverted before implementing this per-module approach. This feature allows for a more personalized and visually distinct experience across different sections of the application.
2025-05-31 06:54:38 +00:00
parent ac939341a0
commit 0027c68087
7 changed files with 91 additions and 5 deletions
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -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')
--- a/ui/src/components/asistencias/tablaAsistencias.vue
+++ b/ui/src/components/asistencias/tablaAsistencias.vue
@@ -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;
--- a/ui/src/components/empleados/tablaEmpleados.vue
+++ b/ui/src/components/empleados/tablaEmpleados.vue
@@ -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>
--- a/ui/src/components/planillas/tablaPlanillas.vue
+++ b/ui/src/components/planillas/tablaPlanillas.vue
@@ -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;
--- a/ui/src/components/tareas/tablaTareas.vue
+++ b/ui/src/components/tareas/tablaTareas.vue
@@ -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;
--- a/ui/src/stores/useUi.js
+++ b/ui/src/stores/useUi.js
@@ -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)
    }
  },
 })
--- a/ui/src/views/SettingsView.vue
+++ b/ui/src/views/SettingsView.vue
@@ -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,35 +70,69 @@
      </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>
+    <!-- Module Colors Section (Accent and Table Background) -->
+    <section class="mb-10">
+      <h2 class="text-2xl font-semibold mb-6 text-[var(--primary-color)]">Module Colors</h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+        <!-- Empleados -->
        <div class="setting-item">
          <label for="accentColorEmpleados" class="block text-sm font-medium mb-1">Empleados Accent</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="tableBgColorEmpleados" class="block text-sm font-medium mb-1">Table BG Empleados</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>
+
+        <!-- Tareas -->
        <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="tableBgColorTareas" class="block text-sm font-medium mb-1">Table BG Tareas</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>
+
+        <!-- Planillas -->
        <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="tableBgColorPlanillas" class="block text-sm font-medium mb-1">Table BG Planillas</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>
+
+        <!-- Asistencias -->
        <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="tableBgColorAsistencias" class="block text-sm font-medium mb-1">Table BG Asistencias</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>
+
+        <!-- Configuracion -->
        <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)"
                 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 BG Configuracion</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>