Merge remote-tracking branch 'github/main'
This commit is contained in:
@@ -16,6 +16,12 @@ watchEffect(() => {
|
||||
root.style.setProperty('--font-family', ui.fontFamily)
|
||||
root.style.setProperty('--font-size', `${ui.fontSize}px`)
|
||||
|
||||
// Module-specific accent colors
|
||||
root.style.setProperty('--accent-color-empleados', ui.accentColorEmpleados)
|
||||
root.style.setProperty('--accent-color-tareas', ui.accentColorTareas)
|
||||
root.style.setProperty('--accent-color-planillas', ui.accentColorPlanillas)
|
||||
root.style.setProperty('--accent-color-asistencias', ui.accentColorAsistencias)
|
||||
|
||||
if (ui.theme === 'dark') {
|
||||
root.classList.add('theme-dark')
|
||||
root.classList.remove('theme-light')
|
||||
|
||||
@@ -98,7 +98,7 @@ const deleteAsistenciaInternal = async () => {
|
||||
|
||||
.empleado-id {
|
||||
font-weight: bold;
|
||||
color: #2c3e50; /* Dark blue/grey */
|
||||
color: var(--accent-color-asistencias); /* Accent color */
|
||||
font-size: 1.05em;
|
||||
}
|
||||
|
||||
@@ -126,7 +126,7 @@ const deleteAsistenciaInternal = async () => {
|
||||
color: #666;
|
||||
background-color: #f8f9fa; /* Very light grey background */
|
||||
padding: 10px; /* More padding */
|
||||
border-left: 3px solid #007bff; /* Blue accent line */
|
||||
border-left: 3px solid var(--accent-color-asistencias); /* Accent color for border */
|
||||
border-radius: 4px;
|
||||
margin-top:10px;
|
||||
font-size: 0.9em; /* Slightly smaller for observation */
|
||||
@@ -155,19 +155,19 @@ const deleteAsistenciaInternal = async () => {
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
background-color: #007bff;
|
||||
background-color: var(--accent-color-asistencias);
|
||||
color: white;
|
||||
}
|
||||
.edit-button:hover {
|
||||
background-color: #0056b3;
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
background-color: #dc3545;
|
||||
background-color: var(--warning-color); /* Use warning color for delete */
|
||||
color: white;
|
||||
}
|
||||
.delete-button:hover {
|
||||
background-color: #c82333;
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
||||
/* Estado specific styling */
|
||||
|
||||
@@ -136,19 +136,19 @@ const deleteAsistenciaInternal = async (id) => {
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
background-color: #007bff; /* Blue */
|
||||
background-color: var(--accent-color-asistencias);
|
||||
color: white;
|
||||
}
|
||||
.edit-button:hover {
|
||||
background-color: #0056b3;
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
background-color: #dc3545; /* Red */
|
||||
background-color: var(--warning-color); /* Use warning color for delete */
|
||||
color: white;
|
||||
}
|
||||
.delete-button:hover {
|
||||
background-color: #c82333;
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
||||
/* Estado specific styling (using text color for tables is often cleaner) */
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<img
|
||||
:src="employee.avatar_url || 'https://via.placeholder.com/150'"
|
||||
alt="Avatar del empleado"
|
||||
class="w-20 h-20 rounded-full mr-6 border-2 border-blue-500 object-cover"
|
||||
class="w-20 h-20 rounded-full mr-6 border-2 object-cover employee-avatar-border"
|
||||
/>
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-gray-800">{{ employee.name }}</h2>
|
||||
@@ -13,24 +13,24 @@
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div v-if="employee.telefono" class="flex items-center text-gray-700">
|
||||
<svg class="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.308 1.154a11.042 11.042 0 005.516 5.516l1.154-2.308a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
|
||||
<svg class="w-5 h-5 mr-2 employee-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.308 1.154a11.042 11.042 0 005.516 5.516l1.154-2.308a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
|
||||
<span>{{ employee.telefono }}</span>
|
||||
</div>
|
||||
<div v-if="employee.ubicacion" class="flex items-center text-gray-700">
|
||||
<svg class="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
|
||||
<svg class="w-5 h-5 mr-2 employee-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
|
||||
<span>{{ employee.ubicacion }}</span>
|
||||
</div>
|
||||
<div v-if="employee.cedula" class="flex items-center text-gray-700">
|
||||
<svg class="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 012-2h2a2 2 0 012 2v1m-4 0h4m-6 10v-5m0 5v0z"></path></svg>
|
||||
<svg class="w-5 h-5 mr-2 employee-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 012-2h2a2 2 0 012 2v1m-4 0h4m-6 10v-5m0 5v0z"></path></svg>
|
||||
<span>Cedula: {{ employee.cedula }}</span>
|
||||
</div>
|
||||
<div v-if="employee.grupo_estudio" class="flex items-center text-gray-700">
|
||||
<svg class="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 14l9-5-9-5-9 5 9 5z"></path><path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-5.998 12.083 12.083 0 01.665-6.479L12 14z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0v3.945m0-3.945L6.161 10.58M17.839 10.58L12 14m5.839-3.42L12 14m0 0l6.161 3.42m-6.161-3.42L5.839 14.002"></path></svg>
|
||||
<svg class="w-5 h-5 mr-2 employee-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 14l9-5-9-5-9 5 9 5z"></path><path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-5.998 12.083 12.083 0 01.665-6.479L12 14z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0v3.945m0-3.945L6.161 10.58M17.839 10.58L12 14m5.839-3.42L12 14m0 0l6.161 3.42m-6.161-3.42L5.839 14.002"></path></svg>
|
||||
<span>Grupo Estudio: {{ employee.grupo_estudio }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 flex justify-end space-x-3">
|
||||
<button @click="handleEdit" class="px-4 py-2 bg-blue-500 text-white text-sm font-medium rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2">
|
||||
<button @click="handleEdit" class="edit-button px-4 py-2 text-white text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2">
|
||||
Editar
|
||||
</button>
|
||||
<button @click="handleViewDetails" class="px-4 py-2 bg-gray-200 text-gray-700 text-sm font-medium rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2">
|
||||
@@ -82,9 +82,29 @@ const handleViewDetails = () => {
|
||||
flex-shrink: 0; /* Prevent SVGs from shrinking if text is long, ensuring icon consistency */
|
||||
}
|
||||
|
||||
.employee-avatar-border {
|
||||
border-color: var(--accent-color-empleados);
|
||||
}
|
||||
|
||||
.employee-icon {
|
||||
color: var(--accent-color-empleados);
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
background-color: var(--accent-color-empleados);
|
||||
/* Ensure focus ring also uses accent color if desired, e.g. by adding a specific class or style */
|
||||
}
|
||||
.edit-button:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
.edit-button:focus {
|
||||
box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--accent-color-empleados);
|
||||
}
|
||||
|
||||
|
||||
/* Styling for buttons for a more refined and interactive look */
|
||||
button {
|
||||
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.1s ease-in-out;
|
||||
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.1s ease-in-out, filter 0.2s ease-in-out;
|
||||
}
|
||||
button:hover {
|
||||
transform: translateY(-1px); /* Slight lift on hover */
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
|
||||
<button
|
||||
@click="handleEdit(employee.id)"
|
||||
class="text-indigo-600 hover:text-indigo-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 p-1 rounded-md hover:bg-indigo-100 transition-all duration-150 ease-in-out"
|
||||
class="edit-action-button p-1 rounded-md transition-all duration-150 ease-in-out"
|
||||
title="Editar Empleado"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
@@ -144,6 +144,18 @@ td {
|
||||
}
|
||||
|
||||
/* Action button icon styling */
|
||||
.edit-action-button {
|
||||
color: var(--accent-color-empleados);
|
||||
}
|
||||
.edit-action-button:hover {
|
||||
background-color: var(--accent-color-empleados);
|
||||
color: white; /* Assuming accent color is dark enough for white text */
|
||||
}
|
||||
.edit-action-button:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--accent-color-empleados);
|
||||
}
|
||||
|
||||
button svg {
|
||||
transition: transform 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
@@ -82,7 +82,7 @@ const deletePlanilla = async () => {
|
||||
|
||||
.planilla-card h3 {
|
||||
margin-top: 0;
|
||||
color: #333;
|
||||
color: var(--accent-color-planillas); /* Accent color for title */
|
||||
}
|
||||
|
||||
.planilla-card p {
|
||||
@@ -108,14 +108,20 @@ const deletePlanilla = async () => {
|
||||
}
|
||||
|
||||
.actions button:first-child { /* Edit button */
|
||||
background-color: #007bff;
|
||||
background-color: var(--accent-color-planillas);
|
||||
color: white;
|
||||
}
|
||||
.actions button:first-child:hover { /* Edit button hover */
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
||||
.actions button:last-child { /* Delete button */
|
||||
background-color: #dc3545;
|
||||
background-color: var(--warning-color); /* Using warning color for delete */
|
||||
color: white;
|
||||
}
|
||||
.actions button:last-child:hover { /* Delete button hover */
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
||||
/* Example status styling */
|
||||
.estado-pagado {
|
||||
|
||||
@@ -133,21 +133,21 @@ const deletePlanillaInternal = async (id) => {
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
background-color: #007bff;
|
||||
background-color: var(--accent-color-planillas);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.edit-button:hover {
|
||||
background-color: #0056b3;
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
background-color: #dc3545;
|
||||
background-color: var(--warning-color); /* Using warning color for delete */
|
||||
color: white;
|
||||
}
|
||||
|
||||
.delete-button:hover {
|
||||
background-color: #c82333;
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
||||
/* Status styling (similar to cardPlanilla) */
|
||||
|
||||
@@ -89,7 +89,7 @@ const deleteTareaInternal = async () => {
|
||||
.tarea-card h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
color: #333;
|
||||
color: var(--accent-color-tareas); /* Accent color for title */
|
||||
font-size: 1.15em; /* Slightly smaller than a typical h3 */
|
||||
}
|
||||
|
||||
@@ -120,11 +120,11 @@ const deleteTareaInternal = async () => {
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
background-color: #007bff; /* Primary blue */
|
||||
background-color: var(--accent-color-tareas);
|
||||
color: white;
|
||||
}
|
||||
.edit-button:hover {
|
||||
background-color: #0056b3; /* Darker blue */
|
||||
filter: brightness(0.9); /* Standard hover effect */
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
|
||||
@@ -141,11 +141,11 @@ const deleteTareaInternal = async (id) => {
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
background-color: #007bff; /* Blue */
|
||||
background-color: var(--accent-color-tareas);
|
||||
color: white;
|
||||
}
|
||||
.edit-button:hover {
|
||||
background-color: #0056b3;
|
||||
filter: brightness(0.9); /* Standard hover effect */
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
|
||||
@@ -29,12 +29,18 @@ const sidebarClasses = computed(() => ui.sidebarOpen ? 'translate-x-0' : '-trans
|
||||
|
||||
<!-- barra lateral -->
|
||||
<aside
|
||||
:class="['fixed left-0 top-0 md:top-14 h-screen w-60 bg-white dark:bg-zinc-900 border-r border-gray-200 dark:border-zinc-800 flex flex-col select-none z-50 transform transition-transform duration-200 ease-in-out', sidebarClasses]">
|
||||
:class="['fixed left-0 top-0 md:top-14 h-screen w-60 flex flex-col select-none z-50 transform transition-transform duration-200 ease-in-out', sidebarClasses]"
|
||||
style="background-color: var(--background-color); border-right-color: var(--secondary-color); border-right-width: 1px;">
|
||||
|
||||
<!-- encabezado dentro de sidebar -->
|
||||
<div class="flex items-center justify-between px-4 py-4 md:px-5 md:py-4 border-b border-gray-200 dark:border-zinc-800 md:border-none">
|
||||
<span class="text-lg font-semibold text-teal-600 dark:text-teal-400 md:hidden">Núcleo</span>
|
||||
<button class="h-8 w-8 inline-flex items-center justify-center text-gray-500 hover:text-teal-600" @click="ui.toggleSidebar">
|
||||
<div class="flex items-center justify-between px-4 py-4 md:px-5 md:py-4 md:border-none"
|
||||
style="border-bottom-color: var(--secondary-color); border-bottom-width: 1px;">
|
||||
<span class="text-lg font-semibold md:hidden" style="color: var(--primary-color);">Núcleo</span>
|
||||
<button class="h-8 w-8 inline-flex items-center justify-center text-gray-500"
|
||||
:style="{ color: 'var(--primary-color)' }"
|
||||
@mouseover="($event.target.style.color = 'var(--primary-color)')"
|
||||
@mouseleave="($event.target.style.color = 'var(--secondary-color)')"
|
||||
@click="ui.toggleSidebar">
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
@@ -45,10 +51,8 @@ const sidebarClasses = computed(() => ui.sidebarOpen ? 'translate-x-0' : '-trans
|
||||
<li v-for="l in links" :key="l.to">
|
||||
<RouterLink
|
||||
:to="l.to"
|
||||
class="flex items-center gap-3 w-full px-3 py-2 rounded-md font-medium transition group"
|
||||
:class="activePath.startsWith(l.to)
|
||||
? 'bg-teal-600 text-white shadow'
|
||||
: 'text-gray-700 dark:text-gray-100 hover:bg-teal-100 hover:text-teal-900 dark:hover:bg-zinc-800'"
|
||||
class="nav-link flex items-center gap-3 w-full px-3 py-2 rounded-md font-medium transition group"
|
||||
:class="activePath.startsWith(l.to) ? 'active' : ''"
|
||||
@click="ui.closeSidebar()"
|
||||
>
|
||||
<span class="text-lg" aria-hidden="true">{{ l.icon }}</span>
|
||||
@@ -63,9 +67,35 @@ const sidebarClasses = computed(() => ui.sidebarOpen ? 'translate-x-0' : '-trans
|
||||
<style scoped>
|
||||
ul { list-style: none; padding-left: 0; }
|
||||
|
||||
.nav-link {
|
||||
color: var(--text-color); /* Default text color */
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background-color: var(--secondary-color);
|
||||
color: var(--primary-color); /* Text color on hover */
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
background-color: var(--primary-color);
|
||||
color: white; /* Assuming primary color is dark enough for white text */
|
||||
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06); /* Tailwind shadow-sm equivalent */
|
||||
}
|
||||
|
||||
/* Scrollbar styling using primary color */
|
||||
.custom-scroll::-webkit-scrollbar { width: 8px; }
|
||||
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
|
||||
.custom-scroll::-webkit-scrollbar-thumb { background-color: rgba(13,148,136,.4); border-radius: 4px; }
|
||||
.custom-scroll:hover::-webkit-scrollbar-thumb { background-color: rgba(13,148,136,.7); }
|
||||
.custom-scroll { scrollbar-width: thin; scrollbar-color: rgba(13,148,136,.6) transparent; }
|
||||
.custom-scroll::-webkit-scrollbar-thumb {
|
||||
background-color: var(--primary-color);
|
||||
opacity: 0.4;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.custom-scroll:hover::-webkit-scrollbar-thumb {
|
||||
background-color: var(--primary-color);
|
||||
opacity: 0.7;
|
||||
}
|
||||
.custom-scroll {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--primary-color) transparent; /* scrollbar-color: <thumb-color> <track-color> */
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,19 +5,28 @@ const ui = useUi()
|
||||
|
||||
<template>
|
||||
<!-- barra superior fija -->
|
||||
<header class="fixed top-0 left-0 right-0 h-14 bg-white dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-800 flex items-center justify-between px-4 md:px-6 z-50 shadow-sm">
|
||||
<header class="fixed top-0 left-0 right-0 h-14 flex items-center justify-between px-4 md:px-6 z-50 shadow-sm"
|
||||
:style="{ backgroundColor: 'var(--background-color)', borderBottom: '1px solid var(--secondary-color)' }">
|
||||
<!-- título -->
|
||||
<h1 class="text-lg font-semibold tracking-wide text-teal-600 dark:text-teal-400 select-none">Núcleo</h1>
|
||||
<h1 class="text-lg font-semibold tracking-wide select-none" :style="{ color: 'var(--primary-color)' }">Núcleo</h1>
|
||||
|
||||
<!-- botón hamburguesa (visible solo en mobile) -->
|
||||
<button
|
||||
@click="ui.toggleSidebar"
|
||||
class="inline-flex items-center justify-center h-9 w-9 rounded-md bg-teal-600 text-white hover:bg-teal-700 transition ">
|
||||
class="hamburger-button inline-flex items-center justify-center h-9 w-9 rounded-md text-white transition">
|
||||
☰
|
||||
</button>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* sin estilos extra */
|
||||
.hamburger-button {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
.hamburger-button:hover {
|
||||
filter: brightness(1.1); /* Slight lighten/darken based on primary color */
|
||||
}
|
||||
/* Alternative hover if primary is very light or very dark, requiring specific color adjustment */
|
||||
/* .hamburger-button:hover { background-color: var(--primary-color-hover); } */
|
||||
/* Ensure --primary-color-hover is defined or calculated based on --primary-color if this approach is used */
|
||||
</style>
|
||||
|
||||
@@ -43,6 +43,15 @@ describe('useUi Store', () => {
|
||||
expect(store.primaryColor).toBe('#1976D2')
|
||||
expect(store.theme).toBe('light')
|
||||
expect(store.fontSize).toBe(16)
|
||||
// Check new accent color defaults
|
||||
expect(store.accentColorEmpleados).toBe('#2196F3')
|
||||
expect(store.accentColorTareas).toBe('#4CAF50')
|
||||
expect(store.accentColorPlanillas).toBe('#FF9800')
|
||||
expect(store.accentColorAsistencias).toBe('#E91E63')
|
||||
expect(localStorageMock.getItem).toHaveBeenCalledWith(APPEARANCE_STORAGE_KEY)
|
||||
})
|
||||
|
||||
it('loads settings from localStorage including new accent colors if present', () => {
|
||||
expect(localStorageMock.getItem).toHaveBeenCalledWith(APPEARANCE_STORAGE_KEY)
|
||||
})
|
||||
|
||||
@@ -52,6 +61,10 @@ describe('useUi Store', () => {
|
||||
theme: 'dark',
|
||||
fontSize: 20,
|
||||
animationsEnabled: false,
|
||||
accentColorEmpleados: '#0000FF',
|
||||
accentColorTareas: '#00FF00',
|
||||
accentColorPlanillas: '#FFFF00',
|
||||
accentColorAsistencias: '#FF00FF',
|
||||
// other settings...
|
||||
}
|
||||
localStorageMock.getItem.mockReturnValueOnce(JSON.stringify(storedSettings))
|
||||
@@ -63,6 +76,30 @@ describe('useUi Store', () => {
|
||||
expect(store.theme).toBe('dark')
|
||||
expect(store.fontSize).toBe(20)
|
||||
expect(store.animationsEnabled).toBe(false)
|
||||
expect(store.accentColorEmpleados).toBe('#0000FF')
|
||||
expect(store.accentColorTareas).toBe('#00FF00')
|
||||
expect(store.accentColorPlanillas).toBe('#FFFF00')
|
||||
expect(store.accentColorAsistencias).toBe('#FF00FF')
|
||||
})
|
||||
|
||||
it('loads older settings from localStorage and uses defaults for new accent colors if not present', () => {
|
||||
const olderStoredSettings = {
|
||||
primaryColor: '#ABCDEF',
|
||||
theme: 'dark',
|
||||
fontSize: 18,
|
||||
} // Does not include new accent colors
|
||||
localStorageMock.getItem.mockReturnValueOnce(JSON.stringify(olderStoredSettings))
|
||||
|
||||
const store = useUi()
|
||||
|
||||
expect(store.primaryColor).toBe('#ABCDEF')
|
||||
expect(store.theme).toBe('dark')
|
||||
expect(store.fontSize).toBe(18)
|
||||
// New accent colors should fall back to defaults
|
||||
expect(store.accentColorEmpleados).toBe('#2196F3')
|
||||
expect(store.accentColorTareas).toBe('#4CAF50')
|
||||
expect(store.accentColorPlanillas).toBe('#FF9800')
|
||||
expect(store.accentColorAsistencias).toBe('#E91E63')
|
||||
})
|
||||
|
||||
it('falls back to default settings if localStorage data is invalid JSON', () => {
|
||||
@@ -88,6 +125,11 @@ describe('useUi Store', () => {
|
||||
})
|
||||
|
||||
describe('Actions', () => {
|
||||
// Update this list to match the store's appearanceSettingKeys
|
||||
const appearanceSettingKeysInTest = [
|
||||
'primaryColor', 'secondaryColor', 'warningColor', 'fontFamily',
|
||||
'fontSize', 'animationsEnabled', 'backgroundColor', 'theme',
|
||||
'accentColorEmpleados', 'accentColorTareas', 'accentColorPlanillas', 'accentColorAsistencias',
|
||||
const appearanceSettingKeys = [
|
||||
'primaryColor', 'secondaryColor', 'warningColor', 'fontFamily',
|
||||
'fontSize', 'animationsEnabled', 'backgroundColor', 'theme',
|
||||
@@ -170,6 +212,53 @@ describe('useUi Store', () => {
|
||||
const savedDataString = localStorageMock.setItem.mock.calls[0][1];
|
||||
const savedData = JSON.parse(savedDataString);
|
||||
|
||||
expect(Object.keys(savedData).length).toBe(appearanceSettingKeysInTest.length);
|
||||
expect(savedData.sidebarOpen).toBeUndefined() // Ensure non-appearance data is not saved
|
||||
appearanceSettingKeysInTest.forEach(key => {
|
||||
expect(savedData.hasOwnProperty(key)).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
// Tests for new accent color actions
|
||||
it('setAccentColorEmpleados updates state and saves to localStorage', () => {
|
||||
const store = useUi()
|
||||
store.setAccentColorEmpleados('#FF1122')
|
||||
expect(store.accentColorEmpleados).toBe('#FF1122')
|
||||
expect(localStorageMock.setItem).toHaveBeenCalledWith(
|
||||
APPEARANCE_STORAGE_KEY,
|
||||
expect.stringContaining('"accentColorEmpleados":"#FF1122"')
|
||||
)
|
||||
})
|
||||
|
||||
it('setAccentColorTareas updates state and saves to localStorage', () => {
|
||||
const store = useUi()
|
||||
store.setAccentColorTareas('#33FF44')
|
||||
expect(store.accentColorTareas).toBe('#33FF44')
|
||||
expect(localStorageMock.setItem).toHaveBeenCalledWith(
|
||||
APPEARANCE_STORAGE_KEY,
|
||||
expect.stringContaining('"accentColorTareas":"#33FF44"')
|
||||
)
|
||||
})
|
||||
|
||||
it('setAccentColorPlanillas updates state and saves to localStorage', () => {
|
||||
const store = useUi()
|
||||
store.setAccentColorPlanillas('#5566FF')
|
||||
expect(store.accentColorPlanillas).toBe('#5566FF')
|
||||
expect(localStorageMock.setItem).toHaveBeenCalledWith(
|
||||
APPEARANCE_STORAGE_KEY,
|
||||
expect.stringContaining('"accentColorPlanillas":"#5566FF"')
|
||||
)
|
||||
})
|
||||
|
||||
it('setAccentColorAsistencias updates state and saves to localStorage', () => {
|
||||
const store = useUi()
|
||||
store.setAccentColorAsistencias('#FF7788')
|
||||
expect(store.accentColorAsistencias).toBe('#FF7788')
|
||||
expect(localStorageMock.setItem).toHaveBeenCalledWith(
|
||||
APPEARANCE_STORAGE_KEY,
|
||||
expect.stringContaining('"accentColorAsistencias":"#FF7788"')
|
||||
)
|
||||
})
|
||||
expect(Object.keys(savedData).length).toBe(appearanceSettingKeys.length);
|
||||
expect(savedData.sidebarOpen).toBeUndefined() // Ensure non-appearance data is not saved
|
||||
appearanceSettingKeys.forEach(key => {
|
||||
|
||||
@@ -12,6 +12,10 @@ const appearanceSettingKeys = [
|
||||
'animationsEnabled',
|
||||
'backgroundColor',
|
||||
'theme',
|
||||
'accentColorEmpleados',
|
||||
'accentColorTareas',
|
||||
'accentColorPlanillas',
|
||||
'accentColorAsistencias',
|
||||
]
|
||||
|
||||
const loadSettingsFromLocalStorage = () => {
|
||||
@@ -67,6 +71,11 @@ export const useUi = defineStore('ui', {
|
||||
animationsEnabled: true,
|
||||
backgroundColor: '#FFFFFF',
|
||||
theme: 'light', // 'light' or 'dark'
|
||||
// Module-specific accent colors
|
||||
accentColorEmpleados: '#2196F3', // Blue
|
||||
accentColorTareas: '#4CAF50', // Green
|
||||
accentColorPlanillas: '#FF9800', // Orange
|
||||
accentColorAsistencias: '#E91E63', // Pink
|
||||
}
|
||||
|
||||
const loadedSettings = loadSettingsFromLocalStorage()
|
||||
@@ -130,6 +139,24 @@ export const useUi = defineStore('ui', {
|
||||
toggleTheme() {
|
||||
this.theme = this.theme === 'light' ? 'dark' : 'light'
|
||||
_saveAppearanceState(this)
|
||||
},
|
||||
|
||||
// Actions for module-specific accent colors
|
||||
setAccentColorEmpleados(color) {
|
||||
this.accentColorEmpleados = color
|
||||
_saveAppearanceState(this)
|
||||
},
|
||||
setAccentColorTareas(color) {
|
||||
this.accentColorTareas = color
|
||||
_saveAppearanceState(this)
|
||||
},
|
||||
setAccentColorPlanillas(color) {
|
||||
this.accentColorPlanillas = color
|
||||
_saveAppearanceState(this)
|
||||
},
|
||||
setAccentColorAsistencias(color) {
|
||||
this.accentColorAsistencias = color
|
||||
_saveAppearanceState(this)
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@@ -12,6 +12,12 @@
|
||||
--font-size: 16px;
|
||||
/* Add other variables as needed, e.g., text colors for themes */
|
||||
--text-color: #212121; /* Default text color for light theme */
|
||||
|
||||
/* Module-specific accent colors - Default Fallbacks */
|
||||
--accent-color-empleados: #2196F3;
|
||||
--accent-color-tareas: #4CAF50;
|
||||
--accent-color-planillas: #FF9800;
|
||||
--accent-color-asistencias: #E91E63;
|
||||
}
|
||||
|
||||
html.theme-dark {
|
||||
|
||||
@@ -70,6 +70,33 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Module Accent Colors Section -->
|
||||
<section class="mb-10"> <!-- Changed from no margin to mb-10 for consistency -->
|
||||
<h2 class="text-2xl font-semibold mb-6 text-[var(--primary-color)]">Module Accent Colors</h2>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||||
<div class="setting-item">
|
||||
<label for="accentColorEmpleados" class="block text-sm font-medium mb-1">Empleados Accent</label>
|
||||
<input type="color" id="accentColorEmpleados" v-model="ui.accentColorEmpleados" @input="ui.setAccentColorEmpleados($event.target.value)"
|
||||
class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<label for="accentColorTareas" class="block text-sm font-medium mb-1">Tareas Accent</label>
|
||||
<input type="color" id="accentColorTareas" v-model="ui.accentColorTareas" @input="ui.setAccentColorTareas($event.target.value)"
|
||||
class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<label for="accentColorPlanillas" class="block text-sm font-medium mb-1">Planillas Accent</label>
|
||||
<input type="color" id="accentColorPlanillas" v-model="ui.accentColorPlanillas" @input="ui.setAccentColorPlanillas($event.target.value)"
|
||||
class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<label for="accentColorAsistencias" class="block text-sm font-medium mb-1">Asistencias Accent</label>
|
||||
<input type="color" id="accentColorAsistencias" v-model="ui.accentColorAsistencias" @input="ui.setAccentColorAsistencias($event.target.value)"
|
||||
class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -11,6 +11,41 @@ const getFreshStore = () => {
|
||||
}
|
||||
|
||||
describe('SettingsView.vue', () => {
|
||||
// No global 'store' variable here, it will be test-specific or wrapper-specific
|
||||
|
||||
beforeEach(() => {
|
||||
// Ensure a fresh Pinia instance is active for each test.
|
||||
setActivePinia(createPinia())
|
||||
|
||||
// Clear localStorage mock before each test
|
||||
// Note: The mock itself is defined globally in this file or via setupFiles in Vitest config.
|
||||
// Re-stubbing it or ensuring its state is clean.
|
||||
const localStorageMock = window.localStorage; // Assuming it's already stubbed globally by Vitest setup or top of file
|
||||
localStorageMock.clear();
|
||||
if (localStorageMock.setItem.mockClear) { // vi.fn() specific
|
||||
localStorageMock.setItem.mockClear();
|
||||
localStorageMock.getItem.mockClear();
|
||||
}
|
||||
})
|
||||
|
||||
// createWrapper now also handles store creation and returns the store for spying if needed
|
||||
const createWrapperAndStore = (initialStoreState = {}) => {
|
||||
if (Object.keys(initialStoreState).length > 0) {
|
||||
localStorage.setItem('appearanceSettings', JSON.stringify(initialStoreState));
|
||||
}
|
||||
|
||||
const currentStore = useUi(); // Store is created AFTER localStorage is set for this test
|
||||
|
||||
const wrapper = mount(SettingsView, {
|
||||
global: {
|
||||
// Pinia is active via setActivePinia, component should pick it up
|
||||
},
|
||||
});
|
||||
return { wrapper, store: currentStore }; // Return store for spying
|
||||
}
|
||||
|
||||
it('renders all input elements with initial values from store', () => {
|
||||
const { wrapper } = createWrapperAndStore({ // Store is created inside here after LS mock
|
||||
let store
|
||||
|
||||
beforeEach(() => {
|
||||
@@ -60,6 +95,14 @@ describe('SettingsView.vue', () => {
|
||||
fontSize: 18,
|
||||
animationsEnabled: false,
|
||||
theme: 'dark',
|
||||
// Add new accent colors for comprehensive initial state testing
|
||||
accentColorEmpleados: '#123456',
|
||||
accentColorTareas: '#654321',
|
||||
accentColorPlanillas: '#abcdef',
|
||||
accentColorAsistencias: '#fedcba',
|
||||
})
|
||||
|
||||
// Check general appearance settings
|
||||
})
|
||||
|
||||
expect(wrapper.find('input#primaryColor').element.value).toBe('#111111')
|
||||
@@ -70,6 +113,33 @@ describe('SettingsView.vue', () => {
|
||||
expect(wrapper.find('input#fontSize').element.value).toBe('18')
|
||||
expect(wrapper.find('input#animationsEnabled').element.checked).toBe(false)
|
||||
expect(wrapper.find('select#theme').element.value).toBe('dark')
|
||||
|
||||
// Check new module accent color pickers
|
||||
const h2Elements = wrapper.findAll('h2')
|
||||
const sectionTitles = h2Elements.map(h => h.text())
|
||||
expect(sectionTitles).toContain('Module Accent Colors')
|
||||
expect(wrapper.find('input#accentColorEmpleados').element.value).toBe('#123456')
|
||||
expect(wrapper.find('input#accentColorTareas').element.value).toBe('#654321')
|
||||
expect(wrapper.find('input#accentColorPlanillas').element.value).toBe('#abcdef')
|
||||
expect(wrapper.find('input#accentColorAsistencias').element.value).toBe('#fedcba')
|
||||
})
|
||||
|
||||
it('calls setPrimaryColor action when primary color input changes', async () => {
|
||||
const { wrapper, store } = createWrapperAndStore()
|
||||
const spy = vi.spyOn(store, 'setPrimaryColor')
|
||||
const colorInput = wrapper.find('input#primaryColor')
|
||||
|
||||
colorInput.element.value = '#FF00FF'
|
||||
await colorInput.trigger('input')
|
||||
|
||||
expect(spy).toHaveBeenCalledWith('#ff00ff')
|
||||
})
|
||||
|
||||
it('calls setFontFamily action when font family input changes', async () => {
|
||||
const { wrapper, store } = createWrapperAndStore()
|
||||
const spy = vi.spyOn(store, 'setFontFamily')
|
||||
const input = wrapper.find('input#fontFamily')
|
||||
await input.setValue('Helvetica')
|
||||
})
|
||||
|
||||
it('calls setPrimaryColor action when primary color input changes', async () => {
|
||||
@@ -94,6 +164,7 @@ describe('SettingsView.vue', () => {
|
||||
})
|
||||
|
||||
it('calls setFontSize action when font size input changes', async () => {
|
||||
const { wrapper, store } = createWrapperAndStore()
|
||||
const wrapper = createWrapper()
|
||||
const spy = vi.spyOn(store, 'setFontSize')
|
||||
const input = wrapper.find('input#fontSize')
|
||||
@@ -102,6 +173,11 @@ describe('SettingsView.vue', () => {
|
||||
})
|
||||
|
||||
it('calls setAnimationsEnabled action when animations checkbox changes', async () => {
|
||||
const { wrapper, store } = createWrapperAndStore({ animationsEnabled: true })
|
||||
const spy = vi.spyOn(store, 'setAnimationsEnabled')
|
||||
const checkbox = wrapper.find('input#animationsEnabled')
|
||||
|
||||
await checkbox.setChecked(false)
|
||||
const wrapper = createWrapper({ animationsEnabled: true }) // Start with true
|
||||
const spy = vi.spyOn(store, 'setAnimationsEnabled')
|
||||
const checkbox = wrapper.find('input#animationsEnabled')
|
||||
@@ -113,6 +189,56 @@ describe('SettingsView.vue', () => {
|
||||
})
|
||||
|
||||
it('calls setTheme action when theme select changes', async () => {
|
||||
const { wrapper, store } = createWrapperAndStore()
|
||||
const spy = vi.spyOn(store, 'setTheme')
|
||||
const select = wrapper.find('select#theme')
|
||||
await select.setValue('dark')
|
||||
expect(spy).toHaveBeenCalledWith('dark')
|
||||
})
|
||||
|
||||
// New tests for module accent color pickers
|
||||
it('calls setAccentColorEmpleados action when empleados accent color input changes', async () => {
|
||||
const { wrapper, store } = createWrapperAndStore()
|
||||
const spy = vi.spyOn(store, 'setAccentColorEmpleados')
|
||||
const colorInput = wrapper.find('input#accentColorEmpleados')
|
||||
colorInput.element.value = '#aabbcc'
|
||||
await colorInput.trigger('input')
|
||||
expect(spy).toHaveBeenCalledWith('#aabbcc')
|
||||
})
|
||||
|
||||
it('calls setAccentColorTareas action when tareas accent color input changes', async () => {
|
||||
const { wrapper, store } = createWrapperAndStore()
|
||||
const spy = vi.spyOn(store, 'setAccentColorTareas')
|
||||
const colorInput = wrapper.find('input#accentColorTareas')
|
||||
colorInput.element.value = '#ccbbaa'
|
||||
await colorInput.trigger('input')
|
||||
expect(spy).toHaveBeenCalledWith('#ccbbaa')
|
||||
})
|
||||
|
||||
it('calls setAccentColorPlanillas action when planillas accent color input changes', async () => {
|
||||
const { wrapper, store } = createWrapperAndStore()
|
||||
const spy = vi.spyOn(store, 'setAccentColorPlanillas')
|
||||
const colorInput = wrapper.find('input#accentColorPlanillas')
|
||||
colorInput.element.value = '#a1b2c3'
|
||||
await colorInput.trigger('input')
|
||||
expect(spy).toHaveBeenCalledWith('#a1b2c3')
|
||||
})
|
||||
|
||||
it('calls setAccentColorAsistencias action when asistencias accent color input changes', async () => {
|
||||
const { wrapper, store } = createWrapperAndStore()
|
||||
const spy = vi.spyOn(store, 'setAccentColorAsistencias')
|
||||
const colorInput = wrapper.find('input#accentColorAsistencias')
|
||||
colorInput.element.value = '#c3b2a1'
|
||||
await colorInput.trigger('input')
|
||||
expect(spy).toHaveBeenCalledWith('#c3b2a1')
|
||||
})
|
||||
|
||||
it('updates input values when store state changes programmatically', async () => {
|
||||
const { wrapper, store } = createWrapperAndStore() // Store instance for this test
|
||||
|
||||
// Test primaryColor
|
||||
store.primaryColor = '#001122' // Directly manipulate the store used by the component
|
||||
=======
|
||||
const wrapper = createWrapper()
|
||||
const spy = vi.spyOn(store, 'setTheme')
|
||||
const select = wrapper.find('select#theme')
|
||||
@@ -147,6 +273,11 @@ describe('SettingsView.vue', () => {
|
||||
store.theme = 'dark'
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.find('select#theme').element.value).toBe('dark')
|
||||
|
||||
// Test one of the new accent colors
|
||||
store.accentColorEmpleados = '#998877'
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.find('input#accentColorEmpleados').element.value).toBe('#998877')
|
||||
})
|
||||
|
||||
// Test for the initial fade-in animation - checking class
|
||||
@@ -154,6 +285,7 @@ describe('SettingsView.vue', () => {
|
||||
// Mock setTimeout to control its execution
|
||||
vi.useFakeTimers()
|
||||
|
||||
const { wrapper } = createWrapperAndStore() // Use the new function name
|
||||
const wrapper = createWrapper()
|
||||
expect(wrapper.find('.settings-view').classes()).not.toContain('opacity-100')
|
||||
|
||||
|
||||
@@ -214,7 +214,7 @@ const handleCancel = () => {
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
color: var(--accent-color-asistencias); /* Accent color for title */
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
@@ -235,10 +235,19 @@ h2 {
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid var(--secondary-color); /* Theme border */
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
font-size: 1em;
|
||||
background-color: var(--background-color); /* Theme background */
|
||||
color: var(--text-color); /* Theme text */
|
||||
}
|
||||
.form-group input:focus,
|
||||
.form-group select:focus,
|
||||
.form-group textarea:focus {
|
||||
border-color: var(--accent-color-asistencias);
|
||||
box-shadow: 0 0 0 2px var(--accent-color-asistencias);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
@@ -247,7 +256,7 @@ h2 {
|
||||
|
||||
.error-message {
|
||||
display: block;
|
||||
color: #e74c3c;
|
||||
color: var(--warning-color); /* Theme warning color */
|
||||
font-size: 0.9em;
|
||||
margin-top: 5px;
|
||||
}
|
||||
@@ -266,31 +275,33 @@ h2 {
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
||||
transition: background-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
|
||||
}
|
||||
|
||||
.form-actions button[type="submit"] {
|
||||
background-color: #3498db; /* Blue */
|
||||
color: white;
|
||||
background-color: var(--accent-color-asistencias);
|
||||
color: white; /* Assuming accent is dark enough */
|
||||
}
|
||||
.form-actions button[type="submit"]:hover {
|
||||
background-color: #2980b9;
|
||||
filter: brightness(0.9);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
.form-actions button[type="submit"]:disabled {
|
||||
background-color: #bdc3c7;
|
||||
background-color: var(--secondary-color);
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.form-actions button[type="button"] {
|
||||
background-color: #e74c3c; /* Red for cancel */
|
||||
color: white;
|
||||
background-color: var(--secondary-color); /* Using secondary for cancel */
|
||||
color: var(--text-color); /* Ensure text contrasts */
|
||||
}
|
||||
.form-actions button[type="button"]:hover {
|
||||
background-color: #c0392b;
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
.form-actions button[type="button"]:disabled {
|
||||
background-color: #bdc3c7;
|
||||
background-color: var(--secondary-color);
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -89,26 +89,26 @@ const handleEditAsistencia = (asistenciaId) => {
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
color: #212529;
|
||||
color: var(--accent-color-asistencias); /* Accent color for title */
|
||||
font-size: 1.8em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-create {
|
||||
background-color: #17a2b8; /* Info Blue */
|
||||
color: white;
|
||||
background-color: var(--accent-color-asistencias);
|
||||
color: white; /* Assuming accent is dark enough */
|
||||
padding: 10px 18px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease;
|
||||
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease, filter 0.2s ease;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.btn-create:hover {
|
||||
background-color: #138496;
|
||||
filter: brightness(0.9);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
|
||||
@@ -19,8 +19,8 @@
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
required
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-md
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
class="form-input w-full px-4 py-2 border border-gray-300 rounded-md
|
||||
focus:outline-none"
|
||||
placeholder="Ej: Juan Pérez"
|
||||
/>
|
||||
</div>
|
||||
@@ -36,8 +36,8 @@
|
||||
v-model="form.cedula"
|
||||
type="number"
|
||||
required
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-md
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
class="form-input w-full px-4 py-2 border border-gray-300 rounded-md
|
||||
focus:outline-none"
|
||||
placeholder="Ej: 123456789"
|
||||
/>
|
||||
</div>
|
||||
@@ -52,8 +52,8 @@
|
||||
id="ubicacion"
|
||||
v-model="form.ubicacion"
|
||||
type="text"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-md
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
class="form-input w-full px-4 py-2 border border-gray-300 rounded-md
|
||||
focus:outline-none"
|
||||
placeholder="Ej: Oficina Principal"
|
||||
/>
|
||||
</div>
|
||||
@@ -68,8 +68,8 @@
|
||||
id="grupo_estudio"
|
||||
v-model="form.grupo_estudio"
|
||||
type="text"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-md
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
class="form-input w-full px-4 py-2 border border-gray-300 rounded-md
|
||||
focus:outline-none"
|
||||
placeholder="Ej: Grupo A"
|
||||
/>
|
||||
</div>
|
||||
@@ -84,8 +84,8 @@
|
||||
id="avatar_url"
|
||||
v-model="form.avatar_url"
|
||||
type="url"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-md
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
class="form-input w-full px-4 py-2 border border-gray-300 rounded-md
|
||||
focus:outline-none"
|
||||
placeholder="Ej: https://example.com/avatar.png"
|
||||
/>
|
||||
</div>
|
||||
@@ -100,8 +100,8 @@
|
||||
id="telefono"
|
||||
v-model="form.telefono"
|
||||
type="tel"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-md
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
class="form-input w-full px-4 py-2 border border-gray-300 rounded-md
|
||||
focus:outline-none"
|
||||
placeholder="Ej: 0991234567"
|
||||
/>
|
||||
</div>
|
||||
@@ -116,8 +116,8 @@
|
||||
id="idciat"
|
||||
v-model="form.idciat"
|
||||
type="text"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-md
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
class="form-input w-full px-4 py-2 border border-gray-300 rounded-md
|
||||
focus:outline-none"
|
||||
placeholder="Ej: CIAT123"
|
||||
/>
|
||||
</div>
|
||||
@@ -127,16 +127,15 @@
|
||||
<button
|
||||
type="button"
|
||||
@click="handleCancel"
|
||||
class="mr-4 px-6 py-2 text-gray-700 border border-gray-300 rounded-md
|
||||
class="btn-secondary mr-4 px-6 py-2 text-gray-700 border border-gray-300 rounded-md
|
||||
hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="px-6 py-2 bg-blue-600 text-white font-semibold rounded-md
|
||||
hover:bg-blue-700 focus:outline-none focus:ring-2
|
||||
focus:ring-blue-500 focus:ring-offset-2"
|
||||
class="btn-submit px-6 py-2 text-white font-semibold rounded-md
|
||||
focus:outline-none focus:ring-2 focus:ring-offset-2"
|
||||
>
|
||||
{{ isEditMode ? 'Actualizar' : 'Crear' }}
|
||||
</button>
|
||||
@@ -234,39 +233,53 @@ const handleCancel = () => {
|
||||
<style scoped>
|
||||
/* --- Validación rápida de inputs requeridos --- */
|
||||
input:required:invalid {
|
||||
border-color: #e53e3e; /* red-600 */
|
||||
border-color: var(--warning-color); /* Using warning color for invalid fields */
|
||||
}
|
||||
|
||||
/* --- Focus global para inputs y botones --- */
|
||||
input:focus,
|
||||
button:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px #3b82f6; /* blue-500 */
|
||||
}
|
||||
/* Removing generic input:focus, button:focus as they are too broad */
|
||||
|
||||
/* --- Look & feel extra (opcional, podés ajustar) --- */
|
||||
.form-container { background-color: #f9fafb; } /* gray-50 */
|
||||
.form-container { background-color: var(--background-color); } /* Use theme background */
|
||||
.form-card { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1),
|
||||
0 4px 6px -2px rgba(0,0,0,.05); }
|
||||
|
||||
.form-title { color: #1f2937; } /* gray-800 */
|
||||
.form-label { color: #374151; font-weight: 600; } /* gray-700 */
|
||||
.form-input { border-color: #d1d5db; transition: border-color .2s, box-shadow .2s; }
|
||||
.form-title { color: var(--text-color); } /* Use theme text color */
|
||||
.form-label { color: var(--text-color); font-weight: 600; } /* Use theme text color */
|
||||
|
||||
.form-input {
|
||||
border-color: var(--secondary-color); /* Use secondary for border */
|
||||
background-color: var(--background-color); /* Ensure inputs match theme background */
|
||||
color: var(--text-color); /* Ensure input text matches theme text */
|
||||
transition: border-color .2s, box-shadow .2s;
|
||||
}
|
||||
.form-input:focus {
|
||||
border-color: #2563eb; /* blue-600 */
|
||||
box-shadow: 0 0 0 3px rgba(59,130,246,.5);
|
||||
outline: none;
|
||||
border-color: var(--accent-color-empleados); /* Accent color for focus border */
|
||||
box-shadow: 0 0 0 2px var(--accent-color-empleados); /* Accent color for focus ring */
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #2563eb; color: #fff; font-weight: 600;
|
||||
padding: .75rem 1.5rem; border-radius: .375rem; transition: background-color .2s;
|
||||
.btn-submit {
|
||||
background-color: var(--accent-color-empleados);
|
||||
transition: background-color .2s, filter .2s;
|
||||
}
|
||||
.btn-submit:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
.btn-submit:focus {
|
||||
box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--accent-color-empleados);
|
||||
}
|
||||
.btn-primary:hover { background-color: #1d4ed8; }
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #e5e7eb; color: #374151; font-weight: 600;
|
||||
padding: .75rem 1.5rem; border-radius: .375rem; border: 1px solid #d1d5db;
|
||||
transition: background-color .2s;
|
||||
/* Keeping secondary button less prominent, using general theme colors */
|
||||
background-color: var(--secondary-color);
|
||||
color: var(--text-color); /* Adjust if secondary-color is too dark for default text */
|
||||
border: 1px solid var(--secondary-color);
|
||||
transition: background-color .2s, filter .2s;
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
.btn-secondary:focus {
|
||||
box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--secondary-color);
|
||||
}
|
||||
.btn-secondary:hover { background-color: #d1d5db; }
|
||||
</style>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<h1 class="text-4xl font-bold text-gray-800">Gestión de Empleados</h1>
|
||||
<button
|
||||
@click="goToCreateEmployee"
|
||||
class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-150 ease-in-out"
|
||||
class="create-button px-6 py-3 text-white font-semibold rounded-lg shadow-md focus:outline-none transition duration-150 ease-in-out"
|
||||
>
|
||||
<!-- ícono ➕ -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
|
||||
@@ -99,12 +99,15 @@ const { empleados } = storeToRefs(empleadosStore);
|
||||
const employees = empleados;
|
||||
|
||||
// --- helpers ---
|
||||
const btnClass = (view: 'card' | 'table') => [
|
||||
'px-4 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2',
|
||||
currentView.value === view
|
||||
? 'bg-blue-500 text-white shadow-sm focus:ring-blue-400'
|
||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300 focus:ring-gray-400',
|
||||
];
|
||||
const btnClass = (view: 'card' | 'table') => {
|
||||
const baseClasses = 'px-4 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2';
|
||||
if (currentView.value === view) {
|
||||
// Active button uses accent color
|
||||
return `${baseClasses} text-white shadow-sm view-toggle-active`;
|
||||
}
|
||||
// Inactive button uses secondary/gray styling
|
||||
return `${baseClasses} bg-gray-200 text-gray-700 hover:bg-gray-300 focus:ring-gray-400`;
|
||||
};
|
||||
|
||||
// --- fetch inicial ---
|
||||
const fetchEmployees = async () => {
|
||||
@@ -127,9 +130,25 @@ const goToCreateEmployee = () => router.push({ name: 'empleados-new' });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.min-h-screen { min-height: calc(100vh - var(--navbar-height, 0px)); }
|
||||
button.focus\:ring-blue-400:focus { box-shadow: 0 0 0 3px rgba(96, 165, 250, .5); }
|
||||
button.focus\:ring-gray-400:focus { box-shadow: 0 0 0 3px rgba(156, 163, 175, .5); }
|
||||
.min-h-screen { min-height: calc(100vh - var(--navbar-height, 0px)); } /* Assuming --navbar-height is defined elsewhere or adjust */
|
||||
|
||||
.create-button {
|
||||
background-color: var(--accent-color-empleados);
|
||||
}
|
||||
.create-button:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
.create-button:focus {
|
||||
box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--accent-color-empleados);
|
||||
}
|
||||
|
||||
.view-toggle-active {
|
||||
background-color: var(--accent-color-empleados);
|
||||
/* For focus, assuming white text on accent. Adjust if needed. */
|
||||
box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--accent-color-empleados);
|
||||
}
|
||||
/* Inactive toggle button styling is handled by Tailwind classes directly in btnClass function */
|
||||
|
||||
.view-enter-active, .view-leave-active { transition: opacity .3s ease; }
|
||||
.view-enter-from, .view-leave-to { opacity: 0; }
|
||||
</style>
|
||||
|
||||
@@ -222,7 +222,7 @@ const handleCancel = () => {
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
color: var(--accent-color-planillas); /* Accent color for title */
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@@ -243,19 +243,27 @@ h2 {
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid var(--secondary-color); /* Theme border */
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--background-color); /* Theme background */
|
||||
color: var(--text-color); /* Theme text */
|
||||
}
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
border-color: var(--accent-color-planillas);
|
||||
box-shadow: 0 0 0 2px var(--accent-color-planillas);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-group select {
|
||||
appearance: none;
|
||||
background-color: white;
|
||||
/* background-color: white; */ /* Now uses var(--background-color) */
|
||||
}
|
||||
|
||||
.error-message {
|
||||
display: block;
|
||||
color: red;
|
||||
color: var(--warning-color); /* Theme warning color */
|
||||
font-size: 0.9em;
|
||||
margin-top: 5px;
|
||||
}
|
||||
@@ -273,32 +281,35 @@ h2 {
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
transition: background-color 0.2s ease, filter 0.2s ease;
|
||||
}
|
||||
|
||||
.form-actions button[type="submit"] {
|
||||
background-color: #28a745; /* Green */
|
||||
color: white;
|
||||
background-color: var(--accent-color-planillas);
|
||||
color: white; /* Assuming accent is dark enough */
|
||||
}
|
||||
|
||||
.form-actions button[type="submit"]:hover {
|
||||
background-color: #218838;
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
||||
.form-actions button[type="submit"]:disabled {
|
||||
background-color: #ccc;
|
||||
background-color: var(--secondary-color);
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.form-actions button[type="button"] {
|
||||
background-color: #6c757d; /* Gray */
|
||||
color: white;
|
||||
background-color: var(--secondary-color);
|
||||
color: var(--text-color); /* Ensure contrast */
|
||||
}
|
||||
|
||||
.form-actions button[type="button"]:hover {
|
||||
background-color: #5a6268;
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
.form-actions button[type="button"]:disabled {
|
||||
background-color: #ccc;
|
||||
background-color: var(--secondary-color);
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -95,26 +95,26 @@ const handleEditPlanilla = (planillaId) => {
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
color: #2c3e50; /* Darker, more neutral blue */
|
||||
color: var(--accent-color-planillas); /* Accent for title */
|
||||
font-size: 2.2em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-create {
|
||||
background-color: #3498db; /* Vibrant blue */
|
||||
color: white;
|
||||
background-color: var(--accent-color-planillas);
|
||||
color: white; /* Assuming accent is dark enough */
|
||||
padding: 12px 18px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease;
|
||||
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease, filter 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.btn-create:hover {
|
||||
background-color: #2980b9; /* Darker shade of vibrant blue */
|
||||
filter: brightness(0.9);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
|
||||
@@ -234,7 +234,7 @@ const handleCancel = () => {
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
color: var(--accent-color-tareas); /* Accent color for form title */
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
@@ -291,27 +291,37 @@ h2 {
|
||||
}
|
||||
|
||||
.form-actions button[type="submit"] {
|
||||
background-color: #2ecc71;
|
||||
background-color: var(--accent-color-tareas);
|
||||
color: white;
|
||||
}
|
||||
.form-actions button[type="submit"]:hover {
|
||||
background-color: #27ae60;
|
||||
filter: brightness(0.9);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
.form-actions button[type="submit"]:disabled {
|
||||
background-color: #bdc3c7;
|
||||
background-color: var(--secondary-color); /* Use secondary for disabled */
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.form-actions button[type="button"] {
|
||||
background-color: #95a5a6;
|
||||
color: white;
|
||||
background-color: var(--secondary-color); /* Use secondary for cancel */
|
||||
color: var(--text-color); /* Ensure text contrasts with secondary */
|
||||
}
|
||||
.form-actions button[type="button"]:hover {
|
||||
background-color: #7f8c8d;
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
.form-actions button[type="button"]:disabled {
|
||||
background-color: #bdc3c7;
|
||||
background-color: var(--secondary-color);
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Also update input focus color if not already using a global variable */
|
||||
.form-group input:focus,
|
||||
.form-group select:focus,
|
||||
.form-group textarea:focus {
|
||||
border-color: var(--accent-color-tareas);
|
||||
box-shadow: 0 0 0 2px var(--accent-color-tareas);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -89,13 +89,13 @@ const handleEditTarea = (tareaId) => {
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
color: #333;
|
||||
color: var(--accent-color-tareas); /* Accent color for page title */
|
||||
font-size: 2em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-create {
|
||||
background-color: #5cb85c;
|
||||
background-color: var(--accent-color-tareas);
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border: none;
|
||||
@@ -103,12 +103,12 @@ const handleEditTarea = (tareaId) => {
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease;
|
||||
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease, filter 0.2s ease;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.btn-create:hover {
|
||||
background-color: #4cae4c;
|
||||
filter: brightness(0.9);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user