style panel settings
This commit is contained in:
parent
d604e5d05e
commit
3ae2d0e310
12 changed files with 334 additions and 338 deletions
|
|
@ -91,7 +91,7 @@
|
|||
}
|
||||
|
||||
|
||||
[data-color-type="elem"]{
|
||||
[data-color-type="text"]{
|
||||
--color-050: #f4f0ff;
|
||||
--color-100: #e7e1ff;
|
||||
--color-200: #dacfff;
|
||||
|
|
|
|||
71
public/assets/css/src/_panel-settings.scss
Normal file
71
public/assets/css/src/_panel-settings.scss
Normal 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; }
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -31,6 +31,6 @@
|
|||
--label-w: 18ch;
|
||||
font-size: 14px;
|
||||
|
||||
--panel-w: 540px;
|
||||
--panel-w: 560px;
|
||||
--panel-nav-h: 60px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -176,7 +176,7 @@
|
|||
--color-900: #d96a30;
|
||||
}
|
||||
|
||||
[data-color-type=elem] {
|
||||
[data-color-type=text] {
|
||||
--color-050: #f4f0ff;
|
||||
--color-100: #e7e1ff;
|
||||
--color-200: #dacfff;
|
||||
|
|
@ -241,7 +241,7 @@ img {
|
|||
--input-w-small: 45px;
|
||||
--label-w: 18ch;
|
||||
font-size: 14px;
|
||||
--panel-w: 540px;
|
||||
--panel-w: 560px;
|
||||
--panel-nav-h: 60px;
|
||||
}
|
||||
|
||||
|
|
@ -269,6 +269,61 @@ h2 {
|
|||
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,
|
||||
input[type=text],
|
||||
input[type=number] {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,8 +4,8 @@
|
|||
@use "src/_variables.scss" as *;
|
||||
@use "src/_text.scss" as *;
|
||||
@use "src/_print-styles.scss" as *;
|
||||
@use "src/_panel-settings.scss" as *;
|
||||
@use "src/_forms.scss" as *;
|
||||
@use "src/_forms-section.scss" as *;
|
||||
@use "src/_buttons.scss" as *;
|
||||
@use "src/_toggle-setting.scss" as *;
|
||||
@use "src/_settings-popup.scss" as *;
|
||||
|
|
|
|||
10
public/assets/svg/book.svg
Normal file
10
public/assets/svg/book.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 2 KiB |
10
public/assets/svg/text.svg
Normal file
10
public/assets/svg/text.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,35 +1,39 @@
|
|||
<template>
|
||||
<section
|
||||
class="settings__container"
|
||||
class="panel-settings__container"
|
||||
id="settings__container_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="setting__section">
|
||||
<div class="field field-simple">
|
||||
<label for="page-format" class="label-with-tooltip" data-css="size"
|
||||
>Format d'impression</label
|
||||
>
|
||||
|
||||
<!-- Format d'impression -->
|
||||
<div class="setting__section" data-setting="format">
|
||||
<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">
|
||||
<option value="A4">A4</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>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="setting__section">
|
||||
<div
|
||||
class="field field-margin"
|
||||
:class="{ 'field--view-only': !isCustomFormat }"
|
||||
>
|
||||
<label for="page-width" class="label-with-tooltip" data-css="width"
|
||||
>Largeur</label
|
||||
>
|
||||
<!-- Dimensions -->
|
||||
<div class="setting__section" data-setting="dimensions" :class="{ 'setting-disabled': !isCustomFormat }">
|
||||
<div class="setting__header">
|
||||
<label class="label-with-tooltip" data-css="width / height">Dimensions</label>
|
||||
</div>
|
||||
<div class="setting__body">
|
||||
<div class="field-size-page">
|
||||
<label for="page-width" class="label-with-tooltip" data-css="width">Largeur</label>
|
||||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
id="page-width"
|
||||
|
|
@ -44,14 +48,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="field field-margin"
|
||||
:class="{ 'field--view-only': !isCustomFormat }"
|
||||
>
|
||||
<label for="page-height" class="label-with-tooltip" data-css="height"
|
||||
>Hauteur</label
|
||||
>
|
||||
<div class="field-size-page">
|
||||
<label for="page-height" class="label-with-tooltip" data-css="height">Hauteur</label>
|
||||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
id="page-height"
|
||||
|
|
@ -67,17 +65,16 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="setting__section margins">
|
||||
<h3>Marges</h3>
|
||||
|
||||
<!-- Marges -->
|
||||
<div class="setting__section" data-setting="margin">
|
||||
<div class="setting__header">
|
||||
<label class="label-with-tooltip" data-css="margin">Marges</label>
|
||||
</div>
|
||||
<div class="setting__body">
|
||||
<div class="field field-margin">
|
||||
<label
|
||||
for="margin-top"
|
||||
class="label-with-tooltip"
|
||||
data-css="margin-top"
|
||||
>Haut</label
|
||||
>
|
||||
<label for="margin-top" class="label-with-tooltip" data-css="margin-top">Haut</label>
|
||||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
id="margin-top"
|
||||
|
|
@ -87,38 +84,13 @@
|
|||
@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>
|
||||
<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> -->
|
||||
<button 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field field-margin">
|
||||
<label
|
||||
for="margin-bottom"
|
||||
class="label-with-tooltip"
|
||||
data-css="margin-bottom"
|
||||
>Bas</label
|
||||
>
|
||||
<label for="margin-bottom" class="label-with-tooltip" data-css="margin-bottom">Bas</label>
|
||||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
id="margin-bottom"
|
||||
|
|
@ -128,38 +100,13 @@
|
|||
@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> -->
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field field-margin">
|
||||
<label
|
||||
for="margin-left"
|
||||
class="label-with-tooltip"
|
||||
data-css="margin-left"
|
||||
>Gauche</label
|
||||
>
|
||||
<label for="margin-left" class="label-with-tooltip" data-css="margin-left">Gauche</label>
|
||||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
id="margin-left"
|
||||
|
|
@ -169,38 +116,13 @@
|
|||
@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> -->
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field field-margin">
|
||||
<label
|
||||
for="margin-right"
|
||||
class="label-with-tooltip"
|
||||
data-css="margin-right"
|
||||
>Droite</label
|
||||
>
|
||||
<label for="margin-right" class="label-with-tooltip" data-css="margin-right">Droite</label>
|
||||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
id="margin-right"
|
||||
|
|
@ -210,40 +132,20 @@
|
|||
@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> -->
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="setting__section">
|
||||
<div class="field field-simple">
|
||||
<label
|
||||
for="background"
|
||||
class="label-with-tooltip"
|
||||
data-css="background"
|
||||
>Arrière-plan</label
|
||||
>
|
||||
<!-- Arrière-plan -->
|
||||
<div class="setting__section" data-setting="background">
|
||||
<div class="setting__header">
|
||||
<label class="label-with-tooltip" data-css="background">Arrière-plan</label>
|
||||
</div>
|
||||
<div class="setting__body">
|
||||
<div class="input-with-color">
|
||||
<input
|
||||
ref="backgroundColorInput"
|
||||
|
|
@ -252,35 +154,16 @@
|
|||
v-model="background.value"
|
||||
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 class="setting__section" title="Fonctionnalité à venir">
|
||||
<div class="field field-simple field--view-only">
|
||||
<label
|
||||
for="pattern"
|
||||
class="label-with-tooltip"
|
||||
data-css="background-image"
|
||||
>Motif</label
|
||||
>
|
||||
<!-- Motif -->
|
||||
<div class="setting__section setting-disabled" data-setting="pattern" title="Fonctionnalité à venir">
|
||||
<div class="setting__header">
|
||||
<label class="label-with-tooltip" data-css="background-image">Motif</label>
|
||||
</div>
|
||||
<div class="setting__body">
|
||||
<select id="pattern" v-model="pattern" disabled>
|
||||
<option value="">Choisissez</option>
|
||||
<option value="dots">Points</option>
|
||||
|
|
@ -290,33 +173,30 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="setting__section">
|
||||
<div class="field checkbox-field">
|
||||
<!-- Options -->
|
||||
<div class="setting__section" data-setting="options">
|
||||
<div class="setting__header">
|
||||
<label>Options</label>
|
||||
</div>
|
||||
<div class="setting__body">
|
||||
<div class="field-checkbox">
|
||||
<input id="page-numbers" type="checkbox" v-model="pageNumbers" />
|
||||
<label
|
||||
for="page-numbers"
|
||||
class="label-with-tooltip"
|
||||
data-css="@bottom-left/right"
|
||||
>Numéro de page</label
|
||||
>
|
||||
<label for="page-numbers" class="label-with-tooltip" data-css="@bottom-left/right">Numéro de page</label>
|
||||
</div>
|
||||
<div class="field-checkbox">
|
||||
<input id="running-title" type="checkbox" v-model="runningTitle" />
|
||||
<label for="running-title" class="label-with-tooltip" data-css="string-set">Titre courant</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field checkbox-field">
|
||||
<input id="running-title" type="checkbox" v-model="runningTitle" />
|
||||
<label
|
||||
for="running-title"
|
||||
class="label-with-tooltip"
|
||||
data-css="string-set"
|
||||
>Titre courant</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted, inject } from 'vue';
|
||||
import bookIcon from '/assets/svg/book.svg?raw';
|
||||
import { useStylesheetStore } from '../../stores/stylesheet';
|
||||
import { useDebounce } from '../../composables/useDebounce';
|
||||
import { useCssSync } from '../../composables/useCssSync';
|
||||
|
|
|
|||
|
|
@ -1,30 +1,34 @@
|
|||
<template>
|
||||
<section class="settings__container" id="settings__container_elem" data-color-type="elem">
|
||||
<h2>Réglage du texte par défaut</h2>
|
||||
<section class="panel-settings__container" id="settings__container_elem" data-color-type="text">
|
||||
|
||||
|
||||
<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">
|
||||
|
||||
<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 -->
|
||||
<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">
|
||||
<div class="setting__section" data-setting="font">
|
||||
<div class="setting__header">
|
||||
<label class="label-with-tooltip" data-css="font-family">Police</label>
|
||||
</div>
|
||||
<div class="setting__body">
|
||||
<select id="text-font" v-model="font">
|
||||
<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>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Taille du texte -->
|
||||
<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>
|
||||
<div class="setting__section" data-setting="fontSize">
|
||||
<div class="setting__header">
|
||||
<label class="label-with-tooltip" data-css="font-size">Taille du texte</label>
|
||||
</div>
|
||||
<div class="setting__body">
|
||||
<InputWithUnit
|
||||
v-model="fontSize"
|
||||
:units="['px']"
|
||||
|
|
@ -36,9 +40,11 @@
|
|||
</div>
|
||||
|
||||
<!-- Interlignage -->
|
||||
<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>
|
||||
<div class="setting__section" data-setting="lineHeight">
|
||||
<div class="setting__header">
|
||||
<label class="label-with-tooltip" data-css="line-height">Interlignage</label>
|
||||
</div>
|
||||
<div class="setting__body">
|
||||
<InputWithUnit
|
||||
v-model="lineHeight"
|
||||
:units="['px']"
|
||||
|
|
@ -49,17 +55,18 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Couleurs -->
|
||||
<div class="setting__section">
|
||||
<div class="field field-simple">
|
||||
<label for="text-color" class="label-with-tooltip" data-css="color">Couleur</label>
|
||||
<!-- Couleur -->
|
||||
<div class="setting__section" data-setting="color">
|
||||
<div class="setting__header">
|
||||
<label class="label-with-tooltip" data-css="color">Couleur</label>
|
||||
</div>
|
||||
<div class="setting__body">
|
||||
<div class="input-with-color">
|
||||
<input
|
||||
ref="colorInput"
|
||||
id="text-color"
|
||||
type="text"
|
||||
v-model="color"
|
||||
class="color-input"
|
||||
data-coloris
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -73,6 +80,7 @@
|
|||
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, nextTick } from 'vue';
|
||||
import textIcon from '/assets/svg/text.svg?raw';
|
||||
import { initColoris } from '../../composables/useColoris';
|
||||
import InputWithUnit from '../ui/InputWithUnit.vue';
|
||||
import { useCssUpdater } from '../../composables/useCssUpdater';
|
||||
|
|
|
|||
|
|
@ -372,13 +372,18 @@ export function useElementSettings({ margin, padding, basePopup }) {
|
|||
|
||||
if (hasAnyProp) {
|
||||
for (const prop of styleProps) {
|
||||
if (prop.group !== group || !(prop.css in parsed)) continue;
|
||||
if (prop.group !== group) continue;
|
||||
if (prop.css in parsed) {
|
||||
if (prop.css === 'font-family') {
|
||||
const firstFont = parsed[prop.css].split(',')[0].trim().replace(/['"]/g, '');
|
||||
fontFamily.value = firstFont;
|
||||
} else {
|
||||
prop.set(parsed[prop.css]);
|
||||
}
|
||||
} else {
|
||||
// Property removed from CSS: reset to default
|
||||
prop.set('normal');
|
||||
}
|
||||
}
|
||||
for (const prop of unitProps) {
|
||||
if (prop.group !== group || !(prop.css in parsed)) continue;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue