5fc581a180
This commit introduces new UI settings to control the font color, family, and size of the text within the chat interface.
Key changes:
- Added new state variables and actions to `ui/src/stores/useUi.js` for:
- Chat font color (`chatFontColor`)
- Chat font family (`chatFontFamily`)
- Chat font size (`chatFontSize`)
- These settings are persisted in local storage.
- Added controls for these font properties to the "Chat Interface Colors" section in `ui/src/views/SettingsView.vue`.
- Includes a color picker for font color.
- Includes a text input for font family.
- Includes a number input for font size (px).
- Modified `ui/src/components/chat/CanvasChat.vue` to use these new font settings via CSS custom properties.
- The `chatStyleVariables` computed property now includes variables for font settings.
- Chat messages (agent and user) and the chat input textarea now apply these font styles.
I've confirmed that the font settings are applied correctly to messages and the input area, persist across sessions, and integrate well with existing theme and color customizations.
359 lines
25 KiB
Vue
359 lines
25 KiB
Vue
<template>
|
|
<div class="settings-view p-4 md:p-8 max-w-4xl mx-auto text-[var(--text-color)] bg-[var(--background-color)] transition-opacity duration-500 ease-in-out opacity-0"
|
|
:class="{ 'opacity-100': isMounted }">
|
|
|
|
<h1 class="text-3xl md:text-4xl font-bold mb-8 border-b pb-4 border-[var(--secondary-color)]">Appearance Settings</h1>
|
|
|
|
<!-- General Settings Section -->
|
|
<section class="mb-10">
|
|
<h2 class="text-2xl font-semibold mb-6 text-[var(--primary-color)]">General</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-center">
|
|
<div class="setting-item">
|
|
<label for="theme" class="block text-sm font-medium mb-1">Theme</label>
|
|
<select id="theme" v-model="ui.theme" @change="ui.setTheme($event.target.value)"
|
|
class="w-full p-3 border rounded-lg shadow-sm focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] transition-all duration-150 ease-in-out bg-white/10 dark:bg-black/10 border-[var(--secondary-color)] hover:border-[var(--primary-color)]">
|
|
<option value="light">Light</option>
|
|
<option value="dark">Dark</option>
|
|
</select>
|
|
</div>
|
|
<div class="setting-item flex items-center justify-between mt-4 md:mt-0 md:pt-6">
|
|
<label for="animationsEnabled" class="text-sm font-medium">Enable Animations</label>
|
|
<input type="checkbox" id="animationsEnabled" v-model="ui.animationsEnabled" @change="ui.setAnimationsEnabled($event.target.checked)"
|
|
class="custom-checkbox relative w-10 h-5 appearance-none bg-gray-300 dark:bg-gray-600 rounded-full cursor-pointer transition-colors duration-300 ease-in-out checked:bg-[var(--primary-color)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--primary-color)] focus:ring-offset-[var(--background-color)]">
|
|
</div>
|
|
<div class="setting-item flex items-center justify-between mt-4 md:mt-0 md:pt-6">
|
|
<label for="desktopNavbarPersistent" class="text-sm font-medium">Persistent Desktop Navbar</label>
|
|
<input type="checkbox" id="desktopNavbarPersistent" v-model="ui.desktopNavbarPersistent" @change="ui.setDesktopNavbarPersistent($event.target.checked)"
|
|
class="custom-checkbox relative w-10 h-5 appearance-none bg-gray-300 dark:bg-gray-600 rounded-full cursor-pointer transition-colors duration-300 ease-in-out checked:bg-[var(--primary-color)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--primary-color)] focus:ring-offset-[var(--background-color)]">
|
|
</div>
|
|
|
|
<!-- Animation Speed Setting -->
|
|
<div class="setting-item mt-6 md:col-span-2"> <!-- md:col-span-2 to make it take full width on medium screens if the grid has 2 columns -->
|
|
<label class="block text-sm font-medium mb-1 text-[var(--text-color)]">Animation Speed</label>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mb-2">
|
|
Adjust the speed of screen transitions (applied if animations are enabled).
|
|
</p>
|
|
<div class="flex flex-col space-y-1 sm:flex-row sm:space-y-0 sm:space-x-4">
|
|
<label v-for="option in speedOptions" :key="option.value"
|
|
class="flex items-center p-2 rounded-md hover:bg-gray-200/50 dark:hover:bg-gray-700/50 cursor-pointer transition-colors duration-150 ease-in-out border border-gray-300 dark:border-gray-600 hover:border-[var(--primary-color)]">
|
|
<input type="radio"
|
|
name="transitionSpeed"
|
|
:value="option.value"
|
|
:checked="ui.transitionSpeed === option.value"
|
|
@change="ui.setTransitionSpeed(option.value)"
|
|
class="form-radio h-4 w-4 text-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)] border-gray-300 dark:border-gray-500 bg-white dark:bg-gray-800 focus:ring-offset-white dark:focus:ring-offset-gray-900">
|
|
<span class="ml-2 text-sm text-[var(--text-color)]">{{ option.label }} <span class="text-xs text-gray-500 dark:text-gray-400">({{ option.value }}x)</span></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Colors Section -->
|
|
<section class="mb-10">
|
|
<h2 class="text-2xl font-semibold mb-6 text-[var(--primary-color)]">Color Palette</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="primaryColor" class="block text-sm font-medium mb-1">Primary Color</label>
|
|
<input type="color" id="primaryColor" v-model="ui.primaryColor" @input="ui.setPrimaryColor($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="secondaryColor" class="block text-sm font-medium mb-1">Secondary Color</label>
|
|
<input type="color" id="secondaryColor" v-model="ui.secondaryColor" @input="ui.setSecondaryColor($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="warningColor" class="block text-sm font-medium mb-1">Warning Color</label>
|
|
<input type="color" id="warningColor" v-model="ui.warningColor" @input="ui.setWarningColor($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="backgroundColor" class="block text-sm font-medium mb-1">Background Color</label>
|
|
<input type="color" id="backgroundColor" v-model="ui.backgroundColor" @input="ui.setBackgroundColor($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>
|
|
|
|
<!-- Typography Section -->
|
|
<section class="mb-10">
|
|
<h2 class="text-2xl font-semibold mb-6 text-[var(--primary-color)]">Typography</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="setting-item">
|
|
<label for="fontFamily" class="block text-sm font-medium mb-1">Font Family</label>
|
|
<input type="text" id="fontFamily" v-model="ui.fontFamily" @input="ui.setFontFamily($event.target.value)"
|
|
class="w-full p-3 border rounded-lg shadow-sm focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] transition-all duration-150 ease-in-out bg-white/10 dark:bg-black/10 border-[var(--secondary-color)] hover:border-[var(--primary-color)]"
|
|
placeholder="e.g., Roboto, sans-serif">
|
|
</div>
|
|
<div class="setting-item">
|
|
<label for="fontSize" class="block text-sm font-medium mb-1">Base Font Size (px)</label>
|
|
<input type="number" id="fontSize" v-model.number="ui.fontSize" @input="ui.setFontSize(Number($event.target.value))"
|
|
class="w-full p-3 border rounded-lg shadow-sm focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] transition-all duration-150 ease-in-out bg-white/10 dark:bg-black/10 border-[var(--secondary-color)] hover:border-[var(--primary-color)]"
|
|
min="8" max="32" step="1">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Chat Interface Colors Section -->
|
|
<section class="mb-10">
|
|
<h2 class="text-2xl font-semibold mb-6 text-[var(--primary-color)]">Chat Interface 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="chatAgentMessageColor" class="block text-sm font-medium mb-1">Agent Message Color</label>
|
|
<input type="color" id="chatAgentMessageColor" v-model="ui.chatAgentMessageColor" @input="ui.setChatAgentMessageColor($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="chatOwnMessageColor" class="block text-sm font-medium mb-1">Own Message Color</label>
|
|
<input type="color" id="chatOwnMessageColor" v-model="ui.chatOwnMessageColor" @input="ui.setChatOwnMessageColor($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="chatInputBoxColor" class="block text-sm font-medium mb-1">Input Box Color</label>
|
|
<input type="color" id="chatInputBoxColor" v-model="ui.chatInputBoxColor" @input="ui.setChatInputBoxColor($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="chatAccentColor" class="block text-sm font-medium mb-1">Accent Color</label>
|
|
<input type="color" id="chatAccentColor" v-model="ui.chatAccentColor" @input="ui.setChatAccentColor($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="chatBackgroundColor" class="block text-sm font-medium mb-1">Background Color</label>
|
|
<input type="color" id="chatBackgroundColor" v-model="ui.chatBackgroundColor" @input="ui.setChatBackgroundColor($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>
|
|
|
|
<!-- Chat Font Color -->
|
|
<div class="setting-item">
|
|
<label for="chatFontColor" class="block text-sm font-medium mb-1">Chat Font Color</label>
|
|
<input type="color" id="chatFontColor" v-model="ui.chatFontColor" @input="ui.setChatFontColor($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>
|
|
|
|
<!-- Chat Font Family -->
|
|
<div class="setting-item">
|
|
<label for="chatFontFamily" class="block text-sm font-medium mb-1">Chat Font Family</label>
|
|
<input type="text" id="chatFontFamily" v-model="ui.chatFontFamily" @input="ui.setChatFontFamily($event.target.value)"
|
|
class="w-full p-3 border rounded-lg shadow-sm focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] transition-all duration-150 ease-in-out bg-white/10 dark:bg-black/10 border-[var(--secondary-color)] hover:border-[var(--primary-color)]"
|
|
placeholder="e.g., Arial, sans-serif">
|
|
</div>
|
|
|
|
<!-- Chat Font Size -->
|
|
<div class="setting-item">
|
|
<label for="chatFontSize" class="block text-sm font-medium mb-1">Chat Font Size (px)</label>
|
|
<input type="number" id="chatFontSize" v-model.number="ui.chatFontSize" @input="ui.setChatFontSize(Number($event.target.value))"
|
|
class="w-full p-3 border rounded-lg shadow-sm focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] transition-all duration-150 ease-in-out bg-white/10 dark:bg-black/10 border-[var(--secondary-color)] hover:border-[var(--primary-color)]"
|
|
min="8" max="32" step="1">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 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 md:grid-cols-3 gap-6">
|
|
<div class="setting-item">
|
|
<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 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>
|
|
<div class="setting-item">
|
|
<label for="defaultViewEmpleados" class="block text-sm font-medium mb-1">Default View</label>
|
|
<select id="defaultViewEmpleados" v-model="ui.defaultViewEmpleados" @change="ui.setDefaultViewEmpleados($event.target.value)"
|
|
class="w-full p-3 border rounded-lg shadow-sm focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] transition-all duration-150 ease-in-out bg-white/10 dark:bg-black/10 border-[var(--secondary-color)] hover:border-[var(--primary-color)]">
|
|
<option value="table">Table</option>
|
|
<option value="card">Card</option>
|
|
</select>
|
|
</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 md:grid-cols-3 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 class="setting-item">
|
|
<label for="defaultViewTareas" class="block text-sm font-medium mb-1">Default View</label>
|
|
<select id="defaultViewTareas" v-model="ui.defaultViewTareas" @change="ui.setDefaultViewTareas($event.target.value)"
|
|
class="w-full p-3 border rounded-lg shadow-sm focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] transition-all duration-150 ease-in-out bg-white/10 dark:bg-black/10 border-[var(--secondary-color)] hover:border-[var(--primary-color)]">
|
|
<option value="table">Table</option>
|
|
<option value="card">Card</option>
|
|
</select>
|
|
</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 md:grid-cols-3 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 class="setting-item">
|
|
<label for="defaultViewPlanillas" class="block text-sm font-medium mb-1">Default View</label>
|
|
<select id="defaultViewPlanillas" v-model="ui.defaultViewPlanillas" @change="ui.setDefaultViewPlanillas($event.target.value)"
|
|
class="w-full p-3 border rounded-lg shadow-sm focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] transition-all duration-150 ease-in-out bg-white/10 dark:bg-black/10 border-[var(--secondary-color)] hover:border-[var(--primary-color)]">
|
|
<option value="table">Table</option>
|
|
<option value="card">Card</option>
|
|
</select>
|
|
</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 md:grid-cols-3 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 class="setting-item">
|
|
<label for="defaultViewAsistencias" class="block text-sm font-medium mb-1">Default View</label>
|
|
<select id="defaultViewAsistencias" v-model="ui.defaultViewAsistencias" @change="ui.setDefaultViewAsistencias($event.target.value)"
|
|
class="w-full p-3 border rounded-lg shadow-sm focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] transition-all duration-150 ease-in-out bg-white/10 dark:bg-black/10 border-[var(--secondary-color)] hover:border-[var(--primary-color)]">
|
|
<option value="table">Table</option>
|
|
<option value="card">Card</option>
|
|
</select>
|
|
</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 md:grid-cols-3 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 class="setting-item">
|
|
<label for="defaultViewConfiguracion" class="block text-sm font-medium mb-1">Default View</label>
|
|
<select id="defaultViewConfiguracion" v-model="ui.defaultViewConfiguracion" @change="ui.setDefaultViewConfiguracion($event.target.value)"
|
|
class="w-full p-3 border rounded-lg shadow-sm focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] transition-all duration-150 ease-in-out bg-white/10 dark:bg-black/10 border-[var(--secondary-color)] hover:border-[var(--primary-color)]">
|
|
<option value="table">Table</option>
|
|
<option value="card">Card</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { useUi } from '@/stores/useUi'
|
|
|
|
const ui = useUi()
|
|
const isMounted = ref(false)
|
|
|
|
onMounted(() => {
|
|
// Slight delay to allow transition to be visible
|
|
setTimeout(() => {
|
|
isMounted.value = true
|
|
}, 50)
|
|
})
|
|
|
|
const speedOptions = [
|
|
{ label: 'Slow', value: 2 },
|
|
{ label: 'Normal', value: 1 },
|
|
{ label: 'Fast', value: 0.5 },
|
|
]
|
|
</script>
|
|
|
|
<style scoped>
|
|
.settings-view {
|
|
/* display: flex; */ /* Replaced by Tailwind max-w-4xl mx-auto and sectioning */
|
|
/* flex-direction: column; */
|
|
/* gap: 1rem; */ /* Handled by margins on sections/items */
|
|
/* padding: 1rem; */ /* Replaced by p-4 md:p-8 on the root div */
|
|
}
|
|
|
|
.setting-item { /* New class for spacing, can replace .setting if desired */
|
|
/* @apply mb-4 md:mb-0; */ /* Add some bottom margin on mobile - Temporarily commented out for testing */
|
|
}
|
|
|
|
/* Old .setting class and general label styling are no longer needed as Tailwind utilities are used per element. */
|
|
/*
|
|
.setting {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
label {
|
|
font-weight: bold;
|
|
}
|
|
*/
|
|
|
|
/* Custom styling for color inputs to ensure the color preview is visible */
|
|
input[type="color"]::-webkit-color-swatch-wrapper {
|
|
padding: 0; /* Remove default padding to make color fill the input */
|
|
}
|
|
input[type="color"]::-webkit-color-swatch {
|
|
border: none; /* Remove default border */
|
|
border-radius: 0.375rem; /* Tailwind's rounded-md */
|
|
}
|
|
/* For Firefox */
|
|
input[type="color"]::-moz-color-swatch {
|
|
border: none;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
/* Custom checkbox style */
|
|
.custom-checkbox::before {
|
|
content: "";
|
|
/* @apply absolute top-1/2 left-0.5 w-4 h-4 bg-white rounded-full shadow transform -translate-y-1/2 transition-transform duration-300 ease-in-out; */
|
|
/* Basic styles to allow tests to pass, actual style handled by Tailwind if processed */
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0.125rem; /* Corresponds to left-0.5 in Tailwind */
|
|
width: 1rem; /* w-4 */
|
|
height: 1rem; /* h-4 */
|
|
background-color: white;
|
|
border-radius: 9999px; /* rounded-full */
|
|
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06); /* shadow */
|
|
transform: translateY(-50%);
|
|
transition-property: transform;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 300ms;
|
|
}
|
|
.custom-checkbox:checked::before {
|
|
/* @apply translate-x-5; */ /* Moves the toggle to the right */
|
|
transform: translateY(-50%) translateX(1.25rem); /* translate-x-5 (1.25rem for 20px) */
|
|
}
|
|
</style> |