feat: refactor popups with shared positioning and CSS tooltips
- Add usePopupPosition composable for smart popup positioning (bottom-right → bottom-left → top-right → top-left fallback) - Refactor ElementPopup with complete controls matching mockup - Add stylesheet sync: popups initialize from and watch store changes - Add click-to-close behavior: clicking another element closes popup - Add CSS property tooltips on all form labels (editor panel + popups) with dotted underline and monospace code tooltip on hover - Add field--view-only class and disabled attribute on locked fields 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
25ef4685c1
commit
cf1dadb1b3
10 changed files with 1178 additions and 159 deletions
|
|
@ -20,18 +20,23 @@
|
|||
<div class="settings-subsection">
|
||||
<h4>Marges</h4>
|
||||
<div class="margin-grid">
|
||||
<div class="field">
|
||||
<label>Haut</label>
|
||||
<div
|
||||
class="field"
|
||||
:class="{ 'field--view-only': inheritanceLocked }"
|
||||
>
|
||||
<label class="label-with-tooltip" data-css="margin-top">Haut</label>
|
||||
<div class="input-with-unit">
|
||||
<input
|
||||
type="number"
|
||||
v-model.number="margins.top.value"
|
||||
min="0"
|
||||
:disabled="inheritanceLocked"
|
||||
/>
|
||||
<div class="unit-toggle">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.top.unit === 'mm' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.top.unit = 'mm'"
|
||||
>
|
||||
mm
|
||||
|
|
@ -39,6 +44,7 @@
|
|||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.top.unit === 'px' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.top.unit = 'px'"
|
||||
>
|
||||
px
|
||||
|
|
@ -46,6 +52,7 @@
|
|||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.top.unit === 'rem' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.top.unit = 'rem'"
|
||||
>
|
||||
rem
|
||||
|
|
@ -54,18 +61,23 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Bas</label>
|
||||
<div
|
||||
class="field"
|
||||
:class="{ 'field--view-only': inheritanceLocked }"
|
||||
>
|
||||
<label class="label-with-tooltip" data-css="margin-bottom">Bas</label>
|
||||
<div class="input-with-unit">
|
||||
<input
|
||||
type="number"
|
||||
v-model.number="margins.bottom.value"
|
||||
min="0"
|
||||
:disabled="inheritanceLocked"
|
||||
/>
|
||||
<div class="unit-toggle">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.bottom.unit === 'mm' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.bottom.unit = 'mm'"
|
||||
>
|
||||
mm
|
||||
|
|
@ -73,6 +85,7 @@
|
|||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.bottom.unit === 'px' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.bottom.unit = 'px'"
|
||||
>
|
||||
px
|
||||
|
|
@ -80,6 +93,7 @@
|
|||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.bottom.unit === 'rem' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.bottom.unit = 'rem'"
|
||||
>
|
||||
rem
|
||||
|
|
@ -88,18 +102,23 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Gauche</label>
|
||||
<div
|
||||
class="field"
|
||||
:class="{ 'field--view-only': inheritanceLocked }"
|
||||
>
|
||||
<label class="label-with-tooltip" data-css="margin-left">Gauche</label>
|
||||
<div class="input-with-unit">
|
||||
<input
|
||||
type="number"
|
||||
v-model.number="margins.left.value"
|
||||
min="0"
|
||||
:disabled="inheritanceLocked"
|
||||
/>
|
||||
<div class="unit-toggle">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.left.unit === 'mm' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.left.unit = 'mm'"
|
||||
>
|
||||
mm
|
||||
|
|
@ -107,6 +126,7 @@
|
|||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.left.unit === 'px' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.left.unit = 'px'"
|
||||
>
|
||||
px
|
||||
|
|
@ -114,6 +134,7 @@
|
|||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.left.unit === 'rem' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.left.unit = 'rem'"
|
||||
>
|
||||
rem
|
||||
|
|
@ -122,18 +143,23 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Droite</label>
|
||||
<div
|
||||
class="field"
|
||||
:class="{ 'field--view-only': inheritanceLocked }"
|
||||
>
|
||||
<label class="label-with-tooltip" data-css="margin-right">Droite</label>
|
||||
<div class="input-with-unit">
|
||||
<input
|
||||
type="number"
|
||||
v-model.number="margins.right.value"
|
||||
min="0"
|
||||
:disabled="inheritanceLocked"
|
||||
/>
|
||||
<div class="unit-toggle">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.right.unit === 'mm' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.right.unit = 'mm'"
|
||||
>
|
||||
mm
|
||||
|
|
@ -141,6 +167,7 @@
|
|||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.right.unit === 'px' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.right.unit = 'px'"
|
||||
>
|
||||
px
|
||||
|
|
@ -148,6 +175,7 @@
|
|||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.right.unit === 'rem' }"
|
||||
:disabled="inheritanceLocked"
|
||||
@click="margins.right.unit = 'rem'"
|
||||
>
|
||||
rem
|
||||
|
|
@ -160,13 +188,14 @@
|
|||
|
||||
<!-- Background -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field">
|
||||
<label>Arrière-plan</label>
|
||||
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="background">Arrière-plan</label>
|
||||
<div class="input-with-color">
|
||||
<input
|
||||
ref="backgroundColorInput"
|
||||
type="text"
|
||||
v-model="background.value"
|
||||
:disabled="inheritanceLocked"
|
||||
data-coloris
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -175,9 +204,9 @@
|
|||
|
||||
<!-- Patterns -->
|
||||
<div class="settings-subsection">
|
||||
<div class="field">
|
||||
<label>Motifs</label>
|
||||
<select v-model="pattern">
|
||||
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="background-image">Motifs</label>
|
||||
<select v-model="pattern" :disabled="inheritanceLocked">
|
||||
<option value="">Choisissez</option>
|
||||
<option value="dots">Points</option>
|
||||
<option value="lines">Lignes</option>
|
||||
|
|
@ -189,13 +218,31 @@
|
|||
<!-- Lock/Unlock Inheritance Button -->
|
||||
<div class="settings-subsection">
|
||||
<button class="inheritance-btn" @click="toggleInheritance">
|
||||
<svg v-if="inheritanceLocked" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9V10ZM5 12V20H19V12H5ZM11 14H13V18H11V14ZM17 10V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9V10H17Z"></path>
|
||||
<svg
|
||||
v-if="inheritanceLocked"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M19 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9V10ZM5 12V20H19V12H5ZM11 14H13V18H11V14ZM17 10V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9V10H17Z"
|
||||
></path>
|
||||
</svg>
|
||||
<svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M7 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C14.7405 2 17.1131 3.5748 18.2624 5.86882L16.4731 6.76344C15.6522 5.12486 13.9575 4 12 4C9.23858 4 7 6.23858 7 9V10ZM5 12V20H19V12H5ZM10 15H14V17H10V15Z"></path>
|
||||
<svg
|
||||
v-else
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M7 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C14.7405 2 17.1131 3.5748 18.2624 5.86882L16.4731 6.76344C15.6522 5.12486 13.9575 4 12 4C9.23858 4 7 6.23858 7 9V10ZM5 12V20H19V12H5ZM10 15H14V17H10V15Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>{{ inheritanceLocked ? 'Déverrouiller l\'héritage' : 'Verrouiller l\'héritage' }}</span>
|
||||
<span>{{
|
||||
inheritanceLocked
|
||||
? "Déverrouiller l'héritage"
|
||||
: "Verrouiller l'héritage"
|
||||
}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -204,17 +251,28 @@
|
|||
<div class="popup-css">
|
||||
<div class="css-header">
|
||||
<span>CSS</span>
|
||||
<label class="toggle">
|
||||
<label
|
||||
class="toggle"
|
||||
:class="{ 'field--view-only': inheritanceLocked }"
|
||||
>
|
||||
<span class="toggle-label">Mode édition</span>
|
||||
<input type="checkbox" v-model="isEditable" />
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="isEditable"
|
||||
:disabled="inheritanceLocked"
|
||||
/>
|
||||
<span class="toggle-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
<pre v-if="!isEditable" class="readonly"><code class="hljs language-css" v-html="highlightedCss"></code></pre>
|
||||
<pre
|
||||
v-if="!isEditable"
|
||||
class="readonly"
|
||||
><code class="hljs language-css" v-html="highlightedCss"></code></pre>
|
||||
<textarea
|
||||
v-else
|
||||
:value="pageCss"
|
||||
@input="handleCssInput"
|
||||
:disabled="inheritanceLocked"
|
||||
spellcheck="false"
|
||||
></textarea>
|
||||
</div>
|
||||
|
|
@ -225,6 +283,7 @@
|
|||
<script setup>
|
||||
import { ref, computed, watch, onMounted } from 'vue';
|
||||
import { useStylesheetStore } from '../stores/stylesheet';
|
||||
import { usePopupPosition } from '../composables/usePopupPosition';
|
||||
import Coloris from '@melloware/coloris';
|
||||
import '@melloware/coloris/dist/coloris.css';
|
||||
import hljs from 'highlight.js/lib/core';
|
||||
|
|
@ -272,14 +331,10 @@ const immediateUpdate = (callback) => {
|
|||
callback();
|
||||
};
|
||||
|
||||
const calculatePosition = (pageElement) => {
|
||||
const rect = pageElement.getBoundingClientRect();
|
||||
const iframeRect = props.iframeRef.getBoundingClientRect();
|
||||
return {
|
||||
x: iframeRect.left + rect.left + 20,
|
||||
y: iframeRect.top + rect.top + 20,
|
||||
};
|
||||
};
|
||||
const POPUP_WIDTH = 550;
|
||||
const POPUP_HEIGHT = 600;
|
||||
|
||||
const { calculatePosition } = usePopupPosition(POPUP_WIDTH, POPUP_HEIGHT);
|
||||
|
||||
const updateMargins = () => {
|
||||
const marginValue = `${margins.value.top.value}${margins.value.top.unit} ${margins.value.right.value}${margins.value.right.unit} ${margins.value.bottom.value}${margins.value.bottom.unit} ${margins.value.left.value}${margins.value.left.unit}`;
|
||||
|
|
@ -362,13 +417,61 @@ watch(
|
|||
}
|
||||
);
|
||||
|
||||
const open = (pageElement) => {
|
||||
const loadValuesFromStylesheet = () => {
|
||||
try {
|
||||
isUpdatingFromStore = true;
|
||||
|
||||
// Extract margin from @page
|
||||
const marginData = stylesheetStore.extractValue('@page', 'margin');
|
||||
if (marginData) {
|
||||
// Parse margin shorthand (top right bottom left)
|
||||
const marginStr = typeof marginData === 'string' ? marginData : marginData.value;
|
||||
const marginValues = marginStr.split(' ');
|
||||
|
||||
if (marginValues.length === 4) {
|
||||
// Parse each margin value
|
||||
const parseMargin = (value) => {
|
||||
const match = value.match(/^([\d.]+)(\w+)$/);
|
||||
if (match) {
|
||||
return { value: parseFloat(match[1]), unit: match[2] };
|
||||
}
|
||||
return { value: 0, unit: 'mm' };
|
||||
};
|
||||
|
||||
const top = parseMargin(marginValues[0]);
|
||||
const right = parseMargin(marginValues[1]);
|
||||
const bottom = parseMargin(marginValues[2]);
|
||||
const left = parseMargin(marginValues[3]);
|
||||
|
||||
margins.value.top = top;
|
||||
margins.value.right = right;
|
||||
margins.value.bottom = bottom;
|
||||
margins.value.left = left;
|
||||
}
|
||||
}
|
||||
|
||||
// Extract background from @page
|
||||
const backgroundData = stylesheetStore.extractValue('@page', 'background');
|
||||
if (backgroundData) {
|
||||
background.value.value = typeof backgroundData === 'string' ? backgroundData : backgroundData.value;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading values from stylesheet:', error);
|
||||
} finally {
|
||||
isUpdatingFromStore = false;
|
||||
}
|
||||
};
|
||||
|
||||
const open = (pageElement, event) => {
|
||||
selectedPageElement.value = pageElement;
|
||||
position.value = calculatePosition(pageElement);
|
||||
position.value = calculatePosition(event);
|
||||
|
||||
// Add border to the selected page
|
||||
pageElement.style.outline = '2px solid #61afef';
|
||||
|
||||
// Load values from stylesheet
|
||||
loadValuesFromStylesheet();
|
||||
|
||||
visible.value = true;
|
||||
|
||||
// Initialize Coloris after opening
|
||||
|
|
@ -439,7 +542,10 @@ const handleCssInput = (event) => {
|
|||
cssDebounceTimer = setTimeout(() => {
|
||||
const oldBlock = pageCss.value;
|
||||
if (oldBlock) {
|
||||
stylesheetStore.content = stylesheetStore.content.replace(oldBlock, newCss);
|
||||
stylesheetStore.content = stylesheetStore.content.replace(
|
||||
oldBlock,
|
||||
newCss
|
||||
);
|
||||
}
|
||||
}, 500);
|
||||
};
|
||||
|
|
@ -454,6 +560,16 @@ watch(isEditable, async (newValue, oldValue) => {
|
|||
}
|
||||
});
|
||||
|
||||
// Watch stylesheet changes to sync values
|
||||
watch(
|
||||
() => stylesheetStore.content,
|
||||
() => {
|
||||
if (visible.value && !stylesheetStore.isEditing) {
|
||||
loadValuesFromStylesheet();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
defineExpose({ open, close, visible });
|
||||
</script>
|
||||
|
||||
|
|
@ -542,7 +658,37 @@ defineExpose({ open, close, visible });
|
|||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* Unit toggle styles are inherited from global styles */
|
||||
/* Label with CSS tooltip */
|
||||
.label-with-tooltip {
|
||||
text-decoration: underline dotted;
|
||||
text-underline-offset: 2px;
|
||||
cursor: help;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.label-with-tooltip::after {
|
||||
content: attr(data-css);
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
margin-bottom: 4px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: var(--color-browngray-700, #3d3d3d);
|
||||
color: var(--color-browngray-100, #f5f5f5);
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 0.75rem;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.15s ease, visibility 0.15s ease;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.label-with-tooltip:hover::after {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.inheritance-btn {
|
||||
display: flex;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue