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; margin: var(--space-m) 0;
h2 { h2 {
@ -17,11 +17,11 @@
} }
} }
.settings-subsection:not(:last-child) { .setting__section:not(:last-child) {
border-bottom: 1px solid var(--color-interface-100); border-bottom: 1px solid var(--color-interface-100);
} }
.settings-subsection { .setting__section {
padding: var(--space-xs) 0; padding: var(--space-xs) 0;
h3 { h3 {

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

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

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

6
src/components/PagePopup.vue
View file

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

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

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

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

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

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

@ -17,7 +17,7 @@
<slot name="controls" /> <slot name="controls" />
<!-- Lock/Unlock Inheritance Button --> <!-- 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')"> <button class="inheritance-btn" @click="$emit('toggle-inheritance')">
<svg <svg
v-if="inheritanceLocked" v-if="inheritanceLocked"