sha/sLogos
1
0
Fork 0
mirror of https://github.com/shadoll/sLogos.git synced 2025-12-20 11:32:01 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: update tag labels for consistency and add clear all filters functionality

Browse Source
This commit is contained in:
sHa
2025-05-29 11:45:14 +03:00
parent f4f4312d5b
commit 436d6847b2
2 changed files with 63 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/Header.svelte
View File

@@ -255,9 +255,9 @@
</span>
<span class="hover-icon">
{#if compactMode}
❌
✕
{:else}
✔️
✔︎
{/if}
</span>
</span>
@@ -319,14 +319,14 @@
<span class="tag-icon">
<span class="permanent-icon">
{#if isSelected}
✔️
✔︎
{/if}
</span>
<span class="hover-icon">
{#if isSelected}
❌
✕
{:else}
✔️
✔︎
{/if}
</span>
</span>
@@ -347,6 +347,23 @@
{/if}
</div>
{/if}
{#if selectedTags.length > 0 || compactMode}
<div class="filter-separator"></div>
<div class="clear-all-section">
<button
class="clear-all-button"
on:click={() => {
selectedTags.forEach(tag => removeTag(tag));
if (compactMode) setCompactMode(false);
}}
aria-label="Clear all filters"
>
<span class="clear-all-icon">✕</span>
<span class="clear-all-text">Clear all</span>
</button>
</div>
{/if}
</div>
{/if}
</div>
@@ -943,4 +960,43 @@
transition: opacity 0.2s;
position: absolute;
}
.clear-all-section {
display: flex;
flex-direction: column;
}
.clear-all-button {
background: none;
border: none;
padding: 0.4rem 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
border-radius: 4px;
transition: background 0.2s;
text-align: left;
color: var(--color-text);
width: 100%;
}
.clear-all-button:hover {
background: var(--color-border);
}
.clear-all-icon {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 14px;
}
.clear-all-text {
font-size: 0.85em;
font-weight: 500;
}
</style>