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

refactor: uniformize TextSettings styling and integrate Coloris

Browse source 
- Wrap all field sections in .settings-subsection divs to match PageSettings structure
- Properly nest margin outer and inner collapsed sections within their parent subsections
- Replace custom color picker with Coloris integration for color and background fields
- Simplify reactive state by removing unused format and picker properties
- Initialize Coloris with dark theme, alpha support, and format toggle

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
isUnknown 2025-12-04 16:21:50 +01:00
parent 3bd6c7ca19
commit e3523fce29
1 changed files with 434 additions and 493 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,6 +6,7 @@
pouvez modifier ensuite les éléments indépendamment. pouvez modifier ensuite les éléments indépendamment.
</p> </p>
<div class="settings-subsection">
<div class="field"> <div class="field">
<label for="text-font">Police</label> <label for="text-font">Police</label>
<div class="field-with-option"> <div class="field-with-option">
@ -22,10 +23,12 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="settings-subsection">
<div class="field"> <div class="field">
<label>Graisse</label> <label>Graisse</label>
<div class="weight-toggle"> <div class="unit-toggle">
<button <button
type="button" type="button"
:class="{ active: weight === '200' }" :class="{ active: weight === '200' }"
@ -77,7 +80,9 @@
</button> </button>
</div> </div>
</div> </div>
</div>
<div class="settings-subsection">
<div class="field"> <div class="field">
<label for="text-size-range">Taille du texte</label> <label for="text-size-range">Taille du texte</label>
<div class="input-with-unit"> <div class="input-with-unit">
@ -122,7 +127,9 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="settings-subsection">
<div class="field"> <div class="field">
<label for="text-alignment">Alignement</label> <label for="text-alignment">Alignement</label>
<select id="text-alignment" v-model="alignment"> <select id="text-alignment" v-model="alignment">
@ -132,92 +139,37 @@
<option value="justify">Justifié</option> <option value="justify">Justifié</option>
</select> </select>
</div> </div>
</div>
<div class="settings-subsection">
<div class="field"> <div class="field">
<label for="text-color">Couleur</label> <label for="text-color">Couleur</label>
<div class="field-with-color"> <div class="input-with-color">
<input type="color" v-model="color.picker" class="color-picker" />
<input <input
id="text-color" id="text-color"
type="text" type="text"
v-model="color.value" v-model="color.value"
class="color-input" class="color-input"
data-coloris
/> />
<div class="unit-toggle">
<button
type="button"
:class="{ active: color.format === 'rgb' }"
@click="color.format = 'rgb'"
>
rgb
</button>
<button
type="button"
:class="{ active: color.format === 'hex' }"
@click="color.format = 'hex'"
>
hex
</button>
<button
type="button"
class="clear-btn"
@click="clearColor"
title="Réinitialiser"
>
×
</button>
</div>
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<label for="text-background">Arrière-plan</label> <label for="text-background">Arrière-plan</label>
<div class="field-with-color"> <div class="input-with-color">
<button
type="button"
class="toggle-btn"
:class="{ active: background.enabled }"
@click="background.enabled = !background.enabled"
>
×
</button>
<input <input
id="text-background" id="text-background"
type="text" type="text"
v-model="background.value" v-model="background.value"
:disabled="!background.enabled"
class="color-input" class="color-input"
data-coloris
/> />
<div class="unit-toggle">
<button
type="button"
:class="{ active: background.format === 'rgb' }"
:disabled="!background.enabled"
@click="background.format = 'rgb'"
>
rgb
</button>
<button
type="button"
:class="{ active: background.format === 'hex' }"
:disabled="!background.enabled"
@click="background.format = 'hex'"
>
hex
</button>
<button
type="button"
class="clear-btn"
:disabled="!background.enabled"
@click="clearBackground"
title="Effacer"
>
×
</button>
</div> </div>
</div> </div>
</div> </div>
<div class="settings-subsection">
<div class="field"> <div class="field">
<label for="margin-outer">Marges extérieures</label> <label for="margin-outer">Marges extérieures</label>
<div class="input-with-unit"> <div class="input-with-unit">
@ -368,7 +320,9 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="settings-subsection">
<div class="field"> <div class="field">
<label for="margin-inner">Marges intérieures</label> <label for="margin-inner">Marges intérieures</label>
<div class="input-with-unit"> <div class="input-with-unit">
@ -519,12 +473,14 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</section> </section>
</template> </template>
<script setup> <script setup>
import { ref, watch } from 'vue'; import { ref, watch, onMounted } from 'vue';
import { useStylesheetStore } from '../../stores/stylesheet'; import { useStylesheetStore } from '../../stores/stylesheet';
import Coloris from '@melloware/coloris';
const stylesheetStore = useStylesheetStore(); const stylesheetStore = useStylesheetStore();
@ -558,27 +514,14 @@ const alignment = ref('left');
// Color // Color
const color = ref({ const color = ref({
picker: '#000000',
value: 'rgb(250, 250, 250)', value: 'rgb(250, 250, 250)',
format: 'rgb',
}); });
const clearColor = () => {
color.value.picker = '#000000';
color.value.value = '';
};
// Background // Background
const background = ref({ const background = ref({
enabled: false,
value: 'transparent', value: 'transparent',
format: 'hex',
}); });
const clearBackground = () => {
background.value.value = 'transparent';
};
// Margin outer // Margin outer
const marginOuter = ref({ const marginOuter = ref({
value: 23, value: 23,
@ -659,7 +602,7 @@ watch(
} }
); );
// Color - debounced for text value, immediate for format and picker // Color - debounced for text value
watch( watch(
() => color.value.value, () => color.value.value,
() => { () => {
@ -670,17 +613,7 @@ watch(
} }
); );
watch( // Background - debounced for value
() => [color.value.format, color.value.picker],
() => {
if (isUpdatingFromStore) return;
immediateUpdate(() => {
// TODO: implement color update
});
}
);
// Background - debounced for value, immediate for format and enabled
watch( watch(
() => background.value.value, () => background.value.value,
() => { () => {
@ -691,16 +624,6 @@ watch(
} }
); );
watch(
() => [background.value.format, background.value.enabled],
() => {
if (isUpdatingFromStore) return;
immediateUpdate(() => {
// TODO: implement background update
});
}
);
// Margin outer - debounced for value, immediate for unit // Margin outer - debounced for value, immediate for unit
watch( watch(
() => marginOuter.value.value, () => marginOuter.value.value,
@ -804,4 +727,22 @@ watch(
}); });
} }
); );
onMounted(() => {
Coloris.init();
Coloris({
themeMode: 'dark',
alpha: true,
format: 'auto',
formatToggle: true,
swatches: [
'#000000',
'#FFFFFF',
'#FF0000',
'#00FF00',
'#0000FF',
'transparent',
],
});
});
</script> </script>