This commit addresses UI feedback regarding the EmpleadoForm background
and color variable usage in the Chat module.
Corrections:
1. **`EmpleadoForm.vue` Background:**
* Removed the explicit `bg-gray-100` from the outer container of
`EmpleadoForm.vue`.
* Applied a new class `.empleado-form-page-container` to the outer
container, styled for consistency with index page containers (padding,
max-width, margin, default font, no explicit background).
* The form itself retains its `bg-white` card appearance, which now sits
on a page background consistent with other views.
2. **Chat Module Color Management (`CanvasChat.vue` & `useUi.js`):**
* **`useUi.js` Store:**
* Added `accentColorChat` (defaulting to teal `rgb(13, 148, 136)`)
and `bgColorChat` (defaulting to light gray `rgb(249, 250, 251)`)
to the store's state.
* Included these new keys in `appearanceSettingKeys` for persistence.
* **`CanvasChat.vue` Component:**
* Now imports and uses the `useUi` store.
* The main chat container's background is dynamically bound to
`ui.bgColorChat`.
* The background color for user-sent messages and the send button
is dynamically bound to `ui.accentColorChat`.
* Input field focus and scrollbar styling continue to leverage the
globally defined CSS variables (`--accent-color-chat` and
`--accent-color-chat-rgb`), which use the same default teal color,
ensuring consistency.
These changes ensure the `EmpleadoForm.vue` background is visually consistent
with other application forms/pages and that the Chat module's theming is
correctly managed through the central UI store and established CSS variables.
This commit brings the Empleados and Chat UI modules more in line with the visual and functional conventions established by other modules in your application, particularly Planillas.
**Key Changes for Empleados Module:**
- **`EmpleadosIndex.vue`:**
- Standardized page header structure and styling (title, create button).
- Removed extra descriptive paragraph from header.
- Aligned styling for loading, error, and no-data messages with other modules.
- Create button icon removed for consistency.
- **`cardEmpleado.vue`:**
- Edit action now emits an event instead of direct navigation.
- Added a delete button with confirmation and store integration.
- Converted component from TypeScript to JavaScript.
- Adjusted layout for consistency with other card components.
- **`tablaEmpleados.vue`:**
- Edit action now emits an event.
- Removed the "View Details" button to streamline actions.
- Added a delete button with confirmation and store integration.
- Converted component from TypeScript to JavaScript.
- Ensured action button styling and no-data messages are consistent.
**Key Changes for Chat Module:**
- **`ChatView.vue`:**
- Added a standard page header with the title "Chat".
- **`CanvasChat.vue`:**
- Standardized styling for the message input textarea and send button, using the new `accent-color-chat`.
- Updated message bubble colors for user (using `accent-color-chat`) and bot messages for better theme alignment.
- Adjusted custom scrollbar colors to use `accent-color-chat`.
- **`useUi.js` (UI Store):**
- Added `accentColorChat` to the store's state, appearance keys, and actions, allowing it to be configurable and persisted. Defaulted to Teal (#0D9488).
These changes aim to provide a more cohesive user experience across your application by ensuring that common UI elements and interactions behave and look similar in the Empleados and Chat modules as they do elsewhere.
This commit standardizes the user interface of the 'empleados' and 'chat'
modules to improve overall UI consistency with other modules like 'planillas'.
Key changes include:
Empleados Module:
- `EmpleadosIndex.vue`:
- Header style (title, create button) aligned with `PlanillasIndex.vue`.
- Consistent use of `var(--accent-color-empleados)`.
- Standardized button hover/focus styles.
- Adjusted layout, spacing, and informational messages (loading, error, no-data)
to match `PlanillasIndex.vue`.
- `cardEmpleado.vue`:
- Ensured consistent use of `var(--accent-color-empleados)`.
- Standardized 'Edit' button styles.
- Removed 'View Details' button for consistency (Edit serves both purposes).
- Added a 'Delete' button with confirmation, similar to `cardPlanilla.vue`.
- `tablaEmpleados.vue`:
- Ensured consistent use of `var(--accent-color-empleados)` for table elements.
- Standardized 'Edit' button styles.
- Removed 'View Details' button.
- Added a 'Delete' button with confirmation.
- Edit action now emits an event, handled by the parent.
Chat Module (`CanvasChat.vue`):
- Replaced hardcoded teal colors with a new global CSS variable
`--accent-color-chat`.
- Input field and send button styles updated for better consistency with
other form elements, including hover and focus effects.
- Scrollbar colors now use the `--accent-color-chat` variable.
Global Changes:
- `ui/src/style.css`:
- Added global CSS variables for accent colors for `empleados`, `chat`,
and `planillas` (e.g., `--accent-color-empleados`, `--accent-color-chat`)
and their corresponding RGB versions (e.g., `--accent-color-empleados-rgb`).
- Standardized existing accent colors for `asistencias` and `tareas` to
use the new `rgb(var(...-rgb))` pattern.
- `ui/src/stores/useUi.js`:
- Set `defaultViewEmpleados` to 'card' for consistency.
Testing:
- I attempted to run automated tests, but they timed out in the execution environment. The changes are based on successful execution and code review.
I've standardized the visual appearance, structure, and functionality of card components across different modules (Asistencias, Empleados, Planillas, Tareas) to ensure a consistent user experience for you.
Key changes include:
- **Consistent HTML Structure:** All cards now follow a common layout with `card-header`, `card-body`, and `card-actions` sections.
- **Tailwind CSS Styling:** I've refactored card styling to use Tailwind CSS utility classes, removing scoped CSS where possible. This promotes maintainability and a unified design language. Tailwind CSS has been configured for the `ui` package.
- **CSS Variables for Theming:** I've introduced global CSS variables in `ui/src/style.css` for module-specific accent colors and common UI elements (e.g., warning colors, shadows), allowing for easier theming and consistent color usage.
- **Standardized Functionality:**
- I've ensured "Edit" and "Delete" buttons have a consistent appearance and behavior.
- Delete confirmation dialogs now use a standard message format.
- I've removed the "View Details" button from `cardEmpleado.vue` for consistency, as other modules integrate detail viewing within their "Edit" forms.
- **README Update:** I've added a comprehensive section to `ui/README.md` documenting the standardized card components, including their structure, styling approach with Tailwind, theming via CSS variables, and basic usage guidelines.
These changes improve the visual consistency and maintainability of the UI's card elements.
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.
