Tobias/Fichero
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance UI layout and styles for LabelDesigner and MainPage components

Browse Source
This commit is contained in:
Tobias Leuschner
2026-03-07 15:11:03 +01:00
parent 822dbd35b2
commit 9d77fbe366
3 changed files with 170 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/components/LabelDesigner.svelte
View File

@@ -436,17 +436,19 @@
<svelte:window bind:innerWidth={windowWidth} onkeydown={onKeyDown} onpaste={onPaste} />
<div class="image-editor">
<div class="row mb-3">
<div class="row mb-4">
<div class="col d-flex {windowWidth === 0 || labelProps.size.width < windowWidth ? 'justify-content-center' : ''}">
<div class="canvas-wrapper print-start-{labelProps.printDirection}">
<canvas bind:this={htmlCanvas}></canvas>
<div class="canvas-panel">
<div class="canvas-wrapper print-start-{labelProps.printDirection}">
<canvas bind:this={htmlCanvas}></canvas>
</div>
</div>
</div>
</div>
<div class="row mb-1">
<div class="row mb-2">
<div class="col d-flex justify-content-center">
<div class="toolbar d-flex flex-wrap gap-1 justify-content-center align-items-center">
<div class="toolbar toolbar-bar d-flex flex-wrap gap-1 justify-content-center align-items-center">
<LabelPropsEditor {labelProps} onChange={onUpdateLabelProps} />
<button class="btn btn-sm btn-secondary" onclick={clearCanvas} title={$tr("editor.clear")}>
@@ -493,9 +495,10 @@
</div>
</div>
<div class="row mb-1">
{#if selectedCount > 0 || selectedObject}
<div class="row mb-2">
<div class="col d-flex justify-content-center">
<div class="toolbar d-flex flex-wrap gap-1 justify-content-center align-items-center">
<div class="toolbar toolbar-bar d-flex flex-wrap gap-1 justify-content-center align-items-center">
{#if selectedCount > 0}
<button class="btn btn-sm btn-danger me-1" onclick={deleteSelected} title={$tr("editor.delete")}>
<MdIcon icon="delete" />
@@ -534,6 +537,7 @@
</div>
</div>
</div>
{/if}
{#if previewOpened}
<PrintPreview
@@ -548,16 +552,16 @@
<style>
.canvas-wrapper {
border: 1px solid var(--border-standard);
background-color: var(--surface-1);
}
.canvas-wrapper.print-start-left {
border-left: 2px solid var(--mark-feed);
border-left: 3px solid var(--mark-feed);
}
.canvas-wrapper.print-start-top {
border-top: 2px solid var(--mark-feed);
border-top: 3px solid var(--mark-feed);
}
.canvas-wrapper canvas {
image-rendering: pixelated;
display: block;
}
</style>