feat(ui) : add site colors, dark mode toggle and card styling improvements
- Site color field with color picker in create/edit modals - Dark mode theme (mytheme-dark) with toggle in navbar - Stronger site color visibility on cards (gradient, top border, badges) - Bigger action buttons (btn-sm) on machine cards - White card backgrounds with proper dark mode support Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -17,6 +17,46 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Couleur</span>
|
||||
</label>
|
||||
<div v-if="siteRef.color" class="flex items-center gap-3">
|
||||
<input
|
||||
:value="siteRef.color"
|
||||
type="color"
|
||||
class="w-10 h-10 rounded cursor-pointer border border-base-300"
|
||||
:disabled="disabled"
|
||||
@input="(e: Event) => { siteRef.color = (e.target as HTMLInputElement).value }"
|
||||
>
|
||||
<input
|
||||
v-model="siteRef.color"
|
||||
type="text"
|
||||
placeholder="#000000"
|
||||
class="input input-bordered input-sm flex-1"
|
||||
:disabled="disabled"
|
||||
maxlength="7"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs"
|
||||
:disabled="disabled"
|
||||
@click="siteRef.color = ''"
|
||||
>
|
||||
Effacer
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="btn btn-outline btn-sm w-fit"
|
||||
:disabled="disabled"
|
||||
@click="siteRef.color = '#3b82f6'"
|
||||
>
|
||||
Choisir une couleur
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<SiteContactFormFields :form="siteRef" :disabled="disabled" />
|
||||
|
||||
<div class="modal-action">
|
||||
@@ -39,6 +79,7 @@ import SiteContactFormFields from '~/components/sites/SiteContactFormFields.vue'
|
||||
|
||||
type SiteForm = {
|
||||
name: string
|
||||
color: string
|
||||
contactName: string
|
||||
contactPhone: string
|
||||
contactAddress: string
|
||||
|
||||
Reference in New Issue
Block a user