From 3853d0d6e3d72863d6827b624ca45bf8eb06c0f2 Mon Sep 17 00:00:00 2001
From: Julie Blanc <julieblanc@Julies-MacBook-Pro.local>
Date: Fri, 6 Mar 2026 18:27:14 +0100
Subject: [PATCH] restructuration settings popup

---
 src/components/ElementPopup.vue | 208 ++++++++++++++++++--------------
 1 file changed, 117 insertions(+), 91 deletions(-)

diff --git a/src/components/ElementPopup.vue b/src/components/ElementPopup.vue
index 7b28034..3ee8a75 100644
--- a/src/components/ElementPopup.vue
+++ b/src/components/ElementPopup.vue
@@ -16,13 +16,16 @@
     </template>
 
     <template #controls>
+
       <!-- Font Family -->
-      <div class="setting__section" :class="{ 'setting-disabled': !settingEnabled.font }" @click="onSubsectionClick('font')">
-        <input type="checkbox" class="toggle-setting" :checked="settingEnabled.font" @change="onToggleSetting('font', $event.target.checked)" />
-        <div class="field field-font">
+
+      <div class="setting__section" data-setting="font" :class="{ 'setting-disabled': !settingEnabled.font }" @click="onSubsectionClick('font')">
+        <div class="setting__header">
+          <input type="checkbox" class="toggle-setting" :checked="settingEnabled.font" @change="onToggleSetting('font', $event.target.checked)" />
           <label class="label-with-tooltip" data-css="font-family">Police</label>
           <p class="info-default">Valeur par défaut : {{ textDefaults.fontFamily === 'sans-serif' ? 'Police système (sans-serif)' : textDefaults.fontFamily }}</p>
-          <div class="field-font__options">
+        </div>
+        <div class="setting__body">
             <select v-model="fontFamily">
               <option value="sans-serif">Police système (sans-serif)</option>
               <option v-for="f in projectFonts" :key="f.name" :value="f.name" :style="{ fontFamily: `'${f.name}', ${f.category}` }">{{ f.name }}</option>
@@ -35,16 +38,18 @@
               <input type="checkbox" v-model="bold" />
               <label class="label-with-tooltip" data-css="font-weight">Gras</label>
             </div>
-          </div>
         </div>
       </div>
 
       <!-- Font Size -->
-      <div class="setting__section" :class="{ 'setting-disabled': !settingEnabled.fontSize }" @click="onSubsectionClick('fontSize')">
-        <input type="checkbox" class="toggle-setting" :checked="settingEnabled.fontSize" @change="onToggleSetting('fontSize', $event.target.checked)" />
-        <div class="field field-text-size">
+
+      <div class="setting__section" data-setting="fontSize" :class="{ 'setting-disabled': !settingEnabled.fontSize }" @click="onSubsectionClick('fontSize')">
+        <div class="setting__header">
+          <input type="checkbox" class="toggle-setting" :checked="settingEnabled.fontSize" @change="onToggleSetting('fontSize', $event.target.checked)" />
           <label class="label-with-tooltip" data-css="font-size">Taille du texte</label>
           <p class="info-default">Valeur par défaut : {{ textDefaults.fontSize.value }}{{ textDefaults.fontSize.unit }}</p>
+        </div>
+        <div class="setting__body">
           <InputWithUnit
             v-model="fontSizeModel"
             :units="['px']"
@@ -56,11 +61,14 @@
       </div>
 
       <!-- LineHeight -->
-      <div class="setting__section" :class="{ 'setting-disabled': !settingEnabled.lineHeight }" @click="onSubsectionClick('lineHeight')">
-        <input type="checkbox" class="toggle-setting" :checked="settingEnabled.lineHeight" @change="onToggleSetting('lineHeight', $event.target.checked)" />
-        <div class="field field-text-size">
+
+      <div class="setting__section" data-setting="lineHeight" :class="{ 'setting-disabled': !settingEnabled.lineHeight }" @click="onSubsectionClick('lineHeight')">
+        <div class="setting__header">
+          <input type="checkbox" class="toggle-setting" :checked="settingEnabled.lineHeight" @change="onToggleSetting('lineHeight', $event.target.checked)" />
           <label class="label-with-tooltip" data-css="line-height">Interlignage</label>
           <p class="info-default">Valeur par défaut : {{ textDefaults.lineHeight.value }}{{ textDefaults.lineHeight.unit }}</p>
+        </div>
+        <div class="setting__body">
           <InputWithUnit
             v-model="lineHeightModel"
             :units="['px']"
@@ -72,10 +80,13 @@
       </div>
 
       <!-- Text Alignment -->
-      <div class="setting__section" :class="{ 'setting-disabled': !settingEnabled.textAlign }" @click="onSubsectionClick('textAlign')">
-        <input type="checkbox" class="toggle-setting" :checked="settingEnabled.textAlign" @change="onToggleSetting('textAlign', $event.target.checked)" />
-        <div class="field">
+
+      <div class="setting__section" data-setting="textAlign" :class="{ 'setting-disabled': !settingEnabled.textAlign }" @click="onSubsectionClick('textAlign')">
+        <div class="setting__header">
+          <input type="checkbox" class="toggle-setting" :checked="settingEnabled.textAlign" @change="onToggleSetting('textAlign', $event.target.checked)" />
           <label class="label-with-tooltip" data-css="text-align">Alignement</label>
