From 154804ee44dd6b62437a33056077db99c1bd9723 Mon Sep 17 00:00:00 2001 From: Julie Blanc Date: Mon, 2 Mar 2026 17:29:49 +0100 Subject: [PATCH 1/3] add line-height possibility --- src/components/ElementPopup.vue | 37 ++++++++++++++++++++++++++++++- src/components/ui/NumberInput.vue | 6 +++-- 2 files changed, 40 insertions(+), 3 deletions(-) diff --git a/src/components/ElementPopup.vue b/src/components/ElementPopup.vue index 1b7c329..96209ed 100644 --- a/src/components/ElementPopup.vue +++ b/src/components/ElementPopup.vue @@ -47,7 +47,7 @@
@@ -65,6 +65,33 @@
+ + +
+
+ +
+ +
+ +
+
+
+
+ +
@@ -218,6 +245,7 @@ const textAlign = ref('left'); const color = ref('rgb(0, 0, 0)'); const background = ref('transparent'); const fontSize = reactive({ value: 23, unit: 'px' }); +const lineHeight = reactive({ value: 28, unit: 'px' }); const marginOuter = reactive({ value: 0, unit: 'mm' }); const paddingInner = reactive({ value: 0, unit: 'mm' }); @@ -242,6 +270,7 @@ const styleProps = [ const unitProps = [ { css: 'font-size', ref: fontSize, debounce: true }, + { css: 'line-height', ref: lineHeight, debounce: true }, { css: 'margin', ref: marginOuter, debounce: true }, { css: 'padding', ref: paddingInner, debounce: true }, ]; @@ -478,6 +507,12 @@ const toggleInheritance = () => { fontSize.unit = fontSizeMatch[2]; } + const lineHeightMatch = cs.lineHeight.match(/([\d.]+)(px|rem|em|pt)/); + if (lineHeightMatch) { + lineHeight.value = parseFloat(lineHeightMatch[1]); + lineHeight.unit = lineHeightMatch[2]; + } + textAlign.value = cs.textAlign; color.value = cs.color; background.value = cs.backgroundColor; diff --git a/src/components/ui/NumberInput.vue b/src/components/ui/NumberInput.vue index 58f99cc..4aeda87 100644 --- a/src/components/ui/NumberInput.vue +++ b/src/components/ui/NumberInput.vue @@ -89,15 +89,17 @@ const handleInput = (event) => { emit('update:modelValue', value); }; +const decimals = (props.step.toString().split('.')[1] || '').length; + const increment = () => { - const newValue = props.modelValue + props.step; + const newValue = parseFloat((props.modelValue + props.step).toFixed(decimals)); if (props.max === undefined || newValue <= props.max) { emit('update:modelValue', newValue); } }; const decrement = () => { - const newValue = props.modelValue - props.step; + const newValue = parseFloat((props.modelValue - props.step).toFixed(decimals)); if (props.min === undefined || newValue >= props.min) { emit('update:modelValue', newValue); } From fc6391a53dcda5cabcc9f61947da4ab0aea4aadf Mon Sep 17 00:00:00 2001 From: Julie Blanc Date: Thu, 5 Mar 2026 10:45:55 +0100 Subject: [PATCH 2/3] =?UTF-8?q?margins=20+=E2=80=AFpaddings=20in=20pop=20v?= =?UTF-8?q?ue?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ElementPopup.vue | 319 ++++++++++++++++++++++++++++---- 1 file changed, 279 insertions(+), 40 deletions(-) diff --git a/src/components/ElementPopup.vue b/src/components/ElementPopup.vue index 96209ed..d08d610 100644 --- a/src/components/ElementPopup.vue +++ b/src/components/ElementPopup.vue @@ -139,32 +139,54 @@
-
- +
+ Marges extérieures + +
+
+
+ @click="updateMarginUnit(side.key, 'mm')" + >mm + @click="updateMarginUnit(side.key, 'px')" + >px
@@ -172,32 +194,54 @@
-
- +
+ Marges intérieures + +
+
+
+ @click="updatePaddingUnit(side.key, 'mm')" + >mm + @click="updatePaddingUnit(side.key, 'px')" + >px
@@ -246,8 +290,22 @@ const color = ref('rgb(0, 0, 0)'); const background = ref('transparent'); const fontSize = reactive({ value: 23, unit: 'px' }); const lineHeight = reactive({ value: 28, unit: 'px' }); -const marginOuter = reactive({ value: 0, unit: 'mm' }); -const paddingInner = reactive({ value: 0, unit: 'mm' }); + +const marginLocked = ref(true); +const margin = reactive({ + top: { value: 0, unit: 'mm' }, + right: { value: 0, unit: 'mm' }, + bottom: { value: 0, unit: 'mm' }, + left: { value: 0, unit: 'mm' }, +}); + +const paddingLocked = ref(true); +const padding = reactive({ + top: { value: 0, unit: 'mm' }, + right: { value: 0, unit: 'mm' }, + bottom: { value: 0, unit: 'mm' }, + left: { value: 0, unit: 'mm' }, +}); // Constants const fonts = ['Alegreya Sans', 'Alegreya', 'Arial', 'Georgia', 'Times New Roman']; @@ -271,10 +329,55 @@ const styleProps = [ const unitProps = [ { css: 'font-size', ref: fontSize, debounce: true }, { css: 'line-height', ref: lineHeight, debounce: true }, - { css: 'margin', ref: marginOuter, debounce: true }, - { css: 'padding', ref: paddingInner, debounce: true }, ]; +const sides = [ + { key: 'top', label: 'Haut' }, + { key: 'bottom', label: 'Bas' }, + { key: 'left', label: 'Gauche' }, + { key: 'right', label: 'Droite' }, +]; + +const updateMarginValue = (side, value) => { + if (marginLocked.value) { + for (const s of ['top', 'right', 'bottom', 'left']) margin[s].value = value; + } else { + margin[side].value = value; + } +}; + +const updateMarginUnit = (side, unit) => { + if (marginLocked.value) { + for (const s of ['top', 'right', 'bottom', 'left']) { + margin[s].value = convertUnit(margin[s].value, margin[s].unit, unit); + margin[s].unit = unit; + } + } else { + margin[side].value = convertUnit(margin[side].value, margin[side].unit, unit); + margin[side].unit = unit; + } +}; + +const updatePaddingValue = (side, value) => { + if (paddingLocked.value) { + for (const s of ['top', 'right', 'bottom', 'left']) padding[s].value = value; + } else { + padding[side].value = value; + } +}; + +const updatePaddingUnit = (side, unit) => { + if (paddingLocked.value) { + for (const s of ['top', 'right', 'bottom', 'left']) { + padding[s].value = convertUnit(padding[s].value, padding[s].unit, unit); + padding[s].unit = unit; + } + } else { + padding[side].value = convertUnit(padding[side].value, padding[side].unit, unit); + padding[side].unit = unit; + } +}; + // Generic update: push a single property to the stylesheet store const updateProp = (cssProp, value, unit) => { if (!selector.value) return; @@ -336,6 +439,17 @@ const generatePreviewCss = () => { } } + for (const side of ['top', 'right', 'bottom', 'left']) { + if (margin[side].value !== undefined && margin[side].value !== null) { + properties.push(` margin-${side}: ${margin[side].value}${margin[side].unit};`); + } + } + for (const side of ['top', 'right', 'bottom', 'left']) { + if (padding[side].value !== undefined && padding[side].value !== null) { + properties.push(` padding-${side}: ${padding[side].value}${padding[side].unit};`); + } + } + if (properties.length === 0) return ''; return `${selector.value} {\n${properties.join('\n')}\n}`; @@ -364,6 +478,10 @@ const applyAllStyles = () => { for (const prop of unitProps) { updateProp(prop.css, prop.ref.value, prop.ref.unit); } + for (const side of ['top', 'right', 'bottom', 'left']) { + updateProp(`margin-${side}`, margin[side].value, margin[side].unit); + updateProp(`padding-${side}`, padding[side].value, padding[side].unit); + } }; // Watchers — simple props @@ -388,6 +506,50 @@ for (const prop of unitProps) { }); } +// Watchers — margin sides +watch( + () => [margin.top.value, margin.right.value, margin.bottom.value, margin.left.value], + () => { + if (isUpdatingFromStore) return; + debouncedUpdate(() => { + for (const side of ['top', 'right', 'bottom', 'left']) { + updateProp(`margin-${side}`, margin[side].value, margin[side].unit); + } + }); + } +); +watch( + () => [margin.top.unit, margin.right.unit, margin.bottom.unit, margin.left.unit], + () => { + if (isUpdatingFromStore) return; + for (const side of ['top', 'right', 'bottom', 'left']) { + updateProp(`margin-${side}`, margin[side].value, margin[side].unit); + } + } +); + +// Watchers — padding sides +watch( + () => [padding.top.value, padding.right.value, padding.bottom.value, padding.left.value], + () => { + if (isUpdatingFromStore) return; + debouncedUpdate(() => { + for (const side of ['top', 'right', 'bottom', 'left']) { + updateProp(`padding-${side}`, padding[side].value, padding[side].unit); + } + }); + } +); +watch( + () => [padding.top.unit, padding.right.unit, padding.bottom.unit, padding.left.unit], + () => { + if (isUpdatingFromStore) return; + for (const side of ['top', 'right', 'bottom', 'left']) { + updateProp(`padding-${side}`, padding[side].value, padding[side].unit); + } + } +); + const handleCssInput = (newCss) => { const oldBlock = elementCss.value; if (oldBlock) { @@ -440,6 +602,47 @@ const loadValuesFromStylesheet = () => { prop.ref.unit = data.unit; } } + + // Margin sides — try individual first, fallback to shorthand + const spacingSides = ['top', 'right', 'bottom', 'left']; + let anyMarginFound = false; + for (const side of spacingSides) { + const data = stylesheetStore.extractValue(selector.value, `margin-${side}`); + if (data && data.value !== undefined) { + margin[side].value = data.value; + margin[side].unit = data.unit; + anyMarginFound = true; + } + } + if (!anyMarginFound) { + const data = stylesheetStore.extractValue(selector.value, 'margin'); + if (data && data.value !== undefined) { + for (const side of spacingSides) { + margin[side].value = data.value; + margin[side].unit = data.unit; + } + } + } + + // Padding sides — try individual first, fallback to shorthand + let anyPaddingFound = false; + for (const side of spacingSides) { + const data = stylesheetStore.extractValue(selector.value, `padding-${side}`); + if (data && data.value !== undefined) { + padding[side].value = data.value; + padding[side].unit = data.unit; + anyPaddingFound = true; + } + } + if (!anyPaddingFound) { + const data = stylesheetStore.extractValue(selector.value, 'padding'); + if (data && data.value !== undefined) { + for (const side of spacingSides) { + padding[side].value = data.value; + padding[side].unit = data.unit; + } + } + } } catch (error) { console.error('Error loading values from stylesheet:', error); } @@ -517,16 +720,18 @@ const toggleInheritance = () => { color.value = cs.color; background.value = cs.backgroundColor; - const marginMatch = cs.marginTop.match(/([\d.]+)(px|mm|pt)/); - if (marginMatch) { - marginOuter.value = parseFloat(marginMatch[1]); - marginOuter.unit = marginMatch[2]; - } - - const paddingMatch = cs.paddingTop.match(/([\d.]+)(px|mm|pt)/); - if (paddingMatch) { - paddingInner.value = parseFloat(paddingMatch[1]); - paddingInner.unit = paddingMatch[2]; + for (const side of ['top', 'right', 'bottom', 'left']) { + const cssSide = side.charAt(0).toUpperCase() + side.slice(1); + const marginMatch = cs[`margin${cssSide}`].match(/([\d.]+)(px|mm|pt)/); + if (marginMatch) { + margin[side].value = parseFloat(marginMatch[1]); + margin[side].unit = marginMatch[2]; + } + const paddingMatch = cs[`padding${cssSide}`].match(/([\d.]+)(px|mm|pt)/); + if (paddingMatch) { + padding[side].value = parseFloat(paddingMatch[1]); + padding[side].unit = paddingMatch[2]; + } } isUpdatingFromStore = false; @@ -558,4 +763,38 @@ defineExpose({ handleIframeClick, close, visible }); color: var(--color-purple); font-size: 0.875rem; } + +.settings-subsection-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0.25rem; +} + +.lock-toggle { + display: flex; + align-items: center; + justify-content: center; + background: none; + border: 1px solid transparent; + border-radius: 3px; + cursor: pointer; + padding: 2px 4px; + color: var(--color-text-muted, #999); + transition: color 0.15s, border-color 0.15s; +} + +.lock-toggle:hover:not(:disabled) { + color: var(--color-text, #333); + border-color: var(--color-border, #ccc); +} + +.lock-toggle.locked { + color: var(--color-purple, #7c3aed); +} + +.lock-toggle:disabled { + opacity: 0.4; + cursor: not-allowed; +} From cc36b73325eb8ee5d5dbe399e61f084661a744ce Mon Sep 17 00:00:00 2001 From: Julie Blanc Date: Thu, 5 Mar 2026 11:08:44 +0100 Subject: [PATCH 3/3] add border settings --- public/assets/css/src/_forms.scss | 13 +++- public/assets/css/style.css | 8 ++- public/assets/css/style.css.map | 2 +- src/components/ElementPopup.vue | 98 ++++++++++++++++++++------ src/components/editor/TextSettings.vue | 2 +- 5 files changed, 93 insertions(+), 30 deletions(-) diff --git a/public/assets/css/src/_forms.scss b/public/assets/css/src/_forms.scss index b472c84..7e93807 100644 --- a/public/assets/css/src/_forms.scss +++ b/public/assets/css/src/_forms.scss @@ -67,11 +67,18 @@ input[type="number"] { grid-template-columns: var(--label-w) 1fr; grid-template-rows: var(--input-h) var(--input-h); - select { - width: 100%; + + + .field-font__options{ + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + + select { + width: 100%; + grid-column: span 2; + } } .field-checkbox { - grid-column: 2; padding-top: var(--space-xs); label { font-weight: 400; diff --git a/public/assets/css/style.css b/public/assets/css/style.css index 91c2e11..6435e6e 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -331,11 +331,15 @@ input[type=number] { grid-template-columns: var(--label-w) 1fr; grid-template-rows: var(--input-h) var(--input-h); } -.field-font select { +.field-font .field-font__options { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); +} +.field-font .field-font__options select { width: 100%; + grid-column: span 2; } .field-font .field-checkbox { - grid-column: 2; padding-top: var(--space-xs); } .field-font .field-checkbox label { diff --git a/public/assets/css/style.css.map b/public/assets/css/style.css.map index 7512c9a..b8ef12d 100644 --- a/public/assets/css/style.css.map +++ b/public/assets/css/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["src/_fonts.scss","style.css","src/_colors.scss","src/_reset.scss","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_forms-section.scss","src/_buttons.scss","src/_settings-popup.scss","src/_global.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["src/_fonts.scss","style.css","src/_colors.scss","src/_reset.scss","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_forms-section.scss","src/_buttons.scss","src/_settings-popup.scss","src/_global.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/src/components/ElementPopup.vue b/src/components/ElementPopup.vue index d08d610..4400a03 100644 --- a/src/components/ElementPopup.vue +++ b/src/components/ElementPopup.vue @@ -20,7 +20,7 @@
-
+
@@ -28,18 +28,14 @@
+
+ + +
- -
-
- - -
-
-
@@ -105,10 +101,56 @@
+ +
+
+
+ +
+
+
+ +
+ +
+ +
+
+
+
+ + +
+
+ +
+ +
+
+
+
+
+
- +
String(fontWeight.value), - set: (val) => { fontWeight.value = parseInt(val); } -}); // Style property descriptors const styleProps = [ { css: 'font-family', get: () => fontFamily.value, set: v => fontFamily.value = v.replace(/['"]/g, ''), debounce: false }, { css: 'font-style', get: () => italic.value ? 'italic' : 'normal', set: v => italic.value = v === 'italic', debounce: false }, - { css: 'font-weight', get: () => fontWeight.value, set: v => fontWeight.value = parseInt(v), debounce: false }, + { css: 'font-weight', get: () => bold.value ? 'bold' : 'normal', set: v => bold.value = v === 'bold' || parseInt(v) >= 700, debounce: false }, { css: 'text-align', get: () => textAlign.value, set: v => textAlign.value = v, debounce: false }, { css: 'color', get: () => color.value, set: v => color.value = v, debounce: true }, { css: 'background', get: () => background.value, set: v => background.value = v, debounce: true }, + { css: 'border-style', get: () => borderStyle.value, set: v => borderStyle.value = v || 'solid', debounce: false }, + { css: 'border-color', get: () => borderColor.value, set: v => borderColor.value = v, debounce: true }, ]; const unitProps = [ { css: 'font-size', ref: fontSize, debounce: true }, { css: 'line-height', ref: lineHeight, debounce: true }, + { css: 'border-width', ref: borderWidth, debounce: true }, ]; const sides = [ @@ -428,9 +470,11 @@ const generatePreviewCss = () => { for (const prop of styleProps) { const val = prop.get(); - if (val && (prop.css !== 'font-style' || val === 'italic')) { - properties.push(` ${prop.css}: ${val};`); - } + if (!val) continue; + if (prop.css === 'font-style' && val !== 'italic') continue; + if (prop.css === 'font-weight' && val === 'normal') continue; + if ((prop.css === 'border-style' || prop.css === 'border-color') && borderWidth.value === 0) continue; + properties.push(` ${prop.css}: ${val};`); } for (const prop of unitProps) { @@ -702,7 +746,7 @@ const toggleInheritance = () => { fontFamily.value = cs.fontFamily.replace(/['"]/g, '').split(',')[0].trim(); italic.value = cs.fontStyle === 'italic'; - fontWeight.value = parseInt(cs.fontWeight); + bold.value = parseInt(cs.fontWeight) >= 700; const fontSizeMatch = cs.fontSize.match(/([\d.]+)(px|rem|em|pt)/); if (fontSizeMatch) { @@ -720,6 +764,14 @@ const toggleInheritance = () => { color.value = cs.color; background.value = cs.backgroundColor; + const borderWidthMatch = cs.borderTopWidth.match(/([\d.]+)(px)/); + if (borderWidthMatch) { + borderWidth.value = parseFloat(borderWidthMatch[1]); + borderWidth.unit = 'px'; + } + borderStyle.value = cs.borderTopStyle || 'solid'; + borderColor.value = cs.borderTopColor || '#000000'; + for (const side of ['top', 'right', 'bottom', 'left']) { const cssSide = side.charAt(0).toUpperCase() + side.slice(1); const marginMatch = cs[`margin${cssSide}`].match(/([\d.]+)(px|mm|pt)/); diff --git a/src/components/editor/TextSettings.vue b/src/components/editor/TextSettings.vue index e7da376..e4a706f 100644 --- a/src/components/editor/TextSettings.vue +++ b/src/components/editor/TextSettings.vue @@ -12,7 +12,7 @@
-
+