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

fix: update Coloris color swatches in TextSettings after loading custom styles

Browse source 
Dispatch input events on color inputs after syncFromStore so Coloris
updates its ::before pseudo-element swatches with loaded values.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-02-24 14:02:33 +01:00
parent f760e1942a
commit 342a6eccf1
2 changed files with 18 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

10
public/content/1_cohesion-des-mondes/5_test-avec-geoformat/narrative.txt
View file

@ -19,7 +19,7 @@ Customcss:
@page { @page {
size: A4; size: A4;
margin: 50mm 15mm 26mm 15mm; margin: 50mm 15mm 26mm 15mm;
background: rgba(255, 255, 255, 1); background: rgb(227, 33, 33);
} }
body { body {
@ -35,10 +35,10 @@ p {
font-weight: 300; font-weight: 300;
font-family: Arial; font-family: Arial;
font-style: italic; font-style: italic;
padding-top: 20mm; padding-top: 0mm;
padding-right: 20mm; padding-right: 0mm;
padding-bottom: 20mm; padding-bottom: 0mm;
padding-left: 20mm; padding-left: 0mm;
} }
h1 { h1 {

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

@ -64,6 +64,7 @@
<label for="text-color" class="label-with-tooltip" data-css="color">Couleur</label> <label for="text-color" class="label-with-tooltip" data-css="color">Couleur</label>
<div class="input-with-color"> <div class="input-with-color">
<input <input
ref="colorInput"
id="text-color" id="text-color"
type="text" type="text"
v-model="color" v-model="color"
@ -80,6 +81,7 @@
<label for="text-background" class="label-with-tooltip" data-css="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"> <div class="input-with-color">
<input <input
ref="backgroundInput"
id="text-background" id="text-background"
type="text" type="text"
v-model="background" v-model="background"
@ -400,6 +402,8 @@ const fontSize = ref({ value: 16, unit: 'px' });
const alignment = ref('left'); const alignment = ref('left');
const color = ref('rgb(0, 0, 0)'); const color = ref('rgb(0, 0, 0)');
const background = ref('transparent'); const background = ref('transparent');
const colorInput = ref(null);
const backgroundInput = ref(null);
const marginOuterDetailed = ref({ const marginOuterDetailed = ref({
top: { value: 0, unit: 'mm' }, top: { value: 0, unit: 'mm' },
@ -739,6 +743,14 @@ const syncFromStore = () => {
isUpdatingFromStore = false; isUpdatingFromStore = false;
}; };
const updateColorisButtons = () => {
[colorInput.value, backgroundInput.value].forEach((input) => {
if (input) {
input.dispatchEvent(new Event('input', { bubbles: true }));
}
});
};
onMounted(() => { onMounted(() => {
Coloris.init(); Coloris.init();
Coloris({ Coloris({
@ -749,6 +761,7 @@ onMounted(() => {
swatches: ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', 'transparent'] swatches: ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', 'transparent']
}); });
syncFromStore(); syncFromStore();
setTimeout(updateColorisButtons, 100);
}); });
</script> </script>