studio-variable/geoproject-app
4
0
Fork 0
Code Issues 25 Pull requests Projects Releases Packages Wiki Activity Actions

toggle setting popup on block

Browse source
This commit is contained in:
Julie Blanc 2026-03-06 17:53:10 +01:00
parent 295f63d271
commit 1dad95b726
1 changed files with 20 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/components/ElementPopup.vue
View file

@ -17,7 +17,7 @@
<template #controls> <template #controls>
<!-- Font Family --> <!-- 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)" /> <input type="checkbox" class="toggle-setting" :checked="settingEnabled.font" @change="onToggleSetting('font', $event.target.checked)" />
<div class="field field-font"> <div class="field field-font">
<label class="label-with-tooltip" data-css="font-family">Police</label> <label class="label-with-tooltip" data-css="font-family">Police</label>
@ -39,7 +39,7 @@
</div> </div>
<!-- Font Size --> <!-- 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)" /> <input type="checkbox" class="toggle-setting" :checked="settingEnabled.fontSize" @change="onToggleSetting('fontSize', $event.target.checked)" />
<div class="field field-text-size"> <div class="field field-text-size">
<label class="label-with-tooltip" data-css="font-size">Taille du texte</label> <label class="label-with-tooltip" data-css="font-size">Taille du texte</label>
@ -54,7 +54,7 @@
</div> </div>
<!-- LineHeight --> <!-- 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)" /> <input type="checkbox" class="toggle-setting" :checked="settingEnabled.lineHeight" @change="onToggleSetting('lineHeight', $event.target.checked)" />
<div class="field field-text-size"> <div class="field field-text-size">
<label class="label-with-tooltip" data-css="line-height">Interlignage</label> <label class="label-with-tooltip" data-css="line-height">Interlignage</label>
@ -69,7 +69,7 @@
</div> </div>
<!-- Text Alignment --> <!-- 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)" /> <input type="checkbox" class="toggle-setting" :checked="settingEnabled.textAlign" @change="onToggleSetting('textAlign', $event.target.checked)" />
<div class="field"> <div class="field">
<label class="label-with-tooltip" data-css="text-align">Alignement</label> <label class="label-with-tooltip" data-css="text-align">Alignement</label>
@ -83,7 +83,7 @@
</div> </div>
<!-- Color --> <!-- 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)" /> <input type="checkbox" class="toggle-setting" :checked="settingEnabled.color" @change="onToggleSetting('color', $event.target.checked)" />
<div class="field field-simple"> <div class="field field-simple">
<label class="label-with-tooltip" data-css="color">Couleur du texte</label> <label class="label-with-tooltip" data-css="color">Couleur du texte</label>
@ -99,7 +99,7 @@
</div> </div>
<!-- Background --> <!-- 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)" /> <input type="checkbox" class="toggle-setting" :checked="settingEnabled.background" @change="onToggleSetting('background', $event.target.checked)" />
<div class="field field-simple"> <div class="field field-simple">
<label class="label-with-tooltip" data-css="background">Arrière-plan</label> <label class="label-with-tooltip" data-css="background">Arrière-plan</label>
@ -115,7 +115,7 @@
</div> </div>
<!-- Bordure --> <!-- 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)" /> <input type="checkbox" class="toggle-setting" :checked="settingEnabled.border" @change="onToggleSetting('border', $event.target.checked)" />
<div class="field field-border"> <div class="field field-border">
<div class="settings-subsection-header"> <div class="settings-subsection-header">
@ -160,7 +160,7 @@
</div> </div>
<!-- Outer Margins --> <!-- 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)" /> <input type="checkbox" class="toggle-setting" :checked="settingEnabled.margin" @change="onToggleSetting('margin', $event.target.checked)" />
<div class="settings-subsection-header"> <div class="settings-subsection-header">
<span class="label-with-tooltip" data-css="margin">Marges extérieures</span> <span class="label-with-tooltip" data-css="margin">Marges extérieures</span>
@ -211,7 +211,7 @@
</div> </div>
<!-- Inner Margins (Padding) --> <!-- 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)" /> <input type="checkbox" class="toggle-setting" :checked="settingEnabled.padding" @change="onToggleSetting('padding', $event.target.checked)" />
<div class="settings-subsection-header"> <div class="settings-subsection-header">
<span class="label-with-tooltip" data-css="padding">Marges intérieures</span> <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 // Toggle a setting group on/off
const onToggleSetting = (group, enabled) => { const onToggleSetting = (group, enabled) => {
settingEnabled[group] = enabled; settingEnabled[group] = enabled;
@ -1261,6 +1267,11 @@ defineExpose({ handleIframeClick, close, visible });
} }
/* Disabled state: grey out fields but keep checkbox interactive */ /* 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 .field,
.setting-disabled .settings-subsection-header { .setting-disabled .settings-subsection-header {
opacity: 0.4; opacity: 0.4;