restructuration settings popup
This commit is contained in:
Julie Blanc
parent
c43494f1c2
commit
3853d0d6e3
1 changed files with 117 additions and 91 deletions
|
|
@ -16,13 +16,16 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #controls>
|
<template #controls>
|
||||||
|
|
||||||
<!-- Font Family -->
|
<!-- Font Family -->
|
||||||
<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="setting__section" data-setting="font" :class="{ 'setting-disabled': !settingEnabled.font }" @click="onSubsectionClick('font')">
|
||||||
<div class="field field-font">
|
<div class="setting__header">
|
||||||
|
<input type="checkbox" class="toggle-setting" :checked="settingEnabled.font" @change="onToggleSetting('font', $event.target.checked)" />
|
||||||
<label class="label-with-tooltip" data-css="font-family">Police</label>
|
<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>
|
<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">
|
<select v-model="fontFamily">
|
||||||
<option value="sans-serif">Police système (sans-serif)</option>
|
<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>
|
<option v-for="f in projectFonts" :key="f.name" :value="f.name" :style="{ fontFamily: `'${f.name}', ${f.category}` }">{{ f.name }}</option>
|
||||||
|
|
@ -35,16 +38,18 @@
|
||||||
<input type="checkbox" v-model="bold" />
|
<input type="checkbox" v-model="bold" />
|
||||||
<label class="label-with-tooltip" data-css="font-weight">Gras</label>
|
<label class="label-with-tooltip" data-css="font-weight">Gras</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Font Size -->
|
<!-- Font Size -->
|
||||||
<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="setting__section" data-setting="fontSize" :class="{ 'setting-disabled': !settingEnabled.fontSize }" @click="onSubsectionClick('fontSize')">
|
||||||
<div class="field field-text-size">
|
<div class="setting__header">
|
||||||
|
<input type="checkbox" class="toggle-setting" :checked="settingEnabled.fontSize" @change="onToggleSetting('fontSize', $event.target.checked)" />
|
||||||
<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>
|
||||||
<p class="info-default">Valeur par défaut : {{ textDefaults.fontSize.value }}{{ textDefaults.fontSize.unit }}</p>
|
<p class="info-default">Valeur par défaut : {{ textDefaults.fontSize.value }}{{ textDefaults.fontSize.unit }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="setting__body">
|
||||||
<InputWithUnit
|
<InputWithUnit
|
||||||
v-model="fontSizeModel"
|
v-model="fontSizeModel"
|
||||||
:units="['px']"
|
:units="['px']"
|
||||||
|
|
@ -56,11 +61,14 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- LineHeight -->
|
<!-- 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="setting__section" data-setting="lineHeight" :class="{ 'setting-disabled': !settingEnabled.lineHeight }" @click="onSubsectionClick('lineHeight')">
|
||||||
<div class="field field-text-size">
|
<div class="setting__header">
|
||||||
|
<input type="checkbox" class="toggle-setting" :checked="settingEnabled.lineHeight" @change="onToggleSetting('lineHeight', $event.target.checked)" />
|
||||||
<label class="label-with-tooltip" data-css="line-height">Interlignage</label>
|
<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>
|
<p class="info-default">Valeur par défaut : {{ textDefaults.lineHeight.value }}{{ textDefaults.lineHeight.unit }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="setting__body">
|
||||||
<InputWithUnit
|
<InputWithUnit
|
||||||
v-model="lineHeightModel"
|
v-model="lineHeightModel"
|
||||||
:units="['px']"
|
:units="['px']"
|
||||||
|
|
@ -72,10 +80,13 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Text Alignment -->
|
<!-- Text Alignment -->
|
||||||
<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="setting__section" data-setting="textAlign" :class="{ 'setting-disabled': !settingEnabled.textAlign }" @click="onSubsectionClick('textAlign')">
|
||||||
<div class="field">
|
<div class="setting__header">
|
||||||
|
<input type="checkbox" class="toggle-setting" :checked="settingEnabled.textAlign" @change="onToggleSetting('textAlign', $event.target.checked)" />
|
||||||
<label class="label-with-tooltip" data-css="text-align">Alignement</label>
|
<label class="label-with-tooltip" data-css="text-align">Alignement</label>
|
||||||
|
</div>
|
||||||
|
<div class="setting__body">
|
||||||
<select v-model="textAlign">
|
<select v-model="textAlign">
|
||||||
<option value="left">Gauche</option>
|
<option value="left">Gauche</option>
|
||||||
<option value="center">Centre</option>
|
<option value="center">Centre</option>
|
||||||
|
|
@ -86,11 +97,14 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Color -->
|
<!-- 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="setting__section" data-setting="color" :class="{ 'setting-disabled': !settingEnabled.color }" @click="onSubsectionClick('color')">
|
||||||
<div class="field field-simple">
|
<div class="setting__header">
|
||||||
|
<input type="checkbox" class="toggle-setting" :checked="settingEnabled.color" @change="onToggleSetting('color', $event.target.checked)" />
|
||||||
<label class="label-with-tooltip" data-css="color">Couleur du texte</label>
|
<label class="label-with-tooltip" data-css="color">Couleur du texte</label>
|
||||||
<p class="info-default">Valeur par défaut : {{ textDefaults.color }}</p>
|
<p class="info-default">Valeur par défaut : {{ textDefaults.color }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="setting__body">
|
||||||
<div class="input-with-color">
|
<div class="input-with-color">
|
||||||
<input
|
<input
|
||||||
ref="colorInput"
|
ref="colorInput"
|
||||||
|
|
@ -103,10 +117,13 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Background -->
|
<!-- 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="setting__section" data-setting="background" :class="{ 'setting-disabled': !settingEnabled.background }" @click="onSubsectionClick('background')">
|
||||||
<div class="field field-simple">
|
<div class="setting__header">
|
||||||
|
<input type="checkbox" class="toggle-setting" :checked="settingEnabled.background" @change="onToggleSetting('background', $event.target.checked)" />
|
||||||
<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>
|
||||||
|
<div class="setting__body">
|
||||||
<div class="input-with-color">
|
<div class="input-with-color">
|
||||||
<input
|
<input
|
||||||
ref="backgroundInput"
|
ref="backgroundInput"
|
||||||
|
|
@ -119,12 +136,13 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Bordure -->
|
<!-- Bordure -->
|
||||||
<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="setting__section" data-setting="border" :class="{ 'setting-disabled': !settingEnabled.border }" @click="onSubsectionClick('border')">
|
||||||
<div class="field field-border">
|
<div class="setting__header">
|
||||||
<div class="setting__section-header">
|
<input type="checkbox" class="toggle-setting" :checked="settingEnabled.border" @change="onToggleSetting('border', $event.target.checked)" />
|
||||||
<label class="label-with-tooltip" data-css="border">Bordure</label>
|
<label class="label-with-tooltip" data-css="border">Bordure</label>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="setting__body">
|
||||||
<div class="field-border__options">
|
<div class="field-border__options">
|
||||||
<div class="field-border__option">
|
<div class="field-border__option">
|
||||||
<label class="label-with-tooltip" data-css="border-width">Épaisseur</label>
|
<label class="label-with-tooltip" data-css="border-width">Épaisseur</label>
|
||||||
|
|
@ -164,10 +182,11 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Outer Margins -->
|
<!-- Outer Margins -->
|
||||||
<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="setting__section" data-setting="margin" :class="{ 'setting-disabled': !settingEnabled.margin }" @click="onSubsectionClick('margin')">
|
||||||
<div class="setting__section-header">
|
<div class="setting__header">
|
||||||
<span class="label-with-tooltip" data-css="margin">Marges extérieures</span>
|
<input type="checkbox" class="toggle-setting" :checked="settingEnabled.margin" @change="onToggleSetting('margin', $event.target.checked)" />
|
||||||
|
<label class="label-with-tooltip" data-css="margin">Marges extérieures</label>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="lock-toggle"
|
class="lock-toggle"
|
||||||
|
|
@ -185,40 +204,43 @@
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="setting__body">
|
||||||
v-for="side in sides"
|
<div
|
||||||
:key="side.key"
|
v-for="side in sides"
|
||||||
class="field field-margin"
|
:key="side.key"
|
||||||
>
|
class="field field-margin"
|
||||||
<label class="label-with-tooltip" :data-css="`margin-${side.key}`">{{ side.label }}</label>
|
>
|
||||||
<div class="input-with-unit">
|
<label class="label-with-tooltip" :data-css="`margin-${side.key}`">{{ side.label }}</label>
|
||||||
<NumberInput
|
<div class="input-with-unit">
|
||||||
:modelValue="margin[side.key].value"
|
<NumberInput
|
||||||
:min="0"
|
:modelValue="margin[side.key].value"
|
||||||
:step="1"
|
:min="0"
|
||||||
@update:modelValue="(v) => updateMarginValue(side.key, v)"
|
:step="1"
|
||||||
/>
|
@update:modelValue="(v) => updateMarginValue(side.key, v)"
|
||||||
<div class="unit-toggle">
|
/>
|
||||||
<button
|
<div class="unit-toggle">
|
||||||
type="button"
|
<button
|
||||||
:class="{ active: margin[side.key].unit === 'mm' }"
|
type="button"
|
||||||
@click="updateMarginUnit(side.key, 'mm')"
|
:class="{ active: margin[side.key].unit === 'mm' }"
|
||||||
>mm</button>
|
@click="updateMarginUnit(side.key, 'mm')"
|
||||||
<button
|
>mm</button>
|
||||||
type="button"
|
<button
|
||||||
:class="{ active: margin[side.key].unit === 'px' }"
|
type="button"
|
||||||
@click="updateMarginUnit(side.key, 'px')"
|
:class="{ active: margin[side.key].unit === 'px' }"
|
||||||
>px</button>
|
@click="updateMarginUnit(side.key, 'px')"
|
||||||
|
>px</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Inner Margins (Padding) -->
|
<!-- Inner Margins (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="setting__section" data-setting="padding" :class="{ 'setting-disabled': !settingEnabled.padding }" @click="onSubsectionClick('padding')">
|
||||||
<div class="setting__section-header">
|
<div class="setting__header">
|
||||||
<span class="label-with-tooltip" data-css="padding">Marges intérieures</span>
|
<input type="checkbox" class="toggle-setting" :checked="settingEnabled.padding" @change="onToggleSetting('padding', $event.target.checked)" />
|
||||||
|
<label class="label-with-tooltip" data-css="padding">Marges intérieures</label>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="lock-toggle"
|
class="lock-toggle"
|
||||||
|
|
@ -236,30 +258,32 @@
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="setting__body">
|
||||||
v-for="side in sides"
|
<div
|
||||||
:key="side.key"
|
v-for="side in sides"
|
||||||
class="field field-margin"
|
:key="side.key"
|
||||||
>
|
class="field field-margin"
|
||||||
<label class="label-with-tooltip" :data-css="`padding-${side.key}`">{{ side.label }}</label>
|
>
|
||||||
<div class="input-with-unit">
|
<label class="label-with-tooltip" :data-css="`padding-${side.key}`">{{ side.label }}</label>
|
||||||
<NumberInput
|
<div class="input-with-unit">
|
||||||
:modelValue="padding[side.key].value"
|
<NumberInput
|
||||||
:min="0"
|
:modelValue="padding[side.key].value"
|
||||||
:step="1"
|
:min="0"
|
||||||
@update:modelValue="(v) => updatePaddingValue(side.key, v)"
|
:step="1"
|
||||||
/>
|
@update:modelValue="(v) => updatePaddingValue(side.key, v)"
|
||||||
<div class="unit-toggle">
|
/>
|
||||||
<button
|
<div class="unit-toggle">
|
||||||
type="button"
|
<button
|
||||||
:class="{ active: padding[side.key].unit === 'mm' }"
|
type="button"
|
||||||
@click="updatePaddingUnit(side.key, 'mm')"
|
:class="{ active: padding[side.key].unit === 'mm' }"
|
||||||
>mm</button>
|
@click="updatePaddingUnit(side.key, 'mm')"
|
||||||
<button
|
>mm</button>
|
||||||
type="button"
|
<button
|
||||||
:class="{ active: padding[side.key].unit === 'px' }"
|
type="button"
|
||||||
@click="updatePaddingUnit(side.key, 'px')"
|
:class="{ active: padding[side.key].unit === 'px' }"
|
||||||
>px</button>
|
@click="updatePaddingUnit(side.key, 'px')"
|
||||||
|
>px</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1255,29 +1279,31 @@ defineExpose({ handleIframeClick, close, visible });
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.setting__section-header {
|
/* Setting section structure */
|
||||||
|
.setting__header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
gap: 0.35rem;
|
||||||
margin-bottom: 0.25rem;
|
}
|
||||||
|
|
||||||
|
.setting__body {
|
||||||
|
padding-left: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Toggle setting checkbox */
|
/* Toggle setting checkbox */
|
||||||
.toggle-setting {
|
.toggle-setting {
|
||||||
display: block;
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
accent-color: var(--color-purple, #7c3aed);
|
accent-color: var(--color-purple, #7c3aed);
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Disabled state: grey out fields but keep checkbox interactive */
|
/* Disabled state: grey out body but keep header interactive */
|
||||||
/* Clicking anywhere on the subsection enables it */
|
/* Clicking anywhere on the section enables it */
|
||||||
.setting-disabled {
|
.setting-disabled {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.setting-disabled .field,
|
.setting-disabled .setting__body {
|
||||||
.setting-disabled .setting__section-header {
|
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue