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

style panel settings

Browse source
This commit is contained in:
Julie Blanc 2026-03-07 19:59:01 +01:00
parent d604e5d05e
commit 3ae2d0e310
12 changed files with 334 additions and 338 deletions
Download patch file Download diff file Expand all files Collapse all files

2
public/assets/css/src/_colors.scss
View file

@ -91,7 +91,7 @@
} }
[data-color-type="elem"]{ [data-color-type="text"]{
--color-050: #f4f0ff; --color-050: #f4f0ff;
--color-100: #e7e1ff; --color-100: #e7e1ff;
--color-200: #dacfff; --color-200: #dacfff;

71
public/assets/css/src/_panel-settings.scss Normal file
View file

@ -0,0 +1,71 @@
.panel-settings__container{
// margin-top: var(--space-m);
margin-bottom: var(--space-s);
border: 1px solid var(--color-300);
border-radius: var(--border-radius);
padding: var(--space-s);
.settings__header{
display: flex;
align-items: center;
gap: var(--space-xs);
margin-bottom: var(--space-s);
// border: 1px solid var(--color-300);
// border-radius: var(--border-radius);
// padding: 2px 1ch;
.icon{
position: relative;
top: 2px;
svg{
width: 20px;
height: 20px;
fill: var(--color-600);
}
}
.title{
font-size: 1.2rem;
color: var(--color-600);
}
}
.setting__section{
.setting__header{
color: var(--color-600);
}
}
.setting__section[data-setting="format"]{
border-bottom: none;
padding-bottom: var(--space-xs);
}
.setting__section[data-setting="dimensions"]{
border-top: none;
padding-top: 0;
.setting__header{
display: none;
}
.setting__body{
grid-column: 2;
width: 0;
display: flex;
gap: var(--space-s);
.field-size-page{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-xs);
}
}
.field-size-page:first-of-type .unit-toggle{ display: none; }
}
}

2
public/assets/css/src/_variables.scss
View file

@ -31,6 +31,6 @@
--label-w: 18ch; --label-w: 18ch;
font-size: 14px; font-size: 14px;
--panel-w: 540px; --panel-w: 560px;
--panel-nav-h: 60px; --panel-nav-h: 60px;
} }

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

@ -176,7 +176,7 @@
--color-900: #d96a30; --color-900: #d96a30;
} }
[data-color-type=elem] { [data-color-type=text] {
--color-050: #f4f0ff; --color-050: #f4f0ff;
--color-100: #e7e1ff; --color-100: #e7e1ff;
--color-200: #dacfff; --color-200: #dacfff;
@ -241,7 +241,7 @@ img {
--input-w-small: 45px; --input-w-small: 45px;
--label-w: 18ch; --label-w: 18ch;
font-size: 14px; font-size: 14px;
--panel-w: 540px; --panel-w: 560px;
--panel-nav-h: 60px; --panel-nav-h: 60px;
} }
@ -269,6 +269,61 @@ h2 {
string-set: title content(text); string-set: title content(text);
} }
.panel-settings__container {
margin-bottom: var(--space-s);
border: 1px solid var(--color-300);
border-radius: var(--border-radius);
padding: var(--space-s);
}
.panel-settings__container .settings__header {
display: flex;
align-items: center;
gap: var(--space-xs);
margin-bottom: var(--space-s);
}
.panel-settings__container .settings__header .icon {
position: relative;
top: 2px;
}
.panel-settings__container .settings__header .icon svg {
width: 20px;
height: 20px;
fill: var(--color-600);
}
.panel-settings__container .settings__header .title {
font-size: 1.2rem;
color: var(--color-600);
}
.panel-settings__container .setting__section .setting__header {
color: var(--color-600);
}
.panel-settings__container .setting__section[data-setting=format] {
border-bottom: none;
padding-bottom: var(--space-xs);
}
.panel-settings__container .setting__section[data-setting=dimensions] {
border-top: none;
padding-top: 0;
}
.panel-settings__container .setting__section[data-setting=dimensions] .setting__header {
display: none;
}
.panel-settings__container .setting__section[data-setting=dimensions] .setting__body {
grid-column: 2;
width: 0;
display: flex;
gap: var(--space-s);
}
.panel-settings__container .setting__section[data-setting=dimensions] .setting__body .field-size-page {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-xs);
}
.panel-settings__container .setting__section[data-setting=dimensions] .field-size-page:first-of-type .unit-toggle {
display: none;
}
select, select,
input[type=text], input[type=text],
input[type=number] { input[type=number] {

2
public/assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

2
public/assets/css/style.scss
View file

@ -4,8 +4,8 @@
@use "src/_variables.scss" as *; @use "src/_variables.scss" as *;
@use "src/_text.scss" as *; @use "src/_text.scss" as *;
@use "src/_print-styles.scss" as *; @use "src/_print-styles.scss" as *;
@use "src/_panel-settings.scss" as *;
@use "src/_forms.scss" as *; @use "src/_forms.scss" as *;
@use "src/_forms-section.scss" as *;
@use "src/_buttons.scss" as *; @use "src/_buttons.scss" as *;
@use "src/_toggle-setting.scss" as *; @use "src/_toggle-setting.scss" as *;
@use "src/_settings-popup.scss" as *; @use "src/_settings-popup.scss" as *;

10
public/assets/svg/book.svg Normal file
View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 93 93" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g id="Artboard1" transform="matrix(1,0,0,1,-4,-16)">
<rect x="4" y="16" width="93" height="93" style="fill:none;"/>
<g transform="matrix(1,0,0,1,0.497582,12.49946)">
<path d="M48.766,20.68C46.766,19.864 44.453,19.2 41.918,18.727C39.164,18.215 36.145,17.93 32.961,17.93C28.543,17.93 24.41,18.481 20.871,19.438C17.528,20.344 14.731,21.606 12.739,23.098L12.739,73.036C19.61,70.622 25.661,69.431 31.505,69.337C37.294,69.243 42.852,70.227 48.77,72.157L48.77,20.672L48.766,20.68ZM87.258,73.024L87.262,23.102C85.274,21.606 82.477,20.344 79.129,19.442C75.59,18.481 71.457,17.934 67.039,17.934C63.856,17.934 60.836,18.215 58.082,18.731C55.547,19.204 53.234,19.868 51.234,20.684L51.234,72.168C57.234,70.219 62.875,69.227 68.695,69.32C74.547,69.414 80.554,70.605 87.261,73.023L87.258,73.024ZM10.274,27.958L10.274,74.798C10.274,75.478 10.825,76.032 11.508,76.032C11.7,76.032 11.876,75.989 12.04,75.915C19.294,73.22 25.556,71.9 31.548,71.806C37.555,71.708 43.329,72.841 49.603,75.048C49.876,75.142 50.157,75.138 50.411,75.048C56.767,72.829 62.63,71.689 68.665,71.782C74.712,71.88 80.954,73.216 88.063,75.947C88.696,76.189 89.407,75.872 89.649,75.239C89.704,75.095 89.731,74.947 89.731,74.802L89.739,74.802L89.731,27.958C90.387,28.228 91.02,28.513 91.622,28.813C92.454,29.228 93.212,29.665 93.887,30.122L93.887,82.071C89.176,79.54 81.664,77.856 73.973,77.122C64.86,76.255 55.399,76.712 50.004,78.677C44.61,76.712 35.152,76.255 26.035,77.122C18.34,77.856 10.832,79.54 6.121,82.071L6.117,30.118C6.793,29.665 7.547,29.227 8.383,28.809C8.985,28.509 9.617,28.224 10.274,27.954L10.274,27.958Z"/>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

10
public/assets/svg/text.svg Normal file
View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 29 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g id="Artboard1" transform="matrix(1,0,0,1,-1,-1)">
<rect x="1" y="1" width="29" height="29" style="fill:none;"/>
<g transform="matrix(1,0,0,1,-0.5,-0.5)">
<path d="M5,2C3.344,2 2,3.344 2,5L2,27C2,28.656 3.344,30 5,30L27,30C28.656,30 30,28.656 30,27L30,5C30,3.344 28.656,2 27,2L5,2ZM8,8L18,8C18.552,8 19,8.448 19,9L19,11C19,11.552 18.552,12 18,12C17.448,12 17,11.552 17,11L17,10L14,10L14,22L15,22C15.552,22 16,22.448 16,23C16,23.552 15.552,24 15,24L11,24C10.448,24 10,23.552 10,23C10,22.448 10.448,22 11,22L12,22L12,10L9,10L9,11C9,11.552 8.552,12 8,12C7.448,12 7,11.552 7,11L7,9C7,8.448 7.448,8 8,8ZM18,14L24,14C24.552,14 25,14.448 25,15L25,17C25,17.552 24.552,18 24,18C23.448,18 23,17.552 23,17L23,16L22,16L22,22C22.552,22 23,22.448 23,23C23,23.552 22.552,24 22,24L20,24C19.448,24 19,23.552 19,23C19,22.448 19.448,22 20,22L20,16L19,16L19,17C19,17.552 18.552,18 18,18C17.448,18 17,17.552 17,17L17,15C17,14.448 17.448,14 18,14Z"/>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

43
src/components/ElementPopup.vue
View file

@ -415,48 +415,5 @@ defineExpose({ handleIframeClick, close: handleClose, visible });
/* Toggle setting checkbox */
/* .toggle-setting {
cursor: pointer;
accent-color: var(--color-purple, #7c3aed);
flex-shrink: 0;
} */
/* Disabled state: grey out body but keep header interactive */
/* Clicking anywhere on the section enables it */
/* .setting-disabled {
cursor: pointer;
}
.setting-disabled .setting__body {
opacity: 0.4;
pointer-events: none;
}
.lock-toggle {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: 1px solid transparent;
border-radius: 3px;
cursor: pointer;
padding: 2px 4px;
color: var(--color-text-muted, #999);
transition: color 0.15s, border-color 0.15s;
}
.lock-toggle:hover:not(:disabled) {
color: var(--color-text, #333);
border-color: var(--color-border, #ccc);
}
.lock-toggle.locked {
color: var(--color-purple, #7c3aed);
}
.lock-toggle:disabled {
opacity: 0.4;
cursor: not-allowed;
} */
</style> </style>

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

@ -1,249 +1,151 @@
<template> <template>
<section <section
class="settings__container" class="panel-settings__container"
id="settings__container_page" id="settings__container_page"
data-color-type="page" data-color-type="page"
> >
<h2>Réglage des pages</h2>
<div class="settings__header">
<div class="icon" v-html="bookIcon"></div>
<h2 class="title">Réglage des pages</h2>
</div>
<div class="container"> <div class="container">
<div class="setting__section">
<div class="field field-simple"> <!-- Format d'impression -->
<label for="page-format" class="label-with-tooltip" data-css="size" <div class="setting__section" data-setting="format">
>Format d'impression</label <div class="setting__header">
> <label class="label-with-tooltip" data-css="size">Format d'impression</label>
</div>
<div class="setting__body">
<select id="page-format" v-model="pageFormat"> <select id="page-format" v-model="pageFormat">
<option value="A4">A4</option> <option value="A4">A4</option>
<option value="A5">A5</option> <option value="A5">A5</option>
<!-- <option value="A3">A3</option>
<option value="letter">Letter</option>
<option value="legal">Legal</option> -->
<option value="custom">Personnalisé</option> <option value="custom">Personnalisé</option>
</select> </select>
</div> </div>
</div> </div>
<div class="setting__section"> <!-- Dimensions -->
<div <div class="setting__section" data-setting="dimensions" :class="{ 'setting-disabled': !isCustomFormat }">
class="field field-margin" <div class="setting__header">
:class="{ 'field--view-only': !isCustomFormat }" <label class="label-with-tooltip" data-css="width / height">Dimensions</label>
> </div>
<label for="page-width" class="label-with-tooltip" data-css="width" <div class="setting__body">
>Largeur</label <div class="field-size-page">
> <label for="page-width" class="label-with-tooltip" data-css="width">Largeur</label>
<div class="input-with-unit"> <div class="input-with-unit">
<NumberInput <NumberInput
id="page-width" id="page-width"
:modelValue="customWidth" :modelValue="customWidth"
@update:modelValue="(v) => (customWidth = v)" @update:modelValue="(v) => (customWidth = v)"
:min="50" :min="50"
:step="1" :step="1"
:disabled="!isCustomFormat" :disabled="!isCustomFormat"
/> />
<div class="unit-toggle"> <div class="unit-toggle">
<button type="button" class="active">mm</button> <button type="button" class="active">mm</button>
</div>
</div> </div>
</div> </div>
</div> <div class="field-size-page">
<label for="page-height" class="label-with-tooltip" data-css="height">Hauteur</label>
<div <div class="input-with-unit">
class="field field-margin" <NumberInput
:class="{ 'field--view-only': !isCustomFormat }" id="page-height"
> :modelValue="customHeight"
<label for="page-height" class="label-with-tooltip" data-css="height" @update:modelValue="(v) => (customHeight = v)"
>Hauteur</label :min="50"
> :step="1"
<div class="input-with-unit"> :disabled="!isCustomFormat"
<NumberInput />
id="page-height" <div class="unit-toggle">
:modelValue="customHeight" <button type="button" class="active">mm</button>
@update:modelValue="(v) => (customHeight = v)" </div>
:min="50"
:step="1"
:disabled="!isCustomFormat"
/>
<div class="unit-toggle">
<button type="button" class="active">mm</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="setting__section margins"> <!-- Marges -->
<h3>Marges</h3> <div class="setting__section" data-setting="margin">
<div class="setting__header">
<div class="field field-margin"> <label class="label-with-tooltip" data-css="margin">Marges</label>
<label </div>
for="margin-top" <div class="setting__body">
class="label-with-tooltip" <div class="field field-margin">
data-css="margin-top" <label for="margin-top" class="label-with-tooltip" data-css="margin-top">Haut</label>
>Haut</label <div class="input-with-unit">
> <NumberInput
<div class="input-with-unit"> id="margin-top"
<NumberInput :modelValue="margins.top.value"
id="margin-top" :min="0"
:modelValue="margins.top.value" :step="1"
:min="0" @update:modelValue="(value) => (margins.top.value = value)"
:step="1" />
@update:modelValue="(value) => (margins.top.value = value)" <div class="unit-toggle">
/> <button type="button" :class="{ active: margins.top.unit === 'mm' }" @click="updateMarginUnit('top', 'mm')">mm</button>
<div class="unit-toggle"> <button type="button" :class="{ active: margins.top.unit === 'px' }" @click="updateMarginUnit('top', 'px')">px</button>
<button </div>
type="button"
:class="{ active: margins.top.unit === 'mm' }"
@click="updateMarginUnit('top', 'mm')"
>
mm
</button>
<button
type="button"
:class="{ active: margins.top.unit === 'px' }"
@click="updateMarginUnit('top', 'px')"
>
px
</button>
<!-- <button
type="button"
:class="{ active: margins.top.unit === 'rem' }"
@click="updateMarginUnit('top', 'rem')"
>
rem
</button> -->
</div> </div>
</div> </div>
</div> <div class="field field-margin">
<label for="margin-bottom" class="label-with-tooltip" data-css="margin-bottom">Bas</label>
<div class="field field-margin"> <div class="input-with-unit">
<label <NumberInput
for="margin-bottom" id="margin-bottom"
class="label-with-tooltip" :modelValue="margins.bottom.value"
data-css="margin-bottom" :min="0"
>Bas</label :step="1"
> @update:modelValue="(value) => (margins.bottom.value = value)"
<div class="input-with-unit"> />
<NumberInput <div class="unit-toggle">
id="margin-bottom" <button type="button" :class="{ active: margins.bottom.unit === 'mm' }" @click="updateMarginUnit('bottom', 'mm')">mm</button>
:modelValue="margins.bottom.value" <button type="button" :class="{ active: margins.bottom.unit === 'px' }" @click="updateMarginUnit('bottom', 'px')">px</button>
:min="0" </div>
:step="1"
@update:modelValue="(value) => (margins.bottom.value = value)"
/>
<div class="unit-toggle">
<button
type="button"
:class="{ active: margins.bottom.unit === 'mm' }"
@click="updateMarginUnit('bottom', 'mm')"
>
mm
</button>
<button
type="button"
:class="{ active: margins.bottom.unit === 'px' }"
@click="updateMarginUnit('bottom', 'px')"
>
px
</button>
<!-- <button
type="button"
:class="{ active: margins.bottom.unit === 'rem' }"
@click="updateMarginUnit('bottom', 'rem')"
>
rem
</button> -->
</div> </div>
</div> </div>
</div> <div class="field field-margin">
<label for="margin-left" class="label-with-tooltip" data-css="margin-left">Gauche</label>
<div class="field field-margin"> <div class="input-with-unit">
<label <NumberInput
for="margin-left" id="margin-left"
class="label-with-tooltip" :modelValue="margins.left.value"
data-css="margin-left" :min="0"
>Gauche</label :step="1"
> @update:modelValue="(value) => (margins.left.value = value)"
<div class="input-with-unit"> />
<NumberInput <div class="unit-toggle">
id="margin-left" <button type="button" :class="{ active: margins.left.unit === 'mm' }" @click="updateMarginUnit('left', 'mm')">mm</button>
:modelValue="margins.left.value" <button type="button" :class="{ active: margins.left.unit === 'px' }" @click="updateMarginUnit('left', 'px')">px</button>
:min="0" </div>
:step="1"
@update:modelValue="(value) => (margins.left.value = value)"
/>
<div class="unit-toggle">
<button
type="button"
:class="{ active: margins.left.unit === 'mm' }"
@click="updateMarginUnit('left', 'mm')"
>
mm
</button>
<button
type="button"
:class="{ active: margins.left.unit === 'px' }"
@click="updateMarginUnit('left', 'px')"
>
px
</button>
<!-- <button
type="button"
:class="{ active: margins.left.unit === 'rem' }"
@click="updateMarginUnit('left', 'rem')"
>
rem
</button> -->
</div> </div>
</div> </div>
</div> <div class="field field-margin">
<label for="margin-right" class="label-with-tooltip" data-css="margin-right">Droite</label>
<div class="field field-margin"> <div class="input-with-unit">
<label <NumberInput
for="margin-right" id="margin-right"
class="label-with-tooltip" :modelValue="margins.right.value"
data-css="margin-right" :min="0"
>Droite</label :step="1"
> @update:modelValue="(value) => (margins.right.value = value)"
<div class="input-with-unit"> />
<NumberInput <div class="unit-toggle">
id="margin-right" <button type="button" :class="{ active: margins.right.unit === 'mm' }" @click="updateMarginUnit('right', 'mm')">mm</button>
:modelValue="margins.right.value" <button type="button" :class="{ active: margins.right.unit === 'px' }" @click="updateMarginUnit('right', 'px')">px</button>
:min="0" </div>
:step="1"
@update:modelValue="(value) => (margins.right.value = value)"
/>
<div class="unit-toggle">
<button
type="button"
:class="{ active: margins.right.unit === 'mm' }"
@click="updateMarginUnit('right', 'mm')"
>
mm
</button>
<button
type="button"
:class="{ active: margins.right.unit === 'px' }"
@click="updateMarginUnit('right', 'px')"
>
px
</button>
<!-- <button
type="button"
:class="{ active: margins.right.unit === 'rem' }"
@click="updateMarginUnit('right', 'rem')"
>
rem
</button> -->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="setting__section"> <!-- Arrière-plan -->
<div class="field field-simple"> <div class="setting__section" data-setting="background">
<label <div class="setting__header">
for="background" <label class="label-with-tooltip" data-css="background">Arrière-plan</label>
class="label-with-tooltip" </div>
data-css="background" <div class="setting__body">
>Arrière-plan</label
>
<div class="input-with-color"> <div class="input-with-color">
<input <input
ref="backgroundColorInput" ref="backgroundColorInput"
@ -252,35 +154,16 @@
v-model="background.value" v-model="background.value"
data-coloris data-coloris
/> />
<!-- Temporarily commented out
<div class="unit-toggle">
<button
type="button"
:class="{ active: background.format === 'rgb' }"
@click="background.format = 'rgb'"
>
rgb
</button>
<button
type="button"
:class="{ active: background.format === 'hex' }"
@click="background.format = 'hex'"
>
hex
</button>
</div> </div>
--></div>
</div> </div>
</div> </div>
<div class="setting__section" title="Fonctionnalité à venir"> <!-- Motif -->
<div class="field field-simple field--view-only"> <div class="setting__section setting-disabled" data-setting="pattern" title="Fonctionnalité à venir">
<label <div class="setting__header">
for="pattern" <label class="label-with-tooltip" data-css="background-image">Motif</label>
class="label-with-tooltip" </div>
data-css="background-image" <div class="setting__body">
>Motif</label
>
<select id="pattern" v-model="pattern" disabled> <select id="pattern" v-model="pattern" disabled>
<option value="">Choisissez</option> <option value="">Choisissez</option>
<option value="dots">Points</option> <option value="dots">Points</option>
@ -290,33 +173,30 @@
</div> </div>
</div> </div>
<div class="setting__section"> <!-- Options -->
<div class="field checkbox-field"> <div class="setting__section" data-setting="options">
<input id="page-numbers" type="checkbox" v-model="pageNumbers" /> <div class="setting__header">
<label <label>Options</label>
for="page-numbers"
class="label-with-tooltip"
data-css="@bottom-left/right"
>Numéro de page</label
>
</div> </div>
<div class="setting__body">
<div class="field checkbox-field"> <div class="field-checkbox">
<input id="running-title" type="checkbox" v-model="runningTitle" /> <input id="page-numbers" type="checkbox" v-model="pageNumbers" />
<label <label for="page-numbers" class="label-with-tooltip" data-css="@bottom-left/right">Numéro de page</label>
for="running-title" </div>
class="label-with-tooltip" <div class="field-checkbox">
data-css="string-set" <input id="running-title" type="checkbox" v-model="runningTitle" />
>Titre courant</label <label for="running-title" class="label-with-tooltip" data-css="string-set">Titre courant</label>
> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
</template> </template>
<script setup> <script setup>
import { ref, computed, watch, onMounted, inject } from 'vue'; import { ref, computed, watch, onMounted, inject } from 'vue';
import bookIcon from '/assets/svg/book.svg?raw';
import { useStylesheetStore } from '../../stores/stylesheet'; import { useStylesheetStore } from '../../stores/stylesheet';
import { useDebounce } from '../../composables/useDebounce'; import { useDebounce } from '../../composables/useDebounce';
import { useCssSync } from '../../composables/useCssSync'; import { useCssSync } from '../../composables/useCssSync';

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

@ -1,30 +1,34 @@
<template> <template>
<section class="settings__container" id="settings__container_elem" data-color-type="elem"> <section class="panel-settings__container" id="settings__container_elem" data-color-type="text">
<h2>Réglage du texte par défaut</h2>
<div class="settings__header">
<div class="icon" v-html="textIcon"></div>
<h2 class="title">Réglage du texte par défaut</h2>
</div>
<div class="container"> <div class="container">
<p class="infos">
Ces réglages s'appliquent à l'ensemble des éléments du document. Vous
pouvez modifier ensuite les éléments indépendamment.
</p>
<!-- Police --> <!-- Police -->
<div class="setting__section"> <div class="setting__section" data-setting="font">
<div class="field field-font"> <div class="setting__header">
<label for="text-font" class="label-with-tooltip" data-css="font-family">Police</label> <label class="label-with-tooltip" data-css="font-family">Police</label>
<div class="field-font__options"> </div>
<select id="text-font" v-model="font"> <div class="setting__body">
<option value="sans-serif">Police système (sans-serif)</option> <select id="text-font" v-model="font">
<option v-for="f in projectFonts" :key="f.name" :value="f.name" :style="{ fontFamily: `'${f.name}', ${f.category}` }">{{ f.name }}</option> <option value="sans-serif">Police système (sans-serif)</option>
</select> <option v-for="f in projectFonts" :key="f.name" :value="f.name" :style="{ fontFamily: `'${f.name}', ${f.category}` }">{{ f.name }}</option>
</div> </select>
</div> </div>
</div> </div>
<!-- Taille du texte --> <!-- Taille du texte -->
<div class="setting__section"> <div class="setting__section" data-setting="fontSize">
<div class="field field-text-size"> <div class="setting__header">
<label for="text-size-range" 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>
</div>
<div class="setting__body">
<InputWithUnit <InputWithUnit
v-model="fontSize" v-model="fontSize"
:units="['px']" :units="['px']"
@ -36,9 +40,11 @@
</div> </div>
<!-- Interlignage --> <!-- Interlignage -->
<div class="setting__section"> <div class="setting__section" data-setting="lineHeight">
<div class="field field-text-size"> <div class="setting__header">
<label for="text-lineheight-range" class="label-with-tooltip" data-css="line-height">Interlignage</label> <label class="label-with-tooltip" data-css="line-height">Interlignage</label>
</div>
<div class="setting__body">
<InputWithUnit <InputWithUnit
v-model="lineHeight" v-model="lineHeight"
:units="['px']" :units="['px']"
@ -49,17 +55,18 @@
</div> </div>
</div> </div>
<!-- Couleurs --> <!-- Couleur -->
<div class="setting__section"> <div class="setting__section" data-setting="color">
<div class="field field-simple"> <div class="setting__header">
<label for="text-color" class="label-with-tooltip" data-css="color">Couleur</label> <label class="label-with-tooltip" data-css="color">Couleur</label>
</div>
<div class="setting__body">
<div class="input-with-color"> <div class="input-with-color">
<input <input
ref="colorInput" ref="colorInput"
id="text-color" id="text-color"
type="text" type="text"
v-model="color" v-model="color"
class="color-input"
data-coloris data-coloris
/> />
</div> </div>
@ -73,6 +80,7 @@
<script setup> <script setup>
import { ref, watch, onMounted, nextTick } from 'vue'; import { ref, watch, onMounted, nextTick } from 'vue';
import textIcon from '/assets/svg/text.svg?raw';
import { initColoris } from '../../composables/useColoris'; import { initColoris } from '../../composables/useColoris';
import InputWithUnit from '../ui/InputWithUnit.vue'; import InputWithUnit from '../ui/InputWithUnit.vue';
import { useCssUpdater } from '../../composables/useCssUpdater'; import { useCssUpdater } from '../../composables/useCssUpdater';

15
src/composables/useElementSettings.js
View file

@ -372,12 +372,17 @@ export function useElementSettings({ margin, padding, basePopup }) {
if (hasAnyProp) { if (hasAnyProp) {
for (const prop of styleProps) { for (const prop of styleProps) {
if (prop.group !== group || !(prop.css in parsed)) continue; if (prop.group !== group) continue;
if (prop.css === 'font-family') { if (prop.css in parsed) {
const firstFont = parsed[prop.css].split(',')[0].trim().replace(/['"]/g, ''); if (prop.css === 'font-family') {
fontFamily.value = firstFont; const firstFont = parsed[prop.css].split(',')[0].trim().replace(/['"]/g, '');
fontFamily.value = firstFont;
} else {
prop.set(parsed[prop.css]);
}
} else { } else {
prop.set(parsed[prop.css]); // Property removed from CSS: reset to default
prop.set('normal');
} }
} }
for (const prop of unitProps) { for (const prop of unitProps) {