+        </div>
+        <div class="setting__body">
           <select v-model="textAlign">
             <option value="left">Gauche</option>
             <option value="center">Centre</option>
@@ -86,11 +97,14 @@
       </div>
 
       <!-- Color -->
-      <div class="setting__section" :class="{ 'setting-disabled': !settingEnabled.color }" @click="onSubsectionClick('color')">
-        <input type="checkbox" class="toggle-setting" :checked="settingEnabled.color" @change="onToggleSetting('color', $event.target.checked)" />
-        <div class="field field-simple">
+
+      <div class="setting__section" data-setting="color" :class="{ 'setting-disabled': !settingEnabled.color }" @click="onSubsectionClick('color')">
+        <div class="setting__header">
+          <input type="checkbox" class="toggle-setting" :checked="settingEnabled.color" @change="onToggleSetting('color', $event.target.checked)" />
           <label class="label-with-tooltip" data-css="color">Couleur du texte</label>
           <p class="info-default">Valeur par défaut : {{ textDefaults.color }}</p>
+        </div>
+        <div class="setting__body">
           <div class="input-with-color">
             <input
               ref="colorInput"
@@ -103,10 +117,13 @@
       </div>
 
       <!-- Background -->
-      <div class="setting__section" :class="{ 'setting-disabled': !settingEnabled.background }" @click="onSubsectionClick('background')">
-        <input type="checkbox" class="toggle-setting" :checked="settingEnabled.background" @change="onToggleSetting('background', $event.target.checked)" />
-        <div class="field field-simple">
+
+      <div class="setting__section" data-setting="background" :class="{ 'setting-disabled': !settingEnabled.background }" @click="onSubsectionClick('background')">
+        <div class="setting__header">
+          <input type="checkbox" class="toggle-setting" :checked="settingEnabled.background" @change="onToggleSetting('background', $event.target.checked)" />
           <label class="label-with-tooltip" data-css="background">Arrière-plan</label>
+        </div>
+        <div class="setting__body">
           <div class="input-with-color">
             <input
               ref="backgroundInput"
@@ -119,12 +136,13 @@
       </div>
 
       <!-- Bordure -->
-      <div class="setting__section" :class="{ 'setting-disabled': !settingEnabled.border }" @click="onSubsectionClick('border')">
-        <input type="checkbox" class="toggle-setting" :checked="settingEnabled.border" @change="onToggleSetting('border', $event.target.checked)" />
-        <div class="field field-border">
-          <div class="setting__section-header">
-            <label class="label-with-tooltip" data-css="border">Bordure</label>
-          </div>
+
+      <div class="setting__section" data-setting="border" :class="{ 'setting-disabled': !settingEnabled.border }" @click="onSubsectionClick('border')">
+        <div class="setting__header">
+          <input type="checkbox" class="toggle-setting" :checked="settingEnabled.border" @change="onToggleSetting('border', $event.target.checked)" />
+          <label class="label-with-tooltip" data-css="border">Bordure</label>
+        </div>
+        <div class="setting__body">
           <div class="field-border__options">
             <div class="field-border__option">
               <label class="label-with-tooltip" data-css="border-width">Épaisseur</label>
@@ -164,10 +182,11 @@
       </div>
 
       <!-- Outer Margins -->
-      <div class="setting__section" :class="{ 'setting-disabled': !settingEnabled.margin }" @click="onSubsectionClick('margin')">
-        <input type="checkbox" class="toggle-setting" :checked="settingEnabled.margin" @change="onToggleSetting('margin', $event.target.checked)" />
-        <div class="setting__section-header">
-          <span class="label-with-tooltip" data-css="margin">Marges extérieures</span>
+
+      <div class="setting__section" data-setting="margin" :class="{ 'setting-disabled': !settingEnabled.margin }" @click="onSubsectionClick('margin')">
+        <div class="setting__header">
+          <input type="checkbox" class="toggle-setting" :checked="settingEnabled.margin" @change="onToggleSetting('margin', $event.target.checked)" />
+          <label class="label-with-tooltip" data-css="margin">Marges extérieures</label>
           <button
             type="button"
             class="lock-toggle"
@@ -185,40 +204,43 @@
             </svg>
           </button>
         </div>
