gkucmierz/tools-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(qr): enhance editable gradient handles with a glow and add visibility toggle

Browse Source
This commit is contained in:
Grzegorz Kucmierz
2026-03-04 03:24:53 +00:00
parent 8fa0c9bd44
commit 805b986a7b
1 changed files with 32 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/tools/QrCode.vue
View File

@@ -22,6 +22,7 @@ const fgType = useLocalStorage('fgType', 'solid', 'qr-code')
const fgColor1 = useLocalStorage('fgColor1', '#000000', 'qr-code') const fgColor1 = useLocalStorage('fgColor1', '#000000', 'qr-code')
const fgColor2 = useLocalStorage('fgColor2', '#10b981', 'qr-code') const fgColor2 = useLocalStorage('fgColor2', '#10b981', 'qr-code')
const fgGradPos = useLocalStorage('fgGradPos', { x1: 0, y1: 0, x2: 100, y2: 100 }, 'qr-code') const fgGradPos = useLocalStorage('fgGradPos', { x1: 0, y1: 0, x2: 100, y2: 100 }, 'qr-code')
const showHandles = useLocalStorage('showHandles', true, 'qr-code')
const svgContent = ref('') const svgContent = ref('')
const previewRef = ref(null) const previewRef = ref(null)
@@ -281,24 +282,32 @@ const triggerDownload = (blob, filename) => {
<div class="svg-wrapper" ref="qrFrameRef"> <div class="svg-wrapper" ref="qrFrameRef">
<div v-html="svgContent" class="svg-content-box"></div> <div v-html="svgContent" class="svg-content-box"></div>
<!-- Background Gradient Handles --> <template v-if="showHandles">
<template v-if="!isBgTransparent && bgType !== 'solid'"> <!-- Background Gradient Handles -->
<svg class="grad-line-svg"><line :x1="bgGradPos.x1 + '%'" :y1="bgGradPos.y1 + '%'" :x2="bgGradPos.x2 + '%'" :y2="bgGradPos.y2 + '%'" class="bg-line" /></svg> <template v-if="!isBgTransparent && bgType !== 'solid'">
<div class="grad-handle bg-handle handle-1" :style="{ left: bgGradPos.x1 + '%', top: bgGradPos.y1 + '%' }" @mousedown="startDrag($event, 'bg:1')" @touchstart.prevent="startDrag($event, 'bg:1')"></div> <svg class="grad-line-svg"><line :x1="bgGradPos.x1 + '%'" :y1="bgGradPos.y1 + '%'" :x2="bgGradPos.x2 + '%'" :y2="bgGradPos.y2 + '%'" class="bg-line" /></svg>
<div class="grad-handle bg-handle handle-2" :style="{ left: bgGradPos.x2 + '%', top: bgGradPos.y2 + '%' }" @mousedown="startDrag($event, 'bg:2')" @touchstart.prevent="startDrag($event, 'bg:2')"></div> <div class="grad-handle bg-handle handle-1" :style="{ left: bgGradPos.x1 + '%', top: bgGradPos.y1 + '%' }" @mousedown="startDrag($event, 'bg:1')" @touchstart.prevent="startDrag($event, 'bg:1')"></div>
</template> <div class="grad-handle bg-handle handle-2" :style="{ left: bgGradPos.x2 + '%', top: bgGradPos.y2 + '%' }" @mousedown="startDrag($event, 'bg:2')" @touchstart.prevent="startDrag($event, 'bg:2')"></div>
</template>
<!-- Foreground Gradient Handles --> <!-- Foreground Gradient Handles -->
<template v-if="fgType !== 'solid'"> <template v-if="fgType !== 'solid'">
<svg class="grad-line-svg"><line :x1="fgGradPos.x1 + '%'" :y1="fgGradPos.y1 + '%'" :x2="fgGradPos.x2 + '%'" :y2="fgGradPos.y2 + '%'" class="fg-line" /></svg> <svg class="grad-line-svg"><line :x1="fgGradPos.x1 + '%'" :y1="fgGradPos.y1 + '%'" :x2="fgGradPos.x2 + '%'" :y2="fgGradPos.y2 + '%'" class="fg-line" /></svg>
<div class="grad-handle fg-handle handle-1" :style="{ left: fgGradPos.x1 + '%', top: fgGradPos.y1 + '%' }" @mousedown="startDrag($event, 'fg:1')" @touchstart.prevent="startDrag($event, 'fg:1')"></div> <div class="grad-handle fg-handle handle-1" :style="{ left: fgGradPos.x1 + '%', top: fgGradPos.y1 + '%' }" @mousedown="startDrag($event, 'fg:1')" @touchstart.prevent="startDrag($event, 'fg:1')"></div>
<div class="grad-handle fg-handle handle-2" :style="{ left: fgGradPos.x2 + '%', top: fgGradPos.y2 + '%' }" @mousedown="startDrag($event, 'fg:2')" @touchstart.prevent="startDrag($event, 'fg:2')"></div> <div class="grad-handle fg-handle handle-2" :style="{ left: fgGradPos.x2 + '%', top: fgGradPos.y2 + '%' }" @mousedown="startDrag($event, 'fg:2')" @touchstart.prevent="startDrag($event, 'fg:2')"></div>
</template>
</template> </template>
</div> </div>
</div> </div>
</div> </div>
<div class="download-settings"> <div class="download-settings">
<div class="control-group" v-if="fgType !== 'solid' || (!isBgTransparent && bgType !== 'solid')">
<label class="checkbox-label">
<input type="checkbox" v-model="showHandles"> Show edit handles
</label>
</div>
<div class="control-group"> <div class="control-group">
<label>Size (px)</label> <label>Size (px)</label>
<div class="number-control size-control"> <div class="number-control size-control">
@@ -482,13 +491,15 @@ const triggerDownload = (blob, filename) => {
.grad-handle { .grad-handle {
position: absolute; position: absolute;
width: 20px; width: 14px;
height: 20px; height: 14px;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
border-radius: 50%; border-radius: 50%;
cursor: grab; cursor: grab;
z-index: 10; z-index: 10;
touch-action: none; touch-action: none;
background: var(--text-strong);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 8px 2px rgba(255, 255, 255, 0.6);
} }
.grad-handle:active { .grad-handle:active {
@@ -496,27 +507,25 @@ const triggerDownload = (blob, filename) => {
} }
.fg-handle { .fg-handle {
border: 2px solid var(--primary-accent); background: var(--text-strong);
background: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
} }
.bg-handle { .bg-handle {
border: 2px dotted #888; background: var(--text-secondary);
background: rgba(255,255,255,0.9);
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
} }
.fg-line { .fg-line {
stroke: var(--primary-accent); stroke: var(--text-strong);
stroke-width: 2; stroke-width: 1.5;
stroke-dasharray: 4; stroke-dasharray: 4;
filter: drop-shadow(0px 0px 2px rgba(255,255,255,1));
} }
.bg-line { .bg-line {
stroke: #888; stroke: var(--text-secondary);
stroke-width: 2; stroke-width: 1.5;
stroke-dasharray: 2; stroke-dasharray: 2;
filter: drop-shadow(0px 0px 2px rgba(255,255,255,1));
} }
.download-settings { .download-settings {