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

Fix: Correct EmpleadoForm background and Chat color variables

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

29
ui/src/views/ChatView.vue
View File

@@ -4,34 +4,11 @@ import CanvasChat from '@/components/chat/CanvasChat.vue'
</script>
<template>
<div class="chat-view-container flex flex-col h-full">
<header class="page-header">
<h1>Chat</h1>
</header>
<CanvasChat class="flex-1 min-h-0" /> <!-- Added min-h-0 -->
<div class="h-full flex flex-col">
<CanvasChat class="flex-1" />
</div>
</template>
<style scoped>
.chat-view-container {
/* Ensures the container itself takes full height if not already globally managed */
/* No padding or max-width needed here to allow CanvasChat to control its layout */
}
.page-header {
display: flex;
justify-content: space-between; /* Consistent with other headers, even if no button on right */
align-items: center;
margin-bottom: 25px; /* Consistent with PlanillasIndex */
padding: 10px 20px; /* Provides padding for the header itself */
border-bottom: 1px solid #eee; /* Consistent with PlanillasIndex */
}
.page-header h1 {
color: var(--accent-color-chat, var(--default-accent-color, #3498db)); /* Fallback color strategy */
font-size: 2.2em; /* Consistent with PlanillasIndex */
font-weight: 600; /* Consistent with PlanillasIndex */
}
/* CanvasChat is expected to manage its own internal padding and scrolling */
/* nada por ahora */
</style>