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

175
src/components/tools/UrlCleanerExceptionsModal.vue
View File

@@ -30,7 +30,7 @@ onUnmounted(() => {
const newRule = ref({
domainPattern: '',
keepParams: '',
keepParams: [],
keepHash: false,
keepAllParams: false
})
@@ -43,10 +43,12 @@ const localExceptions = computed({
const addRule = () => {
if (!newRule.value.domainPattern) return
const params = newRule.value.keepParams
.split(',')
.map(p => p.trim())
.filter(p => p)
// Flush any pending text in the param input before adding rule
if (pendingParamInput.value.trim()) {
addPendingParam(pendingParamInput.value)
}
const params = [...newRule.value.keepParams]
const existingRuleIndex = localExceptions.value.findIndex(
r => r.domainPattern === newRule.value.domainPattern
@@ -92,19 +94,48 @@ const addRule = () => {
// Reset form
newRule.value = {
domainPattern: '',
keepParams: '',
keepParams: [],
keepHash: false,
keepAllParams: false
}
pendingParamInput.value = ''
}
const pendingParamInput = ref('')
const handleParamInputKeydown = (e) => {
if (e.key === 'Enter' || e.key === ',' || e.key === ' ') {
e.preventDefault()
addPendingParam(pendingParamInput.value)
} else if (e.key === 'Backspace' && pendingParamInput.value === '') {
// Remove last param if backspace is pressed on empty input
if (newRule.value.keepParams.length > 0) {
newRule.value.keepParams.pop()
}
}
}
const addPendingParam = (val) => {
const cleanVals = val.split(/[\s,]+/).map(v => v.trim()).filter(Boolean)
if (cleanVals.length > 0) {
const updatedParams = [...new Set([...newRule.value.keepParams, ...cleanVals])]
newRule.value.keepParams = updatedParams
}
pendingParamInput.value = ''
}
const removeNewRuleParam = (paramToRemove) => {
newRule.value.keepParams = newRule.value.keepParams.filter(p => p !== paramToRemove)
}
const editRule = (rule) => {
newRule.value = {
domainPattern: rule.domainPattern,
keepParams: Array.isArray(rule.keepParams) ? rule.keepParams.join(', ') : '',
keepParams: Array.isArray(rule.keepParams) ? [...rule.keepParams] : [],
keepHash: !!rule.keepHash,
keepAllParams: !!rule.keepAllParams
}
pendingParamInput.value = ''
}
const removeRule = (id) => {
@@ -172,7 +203,7 @@ const resetToDefault = (ruleId) => {
<template>
<Teleport to="body">
<div v-if="isOpen" class="modal-overlay" @click.self="$emit('close')">
<div class="modal-content">
<div class="modal-content glass-panel">
<div class="modal-header">
<h3>URL Cleaning Exceptions</h3>
<button class="close-btn" @click="$emit('close')">
@@ -195,25 +226,35 @@ const resetToDefault = (ruleId) => {
class="input-field"
@keyup.enter="addRule"
>
<input
v-model="newRule.keepParams"
placeholder="Keep params (comma separated, e.g. v, id)"
class="input-field"
@keyup.enter="addRule"
>
<div class="token-input-field input-field" @click="$refs.paramInput?.focus()">
<span v-for="param in newRule.keepParams" :key="param" class="token-badge">
{{ param }}
<button class="remove-token-btn" @click.stop="removeNewRuleParam(param)">
<X size="12" />
</button>
</span>
<input
ref="paramInput"
v-model="pendingParamInput"
placeholder="Params (Space, Comma or Enter to add)"
class="token-raw-input"
@keydown="handleParamInputKeydown"
@blur="addPendingParam(pendingParamInput)"
>
</div>
</div>
<div class="form-row checkbox-row">
<div class="checkbox-group">
<label class="checkbox-label">
<label class="checkbox-label" v-ripple>
<input type="checkbox" v-model="newRule.keepHash">
Keep Anchor (#)
</label>
<label class="checkbox-label">
<label class="checkbox-label" v-ripple>
<input type="checkbox" v-model="newRule.keepAllParams">
Keep all params
</label>
</div>
<button class="btn-neon small" @click="addRule" :disabled="!newRule.domainPattern">
<button class="btn-neon small" @click="addRule" :disabled="!newRule.domainPattern" v-ripple>
<Plus size="16" /> Add Rule
</button>
</div>
@@ -262,6 +303,7 @@ const resetToDefault = (ruleId) => {
class="icon-btn"
@click="toggleRule(rule.id)"
:title="rule.isEnabled ? 'Disable rule' : 'Enable rule'"
v-ripple
>
<div class="toggle-switch" :class="{ active: rule.isEnabled }"></div>
</button>
@@ -271,10 +313,11 @@ const resetToDefault = (ruleId) => {
class="icon-btn delete-btn"
@click="removeRule(rule.id)"
title="Remove rule"
v-ripple
>
<Trash2 size="18" />
</button>
<button v-else class="btn-neon small default-reset" @click="resetToDefault(rule.id)" title="Restore default rule">
<button v-else class="btn-neon small default-reset" @click="resetToDefault(rule.id)" title="Restore default rule" v-ripple>
<RotateCcw size="16" /> Default
</button>
</div>
@@ -303,10 +346,6 @@ const resetToDefault = (ruleId) => {
}
.modal-content {
background: var(--glass-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--glass-border);
border-radius: 16px;
padding: 0;
max-width: 800px;
@@ -314,7 +353,6 @@ const resetToDefault = (ruleId) => {
max-height: 85vh;
display: flex;
flex-direction: column;
box-shadow: var(--glass-shadow);
color: var(--text-color);
}
@@ -439,10 +477,63 @@ const resetToDefault = (ruleId) => {
outline: none;
}
.input-field:focus {
.input-field:focus, .token-input-field:focus-within {
border-color: var(--primary-accent);
}
.token-input-field {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: center;
padding: 0.4rem 0.6rem;
cursor: text;
}
.token-raw-input {
flex: 1;
min-width: 150px;
background: none;
border: none;
color: var(--text-color);
outline: none;
font-size: 0.95rem;
padding: 0.2rem 0;
}
.token-raw-input:focus {
border: none !important;
box-shadow: none !important;
}
.token-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background: rgba(var(--primary-accent-rgb), 0.15);
border: 1px solid rgba(var(--primary-accent-rgb), 0.3);
color: var(--primary-accent);
padding: 0.15rem 0.4rem;
border-radius: 4px;
font-size: 0.85rem;
}
.remove-token-btn {
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
color: inherit;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s;
}
.remove-token-btn:hover {
opacity: 1;
}
.checkbox-label {
display: flex;
align-items: center;
@@ -450,6 +541,31 @@ const resetToDefault = (ruleId) => {
color: var(--text-secondary);
font-size: 0.9rem;
cursor: pointer;
padding: 0.4rem 0.8rem;
background: var(--toggle-bg);
border: 1px solid var(--toggle-border);
border-radius: 6px;
transition: all 0.2s ease;
user-select: none;
}
.checkbox-label:hover {
border-color: var(--toggle-hover-border);
color: var(--text-color);
}
.checkbox-label:has(input:checked) {
background: rgba(var(--primary-accent-rgb), 0.2);
border-color: var(--primary-accent);
color: var(--primary-accent);
}
.checkbox-label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.btn-neon.small {
@@ -505,16 +621,7 @@ const resetToDefault = (ruleId) => {
flex-wrap: wrap;
}
.detail-tag {
font-size: 0.8rem;
background: rgba(255, 255, 255, 0.1);
padding: 0.2rem 0.5rem;
border-radius: 4px;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 0.4rem;
}
.remove-param-btn {
background: none;