This commit introduces new UI settings to control the font color, family, and size of the text within the chat interface.
Key changes:
- Added new state variables and actions to `ui/src/stores/useUi.js` for:
- Chat font color (`chatFontColor`)
- Chat font family (`chatFontFamily`)
- Chat font size (`chatFontSize`)
- These settings are persisted in local storage.
- Added controls for these font properties to the "Chat Interface Colors" section in `ui/src/views/SettingsView.vue`.
- Includes a color picker for font color.
- Includes a text input for font family.
- Includes a number input for font size (px).
- Modified `ui/src/components/chat/CanvasChat.vue` to use these new font settings via CSS custom properties.
- The `chatStyleVariables` computed property now includes variables for font settings.
- Chat messages (agent and user) and the chat input textarea now apply these font styles.
I've confirmed that the font settings are applied correctly to messages and the input area, persist across sessions, and integrate well with existing theme and color customizations.
This commit introduces new UI settings to control the colors of various chat interface elements.
Key changes:
- Added new state variables and actions to `ui/src/stores/useUi.js` for:
- Agent message color (`chatAgentMessageColor`)
- Own message color (`chatOwnMessageColor`)
- Input box color (`chatInputBoxColor`)
- Accent color (`chatAccentColor`)
- Background color (`chatBackgroundColor`)
- These settings are persisted in local storage.
- Added a new "Chat Interface Colors" section in `ui/src/views/SettingsView.vue` with color pickers for each new setting.
- Modified `ui/src/components/chat/CanvasChat.vue` to use these new color settings via CSS custom properties. The chat elements (agent messages, own messages, input box, send button, background) now reflect your configured colors.
The changes have been tested to ensure that colors are applied correctly, persist across sessions, and do not conflict with existing theme settings.
This commit introduces a new feature allowing you to control the speed
of route transitions.
Changes include:
- Added `transitionSpeed` state (defaulting to 1 for normal) and a
`setTransitionSpeed` action to `ui/src/stores/useUi.js`. The speed
is a multiplier for the base transition duration.
- `transitionSpeed` is now persisted to local storage.
- Modified `ui/src/App.vue` to dynamically calculate and apply the
transition duration using a CSS variable (`--current-transition-duration`)
based on the `transitionSpeed` from the store. The base duration for
normal speed is 0.3s.
- Added a new "Animation Speed" setting in `ui/src/views/SettingsView.vue`
with options (Slow, Normal, Fast) using radio buttons. This control
updates the `transitionSpeed` in the UI store.
This allows you to customize the feel of the application's navigation
transitions to your preference.
This commit introduces a new customization option in the appearance settings, allowing you to choose your default index view (card or table) for each module (Empleados, Tareas, Planillas, Asistencias).
Key changes:
- **Store Updates (`useUi.js`):**
- Added new state properties (e.g., `defaultViewEmpleados`) to store the preferred view for each module.
- Added corresponding actions (e.g., `setDefaultViewEmpleados`) to update these settings.
- Settings are persisted to local storage.
- **Settings UI (`SettingsView.vue`):**
- Added dropdown selectors in the module-specific sections of the appearance settings page for you to choose 'Table' or 'Card' as your default view.
- These selectors are bound to the new store properties.
- **Module Index Views (e.g., `EmpleadosIndex.vue`):**
- Modified to read the default view setting from the `useUi` store.
- Conditionally render either the table component or the card component based on this setting.
- Removed manual view toggle buttons, as the default is now managed via settings.
- **Testing:**
- I added unit tests for the new store actions and state.
- I added component tests for `SettingsView.vue` to verify the new UI elements and their interaction with the store.
- I added component tests for each module's index view to ensure they render the correct view (table or card) based on the global setting and display data or "no data" messages appropriately.
This feature provides you with more control over your preferred data display format within each module, enhancing the user experience.
This commit introduces a new behavior for the desktop navbar, allowing it to remain open until the menu button is clicked again. This behavior is controlled by a new option in your settings.
Changes include:
- **Configuration Store (`useUi.js`):**
- Added a new boolean state `desktopNavbarPersistent` (default: `false`).
- Added an action `setDesktopNavbarPersistent` to modify this state.
- Ensured this setting is persisted to and loaded from local storage.
- **TopBar Component (`TopBar.vue`):**
- Verified that the hamburger menu button is visible on desktop screens to allow toggling the navbar.
- **NavBar Component (`NavBar.vue`):**
- Modified the navigation link click handler:
- If `desktopNavbarPersistent` is true and in desktop view (>=768px), clicking a link will no longer close the sidebar.
- In mobile view or when `desktopNavbarPersistent` is false, links will still close the sidebar.
- The '✕' close button in the NavBar continues to toggle the sidebar visibility.
- **Settings View (`SettingsView.vue`):**
- Added a new checkbox in the "General" settings section to allow you to enable or disable the "Persistent Desktop Navbar" feature.
This addresses the issue where you wanted the navbar to be less intrusive and only close upon an explicit second click of the menu button in desktop environments.
This commit refactors `SettingsView.vue` to enhance clarity and your experience by reorganizing color customization options.
Key changes:
- **Module-Based Organization:**
- Color settings (Accent Color, Table Background Color) are now grouped into dedicated sections for each application module (Empleados, Tareas, Planillas, Asistencias, Configuracion).
- Each module section features a clear heading (e.g., "Empleados Module") with consistent styling, including a bottom border for visual separation.
- The previous generic "Module Colors" grid has been removed.
- **Improved Naming and Typography:**
- Labels for color settings within each module section have been simplified to "Accent Color" and "Table Background", as the module context is provided by the section heading.
- All labels and section headings now use standard title case, avoiding excessive uppercase for better readability.
- **Layout and Styling:**
- The new module sections are styled consistently with the rest of the Settings page, maintaining a cohesive look and feel.
- A responsive grid layout is used within each module section to arrange its color settings effectively on different screen sizes.
- Spacing and visual hierarchy have been reviewed to ensure the page remains easy to navigate.
These changes make it easier for you to find and manage color preferences for specific parts of the application.
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 introduces a new accent color setting for the 'configuracion' module.
Changes include:
- Updated `ui/src/stores/useUi.js` to include:
- A new state property `accentColorConfiguracion`.
- Addition of `'accentColorConfiguracion'` to `appearanceSettingKeys` for local storage persistence.
- A new action `setAccentColorConfiguracion` to modify the new color.
- Updated `ui/src/views/SettingsView.vue` to include:
- A new color picker in the "Module Accent Colors" section, allowing you to select and change the accent color for the 'configuracion' module.
This commit introduces module-specific accent colors and further integrates
the primary and secondary theme colors throughout the application's UI components.
Key features:
- Four new customizable accent colors, one for each main module:
- Empleados
- Tareas
- Planillas
- Asistencias
- These accent colors are configurable in the Settings view and persist in local storage.
- Broader application of global primary and secondary colors to common UI elements like navigation bars.
- Module-specific components now use their designated accent color for key visual elements (e.g., primary buttons, titles, icons, borders), providing better visual differentiation between modules.
Changes include:
- Extended `ui/src/stores/useUi.js` to manage state for the four new module accent colors, including actions and local storage persistence.
- Added a "Module Accent Colors" section with color pickers to `ui/src/views/SettingsView.vue`.
- Updated `ui/src/App.vue` to expose these module accent colors as CSS variables (e.g., `--accent-color-empleados`).
- Systematically updated styles in general UI components (`ui/src/components/ui/`) and all module-specific components (`ui/src/components/{module}/` and `ui/src/views/{module}/`) to utilize the new global and module-specific theme colors.
- Updated unit tests for `useUi.js` and component tests for `SettingsView.vue` to cover the new accent color functionality. A bug related to color input event handling in `SettingsView.vue` was identified and fixed during this process.
This enhancement provides a more visually distinct and customizable experience across different sections of the application.
