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

styles w/ differents colors

Browse source
This commit is contained in:
Julie Blanc 2025-12-09 17:08:40 +01:00
parent 678698b55d
commit 718aae2c23
13 changed files with 667 additions and 196 deletions
Download patch file Download diff file Expand all files Collapse all files

72
public/assets/css/src/_buttons.scss
View file

@ -1,23 +1,59 @@
button {
cursor: pointer;
border: 1px solid var(--color-interface-300);
color: var(--color-interface-300);
background-color: var(--color-panel-bg);
border-radius: var(--border-radius);
padding: 0.1rem 0.3rem;
.unit-toggle{
button:not(.spinner-btn) {
cursor: pointer;
border: 1px solid var(--color-interface-400);
color: var(--color-interface-400);
background-color: var(--color-panel-bg);
border-radius: var(--border-radius);
padding: 0.1rem 0.3rem;
height: calc(var(--input-h)*0.75);
&.active {
border: 1px solid var(--color-interface-700);
color: var(--color-interface-700);
background-color: var(--color-interface-100);
}
&.tab {
&.active {
background-color: var(--color-txt);
color: #fff;
border: none;
&:not(.active):hover{
background-color: var(--color-interface-100);
}
&.active {
// border: 1px solid var(--color-interface-700);
color: var(--color-interface-050);
background-color: var(--color-interface-500);
cursor: auto;
}
}
}
#editor-panel .tabs{
.tab{
color: var(--color-interface-600);
font-size: 1rem;
font-family: var(--sans-serif);
height: var(--input-h);
padding: 0 1ch;
border: 1px solid currentColor;
border-radius: calc(var(--input-h));
font-weight: 500;
&.active{
background-color: var(--color-interface-400);
border-color: var(--color-interface-400);
color: var(--color-panel-bg);
}
&:not(.active):hover{
cursor: pointer;
background-color: var(--color-interface-100);
}
}
// .tab {
// &.active {
// background-color: var(--color-txt);
// color: #fff;
// border: none;
// }
// }
}

303
public/assets/css/src/_forms.scss
View file

@ -1,14 +1,15 @@
select,
input[type="text"],
input[type="number"] {
background-color: white;
// border-radius: 4px;
min-height: 20px;
height: var(--input-h);
border: 1px solid var(--color-interface-200);
background-color: var(--color-interface-100);
font-family: var(--sans-serif);
font-size: 1rem;
// min-width: var(--input-w);
// width: 100%;
// padding: 0 1ch;
}
@ -20,8 +21,8 @@ input[type="number"] {
/* Label with CSS tooltip */
.label-with-tooltip {
text-decoration: underline dotted;
text-decoration-color: var(--color-browngray-200);
text-decoration: underline dotted 2px;
text-decoration-color: var(--color-interface-200);
text-underline-offset: 2px;
cursor: help;
position: relative;
@ -35,7 +36,7 @@ input[type="number"] {
padding: 0.25rem 0.5rem;
background: var(--color-browngray-700);
color: var(--color-browngray-100);
font-family: "Courier New", Courier, monospace;
font-family: var(--mono);
font-size: 0.75rem;
border-radius: 4px;
white-space: nowrap;
@ -54,12 +55,52 @@ input[type="number"] {
}
.settings-section {
h2 {
border-bottom: 1px solid #000;
margin-bottom: var(--space-xs);
margin-top: 3em;
&#settings-section_page{
--color: var(--color-page-highlight);
}
&#settings-section_text{
--color: var(--color-purple);
}
.container{
border: 1px solid var(--color);
border-radius: var(--border-radius);
padding: 0.5em 1em;
}
h2 {
margin-bottom: var(--space-xs);
font-weight: 500;
font-size: 1rem;
border-radius: var(--border-radius);
height: var(--input-h);
padding: 0 1ch;
display: flex;
align-items: center;
color: var(--color-panel-bg);
background-color: var(--color);
// border: 2px solid var(--color);
// color: var(--color);
}
.infos{
font-size: 0.8rem;
color: var(--color-interface-400);
}
.settings-subsection:not(:last-child) {
border-bottom: 1px solid var(--color-browngray-050);
border-bottom: 1px solid var(--color-interface-100);
}
.settings-subsection {
@ -72,67 +113,227 @@ input[type="number"] {
.field {
display: flex;
label,
select {
width: 50%;
// label{
// width: var(--label-w);
// background-color: red;
// flex-grow: 3;
// }
label {
font-weight: 600;
}
input {
padding: 0.1rem 0.1rem 0.1rem 0.3rem;
}
.input-with-unit {
display: flex;
gap: 0.3rem;
.unit-toggle {
display: flex;
gap: 0.3rem;
}
}
.unit-toggle {
height: var(--input-h);
display: flex;
gap: 0.3rem;
align-items: center;
}
.input-with-color {
width: 50%;
width: 100%;
.clr-field {
display: flex;
button {
position: absolute;
transform: none;
height: 1.1rem;
top: auto;
right: auto;
cursor: pointer;
width: 100%;
display: grid;
grid-template-columns: var(--input-h);
grid-gap: 1ch;
button{
grid-column: 1;
position: relative;
border-radius: var(--border-radius);
}
input{
grid-column: 2;
}
input {
padding-left: 2.5rem;
width: 100%;
}
}
}
}
&.margins {
display: flex;
flex-wrap: wrap;
row-gap: var(--space-xs);
h3 {
.field{
display: grid;
grid-template-columns: var(--label-w) 1fr;
label{
align-self: center;
}
}
.field-font{
display: grid;
grid-template-columns: var(--label-w) 1fr;
grid-template-rows: var(--input-h) var(--input-h);
select{
width: 100%;
}
.field {
width: 50%;
label {
width: 30%;
}
.input-with-unit {
input {
width: 50%;
}
.field-checkbox{
padding-top: var(--space-xs);
label{
font-weight: 400;
margin-left: 0.75ch;
}
}
}
.field-margin, .field-size{
display: inline-grid;
width: calc(50% - 1ch);
grid-template-columns: 6.5ch var(--input-w-small) 1fr;
margin-bottom: var(--space-xs);
input{
width: var(--input-w-small);
padding-left: 0.75ch;
}
&:nth-of-type(odd){
margin-right: 2ch;
}
}
.checkbox-field{
margin-bottom: var(--space-xs);
grid-template-columns: 3ch 1fr;
input{
justify-self: left;
margin: 0;
}
}
}
}
// INPUT NUMBER ===============================================
// Masquer les spinners natifs partout
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
.number-input{
position: relative;
// padding: 0 1ch!important;
input{
padding-top: 0;
padding-bottom: 0;
}
.spinner-buttons{
height: var(--input-h);
width: var(--input-h);
display: flex;
flex-direction: column;
position: absolute;
right: 0;
top: 0;
button{
height: calc(var(--input-h)*0.6);
cursor: pointer;
padding: 0;
svg path{
fill: var(--color-interface-600);
}
&:hover{
svg path{
fill: var(--color-interface-900);
}
}
}
.spinner-down{
svg{
position: relative;
top: -2px;
}
}
}
}
// Composant NumberInput avec boutons personnalisés
// .number-input {
// position: relative;
// display: flex;
// align-items: center;
// width: 100%;
// position: relative;
// input[type="number"] {
// width: 100%;
// box-sizing: border-box;
// }
// .spinner-buttons {
// background-color: red;
// position: absolute;
// right: 1px;
// top: 1px;
// bottom: 1px;
// display: flex;
// flex-direction: column;
// justify-content: center;
// gap: 1px;
// z-index: 10;
// .spinner-btn {
// display: flex;
// align-items: center;
// justify-content: center;
// width: 20px;
// height: 10px;
// padding: 0;
// margin: 0;
// background-color: var(--color-interface-200);
// border: 1px solid var(--color-interface-300);
// border-radius: 2px;
// cursor: pointer;
// transition: background-color 0.15s ease;
// color: var(--color-interface-700);
// line-height: 0;
// svg {
// width: 8px;
// height: 6px;
// display: block;
// }
// &:hover:not(:disabled) {
// background-color: var(--color-interface-300);
// color: var(--color-interface-900);
// }
// &:active:not(:disabled) {
// background-color: var(--color-interface-400);
// }
// &:disabled {
// opacity: 0.3;
// cursor: not-allowed;
// }
// }
// }
// }

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

@ -85,4 +85,11 @@
--sans-serif: 'DM Sans', sans-serif;
--mono: 'Inconsolata', monospace;
--input-h: 26px;
--input-w: 160px;
--input-w-small: 45px;
--label-w: 18ch;
font-size: 14px;
}

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

@ -204,6 +204,11 @@ button {
--curve: cubic-bezier(0.86, 0, 0.07, 1);
--sans-serif: "DM Sans", sans-serif;
--mono: "Inconsolata", monospace;
--input-h: 26px;
--input-w: 160px;
--input-w-small: 45px;
--label-w: 18ch;
font-size: 14px;
}
body {
@ -233,11 +238,11 @@ h2 {
select,
input[type=text],
input[type=number] {
background-color: white;
min-height: 20px;
height: var(--input-h);
border: 1px solid var(--color-interface-200);
background-color: var(--color-interface-100);
font-family: var(--sans-serif);
font-size: 1rem;
}
.field--view-only {
@ -246,9 +251,9 @@ input[type=number] {
/* Label with CSS tooltip */
.label-with-tooltip {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
text-decoration-color: var(--color-browngray-200);
-webkit-text-decoration: underline dotted 2px;
text-decoration: underline dotted 2px;
text-decoration-color: var(--color-interface-200);
text-underline-offset: 2px;
cursor: help;
position: relative;
@ -262,7 +267,7 @@ input[type=number] {
padding: 0.25rem 0.5rem;
background: var(--color-browngray-700);
color: var(--color-browngray-100);
font-family: "Courier New", Courier, monospace;
font-family: var(--mono);
font-size: 0.75rem;
border-radius: 4px;
white-space: nowrap;
@ -276,12 +281,38 @@ input[type=number] {
visibility: visible;
}
.settings-section {
margin-top: 3em;
}
.settings-section#settings-section_page {
--color: var(--color-page-highlight);
}
.settings-section#settings-section_text {
--color: var(--color-purple);
}
.settings-section .container {
border: 1px solid var(--color);
border-radius: var(--border-radius);
padding: 0.5em 1em;
}
.settings-section h2 {
border-bottom: 1px solid #000;
margin-bottom: var(--space-xs);
font-weight: 500;
font-size: 1rem;
border-radius: var(--border-radius);
height: var(--input-h);
padding: 0 1ch;
display: flex;
align-items: center;
color: var(--color-panel-bg);
background-color: var(--color);
}
.settings-section .infos {
font-size: 0.8rem;
color: var(--color-interface-400);
}
.settings-section .settings-subsection:not(:last-child) {
border-bottom: 1px solid var(--color-browngray-050);
border-bottom: 1px solid var(--color-interface-100);
}
.settings-section .settings-subsection {
padding: var(--space-xs) 0;
@ -292,74 +323,159 @@ input[type=number] {
.settings-section .settings-subsection .field {
display: flex;
}
.settings-section .settings-subsection .field label,
.settings-section .settings-subsection .field select {
width: 50%;
}
.settings-section .settings-subsection .field input {
padding: 0.1rem 0.1rem 0.1rem 0.3rem;
.settings-section .settings-subsection .field label {
font-weight: 600;
}
.settings-section .settings-subsection .field .input-with-unit {
display: flex;
gap: 0.3rem;
}
.settings-section .settings-subsection .field .input-with-unit .unit-toggle {
.settings-section .settings-subsection .field .unit-toggle {
height: var(--input-h);
display: flex;
gap: 0.3rem;
align-items: center;
}
.settings-section .settings-subsection .field .input-with-color {
width: 50%;
width: 100%;
}
.settings-section .settings-subsection .field .input-with-color .clr-field {
display: flex;
width: 100%;
display: grid;
grid-template-columns: var(--input-h);
grid-gap: 1ch;
}
.settings-section .settings-subsection .field .input-with-color .clr-field button {
position: absolute;
transform: none;
height: 1.1rem;
top: auto;
right: auto;
cursor: pointer;
grid-column: 1;
position: relative;
border-radius: var(--border-radius);
}
.settings-section .settings-subsection .field .input-with-color .clr-field input {
padding-left: 2.5rem;
grid-column: 2;
}
.settings-section .settings-subsection .field {
display: grid;
grid-template-columns: var(--label-w) 1fr;
}
.settings-section .settings-subsection .field label {
align-self: center;
}
.settings-section .settings-subsection .field-font {
display: grid;
grid-template-columns: var(--label-w) 1fr;
grid-template-rows: var(--input-h) var(--input-h);
}
.settings-section .settings-subsection .field-font select {
width: 100%;
}
.settings-section .settings-subsection.margins {
display: flex;
flex-wrap: wrap;
row-gap: var(--space-xs);
.settings-section .settings-subsection .field-font .field-checkbox {
padding-top: var(--space-xs);
}
.settings-section .settings-subsection.margins h3 {
width: 100%;
.settings-section .settings-subsection .field-font .field-checkbox label {
font-weight: 400;
margin-left: 0.75ch;
}
.settings-section .settings-subsection.margins .field {
width: 50%;
.settings-section .settings-subsection .field-margin, .settings-section .settings-subsection .field-size {
display: inline-grid;
width: calc(50% - 1ch);
grid-template-columns: 6.5ch var(--input-w-small) 1fr;
margin-bottom: var(--space-xs);
}
.settings-section .settings-subsection.margins .field label {
width: 30%;
.settings-section .settings-subsection .field-margin input, .settings-section .settings-subsection .field-size input {
width: var(--input-w-small);
padding-left: 0.75ch;
}
.settings-section .settings-subsection.margins .field .input-with-unit input {
width: 50%;
.settings-section .settings-subsection .field-margin:nth-of-type(odd), .settings-section .settings-subsection .field-size:nth-of-type(odd) {
margin-right: 2ch;
}
.settings-section .settings-subsection .checkbox-field {
margin-bottom: var(--space-xs);
grid-template-columns: 3ch 1fr;
}
.settings-section .settings-subsection .checkbox-field input {
justify-self: left;
margin: 0;
}
button {
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
.number-input {
position: relative;
}
.number-input input {
padding-top: 0;
padding-bottom: 0;
}
.number-input .spinner-buttons {
height: var(--input-h);
width: var(--input-h);
display: flex;
flex-direction: column;
position: absolute;
right: 0;
top: 0;
}
.number-input .spinner-buttons button {
height: calc(var(--input-h) * 0.6);
cursor: pointer;
border: 1px solid var(--color-interface-300);
color: var(--color-interface-300);
padding: 0;
}
.number-input .spinner-buttons button svg path {
fill: var(--color-interface-600);
}
.number-input .spinner-buttons button:hover svg path {
fill: var(--color-interface-900);
}
.number-input .spinner-buttons .spinner-down svg {
position: relative;
top: -2px;
}
.unit-toggle button:not(.spinner-btn) {
cursor: pointer;
border: 1px solid var(--color-interface-400);
color: var(--color-interface-400);
background-color: var(--color-panel-bg);
border-radius: var(--border-radius);
padding: 0.1rem 0.3rem;
height: calc(var(--input-h) * 0.75);
}
button.active {
border: 1px solid var(--color-interface-700);
color: var(--color-interface-700);
.unit-toggle button:not(.spinner-btn):not(.active):hover {
background-color: var(--color-interface-100);
}
button.tab.active {
background-color: var(--color-txt);
color: #fff;
border: none;
.unit-toggle button:not(.spinner-btn).active {
color: var(--color-interface-050);
background-color: var(--color-interface-500);
cursor: auto;
}
#editor-panel .tabs .tab {
color: var(--color-interface-600);
font-size: 1rem;
font-family: var(--sans-serif);
height: var(--input-h);
padding: 0 1ch;
border: 1px solid currentColor;
border-radius: calc(var(--input-h));
font-weight: 500;
}
#editor-panel .tabs .tab.active {
background-color: var(--color-interface-400);
border-color: var(--color-interface-400);
color: var(--color-panel-bg);
}
#editor-panel .tabs .tab:not(.active):hover {
cursor: pointer;
background-color: var(--color-interface-100);
}
.settings-popup {

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

File diff suppressed because one or more lines are too long

29
src/components/ElementPopup.vue
View file

@ -58,10 +58,10 @@
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
<label class="label-with-tooltip" data-css="font-size">Taille du texte</label>
<div class="input-with-unit">
<input
type="number"
v-model.number="fontSize.value"
min="0"
<NumberInput
v-model="fontSize.value"
:min="0"
:step="1"
:disabled="inheritanceLocked"
/>
<div class="unit-toggle">
@ -109,7 +109,7 @@
<!-- Color -->
<div class="settings-subsection">
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
<div class="field field-simple" :class="{ 'field--view-only': inheritanceLocked }">
<label class="label-with-tooltip" data-css="color">Couleur</label>
<div class="input-with-color">
<input
@ -125,7 +125,7 @@
<!-- Background -->
<div class="settings-subsection">
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
<div class="field field-simple" :class="{ 'field--view-only': inheritanceLocked }">
<label class="label-with-tooltip" data-css="background">Arrière-plan</label>
<div class="input-with-color">
<input
@ -144,10 +144,10 @@
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
<label class="label-with-tooltip" data-css="margin">Marges extérieures</label>
<div class="input-with-unit">
<input
type="number"
v-model.number="marginOuter.value"
min="0"
<NumberInput
v-model="marginOuter.value"
:min="0"
:step="1"
:disabled="inheritanceLocked"
/>
<div class="unit-toggle">
@ -177,10 +177,10 @@
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
<label class="label-with-tooltip" data-css="padding">Marges intérieures</label>
<div class="input-with-unit">
<input
type="number"
v-model.number="paddingInner.value"
min="0"
<NumberInput
v-model="paddingInner.value"
:min="0"
:step="1"
:disabled="inheritanceLocked"
/>
<div class="unit-toggle">
@ -274,6 +274,7 @@
import { ref, computed, watch } from 'vue';
import { useStylesheetStore } from '../stores/stylesheet';
import { usePopupPosition } from '../composables/usePopupPosition';
import NumberInput from './ui/NumberInput.vue';
import Coloris from '@melloware/coloris';
import '@melloware/coloris/dist/coloris.css';
import hljs from 'highlight.js/lib/core';

33
src/components/PagePopup.vue
View file

@ -27,10 +27,10 @@
>
<label class="label-with-tooltip" data-css="margin-top">Haut</label>
<div class="input-with-unit">
<input
type="number"
v-model.number="margins.top.value"
min="0"
<NumberInput
v-model="margins.top.value"
:min="0"
:step="1"
:disabled="inheritanceLocked"
/>
<div class="unit-toggle">
@ -68,10 +68,10 @@
>
<label class="label-with-tooltip" data-css="margin-bottom">Bas</label>
<div class="input-with-unit">
<input
type="number"
v-model.number="margins.bottom.value"
min="0"
<NumberInput
v-model="margins.bottom.value"
:min="0"
:step="1"
:disabled="inheritanceLocked"
/>
<div class="unit-toggle">
@ -109,10 +109,10 @@
>
<label class="label-with-tooltip" data-css="margin-left">Gauche</label>
<div class="input-with-unit">
<input
type="number"
v-model.number="margins.left.value"
min="0"
<NumberInput
v-model="margins.left.value"
:min="0"
:step="1"
:disabled="inheritanceLocked"
/>
<div class="unit-toggle">
@ -150,10 +150,10 @@
>
<label class="label-with-tooltip" data-css="margin-right">Droite</label>
<div class="input-with-unit">
<input
type="number"
v-model.number="margins.right.value"
min="0"
<NumberInput
v-model="margins.right.value"
:min="0"
:step="1"
:disabled="inheritanceLocked"
/>
<div class="unit-toggle">
@ -285,6 +285,7 @@
import { ref, computed, watch, onMounted } from 'vue';
import { useStylesheetStore } from '../stores/stylesheet';
import { usePopupPosition } from '../composables/usePopupPosition';
import NumberInput from './ui/NumberInput.vue';
import Coloris from '@melloware/coloris';
import '@melloware/coloris/dist/coloris.css';
import hljs from 'highlight.js/lib/core';

7
src/components/editor/EditorPanel.vue
View file

@ -70,7 +70,7 @@ const activeTab = inject('activeTab');
position: fixed;
top: 0;
left: 0;
width: 35rem;
width: 38rem;
height: 100vh;
display: flex;
flex-direction: column;
@ -119,7 +119,7 @@ nav {
position: relative;
left: -35rem;
padding: 4rem 1rem 1rem 1rem;
padding: 4rem 0;
background-color: var(--color-panel-bg);
box-shadow: -5px 0px 12px;
@ -134,5 +134,8 @@ nav {
.tab-panel {
height: 100%;
overflow-y: auto;
overflow-x:hidden;
padding-right: 2em;
padding-left: 1em;
}
</style>

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

@ -1,9 +1,11 @@
<template>
<section class="settings-section">
<section class="settings-section" id="settings-section_page">
<h2>Réglage des pages</h2>
<div class="container">
<div class="settings-subsection">
<div class="field">
<div class="field field-simple">
<label for="page-format" class="label-with-tooltip" data-css="size"
>Format d'impression</label
>
@ -18,7 +20,7 @@
</div>
<div class="settings-subsection">
<div class="field field--view-only">
<div class="field field-size field--view-only">
<label for="page-width" class="label-with-tooltip" data-css="width"
>Largeur</label
>
@ -31,7 +33,7 @@
<button type="button" disabled>mm</button>
</div>
<div class="field field--view-only">
<div class="field field-size field--view-only">
<label for="page-height" class="label-with-tooltip" data-css="height"
>Hauteur</label
>
@ -48,16 +50,16 @@
<div class="settings-subsection margins">
<h3>Marges</h3>
<div class="field">
<div class="field field-margin">
<label for="margin-top" class="label-with-tooltip" data-css="margin-top"
>Haut</label
>
<div class="input-with-unit">
<input
<NumberInput
id="margin-top"
type="number"
v-model.number="margins.top.value"
min="0"
v-model="margins.top.value"
:min="0"
:step="1"
/>
<div class="unit-toggle">
<button
@ -85,7 +87,7 @@
</div>
</div>
<div class="field">
<div class="field field-margin">
<label
for="margin-bottom"
class="label-with-tooltip"
@ -93,11 +95,11 @@
>Bas</label
>
<div class="input-with-unit">
<input
<NumberInput
id="margin-bottom"
type="number"
v-model.number="margins.bottom.value"
min="0"
v-model="margins.bottom.value"
:min="0"
:step="1"
/>
<div class="unit-toggle">
<button
@ -125,7 +127,7 @@
</div>
</div>
<div class="field">
<div class="field field-margin">
<label
for="margin-left"
class="label-with-tooltip"
@ -133,11 +135,11 @@
>Gauche</label
>
<div class="input-with-unit">
<input
<NumberInput
id="margin-left"
type="number"
v-model.number="margins.left.value"
min="0"
v-model="margins.left.value"
:min="0"
:step="1"
/>
<div class="unit-toggle">
<button
@ -165,7 +167,7 @@
</div>
</div>
<div class="field">
<div class="field field-margin">
<label
for="margin-right"
class="label-with-tooltip"
@ -173,11 +175,11 @@
>Droite</label
>
<div class="input-with-unit">
<input
<NumberInput
id="margin-right"
type="number"
v-model.number="margins.right.value"
min="0"
v-model="margins.right.value"
:min="0"
:step="1"
/>
<div class="unit-toggle">
<button
@ -207,7 +209,7 @@
</div>
<div class="settings-subsection">
<div class="field">
<div class="field field-simple">
<label for="background" class="label-with-tooltip" data-css="background"
>Arrière-plan</label
>
@ -242,7 +244,7 @@
</div>
<div class="settings-subsection">
<div class="field">
<div class="field field-simple">
<label
for="pattern"
class="label-with-tooltip"
@ -279,6 +281,7 @@
>
</div>
</div>
</div>
</section>
</template>
@ -286,6 +289,7 @@
import { ref, computed, watch, onMounted, inject } from 'vue';
import { useStylesheetStore } from '../../stores/stylesheet';
import Coloris from '@melloware/coloris';
import NumberInput from '../ui/NumberInput.vue';
import '@melloware/coloris/dist/coloris.css';
const stylesheetStore = useStylesheetStore();

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

@ -1,6 +1,8 @@
<template>
<section class="settings-section">
<section class="settings-section" id="settings-section_text">
<h2>Réglage du texte</h2>
<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.
@ -8,7 +10,7 @@
<!-- Police -->
<div class="settings-subsection">
<div class="field">
<div class="field field-font">
<label for="text-font" class="label-with-tooltip" data-css="font-family">Police</label>
<div class="field-with-option">
<select id="text-font" v-model="font">
@ -46,7 +48,7 @@
<!-- Alignement -->
<div class="settings-subsection">
<div class="field">
<div class="field field-simple">
<label for="text-alignment" class="label-with-tooltip" data-css="text-align">Alignement</label>
<select id="text-alignment" v-model="alignment">
<option v-for="a in alignments" :key="a.value" :value="a.value">
@ -58,7 +60,7 @@
<!-- Couleurs -->
<div class="settings-subsection">
<div class="field">
<div class="field field-simple">
<label for="text-color" class="label-with-tooltip" data-css="color">Couleur</label>
<div class="input-with-color">
<input
@ -70,7 +72,11 @@
/>
</div>
</div>
<div class="field">
</div>
<!-- Couleurs // arrière plan -->
<div class="settings-subsection">
<div class="field field-simple">
<label for="text-background" class="label-with-tooltip" data-css="background">Arrière-plan</label>
<div class="input-with-color">
<input
@ -111,6 +117,8 @@
@change="handleMarginInnerChange"
/>
</div>
</div>
</section>
</template>

10
src/components/ui/InputWithUnit.vue
View file

@ -9,14 +9,13 @@
:step="step"
@input="updateValue(Number($event.target.value))"
/>
<input
type="number"
:value="modelValue.value"
<NumberInput
:modelValue="modelValue.value"
:min="min"
:max="max"
:step="step"
class="size-input"
@input="updateValue(Number($event.target.value))"
inputClass="size-input"
@update:modelValue="updateValue"
/>
<UnitToggle
:modelValue="modelValue.unit"
@ -28,6 +27,7 @@
</template>
<script setup>
import NumberInput from './NumberInput.vue';
import UnitToggle from './UnitToggle.vue';
const props = defineProps({

25
src/components/ui/MarginEditor.vue
View file

@ -1,14 +1,14 @@
<template>
<div class="margin-editor">
<div class="field">
<div class="field field-margin-all">
<label :for="id" class="label-with-tooltip" :data-css="cssProperty">{{ label }}</label>
<div class="input-with-unit">
<input
<NumberInput
:id="id"
type="number"
:value="simple.value"
min="0"
@input="updateSimpleValue(Number($event.target.value))"
:modelValue="simple.value"
:min="0"
:step="1"
@update:modelValue="updateSimpleValue"
/>
<UnitToggle
:modelValue="simple.unit"
@ -28,15 +28,15 @@
</div>
<div v-if="expanded" class="subsection collapsed-section">
<div v-for="side in sides" :key="side.key" class="field">
<div v-for="side in sides" :key="side.key" class="field field-margin">
<label :for="`${id}-${side.key}`" class="label-with-tooltip" :data-css="`${cssProperty}-${side.key}`">{{ side.label }}</label>
<div class="input-with-unit">
<input
<NumberInput
:id="`${id}-${side.key}`"
type="number"
:value="detailed[side.key].value"
min="0"
@input="updateDetailedValue(side.key, Number($event.target.value))"
:modelValue="detailed[side.key].value"
:min="0"
:step="1"
@update:modelValue="(value) => updateDetailedValue(side.key, value)"
/>
<UnitToggle
:modelValue="detailed[side.key].unit"
@ -51,6 +51,7 @@
<script setup>
import { ref, watch } from 'vue';
import NumberInput from './NumberInput.vue';
import UnitToggle from './UnitToggle.vue';
const props = defineProps({

93
src/components/ui/NumberInput.vue Normal file
View file

@ -0,0 +1,93 @@
<template>
<div class="number-input">
<input
type="number"
:value="modelValue"
:min="min"
:max="max"
:step="step"
:id="id"
:class="inputClass"
:disabled="disabled"
@input="handleInput"
/>
<div class="spinner-buttons">
<button
type="button"
class="spinner-btn spinner-up"
@click="increment"
:disabled="disabled || (max !== undefined && modelValue >= max)"
tabindex="-1"
>
<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 0L7.4641 6H0.535898L4 0Z" fill="currentColor"/>
</svg>
</button>
<button
type="button"
class="spinner-btn spinner-down"
@click="decrement"
:disabled="disabled || (min !== undefined && modelValue <= min)"
tabindex="-1"
>
<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 6L0.535898 0H7.4641L4 6Z" fill="currentColor"/>
</svg>
</button>
</div>
</div>
</template>
<script setup>
const props = defineProps({
modelValue: {
type: Number,
required: true
},
min: {
type: Number,
default: undefined
},
max: {
type: Number,
default: undefined
},
step: {
type: Number,
default: 1
},
id: {
type: String,
default: undefined
},
inputClass: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
}
});
const emit = defineEmits(['update:modelValue']);
const handleInput = (event) => {
const value = Number(event.target.value);
emit('update:modelValue', value);
};
const increment = () => {
const newValue = props.modelValue + props.step;
if (props.max === undefined || newValue <= props.max) {
emit('update:modelValue', newValue);
}
};
const decrement = () => {
const newValue = props.modelValue - props.step;
if (props.min === undefined || newValue >= props.min) {
emit('update:modelValue', newValue);
}
};
</script>