fix: implement functional controls in PagePopup
- Add rem unit option to all margin controls - Implement proper margin and background updates with debouncing - Integrate Coloris properly like PageSettings - Add highlight.js syntax highlighting for readonly CSS - Add Prettier formatting when exiting edit mode - Use global unit toggle styles instead of custom - Sync isEditing state with stylesheet store 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
9c5e4a88d9
commit
9d36a22d0c
1 changed files with 172 additions and 41 deletions
|
|
@ -43,6 +43,13 @@
|
|||
>
|
||||
px
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.top.unit === 'rem' }"
|
||||
@click="margins.top.unit = 'rem'"
|
||||
>
|
||||
rem
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -70,6 +77,13 @@
|
|||
>
|
||||
px
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.bottom.unit === 'rem' }"
|
||||
@click="margins.bottom.unit = 'rem'"
|
||||
>
|
||||
rem
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -97,6 +111,13 @@
|
|||
>
|
||||
px
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.left.unit === 'rem' }"
|
||||
@click="margins.left.unit = 'rem'"
|
||||
>
|
||||
rem
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -124,6 +145,13 @@
|
|||
>
|
||||
px
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: margins.right.unit === 'rem' }"
|
||||
@click="margins.right.unit = 'rem'"
|
||||
>
|
||||
rem
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -135,8 +163,9 @@
|
|||
<label>Arrière-plan</label>
|
||||
<div class="input-with-color">
|
||||
<input
|
||||
ref="backgroundColorInput"
|
||||
type="text"
|
||||
v-model="background"
|
||||
v-model="background.value"
|
||||
data-coloris
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -171,7 +200,7 @@
|
|||
<span class="toggle-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
<pre v-if="!isEditable" class="readonly"><code>{{ pageCss }}</code></pre>
|
||||
<pre v-if="!isEditable" class="readonly"><code class="hljs language-css" v-html="highlightedCss"></code></pre>
|
||||
<textarea
|
||||
v-else
|
||||
:value="pageCss"
|
||||
|
|
@ -187,6 +216,12 @@
|
|||
import { ref, computed, watch, onMounted } from 'vue';
|
||||
import { useStylesheetStore } from '../stores/stylesheet';
|
||||
import Coloris from '@melloware/coloris';
|
||||
import '@melloware/coloris/dist/coloris.css';
|
||||
import hljs from 'highlight.js/lib/core';
|
||||
import css from 'highlight.js/lib/languages/css';
|
||||
import 'highlight.js/styles/atom-one-dark.css';
|
||||
|
||||
hljs.registerLanguage('css', css);
|
||||
|
||||
const stylesheetStore = useStylesheetStore();
|
||||
|
||||
|
|
@ -199,6 +234,10 @@ const position = ref({ x: 0, y: 0 });
|
|||
const selectedPageElement = ref(null);
|
||||
const isEditable = ref(false);
|
||||
const inheritanceUnlocked = ref(false);
|
||||
const backgroundColorInput = ref(null);
|
||||
|
||||
let isUpdatingFromStore = false;
|
||||
let updateTimer = null;
|
||||
|
||||
const margins = ref({
|
||||
top: { value: 6, unit: 'mm' },
|
||||
|
|
@ -207,9 +246,22 @@ const margins = ref({
|
|||
right: { value: 7, unit: 'mm' },
|
||||
});
|
||||
|
||||
const background = ref('transparent');
|
||||
const background = ref({
|
||||
value: '',
|
||||
format: 'hex',
|
||||
});
|
||||
|
||||
const pattern = ref('');
|
||||
|
||||
const debouncedUpdate = (callback) => {
|
||||
clearTimeout(updateTimer);
|
||||
updateTimer = setTimeout(callback, 1000);
|
||||
};
|
||||
|
||||
const immediateUpdate = (callback) => {
|
||||
callback();
|
||||
};
|
||||
|
||||
const calculatePosition = (pageElement) => {
|
||||
const rect = pageElement.getBoundingClientRect();
|
||||
const iframeRect = props.iframeRef.getBoundingClientRect();
|
||||
|
|
@ -219,6 +271,87 @@ const calculatePosition = (pageElement) => {
|
|||
};
|
||||
};
|
||||
|
||||
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}`;
|
||||
|
||||
const currentBlock = stylesheetStore.extractBlock('@page');
|
||||
if (!currentBlock) return;
|
||||
|
||||
const updatedBlock = currentBlock.replace(
|
||||
/(margin:\s*)[^;]+/,
|
||||
`$1${marginValue}`
|
||||
);
|
||||
|
||||
stylesheetStore.content = stylesheetStore.content.replace(
|
||||
currentBlock,
|
||||
updatedBlock
|
||||
);
|
||||
};
|
||||
|
||||
const updateBackground = () => {
|
||||
if (!background.value.value) return;
|
||||
|
||||
const currentBlock = stylesheetStore.extractBlock('@page');
|
||||
if (!currentBlock) return;
|
||||
|
||||
if (currentBlock.includes('background:')) {
|
||||
const updatedBlock = currentBlock.replace(
|
||||
/(background:\s*)[^;]+/,
|
||||
`$1${background.value.value}`
|
||||
);
|
||||
stylesheetStore.content = stylesheetStore.content.replace(
|
||||
currentBlock,
|
||||
updatedBlock
|
||||
);
|
||||
} else {
|
||||
const updatedBlock = currentBlock.replace(
|
||||
/(\s*})$/,
|
||||
` background: ${background.value.value};\n$1`
|
||||
);
|
||||
stylesheetStore.content = stylesheetStore.content.replace(
|
||||
currentBlock,
|
||||
updatedBlock
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// Watch margin values (number inputs) with debounce
|
||||
watch(
|
||||
() => [
|
||||
margins.value.top.value,
|
||||
margins.value.bottom.value,
|
||||
margins.value.left.value,
|
||||
margins.value.right.value,
|
||||
],
|
||||
() => {
|
||||
if (isUpdatingFromStore) return;
|
||||
debouncedUpdate(updateMargins);
|
||||
}
|
||||
);
|
||||
|
||||
// Watch margin units (button clicks) without debounce
|
||||
watch(
|
||||
() => [
|
||||
margins.value.top.unit,
|
||||
margins.value.bottom.unit,
|
||||
margins.value.left.unit,
|
||||
margins.value.right.unit,
|
||||
],
|
||||
() => {
|
||||
if (isUpdatingFromStore) return;
|
||||
immediateUpdate(updateMargins);
|
||||
}
|
||||
);
|
||||
|
||||
// Watch background value with debounce
|
||||
watch(
|
||||
() => background.value.value,
|
||||
() => {
|
||||
if (isUpdatingFromStore) return;
|
||||
debouncedUpdate(updateBackground);
|
||||
}
|
||||
);
|
||||
|
||||
const open = (pageElement) => {
|
||||
selectedPageElement.value = pageElement;
|
||||
position.value = calculatePosition(pageElement);
|
||||
|
|
@ -232,10 +365,30 @@ const open = (pageElement) => {
|
|||
setTimeout(() => {
|
||||
Coloris.init();
|
||||
Coloris({
|
||||
themeMode: 'light',
|
||||
alpha: true,
|
||||
format: 'auto',
|
||||
el: '[data-coloris]',
|
||||
theme: 'pill',
|
||||
themeMode: 'dark',
|
||||
formatToggle: true,
|
||||
alpha: true,
|
||||
closeButton: true,
|
||||
closeLabel: 'Fermer',
|
||||
clearButton: true,
|
||||
clearLabel: 'Effacer',
|
||||
swatchesOnly: false,
|
||||
inline: false,
|
||||
wrap: true,
|
||||
swatches: [
|
||||
'#264653',
|
||||
'#2a9d8f',
|
||||
'#e9c46a',
|
||||
'#f4a261',
|
||||
'#e76f51',
|
||||
'#d62828',
|
||||
'#023e8a',
|
||||
'#0077b6',
|
||||
'#ffffff',
|
||||
'#000000',
|
||||
],
|
||||
});
|
||||
}, 0);
|
||||
};
|
||||
|
|
@ -259,6 +412,11 @@ const pageCss = computed(() => {
|
|||
return stylesheetStore.extractBlock('@page') || '';
|
||||
});
|
||||
|
||||
const highlightedCss = computed(() => {
|
||||
if (!pageCss.value) return '';
|
||||
return hljs.highlight(pageCss.value, { language: 'css' }).value;
|
||||
});
|
||||
|
||||
let cssDebounceTimer = null;
|
||||
|
||||
const handleCssInput = (event) => {
|
||||
|
|
@ -276,18 +434,14 @@ const handleCssInput = (event) => {
|
|||
}, 500);
|
||||
};
|
||||
|
||||
// Watch for margin changes
|
||||
watch(
|
||||
margins,
|
||||
(newMargins) => {
|
||||
// TODO: Update @page margins in stylesheet
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
// Watch isEditable to format when exiting edit mode
|
||||
watch(isEditable, async (newValue, oldValue) => {
|
||||
stylesheetStore.isEditing = newValue;
|
||||
|
||||
// Watch for background changes
|
||||
watch(background, (newBackground) => {
|
||||
// TODO: Update @page background in stylesheet
|
||||
// Format when exiting editing mode
|
||||
if (oldValue && !newValue) {
|
||||
await stylesheetStore.formatContent();
|
||||
}
|
||||
});
|
||||
|
||||
defineExpose({ open, close, visible });
|
||||
|
|
@ -426,30 +580,7 @@ defineExpose({ open, close, visible });
|
|||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.unit-toggle {
|
||||
display: flex;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.unit-toggle button {
|
||||
padding: 0.375rem 0.5rem;
|
||||
border: none;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.unit-toggle button:not(:last-child) {
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.unit-toggle button.active {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
}
|
||||
/* Unit toggle styles are inherited from global styles */
|
||||
|
||||
.unlock-btn {
|
||||
width: 100%;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue