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

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

Browse Source 
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.
This commit is contained in:
google-labs-jules[bot]
2025-05-31 06:54:38 +00:00
parent ac939341a0
commit 0027c68087
7 changed files with 91 additions and 5 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')