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

22
src/components/tools/UrlCleaner.vue
View File

@@ -110,7 +110,7 @@ onUnmounted(() => {
<div class="panel-header">
<h2 class="tool-title">URL Cleaner</h2>
<div class="header-actions">
<button class="icon-btn settings-btn" @click="showExceptionsModal = true" title="Cleaning Exceptions">
<button class="icon-btn settings-btn" @click="showExceptionsModal = true" title="Cleaning Exceptions" v-ripple>
<Settings size="20" />
</button>
<ExtensionStatus :isReady="isExtensionReady" />
@@ -129,7 +129,7 @@ onUnmounted(() => {
</div>
<div class="watch-toggle">
<button class="btn-neon" @click="handleClean">
<button class="btn-neon" @click="handleClean" v-ripple>
Clean
</button>
<button
@@ -138,6 +138,7 @@ onUnmounted(() => {
@click="toggleWatch"
:disabled="!isExtensionReady"
:title="!isExtensionReady ? 'Extension required for auto-watch' : 'Automatically clean URLs from clipboard'"
v-ripple
>
<Power size="18" />
<span>Watch Clipboard</span>
@@ -150,13 +151,13 @@ onUnmounted(() => {
<div class="history-header">
<h3>Cleaned URLs ({{ cleanedHistory.length }})</h3>
<div class="history-actions">
<button class="icon-btn" @click="copyAllUrls" title="Copy all URLs">
<button class="icon-btn" @click="copyAllUrls" title="Copy all URLs" 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 History">
<button class="icon-btn delete-btn" @click="clearHistory" title="Clear History" v-ripple>
<Trash2 size="18" />
</button>
</div>
@@ -175,13 +176,13 @@ onUnmounted(() => {
</div>
</div>
<div class="item-actions">
<button class="icon-btn" @click="copyToClipboard(item.cleaned)" title="Copy">
<button class="icon-btn" @click="copyToClipboard(item.cleaned)" title="Copy" v-ripple>
<Copy size="18" />
</button>
<a :href="item.cleaned" target="_blank" class="icon-btn" title="Open">
<ExternalLink size="18" />
</a>
<button class="icon-btn delete-btn" @click="removeEntry(item.id)" title="Remove">
<button class="icon-btn delete-btn" @click="removeEntry(item.id)" title="Remove" v-ripple>
<X size="18" />
</button>
</div>
@@ -205,13 +206,6 @@ onUnmounted(() => {
</template>
<style scoped>
.tool-container.full-width {
max-width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.input-section {
display: flex;
flex-direction: column;