0027c68087
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.
77 lines
2.8 KiB
Vue
77 lines
2.8 KiB
Vue
<script setup>
|
|
import { watchEffect } from 'vue'
|
|
import TopBar from '@/components/ui/TopBar.vue'
|
|
import NavBar from '@/components/ui/NavBar.vue'
|
|
import { useUi } from '@/stores/useUi'
|
|
|
|
const ui = useUi()
|
|
|
|
watchEffect(() => {
|
|
const root = document.documentElement
|
|
|
|
root.style.setProperty('--primary-color', ui.primaryColor)
|
|
root.style.setProperty('--secondary-color', ui.secondaryColor)
|
|
root.style.setProperty('--warning-color', ui.warningColor)
|
|
root.style.setProperty('--background-color', ui.backgroundColor)
|
|
root.style.setProperty('--font-family', ui.fontFamily)
|
|
root.style.setProperty('--font-size', `${ui.fontSize}px`)
|
|
|
|
// Module-specific accent colors
|
|
root.style.setProperty('--accent-color-empleados', ui.accentColorEmpleados)
|
|
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')
|
|
root.classList.remove('theme-light')
|
|
} else {
|
|
root.classList.add('theme-light')
|
|
root.classList.remove('theme-dark')
|
|
}
|
|
|
|
if (ui.animationsEnabled) {
|
|
root.classList.remove('animations-disabled')
|
|
} else {
|
|
root.classList.add('animations-disabled')
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<!-- TopBar fija -->
|
|
<TopBar />
|
|
|
|
<!-- wrapper: deja espacio para TopBar (pt-14 = 56px) y, en desktop, para NavBar (pl-60) -->
|
|
<div :class="[
|
|
'pt-14 min-h-screen transition-[padding-left] duration-200',
|
|
ui.sidebarOpen ? 'md:pl-60' : '',
|
|
// The global style.css will handle base background and text color via body styling
|
|
// but we can keep specific overrides here if needed or theme classes.
|
|
// ui.theme === 'dark' ? 'bg-gray-800 text-gray-100' : 'bg-gray-100 text-gray-900'
|
|
]">
|
|
<!-- NavBar fija -->
|
|
<NavBar />
|
|
|
|
<!-- contenido principal -->
|
|
<main class="min-h-[calc(100vh-56px)] flex flex-col overflow-hidden">
|
|
<RouterView class="flex-1 overflow-auto" />
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Scoped styles remain, global styles are in style.css */
|
|
/* We can add specific App.vue styling here if needed, that doesn't rely on theme variables directly */
|
|
</style>
|