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

feat(ui): refine input states, add tokenized params & ripple effects

Browse Source 
- Refactored Url Cleaner Exception 'Keep params' into a tokenized input array (pills/badges)
- Standardized UI contrast: ensured proper label highlighting in light/dark themes
- Expanded v-ripple interaction effect to buttons across all remaining tools, header, and modals
- Moved base .detail-tag styles into global CSS variables
- Web worker generation for QR codes (WIP)
This commit is contained in:
Grzegorz Kucmierz
2026-03-04 02:41:58 +00:00
parent b51bc61cf3
commit 18912368a4
13 changed files with 1029 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/tools/QrScanner.vue
View File

@@ -307,7 +307,7 @@ const isUrl = (string) => {
<div v-if="error" class="error-overlay">
<p>{{ error }}</p>
<button @click="startScan" class="retry-btn">Retry</button>
<button @click="startScan" class="retry-btn" v-ripple>Retry</button>
</div>
<button
@@ -315,6 +315,7 @@ const isUrl = (string) => {
class="switch-camera-btn"
@click.stop="switchCamera"
title="Switch Camera"
v-ripple
>
<SwitchCamera size="24" />
</button>
@@ -324,13 +325,13 @@ const isUrl = (string) => {
<div class="results-header">
<h3>Scanned Codes ({{ scannedCodes.length }})</h3>
<div v-if="scannedCodes.length > 0" class="header-actions">
<button class="icon-btn" @click="copyAll" title="Copy All">
<button class="icon-btn" @click="copyAll" title="Copy All" v-ripple>
<Copy size="18" />
</button>
<button class="icon-btn" @click="downloadJson" title="Download JSON">
<button class="icon-btn" @click="downloadJson" title="Download JSON" v-ripple>
<Download size="18" />
</button>
<button class="icon-btn delete-btn" @click="clearHistory" title="Clear All">
<button class="icon-btn delete-btn" @click="clearHistory" title="Clear All" v-ripple>
<Trash2 size="18" />
</button>
</div>
@@ -349,10 +350,10 @@ const isUrl = (string) => {
</div>
</div>
<div class="item-actions">
<button class="icon-btn" @click="copyToClipboard(code.value)" title="Copy">
<button class="icon-btn" @click="copyToClipboard(code.value)" title="Copy" v-ripple>
<Copy size="18" />
</button>
<button class="icon-btn delete-btn" @click="removeCode(code.id)" title="Remove">
<button class="icon-btn delete-btn" @click="removeCode(code.id)" title="Remove" v-ripple>
<Trash2 size="18" />
</button>
</div>
@@ -369,12 +370,6 @@ const isUrl = (string) => {
</template>
<style scoped>
.tool-container.full-width {
max-width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.scanner-content {
display: flex;