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