-        <div
-          v-for="side in sides"
-          :key="side.key"
-          class="field field-margin"
-        >
-          <label class="label-with-tooltip" :data-css="`margin-${side.key}`">{{ side.label }}</label>
-          <div class="input-with-unit">
-            <NumberInput
-              :modelValue="margin[side.key].value"
-              :min="0"
-              :step="1"
-              @update:modelValue="(v) => updateMarginValue(side.key, v)"
-            />
-            <div class="unit-toggle">
-              <button
-                type="button"
-                :class="{ active: margin[side.key].unit === 'mm' }"
-                @click="updateMarginUnit(side.key, 'mm')"
-              >mm</button>
-              <button
-                type="button"
-                :class="{ active: margin[side.key].unit === 'px' }"
-                @click="updateMarginUnit(side.key, 'px')"
-              >px</button>
+        <div class="setting__body">
+          <div
+            v-for="side in sides"
+            :key="side.key"
+            class="field field-margin"
+          >
+            <label class="label-with-tooltip" :data-css="`margin-${side.key}`">{{ side.label }}</label>
+            <div class="input-with-unit">
+              <NumberInput
+                :modelValue="margin[side.key].value"
+                :min="0"
+                :step="1"
+                @update:modelValue="(v) => updateMarginValue(side.key, v)"
+              />
+              <div class="unit-toggle">
+                <button
+                  type="button"
+                  :class="{ active: margin[side.key].unit === 'mm' }"
+                  @click="updateMarginUnit(side.key, 'mm')"
+                >mm</button>
+                <button
+                  type="button"
+                  :class="{ active: margin[side.key].unit === 'px' }"
+                  @click="updateMarginUnit(side.key, 'px')"
+                >px</button>
+              </div>
             </div>
           </div>
         </div>
       </div>
 
       <!-- Inner Margins (Padding) -->
-      <div class="setting__section" :class="{ 'setting-disabled': !settingEnabled.padding }" @click="onSubsectionClick('padding')">
-        <input type="checkbox" class="toggle-setting" :checked="settingEnabled.padding" @change="onToggleSetting('padding', $event.target.checked)" />
-        <div class="setting__section-header">
-          <span class="label-with-tooltip" data-css="padding">Marges intérieures</span>
+
+      <div class="setting__section" data-setting="padding" :class="{ 'setting-disabled': !settingEnabled.padding }" @click="onSubsectionClick('padding')">
+        <div class="setting__header">
+          <input type="checkbox" class="toggle-setting" :checked="settingEnabled.padding" @change="onToggleSetting('padding', $event.target.checked)" />
+          <label class="label-with-tooltip" data-css="padding">Marges intérieures</label>
           <button
             type="button"
             class="lock-toggle"
@@ -236,30 +258,32 @@
             </svg>
           </button>
         </div>
-        <div
-          v-for="side in sides"
-          :key="side.key"
-          class="field field-margin"
-        >
-          <label class="label-with-tooltip" :data-css="`padding-${side.key}`">{{ side.label }}</label>
-          <div class="input-with-unit">
-            <NumberInput
-              :modelValue="padding[side.key].value"
-              :min="0"
-              :step="1"
-              @update:modelValue="(v) => updatePaddingValue(side.key, v)"
-            />
-            <div class="unit-toggle">
-              <button
-                type="button"
-                :class="{ active: padding[side.key].unit === 'mm' }"
-                @click="updatePaddingUnit(side.key, 'mm')"
-              >mm</button>
-              <button
-                type="button"
-                :class="{ active: padding[side.key].unit === 'px' }"
-                @click="updatePaddingUnit(side.key, 'px')"
-              >px</button>
+        <div class="setting__body">
+          <div
+            v-for="side in sides"
+            :key="side.key"
+            class="field field-margin"
+          >
+            <label class="label-with-tooltip" :data-css="`padding-${side.key}`">{{ side.label }}</label>
+            <div class="input-with-unit">
+              <NumberInput
+                :modelValue="padding[side.key].value"
+                :min="0"
+                :step="1"
+                @update:modelValue="(v) => updatePaddingValue(side.key, v)"
+              />
+              <div class="unit-toggle">
+                <button
+                  type="button"
+                  :class="{ active: padding[side.key].unit === 'mm' }"
+                  @click="updatePaddingUnit(side.key, 'mm')"
+                >mm</button>
+                <button
+                  type="button"
+                  :class="{ active: padding[side.key].unit === 'px' }"
+                  @click="updatePaddingUnit(side.key, 'px')"
+                >px</button>
+              </div>
             </div>
           </div>
         </div>
@@ -1255,29 +1279,31 @@ defineExpose({ handleIframeClick, close, visible });
   font-size: 0.875rem;
 }
 
-.setting__section-header {
+/* Setting section structure */
+.setting__header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.25rem;
+  gap: 0.35rem;
+}
+
+.setting__body {
+  padding-left: 1.25rem;
 }
 
 /* Toggle setting checkbox */
 .toggle-setting {
-  display: block;
-  margin-bottom: 0.25rem;
   cursor: pointer;
   accent-color: var(--color-purple, #7c3aed);
+  flex-shrink: 0;
 }
 
-/* Disabled state: grey out fields but keep checkbox interactive */
-/* Clicking anywhere on the subsection enables it */
+/* Disabled state: grey out body but keep header interactive */
+/* Clicking anywhere on the section enables it */
 .setting-disabled {
   cursor: pointer;
 }
 
-.setting-disabled .field,
-.setting-disabled .setting__section-header {
+.setting-disabled .setting__body {
   opacity: 0.4;
   pointer-events: none;
 }