studio-variable/geoproject-app
4
0
Fork 0
Code Issues 25 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

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>