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

feat: refactor popups with shared positioning and CSS tooltips

Browse source 
- Add usePopupPosition composable for smart popup positioning
  (bottom-right → bottom-left → top-right → top-left fallback)
- Refactor ElementPopup with complete controls matching mockup
- Add stylesheet sync: popups initialize from and watch store changes
- Add click-to-close behavior: clicking another element closes popup
- Add CSS property tooltips on all form labels (editor panel + popups)
  with dotted underline and monospace code tooltip on hover
- Add field--view-only class and disabled attribute on locked fields

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
isUnknown 2025-12-05 18:21:54 +01:00
parent 25ef4685c1
commit cf1dadb1b3
10 changed files with 1178 additions and 159 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,7 +4,9 @@
<div class="settings-subsection">
<div class="field">
<label for="page-format">Format d'impression</label>
<label for="page-format" class="label-with-tooltip" data-css="size"
>Format d'impression</label
>
<select id="page-format" v-model="pageFormat">
<option value="A4">A4</option>
<option value="A5">A5</option>
@ -17,7 +19,9 @@
<div class="settings-subsection">
<div class="field field--view-only">
<label for="page-width">Largeur</label>
<label for="page-width" class="label-with-tooltip" data-css="width"
>Largeur</label
>
<input
id="page-width"
type="number"
@ -28,7 +32,9 @@
</div>
<div class="field field--view-only">
<label for="page-height">Hauteur</label>
<label for="page-height" class="label-with-tooltip" data-css="height"
>Hauteur</label
>
<input
id="page-height"
type="number"
@ -43,7 +49,9 @@
<h3>Marges</h3>
<div class="field">
<label for="margin-top">Haut</label>
<label for="margin-top" class="label-with-tooltip" data-css="margin-top"
>Haut</label
>
<div class="input-with-unit">
<input
id="margin-top"
@ -78,7 +86,12 @@
</div>
<div class="field">
<label for="margin-bottom">Bas</label>
<label
for="margin-bottom"
class="label-with-tooltip"
data-css="margin-bottom"
>Bas</label
>
<div class="input-with-unit">
<input
id="margin-bottom"
@ -113,7 +126,12 @@
</div>
<div class="field">
<label for="margin-left">Gauche</label>
<label
for="margin-left"
class="label-with-tooltip"
data-css="margin-left"
>Gauche</label
>
<div class="input-with-unit">
<input
id="margin-left"
@ -148,7 +166,12 @@
</div>
<div class="field">
<label for="margin-right">Droite</label>
<label
for="margin-right"
class="label-with-tooltip"
data-css="margin-right"
>Droite</label
>
<div class="input-with-unit">
<input
id="margin-right"
@ -185,7 +208,9 @@
<div class="settings-subsection">
<div class="field">
<label for="background">Arrière-plan</label>
<label for="background" class="label-with-tooltip" data-css="background"
>Arrière-plan</label
>
<div class="input-with-color">
<input
ref="backgroundColorInput"
@ -218,7 +243,12 @@
<div class="settings-subsection">
<div class="field">
<label for="pattern">Motif</label>
<label
for="pattern"
class="label-with-tooltip"
data-css="background-image"
>Motif</label
>
<select id="pattern" v-model="pattern">
<option value="">Choisissez</option>
<option value="dots">Points</option>
@ -231,12 +261,22 @@
<div class="settings-subsection">
<div class="field checkbox-field">
<input id="page-numbers" type="checkbox" v-model="pageNumbers" />
<label for="page-numbers">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-field">
<input id="running-title" type="checkbox" v-model="runningTitle" />
<label for="running-title">Titre courant</label>
<label
for="running-title"
class="label-with-tooltip"
data-css="string-set"
>Titre courant</label
>
</div>
</div>
</section>

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

@ -9,14 +9,14 @@
<!-- Police -->
<div class="settings-subsection">
<div class="field">
<label for="text-font">Police</label>
<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">
<option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
</select>
<div class="field-checkbox">
<input id="text-italic" type="checkbox" v-model="italic" />
<label for="text-italic">Italique</label>
<label for="text-italic" class="label-with-tooltip" data-css="font-style">Italique</label>
</div>
</div>
</div>
@ -25,7 +25,7 @@
<!-- Graisse -->
<div class="settings-subsection">
<div class="field">
<label>Graisse</label>
<label class="label-with-tooltip" data-css="font-weight">Graisse</label>
<UnitToggle v-model="weight" :units="weights" />
</div>
</div>
@ -33,7 +33,7 @@
<!-- Taille du texte -->
<div class="settings-subsection">
<div class="field">
<label for="text-size-range">Taille du texte</label>
<label for="text-size-range" class="label-with-tooltip" data-css="font-size">Taille du texte</label>
<InputWithUnit
v-model="fontSize"
:units="['px', 'em', 'rem']"
@ -47,7 +47,7 @@
<!-- Alignement -->
<div class="settings-subsection">
<div class="field">
<label for="text-alignment">Alignement</label>
<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">
{{ a.label }}
@ -59,7 +59,7 @@
<!-- Couleurs -->
<div class="settings-subsection">
<div class="field">
<label for="text-color">Couleur</label>
<label for="text-color" class="label-with-tooltip" data-css="color">Couleur</label>
<div class="input-with-color">
<input
id="text-color"
@ -71,7 +71,7 @@
</div>
</div>
<div class="field">
<label for="text-background">Arrière-plan</label>
<label for="text-background" class="label-with-tooltip" data-css="background">Arrière-plan</label>
<div class="input-with-color">
<input
id="text-background"
@ -90,6 +90,7 @@
ref="marginOuterEditor"
id="margin-outer"
label="Marges extérieures"
cssProperty="margin"
v-model:simple="marginOuter"
v-model:detailed="marginOuterDetailed"
:units="['mm', 'px', 'rem']"
@ -103,6 +104,7 @@
ref="marginInnerEditor"
id="margin-inner"
label="Marges intérieures"
cssProperty="padding"
v-model:simple="marginInner"
v-model:detailed="marginInnerDetailed"
:units="['mm', 'px', 'rem']"