restructuration settings popup

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')">
+
+      <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)" />
-        <div class="field field-font">
           <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>
@@ -37,14 +40,16 @@
             </div>
         </div>
       </div>
-      </div>
 
       <!-- Font Size -->
-      <div class="setting__section" :class="{ 'setting-disabled': !settingEnabled.fontSize }" @click="onSubsectionClick('fontSize')">
+
+      <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)" />
-        <div class="field field-text-size">
           <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')">
+
+      <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)" />
-        <div class="field field-text-size">
           <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')">
+
+      <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)" />
-        <div class="field">
           <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')">
+
+      <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)" />
-        <div class="field field-simple">
           <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')">
+
+      <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)" />
-        <div class="field field-simple">
           <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')">
+
+      <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)" />
-        <div class="field field-border">
-          <div class="setting__section-header">
           <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')">
+
+      <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)" />
-        <div class="setting__section-header">
-          <span class="label-with-tooltip" data-css="margin">Marges extérieures</span>
+          <label class="label-with-tooltip" data-css="margin">Marges extérieures</label>
           <button
             type="button"
             class="lock-toggle"
@@ -185,6 +204,7 @@
             </svg>
           </button>
         </div>
+        <div class="setting__body">
           <div
             v-for="side in sides"
             :key="side.key"
@@ -213,12 +233,14 @@
             </div>
           </div>
         </div>
+      </div>
 
       <!-- Inner Margins (Padding) -->
-      <div class="setting__section" :class="{ 'setting-disabled': !settingEnabled.padding }" @click="onSubsectionClick('padding')">
+
+      <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)" />
-        <div class="setting__section-header">
-          <span class="label-with-tooltip" data-css="padding">Marges intérieures</span>
+          <label class="label-with-tooltip" data-css="padding">Marges intérieures</label>
           <button
             type="button"
             class="lock-toggle"
@@ -236,6 +258,7 @@
             </svg>
           </button>
         </div>
+        <div class="setting__body">
           <div
             v-for="side in sides"
             :key="side.key"
@@ -264,6 +287,7 @@
             </div>
           </div>
         </div>
+      </div>
     </template>
   </BasePopup>
 </template>
@@ -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;
 }