delete inherance
This commit is contained in:
Julie Blanc
parent
cc36b73325
commit
203ed18aba
3 changed files with 71 additions and 598 deletions
|
|
@ -6,9 +6,9 @@
|
|||
:editable-css="elementCss"
|
||||
:popup-width="800"
|
||||
:popup-height="600"
|
||||
:show-inheritance="false"
|
||||
@close="close"
|
||||
@css-input="handleCssInput"
|
||||
@toggle-inheritance="toggleInheritance"
|
||||
>
|
||||
<template #header-left>
|
||||
<span class="element-label">{{ selector || '' }}</span>
|
||||
|
|
@ -18,18 +18,18 @@
|
|||
<template #controls>
|
||||
<!-- Font Family -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field field-font" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<div class="field field-font" >
|
||||
<label class="label-with-tooltip" data-css="font-family">Police</label>
|
||||
<div class="field-font__options">
|
||||
<select v-model="fontFamily" :disabled="inheritanceLocked">
|
||||
<select v-model="fontFamily" >
|
||||
<option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
|
||||
</select>
|
||||
<div class="field-checkbox">
|
||||
<input type="checkbox" v-model="italic" :disabled="inheritanceLocked" />
|
||||
<input type="checkbox" v-model="italic" />
|
||||
<label class="label-with-tooltip" data-css="font-style">Italique</label>
|
||||
</div>
|
||||
<div class="field-checkbox">
|
||||
<input type="checkbox" v-model="bold" :disabled="inheritanceLocked" />
|
||||
<input type="checkbox" v-model="bold" />
|
||||
<label class="label-with-tooltip" data-css="font-weight">Gras</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -38,61 +38,39 @@
|
|||
|
||||
<!-- Font Size -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<div class="field field-text-size" >
|
||||
<label class="label-with-tooltip" data-css="font-size">Taille du texte</label>
|
||||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
v-model="fontSize.value"
|
||||
:min="6"
|
||||
:step="1"
|
||||
:disabled="inheritanceLocked"
|
||||
/>
|
||||
<div class="unit-toggle">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: fontSize.unit === 'px' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="updateUnitPropUnit(fontSize, 'px')"
|
||||
>
|
||||
px
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<InputWithUnit
|
||||
v-model="fontSizeModel"
|
||||
:units="['px']"
|
||||
:min="6"
|
||||
:max="72"
|
||||
showRange
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- LineHeight -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<div class="field field-text-size" >
|
||||
<label class="label-with-tooltip" data-css="line-height">Interlignage</label>
|
||||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
v-model="lineHeight.value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
:disabled="inheritanceLocked"
|
||||
/>
|
||||
<div class="unit-toggle">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: lineHeight.unit === 'px' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="updateUnitPropUnit(lineHeight, 'px')"
|
||||
>
|
||||
px
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<InputWithUnit
|
||||
v-model="lineHeightModel"
|
||||
:units="['px']"
|
||||
:min="0"
|
||||
:max="72"
|
||||
showRange
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Text Alignment -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<div class="field" >
|
||||
<label class="label-with-tooltip" data-css="text-align">Alignement</label>
|
||||
<select v-model="textAlign" :disabled="inheritanceLocked">
|
||||
<select v-model="textAlign" >
|
||||
<option value="left">Gauche</option>
|
||||
<option value="center">Centre</option>
|
||||
<option value="right">Droite</option>
|
||||
|
|
@ -103,7 +81,7 @@
|
|||
|
||||
<!-- Bordure -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field field-border" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<div class="field field-border" >
|
||||
<div class="settings-subsection-header">
|
||||
<label class="label-with-tooltip" data-css="border">Bordure</label>
|
||||
</div>
|
||||
|
|
@ -115,16 +93,15 @@
|
|||
v-model="borderWidth.value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
:disabled="inheritanceLocked"
|
||||
/>
|
||||
/>
|
||||
<div class="unit-toggle">
|
||||
<button type="button" class="active" :disabled="inheritanceLocked">px</button>
|
||||
<button type="button" class="active" >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">
|
||||
<select v-model="borderStyle" >
|
||||
<option value="solid">Plein</option>
|
||||
<option value="dotted">Pointillés</option>
|
||||
<option value="dashed">Tirets</option>
|
||||
|
|
@ -138,8 +115,7 @@
|
|||
ref="borderColorInput"
|
||||
type="text"
|
||||
v-model="borderColor"
|
||||
:disabled="inheritanceLocked"
|
||||
data-coloris
|
||||
data-coloris
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -149,15 +125,14 @@
|
|||
|
||||
<!-- Color -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field field-simple" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<div class="field field-simple" >
|
||||
<label class="label-with-tooltip" data-css="color">Couleur du texte</label>
|
||||
<div class="input-with-color">
|
||||
<input
|
||||
ref="colorInput"
|
||||
type="text"
|
||||
v-model="color"
|
||||
:disabled="inheritanceLocked"
|
||||
data-coloris
|
||||
data-coloris
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -165,15 +140,14 @@
|
|||
|
||||
<!-- Background -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field field-simple" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<div class="field field-simple" >
|
||||
<label class="label-with-tooltip" data-css="background">Arrière-plan</label>
|
||||
<div class="input-with-color">
|
||||
<input
|
||||
ref="backgroundInput"
|
||||
type="text"
|
||||
v-model="background"
|
||||
:disabled="inheritanceLocked"
|
||||
data-coloris
|
||||
data-coloris
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -187,8 +161,7 @@
|
|||
type="button"
|
||||
class="lock-toggle"
|
||||
:class="{ locked: marginLocked }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="marginLocked = !marginLocked"
|
||||
@click="marginLocked = !marginLocked"
|
||||
:title="marginLocked ? 'Déverrouiller (modifier indépendamment)' : 'Verrouiller (modifier ensemble)'"
|
||||
>
|
||||
<svg v-if="marginLocked" width="11" height="13" viewBox="0 0 11 13" fill="none">
|
||||
|
|
@ -205,29 +178,25 @@
|
|||
v-for="side in sides"
|
||||
:key="side.key"
|
||||
class="field field-margin"
|
||||
:class="{ 'field--view-only': inheritanceLocked }"
|
||||
>
|
||||
>
|
||||
<label class="label-with-tooltip" :data-css="`margin-${side.key}`">{{ side.label }}</label>
|
||||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
:modelValue="margin[side.key].value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
:disabled="inheritanceLocked"
|
||||
@update:modelValue="(v) => updateMarginValue(side.key, v)"
|
||||
@update:modelValue="(v) => updateMarginValue(side.key, v)"
|
||||
/>
|
||||
<div class="unit-toggle">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margin[side.key].unit === 'mm' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="updateMarginUnit(side.key, 'mm')"
|
||||
@click="updateMarginUnit(side.key, 'mm')"
|
||||
>mm</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margin[side.key].unit === 'px' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="updateMarginUnit(side.key, 'px')"
|
||||
@click="updateMarginUnit(side.key, 'px')"
|
||||
>px</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -242,8 +211,7 @@
|
|||
type="button"
|
||||
class="lock-toggle"
|
||||
:class="{ locked: paddingLocked }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="paddingLocked = !paddingLocked"
|
||||
@click="paddingLocked = !paddingLocked"
|
||||
:title="paddingLocked ? 'Déverrouiller (modifier indépendamment)' : 'Verrouiller (modifier ensemble)'"
|
||||
>
|
||||
<svg v-if="paddingLocked" width="11" height="13" viewBox="0 0 11 13" fill="none">
|
||||
|
|
@ -260,29 +228,25 @@
|
|||
v-for="side in sides"
|
||||
:key="side.key"
|
||||
class="field field-margin"
|
||||
:class="{ 'field--view-only': inheritanceLocked }"
|
||||
>
|
||||
>
|
||||
<label class="label-with-tooltip" :data-css="`padding-${side.key}`">{{ side.label }}</label>
|
||||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
:modelValue="padding[side.key].value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
:disabled="inheritanceLocked"
|
||||
@update:modelValue="(v) => updatePaddingValue(side.key, v)"
|
||||
@update:modelValue="(v) => updatePaddingValue(side.key, v)"
|
||||
/>
|
||||
<div class="unit-toggle">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: padding[side.key].unit === 'mm' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="updatePaddingUnit(side.key, 'mm')"
|
||||
@click="updatePaddingUnit(side.key, 'mm')"
|
||||
>mm</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: padding[side.key].unit === 'px' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="updatePaddingUnit(side.key, 'px')"
|
||||
@click="updatePaddingUnit(side.key, 'px')"
|
||||
>px</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -297,6 +261,7 @@ 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 InputWithUnit from './ui/InputWithUnit.vue';
|
||||
import BasePopup from './ui/BasePopup.vue';
|
||||
import { convertUnit } from '../utils/unit-conversion';
|
||||
|
||||
|
|
@ -311,7 +276,6 @@ const emit = defineEmits(['close']);
|
|||
const basePopup = ref(null);
|
||||
|
||||
const visible = computed(() => basePopup.value?.visible ?? false);
|
||||
const inheritanceLocked = computed(() => basePopup.value?.inheritanceLocked ?? true);
|
||||
|
||||
const selector = ref('');
|
||||
const selectedElement = ref(null);
|
||||
|
|
@ -331,7 +295,15 @@ const textAlign = ref('left');
|
|||
const color = ref('rgb(0, 0, 0)');
|
||||
const background = ref('transparent');
|
||||
const fontSize = reactive({ value: 23, unit: 'px' });
|
||||
const fontSizeModel = computed({
|
||||
get: () => ({ value: fontSize.value, unit: fontSize.unit }),
|
||||
set: (v) => { fontSize.value = v.value; fontSize.unit = v.unit; },
|
||||
});
|
||||
const lineHeight = reactive({ value: 28, unit: 'px' });
|
||||
const lineHeightModel = computed({
|
||||
get: () => ({ value: lineHeight.value, unit: lineHeight.unit }),
|
||||
set: (v) => { lineHeight.value = v.value; lineHeight.unit = v.unit; },
|
||||
});
|
||||
const borderWidth = reactive({ value: 0, unit: 'px' });
|
||||
const borderStyle = ref('solid');
|
||||
const borderColor = ref('#000000');
|
||||
|
|
@ -501,17 +473,7 @@ const generatePreviewCss = () => {
|
|||
|
||||
const displayedCss = computed(() => {
|
||||
if (!selector.value) return '';
|
||||
|
||||
if (!inheritanceLocked.value) {
|
||||
return elementCss.value || generatePreviewCss();
|
||||
}
|
||||
|
||||
const preview = generatePreviewCss();
|
||||
if (!preview) return '';
|
||||
|
||||
return '/* Héritage verrouillé - déverrouiller pour appliquer */\n/* ' +
|
||||
preview.split('\n').join('\n ') +
|
||||
' */';
|
||||
return elementCss.value || generatePreviewCss();
|
||||
});
|
||||
|
||||
const applyAllStyles = () => {
|
||||
|
|
@ -700,9 +662,6 @@ const open = (element, event, count = null) => {
|
|||
|
||||
elementInstanceCount.value = count !== null ? count : getInstanceCount(selector.value);
|
||||
|
||||
const blockState = stylesheetStore.getBlockState(selector.value);
|
||||
basePopup.value.inheritanceLocked = blockState !== 'active';
|
||||
|
||||
loadValuesFromStylesheet();
|
||||
basePopup.value.open(event);
|
||||
|
||||
|
|
@ -732,71 +691,6 @@ const handleIframeClick = (event, targetElement = null, elementCount = null) =>
|
|||
open(element, event, elementCount);
|
||||
};
|
||||
|
||||
const toggleInheritance = () => {
|
||||
const blockState = stylesheetStore.getBlockState(selector.value);
|
||||
|
||||
if (basePopup.value.inheritanceLocked && blockState === 'commented') {
|
||||
stylesheetStore.uncommentCssBlock(selector.value);
|
||||
basePopup.value.inheritanceLocked = false;
|
||||
} else if (basePopup.value.inheritanceLocked && blockState === 'none') {
|
||||
if (selectedElement.value && props.iframeRef && props.iframeRef.contentWindow) {
|
||||
const cs = props.iframeRef.contentWindow.getComputedStyle(selectedElement.value);
|
||||
|
||||
isUpdatingFromStore = true;
|
||||
|
||||
fontFamily.value = cs.fontFamily.replace(/['"]/g, '').split(',')[0].trim();
|
||||
italic.value = cs.fontStyle === 'italic';
|
||||
bold.value = parseInt(cs.fontWeight) >= 700;
|
||||
|
||||
const fontSizeMatch = cs.fontSize.match(/([\d.]+)(px|rem|em|pt)/);
|
||||
if (fontSizeMatch) {
|
||||
fontSize.value = parseFloat(fontSizeMatch[1]);
|
||||
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;
|
||||
|
||||
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)/);
|
||||
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;
|
||||
}
|
||||
|
||||
applyAllStyles();
|
||||
basePopup.value.inheritanceLocked = false;
|
||||
} else if (!basePopup.value.inheritanceLocked && blockState === 'active') {
|
||||
stylesheetStore.commentCssBlock(selector.value);
|
||||
basePopup.value.inheritanceLocked = true;
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({ handleIframeClick, close, visible });
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue