public/assets/css/src/_forms.scss

@@ -79,7 +79,7 @@ input[type="number"] {
         width: 50%;
 
         label {
-          width: 30%;
+          width: 50%;
         }
 
         .input-with-unit {

public/assets/css/style.css

@@ -140,7 +140,7 @@ input[type=number] {
   width: 50%;
 }
 .settings-section .settings-subsection.margins .field label {
-  width: 30%;
+  width: 50%;
 }
 .settings-section .settings-subsection.margins .field .input-with-unit input {
   width: 50%;

src/components/editor/TextSettings.vue

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