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

refactor: use global form classes in PagePopup

Browse source 
Replace custom classes with global .field and .settings-subsection classes to ensure proper styling from _forms.scss.

🤖 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 17:46:38 +01:00
parent 9d36a22d0c
commit 33fdf6c94f
1 changed files with 28 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

100
src/components/PagePopup.vue
View file

@ -17,10 +17,10 @@
<!-- Left: Controls -->
<div class="popup-controls">
<!-- Margins -->
<div class="control-section">
<div class="settings-subsection">
<h4>Marges</h4>
<div class="margin-grid">
<div class="margin-field">
<div class="field">
<label>Haut</label>
<div class="input-with-unit">
<input
@ -54,7 +54,7 @@
</div>
</div>
<div class="margin-field">
<div class="field">
<label>Bas</label>
<div class="input-with-unit">
<input
@ -88,7 +88,7 @@
</div>
</div>
<div class="margin-field">
<div class="field">
<label>Gauche</label>
<div class="input-with-unit">
<input
@ -122,7 +122,7 @@
</div>
</div>
<div class="margin-field">
<div class="field">
<label>Droite</label>
<div class="input-with-unit">
<input
@ -159,31 +159,35 @@
</div>
<!-- Background -->
<div class="control-section">
<label>Arrière-plan</label>
<div class="input-with-color">
<input
ref="backgroundColorInput"
type="text"
v-model="background.value"
data-coloris
/>
<div class="settings-subsection">
<div class="field">
<label>Arrière-plan</label>
<div class="input-with-color">
<input
ref="backgroundColorInput"
type="text"
v-model="background.value"
data-coloris
/>
</div>
</div>
</div>
<!-- Patterns -->
<div class="control-section">
<label>Motifs</label>
<select v-model="pattern">
<option value="">Choisissez</option>
<option value="dots">Points</option>
<option value="lines">Lignes</option>
<option value="grid">Grille</option>
</select>
<div class="settings-subsection">
<div class="field">
<label>Motifs</label>
<select v-model="pattern">
<option value="">Choisissez</option>
<option value="dots">Points</option>
<option value="lines">Lignes</option>
<option value="grid">Grille</option>
</select>
</div>
</div>
<!-- Unlock Inheritance Button -->
<div class="control-section">
<div class="settings-subsection">
<button class="unlock-btn" @click="toggleInheritance">
Déverrouiller l'héritage
</button>
@ -520,66 +524,18 @@ defineExpose({ open, close, visible });
gap: 1rem;
}
.control-section h4 {
.settings-subsection h4 {
margin: 0 0 0.5rem 0;
font-size: 0.875rem;
font-weight: 600;
}
.control-section label {
display: block;
font-size: 0.75rem;
margin-bottom: 0.25rem;
color: #666;
}
.control-section select {
width: 100%;
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 0.875rem;
}
.margin-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
.margin-field label {
display: block;
font-size: 0.75rem;
margin-bottom: 0.25rem;
color: #666;
}
.input-with-unit {
display: flex;
gap: 0.25rem;
align-items: center;
}
.input-with-unit input[type='number'] {
flex: 1;
padding: 0.375rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 0.875rem;
}
.input-with-color {
width: 100%;
}
.input-with-color input {
width: 100%;
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 0.875rem;
}
/* Unit toggle styles are inherited from global styles */
.unlock-btn {