mirror of
https://github.com/shadoll/sLogos.git
synced 2026-02-04 02:53:22 +00:00
feat: update tag labels for consistency and add clear all filters functionality
This commit is contained in:
@@ -413,7 +413,7 @@
|
|||||||
"disable": false,
|
"disable": false,
|
||||||
"brand": "Grafana",
|
"brand": "Grafana",
|
||||||
"tags": [
|
"tags": [
|
||||||
"monitoring",
|
"Monitoring Tools",
|
||||||
"software"
|
"software"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@@ -1167,7 +1167,7 @@
|
|||||||
"disable": false,
|
"disable": false,
|
||||||
"brand": "Uptime Kuma",
|
"brand": "Uptime Kuma",
|
||||||
"tags": [
|
"tags": [
|
||||||
"monitoring",
|
"Monitoring Tools",
|
||||||
"software"
|
"software"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -255,9 +255,9 @@
|
|||||||
</span>
|
</span>
|
||||||
<span class="hover-icon">
|
<span class="hover-icon">
|
||||||
{#if compactMode}
|
{#if compactMode}
|
||||||
❌
|
✕
|
||||||
{:else}
|
{:else}
|
||||||
✔️
|
✔︎
|
||||||
{/if}
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
@@ -319,14 +319,14 @@
|
|||||||
<span class="tag-icon">
|
<span class="tag-icon">
|
||||||
<span class="permanent-icon">
|
<span class="permanent-icon">
|
||||||
{#if isSelected}
|
{#if isSelected}
|
||||||
✔️
|
✔︎
|
||||||
{/if}
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
<span class="hover-icon">
|
<span class="hover-icon">
|
||||||
{#if isSelected}
|
{#if isSelected}
|
||||||
❌
|
✕
|
||||||
{:else}
|
{:else}
|
||||||
✔️
|
✔︎
|
||||||
{/if}
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
@@ -347,6 +347,23 @@
|
|||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/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>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
@@ -943,4 +960,43 @@
|
|||||||
transition: opacity 0.2s;
|
transition: opacity 0.2s;
|
||||||
position: absolute;
|
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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user