refactor(ui): Improve organization and naming in SettingsView
This commit refactors `SettingsView.vue` to enhance clarity and your experience by reorganizing color customization options.
Key changes:
- **Module-Based Organization:**
- Color settings (Accent Color, Table Background Color) are now grouped into dedicated sections for each application module (Empleados, Tareas, Planillas, Asistencias, Configuracion).
- Each module section features a clear heading (e.g., "Empleados Module") with consistent styling, including a bottom border for visual separation.
- The previous generic "Module Colors" grid has been removed.
- **Improved Naming and Typography:**
- Labels for color settings within each module section have been simplified to "Accent Color" and "Table Background", as the module context is provided by the section heading.
- All labels and section headings now use standard title case, avoiding excessive uppercase for better readability.
- **Layout and Styling:**
- The new module sections are styled consistently with the rest of the Settings page, maintaining a cohesive look and feel.
- A responsive grid layout is used within each module section to arrange its color settings effectively on different screen sizes.
- Spacing and visual hierarchy have been reviewed to ensure the page remains easy to navigate.
These changes make it easier for you to find and manage color preferences for specific parts of the application.
This commit is contained in:
google-labs-jules[bot]
@@ -70,72 +70,86 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Module Colors Section (Accent and Table Background) -->
|
||||
<section class="mb-10">
|
||||
<h2 class="text-2xl font-semibold mb-6 text-[var(--primary-color)]">Module Colors</h2>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||||
<!-- Empleados -->
|
||||
<!-- Per-Module Color Settings -->
|
||||
<section class="mb-10 module-settings-group">
|
||||
<h3 class="text-xl font-semibold mb-4 text-[var(--primary-color)] border-b border-[var(--secondary-color)] pb-2">Empleados Module</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div class="setting-item">
|
||||
<label for="accentColorEmpleados" class="block text-sm font-medium mb-1">Empleados Accent</label>
|
||||
<label for="accentColorEmpleados" class="block text-sm font-medium mb-1">Accent Color</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="tableBgColorEmpleados" class="block text-sm font-medium mb-1">Table BG Empleados</label>
|
||||
<label for="tableBgColorEmpleados" class="block text-sm font-medium mb-1">Table Background</label>
|
||||
<input type="color" id="tableBgColorEmpleados" v-model="ui.tableBgColorEmpleados" @input="ui.setTableBgColorEmpleados($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>
|
||||
|
||||
<!-- Tareas -->
|
||||
<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="tableBgColorTareas" class="block text-sm font-medium mb-1">Table BG Tareas</label>
|
||||
<input type="color" id="tableBgColorTareas" v-model="ui.tableBgColorTareas" @input="ui.setTableBgColorTareas($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>
|
||||
|
||||
<!-- Planillas -->
|
||||
<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="tableBgColorPlanillas" class="block text-sm font-medium mb-1">Table BG Planillas</label>
|
||||
<input type="color" id="tableBgColorPlanillas" v-model="ui.tableBgColorPlanillas" @input="ui.setTableBgColorPlanillas($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>
|
||||
|
||||
<!-- Asistencias -->
|
||||
<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 class="setting-item">
|
||||
<label for="tableBgColorAsistencias" class="block text-sm font-medium mb-1">Table BG Asistencias</label>
|
||||
<input type="color" id="tableBgColorAsistencias" v-model="ui.tableBgColorAsistencias" @input="ui.setTableBgColorAsistencias($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>
|
||||
|
||||
<!-- Configuracion -->
|
||||
<div class="setting-item">
|
||||
<label for="accentColorConfiguracion" class="block text-sm font-medium mb-1">Configuracion Accent</label>
|
||||
<input type="color" id="accentColorConfiguracion" v-model="ui.accentColorConfiguracion" @input="ui.setAccentColorConfiguracion($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="tableBgColorConfiguracion" class="block text-sm font-medium mb-1">Table BG Configuracion</label>
|
||||
<input type="color" id="tableBgColorConfiguracion" v-model="ui.tableBgColorConfiguracion" @input="ui.setTableBgColorConfiguracion($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>
|
||||
|
||||
<section class="mb-10 module-settings-group">
|
||||
<h3 class="text-xl font-semibold mb-4 text-[var(--primary-color)] border-b border-[var(--secondary-color)] pb-2">Tareas Module</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div class="setting-item">
|
||||
<label for="accentColorTareas" class="block text-sm font-medium mb-1">Accent Color</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="tableBgColorTareas" class="block text-sm font-medium mb-1">Table Background</label>
|
||||
<input type="color" id="tableBgColorTareas" v-model="ui.tableBgColorTareas" @input="ui.setTableBgColorTareas($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>
|
||||
|
||||
<section class="mb-10 module-settings-group">
|
||||
<h3 class="text-xl font-semibold mb-4 text-[var(--primary-color)] border-b border-[var(--secondary-color)] pb-2">Planillas Module</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div class="setting-item">
|
||||
<label for="accentColorPlanillas" class="block text-sm font-medium mb-1">Accent Color</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="tableBgColorPlanillas" class="block text-sm font-medium mb-1">Table Background</label>
|
||||
<input type="color" id="tableBgColorPlanillas" v-model="ui.tableBgColorPlanillas" @input="ui.setTableBgColorPlanillas($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>
|
||||
|
||||
<section class="mb-10 module-settings-group">
|
||||
<h3 class="text-xl font-semibold mb-4 text-[var(--primary-color)] border-b border-[var(--secondary-color)] pb-2">Asistencias Module</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div class="setting-item">
|
||||
<label for="accentColorAsistencias" class="block text-sm font-medium mb-1">Accent Color</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 class="setting-item">
|
||||
<label for="tableBgColorAsistencias" class="block text-sm font-medium mb-1">Table Background</label>
|
||||
<input type="color" id="tableBgColorAsistencias" v-model="ui.tableBgColorAsistencias" @input="ui.setTableBgColorAsistencias($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>
|
||||
|
||||
<section class="mb-10 module-settings-group">
|
||||
<h3 class="text-xl font-semibold mb-4 text-[var(--primary-color)] border-b border-[var(--secondary-color)] pb-2">Configuración Module</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div class="setting-item">
|
||||
<label for="accentColorConfiguracion" class="block text-sm font-medium mb-1">Accent Color</label>
|
||||
<input type="color" id="accentColorConfiguracion" v-model="ui.accentColorConfiguracion" @input="ui.setAccentColorConfiguracion($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="tableBgColorConfiguracion" class="block text-sm font-medium mb-1">Table Background</label>
|
||||
<input type="color" id="tableBgColorConfiguracion" v-model="ui.tableBgColorConfiguracion" @input="ui.setTableBgColorConfiguracion($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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user