de64e0a243
This commit resolves issues identified after the initial UI standardization pass for the Empleados and Chat modules. It includes fixes for the EmpleadoForm background and correctly defines and applies distinct accent and background colors for the Chat module.
**Previous Standardization (Recap):**
- **Empleados Module:**
- `EmpleadosIndex.vue`: Standardized page header, messages, and create button.
- `cardEmpleado.vue`: Edit emits event, added delete, converted to JS.
- `tablaEmpleados.vue`: Edit emits event, removed view details, added delete, converted to JS.
- **Chat Module (Initial Pass):**
- `ChatView.vue`: Added standard page header.
- `CanvasChat.vue`: Styled input, send button, message bubbles, and scrollbar using `accentColorChat`.
- **`useUi.js`:**
- Added `accentColorChat`.
**Fixes in this Commit:**
- **`EmpleadoForm.vue`:**
- Corrected background styling:
- Page container (`.empleado-form-page-container`) now uses `var(--background-color)` (theme's main background).
- Form card (`.empleado-actual-form`) now uses a contrasting background (white/dark theme equivalent), distinct from the page and input field backgrounds.
- **`useUi.js` (UI Store):**
- Added `backgroundColorChat` to the store's state, appearance keys, and actions (defaulting to `#F0F0F0`). This allows a distinct background color specifically for the chat interface.
- **Chat Module Color Application:**
- **`ChatView.vue`:**
- `.chat-view-container` now uses `var(--background-color-chat)`.
- Page header title confirmed to use `var(--accent-color-chat)`.
- **`CanvasChat.vue`:**
- Root element background now uses `var(--background-color-chat)`.
- Verified that input area, send button, user message bubbles, and scrollbar correctly use `var(--accent-color-chat)` (or its derived alpha versions for the scrollbar) and contrast appropriately with `var(--background-color-chat)`.
These cumulative changes ensure better UI consistency for the Empleados and Chat modules and address specific visual bugs and theming requirements identified during review.
40 lines
1.2 KiB
Vue
40 lines
1.2 KiB
Vue
<script setup>
|
|
/* Vista raíz “/” → muestra el chat estilo ChatGPT */
|
|
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>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.chat-view-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background-color: var(--background-color-chat, #F0F0F0); /* Fallback to store default */
|
|
}
|
|
|
|
.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, #0D9488); /* Fallback to store default */
|
|
font-size: 2.2em; /* Consistent with PlanillasIndex */
|
|
font-weight: 600; /* Consistent with PlanillasIndex */
|
|
}
|
|
|
|
/* CanvasChat is expected to manage its own internal padding and scrolling */
|
|
</style>
|