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

settings-subsection → section

Browse source
This commit is contained in:
Julie Blanc 2026-03-06 18:20:19 +01:00
parent 6902a2fd0e
commit c43494f1c2
8 changed files with 43 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

6
public/assets/css/src/_forms-section.scss
View file

@ -1,4 +1,4 @@
.settings-section {
.settings__container {
margin: var(--space-m) 0;
h2 {
@ -17,11 +17,11 @@
}
}
.settings-subsection:not(:last-child) {
.setting__section:not(:last-child) {
border-bottom: 1px solid var(--color-interface-100);
}
.settings-subsection {
.setting__section {
padding: var(--space-xs) 0;
h3 {

2
public/assets/css/src/_settings-popup.scss
View file

@ -50,7 +50,7 @@
background-color: var(--color-panel-bg);
}
.settings-subsection h4 {
.setting__section h4 {
margin: 0 0 0.5rem 0;
font-size: 0.875rem;
font-weight: 600;

14
public/assets/css/style.css
View file

@ -460,29 +460,29 @@ input[type=number] {
.number-input .spinner-buttons button:hover svg path {
fill: var(--color-interface-900);
}
.settings-section {
.settings__container {
margin: var(--space-m) 0;
}
.settings-section h2 {
.settings__container h2 {
margin-bottom: var(--space);
font-weight: 600;
font-size: 1.4rem;
border-bottom: 1px solid var(--color-200);
color: var(--color-800);
}
.settings-section .infos {
.settings__container .infos {
font-size: 0.8rem;
color: var(--color-interface-400);
}
.settings-subsection:not(:last-child) {
.setting__section:not(:last-child) {
border-bottom: 1px solid var(--color-interface-100);
}
.settings-subsection {
.setting__section {
padding: var(--space-xs) 0;
}
.settings-subsection h3 {
.setting__section h3 {
margin-top: calc(var(--space-xs) * 1.5);
margin-bottom: calc(var(--space-xs) * 2);
font-size: 1rem;
@ -590,7 +590,7 @@ input[type=number] {
background-color: var(--color-panel-bg);
}
.settings-subsection h4 {
.setting__section h4 {
margin: 0 0 0.5rem 0;
font-size: 0.875rem;
font-weight: 600;

30
src/components/ElementPopup.vue
View file

@ -17,7 +17,7 @@
<template #controls>
<!-- Font Family -->
<div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.font }" @click="onSubsectionClick('font')">
<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">
<label class="label-with-tooltip" data-css="font-family">Police</label>
@ -40,7 +40,7 @@
</div>
<!-- Font Size -->
<div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.fontSize }" @click="onSubsectionClick('fontSize')">
<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">
<label class="label-with-tooltip" data-css="font-size">Taille du texte</label>
@ -56,7 +56,7 @@
</div>
<!-- LineHeight -->
<div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.lineHeight }" @click="onSubsectionClick('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">
<label class="label-with-tooltip" data-css="line-height">Interlignage</label>
@ -72,7 +72,7 @@
</div>
<!-- Text Alignment -->
<div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.textAlign }" @click="onSubsectionClick('textAlign')">
<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">
<label class="label-with-tooltip" data-css="text-align">Alignement</label>
@ -86,7 +86,7 @@
</div>
<!-- Color -->
<div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.color }" @click="onSubsectionClick('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">
<label class="label-with-tooltip" data-css="color">Couleur du texte</label>
@ -103,7 +103,7 @@
</div>
<!-- Background -->
<div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.background }" @click="onSubsectionClick('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">
<label class="label-with-tooltip" data-css="background">Arrière-plan</label>
@ -119,10 +119,10 @@
</div>
<!-- Bordure -->
<div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.border }" @click="onSubsectionClick('border')">
<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="settings-subsection-header">
<div class="setting__section-header">
<label class="label-with-tooltip" data-css="border">Bordure</label>
</div>
<div class="field-border__options">
@ -164,9 +164,9 @@
</div>
<!-- Outer Margins -->
<div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.margin }" @click="onSubsectionClick('margin')">
<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="settings-subsection-header">
<div class="setting__section-header">
<span class="label-with-tooltip" data-css="margin">Marges extérieures</span>
<button
type="button"
@ -215,9 +215,9 @@
</div>
<!-- Inner Margins (Padding) -->
<div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.padding }" @click="onSubsectionClick('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="settings-subsection-header">
<div class="setting__section-header">
<span class="label-with-tooltip" data-css="padding">Marges intérieures</span>
<button
type="button"
@ -530,7 +530,7 @@ const elementCss = computed(() => {
return stylesheetStore.extractBlock(selector.value) || '';
});
// Canonical property order matching the template settings-subsections
// Canonical property order matching the template setting__sections
const displayedCssOrder = [
// font group
{ css: 'font-family', group: 'font', special: true,
@ -1255,7 +1255,7 @@ defineExpose({ handleIframeClick, close, visible });
font-size: 0.875rem;
}
.settings-subsection-header {
.setting__section-header {
display: flex;
align-items: center;
justify-content: space-between;
@ -1277,7 +1277,7 @@ defineExpose({ handleIframeClick, close, visible });
}
.setting-disabled .field,
.setting-disabled .settings-subsection-header {
.setting-disabled .setting__section-header {
opacity: 0.4;
pointer-events: none;
}

6
src/components/PagePopup.vue
View file

@ -18,7 +18,7 @@
<template #controls>
<!-- Margins -->
<div class="settings-subsection">
<div class="setting__section">
<h4>Marges</h4>
<div class="margin-grid">
<div
@ -156,7 +156,7 @@
</div>
<!-- Background -->
<div class="settings-subsection">
<div class="setting__section">
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
<label class="label-with-tooltip" data-css="background">Arrière-plan</label>
<div class="input-with-color">
@ -172,7 +172,7 @@
</div>
<!-- Patterns -->
<div class="settings-subsection">
<div class="setting__section">
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
<label class="label-with-tooltip" data-css="background-image">Motifs</label>
<select v-model="pattern" :disabled="inheritanceLocked">

16
src/components/editor/PageSettings.vue
View file

@ -1,12 +1,12 @@
<template>
<section
class="settings-section"
id="settings-section_page"
class="settings__container"
id="settings__container_page"
data-color-type="page"
>
<h2>Réglage des pages</h2>
<div class="container">
<div class="settings-subsection">
<div class="setting__section">
<div class="field field-simple">
<label for="page-format" class="label-with-tooltip" data-css="size"
>Format d'impression</label
@ -22,7 +22,7 @@
</div>
</div>
<div class="settings-subsection">
<div class="setting__section">
<div
class="field field-margin"
:class="{ 'field--view-only': !isCustomFormat }"
@ -68,7 +68,7 @@
</div>
</div>
<div class="settings-subsection margins">
<div class="setting__section margins">
<h3>Marges</h3>
<div class="field field-margin">
@ -236,7 +236,7 @@
</div>
</div>
<div class="settings-subsection">
<div class="setting__section">
<div class="field field-simple">
<label
for="background"
@ -273,7 +273,7 @@
</div>
</div>
<div class="settings-subsection" title="Fonctionnalité à venir">
<div class="setting__section" title="Fonctionnalité à venir">
<div class="field field-simple field--view-only">
<label
for="pattern"
@ -290,7 +290,7 @@
</div>
</div>
<div class="settings-subsection">
<div class="setting__section">
<div class="field checkbox-field">
<input id="page-numbers" type="checkbox" v-model="pageNumbers" />
<label

10
src/components/editor/TextSettings.vue
View file

@ -1,5 +1,5 @@
<template>
<section class="settings-section" id="settings-section_elem" data-color-type="elem">
<section class="settings__container" id="settings__container_elem" data-color-type="elem">
<h2>Réglage du texte par défaut</h2>
<div class="container">
@ -9,7 +9,7 @@
</p>
<!-- Police -->
<div class="settings-subsection">
<div class="setting__section">
<div class="field field-font">
<label for="text-font" class="label-with-tooltip" data-css="font-family">Police</label>
<div class="field-font__options">
@ -22,7 +22,7 @@
</div>
<!-- Taille du texte -->
<div class="settings-subsection">
<div class="setting__section">
<div class="field field-text-size">
<label for="text-size-range" class="label-with-tooltip" data-css="font-size">Taille du texte</label>
<InputWithUnit
@ -36,7 +36,7 @@
</div>
<!-- Interlignage -->
<div class="settings-subsection">
<div class="setting__section">
<div class="field field-text-size">
<label for="text-lineheight-range" class="label-with-tooltip" data-css="line-height">Interlignage</label>
<InputWithUnit
@ -50,7 +50,7 @@
</div>
<!-- Couleurs -->
<div class="settings-subsection">
<div class="setting__section">
<div class="field field-simple">
<label for="text-color" class="label-with-tooltip" data-css="color">Couleur</label>
<div class="input-with-color">

2
src/components/ui/BasePopup.vue
View file

@ -17,7 +17,7 @@
<slot name="controls" />
<!-- Lock/Unlock Inheritance Button -->
<div v-if="showInheritance" class="settings-subsection">
<div v-if="showInheritance" class="setting__section">
<button class="inheritance-btn" @click="$emit('toggle-inheritance')">
<svg
v-if="inheritanceLocked"