merge

public/assets/css/src/_forms-section.scss

@@ -14,19 +14,19 @@
     font-size: 0.8rem;
     color: var(--color-interface-400);
   }
+}
 
-  .settings-subsection:not(:last-child) {
+.settings-subsection:not(:last-child) {
-    border-bottom: 1px solid var(--color-interface-100);
+  border-bottom: 1px solid var(--color-interface-100);
-  }
+}
 
-  .settings-subsection {
+.settings-subsection {
-    padding: var(--space-xs) 0;
+  padding: var(--space-xs) 0;
 
-    h3 {
+  h3 {
-      margin-top: calc(var(--space-xs) * 1.5);
+    margin-top: calc(var(--space-xs) * 1.5);
-      margin-bottom: calc(var(--space-xs) * 2);
+    margin-bottom: calc(var(--space-xs) * 2);
-      font-size: 1rem;
+    font-size: 1rem;
-      font-weight: 600;
+    font-weight: 600;
-    }
   }
 }

public/assets/css/src/_forms.scss

@@ -78,6 +78,7 @@ input[type="number"] {
     width: 100%;
   }
   .field-checkbox{
+    grid-column: 2;
     padding-top: var(--space-xs);
     label{
       font-weight: 400;

public/assets/css/src/_settings-popup.scss

@@ -47,10 +47,7 @@
   flex: 1;
   padding: 1rem;
   overflow-y: auto;
-  background: white;
+  background-color: var(--color-panel-bg);
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
 }
 
 .settings-subsection h4 {

public/assets/css/style.css

@@ -333,6 +333,7 @@ input[type=number] {
   width: 100%;
 }
 .field-font .field-checkbox {
+  grid-column: 2;
   padding-top: var(--space-xs);
 }
 .field-font .field-checkbox label {
@@ -464,13 +465,15 @@ input[type=number] {
   font-size: 0.8rem;
   color: var(--color-interface-400);
 }
-.settings-section .settings-subsection:not(:last-child) {
+
+.settings-subsection:not(:last-child) {
   border-bottom: 1px solid var(--color-interface-100);
 }
-.settings-section .settings-subsection {
+
+.settings-subsection {
   padding: var(--space-xs) 0;
 }
-.settings-section .settings-subsection h3 {
+.settings-subsection h3 {
   margin-top: calc(var(--space-xs) * 1.5);
   margin-bottom: calc(var(--space-xs) * 2);
   font-size: 1rem;
@@ -563,10 +566,7 @@ input[type=number] {
   flex: 1;
   padding: 1rem;
   overflow-y: auto;
-  background: white;
+  background-color: var(--color-panel-bg);
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
 }
 
 .settings-subsection h4 {

src/components/ElementPopup.vue

@@ -18,19 +18,17 @@
       <div class="popup-controls">
         <!-- Font Family -->
         <div class="settings-subsection">
-          <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
+          <div class="field field-font" :class="{ 'field--view-only': inheritanceLocked }">
             <label class="label-with-tooltip" data-css="font-family">Police</label>
-            <select v-model="fontFamily.value" :disabled="inheritanceLocked">
+            <div class="field-with-option">
-              <option value="Alegreya Sans">Alegreya Sans</option>
+              <select v-model="fontFamily.value" :disabled="inheritanceLocked">
-              <option value="Alegreya">Alegreya</option>
+                <option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
-              <option value="Arial">Arial</option>
+              </select>
-              <option value="Georgia">Georgia</option>
+              <div class="field-checkbox">
-              <option value="Times New Roman">Times New Roman</option>
+                <input type="checkbox" v-model="fontStyle.italic" :disabled="inheritanceLocked" />
-            </select>
+                <label class="label-with-tooltip" data-css="font-style">Italique</label>
-            <label class="checkbox-inline label-with-tooltip" data-css="font-style">
+              </div>
-              <input type="checkbox" v-model="fontStyle.italic" :disabled="inheritanceLocked" />
+            </div>
-              <span>Italique</span>
-            </label>
           </div>
         </div>
 
@@ -38,18 +36,7 @@
         <div class="settings-subsection">
           <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
             <label class="label-with-tooltip" data-css="font-weight">Graisse</label>
-            <div class="button-group">
+            <UnitToggle v-model="fontWeightString" :units="weights" :disabled="inheritanceLocked" />
-              <button
-                v-for="weight in [200, 300, 400, 600, 800]"
-                :key="weight"
-                type="button"
-                :class="{ active: fontWeight.value === weight }"
-                :disabled="inheritanceLocked"
-                @click="fontWeight.value = weight"
-              >
-                {{ weight }}
-              </button>
-            </div>
           </div>
         </div>
 
@@ -276,6 +263,7 @@ import { useStylesheetStore } from '../stores/stylesheet';
 import { usePopupPosition } from '../composables/usePopupPosition';
 import { useDebounce } from '../composables/useDebounce';
 import NumberInput from './ui/NumberInput.vue';
+import UnitToggle from './ui/UnitToggle.vue';
 import Coloris from '@melloware/coloris';
 import '@melloware/coloris/dist/coloris.css';
 import hljs from 'highlight.js/lib/core';
@@ -321,6 +309,18 @@ const background = ref({ value: 'transparent' });
 const marginOuter = ref({ value: 0, unit: 'mm' });
 const paddingInner = ref({ value: 0, unit: 'mm' });
 
+// Constants
+const fonts = ['Alegreya Sans', 'Alegreya', 'Arial', 'Georgia', 'Times New Roman'];
+const weights = ['200', '300', '400', '600', '800'];
+
+// Computed to adapt fontWeight for UnitToggle
+const fontWeightString = computed({
+  get: () => String(fontWeight.value.value),
+  set: (val) => {
+    fontWeight.value.value = parseInt(val);
+  }
+});
+
 const immediateUpdate = (callback) => {
   callback();
 };
@@ -794,43 +794,4 @@ defineExpose({ handleIframeClick, close, visible });
   color: var(--color-purple);
   font-size: 0.875rem;
 }
-
-.button-group {
-  display: flex;
-  gap: 0.25rem;
-}
-
-.button-group button {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.75rem;
-  border: 1px solid #ddd;
-  background: white;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.button-group button.active {
-  background: #61afef;
-  color: white;
-  border-color: #61afef;
-}
-
-.button-group button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.checkbox-inline {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  margin-left: 1rem;
-  font-size: 0.875rem;
-  cursor: pointer;
-}
-
-.checkbox-inline input[type="checkbox"] {
-  margin: 0;
-  cursor: pointer;
-}
 </style>

src/components/ui/UnitToggle.vue

@@ -5,6 +5,7 @@
       :key="unit"
       type="button"
       :class="{ active: modelValue === unit }"
+      :disabled="disabled"
       @click="$emit('update:modelValue', unit)"
     >
       {{ unit }}
@@ -21,6 +22,10 @@ defineProps({
   units: {
     type: Array,
     default: () => ['mm', 'px']
+  },
+  disabled: {
+    type: Boolean,
+    default: false
   }
 });