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

Refactor: Standardize UI for Empleados and Chat modules

Browse Source 
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 is contained in:
google-labs-jules[bot]
2025-05-31 09:22:10 +00:00
parent 085afd3476
commit 394db63d2a
16 changed files with 226 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
ui/src/style.css
View File

@@ -24,25 +24,10 @@
--card-hover-shadow: 0 4px 10px rgba(0,0,0,0.10);
/* Colores de módulo */
/* Empleados - Blue 500 (Tailwind) */
--accent-color-empleados-rgb: 59, 130, 246;
--accent-color-empleados: rgb(var(--accent-color-empleados-rgb));
/* Chat - Teal 600 (Tailwind) */
--accent-color-chat-rgb: 13, 148, 136;
--accent-color-chat: rgb(var(--accent-color-chat-rgb));
/* Planillas - Emerald 500 (Tailwind) */
--accent-color-planillas-rgb: 16, 185, 129;
--accent-color-planillas: rgb(var(--accent-color-planillas-rgb));
/* Asistencias - Green 500 (#4CAF50) */
--accent-color-asistencias-rgb: 76, 175, 80;
--accent-color-asistencias: rgb(var(--accent-color-asistencias-rgb));
/* Tareas - Purple 500 (#9C27B0) */
--accent-color-tareas-rgb: 156, 39, 176;
--accent-color-tareas: rgb(var(--accent-color-tareas-rgb));
--accent-color-asistencias: #4CAF50;
--accent-color-empleados: #2196F3;
--accent-color-planillas: #FF9800;
--accent-color-tareas: #9C27B0;
/* Fondos de tabla (light) */
--table-container-bg-color-asistencias: #fdebee;