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

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>