From 1dad95b726ded7dec678b86b109407a50a7e055b Mon Sep 17 00:00:00 2001
From: Julie Blanc <julieblanc@Julies-MacBook-Pro.local>
Date: Fri, 6 Mar 2026 17:53:10 +0100
Subject: [PATCH] toggle setting popup on block

---
 src/components/ElementPopup.vue | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/ElementPopup.vue b/src/components/ElementPopup.vue
index d79aedf..c7c3a06 100644
--- a/src/components/ElementPopup.vue
+++ b/src/components/ElementPopup.vue
@@ -17,7 +17,7 @@
 
     <template #controls>
       <!-- Font Family -->
-      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.font }">
+      <div class="settings-subsection" :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">
           <label class="label-with-tooltip" data-css="font-family">Police</label>
@@ -39,7 +39,7 @@
       </div>
 
       <!-- Font Size -->
-      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.fontSize }">
+      <div class="settings-subsection" :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">
           <label class="label-with-tooltip" data-css="font-size">Taille du texte</label>
@@ -54,7 +54,7 @@
       </div>
 
       <!-- LineHeight -->
-      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.lineHeight }">
+      <div class="settings-subsection" :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">
           <label class="label-with-tooltip" data-css="line-height">Interlignage</label>
@@ -69,7 +69,7 @@
       </div>
 
       <!-- Text Alignment -->
-      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.textAlign }">
+      <div class="settings-subsection" :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">
           <label class="label-with-tooltip" data-css="text-align">Alignement</label>
@@ -83,7 +83,7 @@
       </div>
 
       <!-- Color -->
-      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.color }">
+      <div class="settings-subsection" :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">
           <label class="label-with-tooltip" data-css="color">Couleur du texte</label>
@@ -99,7 +99,7 @@
       </div>
 
       <!-- Background -->
-      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.background }">
+      <div class="settings-subsection" :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">
           <label class="label-with-tooltip" data-css="background">Arrière-plan</label>
@@ -115,7 +115,7 @@
       </div>
 
       <!-- Bordure -->
-      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.border }">
+      <div class="settings-subsection" :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="settings-subsection-header">
@@ -160,7 +160,7 @@
       </div>
 
       <!-- Outer Margins -->
-      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.margin }">
+      <div class="settings-subsection" :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="settings-subsection-header">
           <span class="label-with-tooltip" data-css="margin">Marges extérieures</span>
@@ -211,7 +211,7 @@
       </div>
 
       <!-- Inner Margins (Padding) -->
-      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.padding }">
+      <div class="settings-subsection" :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="settings-subsection-header">
           <span class="label-with-tooltip" data-css="padding">Marges intérieures</span>
@@ -688,6 +688,12 @@ const removeSpecialGroupProps = (group) => {
   }
 };
 
+// Click on the whole subsection div enables the group (only when disabled)
+const onSubsectionClick = (group) => {
+  if (settingEnabled[group]) return;
+  onToggleSetting(group, true);
+};
+
 // Toggle a setting group on/off
 const onToggleSetting = (group, enabled) => {
   settingEnabled[group] = enabled;
@@ -1261,6 +1267,11 @@ defineExpose({ handleIframeClick, close, visible });
 }
 
 /* Disabled state: grey out fields but keep checkbox interactive */
+/* Clicking anywhere on the subsection enables it */
+.setting-disabled {
+  cursor: pointer;
+}
+
 .setting-disabled .field,
 .setting-disabled .settings-subsection-header {
   opacity: 0.4;