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

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

@ -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">
<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 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>
<!-- 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';