add border settings
This commit is contained in:
Julie Blanc
parent
fc6391a53d
commit
cc36b73325
5 changed files with 93 additions and 30 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -20,7 +20,7 @@
|
|||
<div class="settings-subsection">
|
||||
<div class="field field-font" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="font-family">Police</label>
|
||||
<div class="field-with-option">
|
||||
<div class="field-font__options">
|
||||
<select v-model="fontFamily" :disabled="inheritanceLocked">
|
||||
<option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
|
||||
</select>
|
||||
|
|
@ -28,18 +28,14 @@
|
|||
<input type="checkbox" v-model="italic" :disabled="inheritanceLocked" />
|
||||
<label class="label-with-tooltip" data-css="font-style">Italique</label>
|
||||
</div>
|
||||
<div class="field-checkbox">
|
||||
<input type="checkbox" v-model="bold" :disabled="inheritanceLocked" />
|
||||
<label class="label-with-tooltip" data-css="font-weight">Gras</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Font Weight -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="font-weight">Graisse</label>
|
||||
<UnitToggle v-model="fontWeightString" :units="weights" :disabled="inheritanceLocked" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Font Size -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
|
|
@ -105,10 +101,56 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bordure -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field field-border" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<div class="settings-subsection-header">
|
||||
<label class="label-with-tooltip" data-css="border">Bordure</label>
|
||||
</div>
|
||||
<div class="field-border__options">
|
||||
<div class="field-border__option">
|
||||
<label class="label-with-tooltip" data-css="border-width">Épaisseur</label>
|
||||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
v-model="borderWidth.value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
:disabled="inheritanceLocked"
|
||||
/>
|
||||
<div class="unit-toggle">
|
||||
<button type="button" class="active" :disabled="inheritanceLocked">px</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field-border__option">
|
||||
<label class="label-with-tooltip" data-css="border-style">Style</label>
|
||||
<select v-model="borderStyle" :disabled="inheritanceLocked">
|
||||
<option value="solid">Plein</option>
|
||||
<option value="dotted">Pointillés</option>
|
||||
<option value="dashed">Tirets</option>
|
||||
<option value="double">Double</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field-border__option">
|
||||
<label class="label-with-tooltip" data-css="border-color">Couleur</label>
|
||||
<div class="input-with-color">
|
||||
<input
|
||||
ref="borderColorInput"
|
||||
type="text"
|
||||
v-model="borderColor"
|
||||
:disabled="inheritanceLocked"
|
||||
data-coloris
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Color -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field field-simple" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="color">Couleur</label>
|
||||
<label class="label-with-tooltip" data-css="color">Couleur du texte</label>
|
||||
<div class="input-with-color">
|
||||
<input
|
||||
ref="colorInput"
|
||||
|
|
@ -255,7 +297,6 @@ import { ref, reactive, computed, watch, nextTick } from 'vue';
|
|||
import { useStylesheetStore } from '../stores/stylesheet';
|
||||
import { useDebounce } from '../composables/useDebounce';
|
||||
import NumberInput from './ui/NumberInput.vue';
|
||||
import UnitToggle from './ui/UnitToggle.vue';
|
||||
import BasePopup from './ui/BasePopup.vue';
|
||||
import { convertUnit } from '../utils/unit-conversion';
|
||||
|
||||
|
|
@ -277,6 +318,7 @@ const selectedElement = ref(null);
|
|||
const elementInstanceCount = ref(0);
|
||||
const colorInput = ref(null);
|
||||
const backgroundInput = ref(null);
|
||||
const borderColorInput = ref(null);
|
||||
|
||||
let isUpdatingFromStore = false;
|
||||
const { debouncedUpdate } = useDebounce(500);
|
||||
|
|
@ -284,12 +326,15 @@ const { debouncedUpdate } = useDebounce(500);
|
|||
// Style properties — flat refs for simple values, reactive for value+unit
|
||||
const fontFamily = ref('Alegreya Sans');
|
||||
const italic = ref(false);
|
||||
const fontWeight = ref(400);
|
||||
const bold = ref(false);
|
||||
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 borderWidth = reactive({ value: 0, unit: 'px' });
|
||||
const borderStyle = ref('solid');
|
||||
const borderColor = ref('#000000');
|
||||
|
||||
const marginLocked = ref(true);
|
||||
const margin = reactive({
|
||||
|
|
@ -309,26 +354,23 @@ const padding = reactive({
|
|||
|
||||
// Constants
|
||||
const fonts = ['Alegreya Sans', 'Alegreya', 'Arial', 'Georgia', 'Times New Roman'];
|
||||
const weights = ['200', '300', '400', '600', '800'];
|
||||
|
||||
const fontWeightString = computed({
|
||||
get: () => 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)/);
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<div class="settings-subsection">
|
||||
<div class="field field-font">
|
||||
<label for="text-font" class="label-with-tooltip field--view-only" data-css="font-family" title="Fonctionnalité à venir">Police</label>
|
||||
<div class="field-with-option">
|
||||
<div class="field-font__options">
|
||||
<select id="text-font" v-model="font" disabled class="field--view-only" title="Fonctionnalité à venir">
|
||||
<option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
|
||||
</select>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue