till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-15 01:21:09 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat(manacore/web): show tags as labeled pills instead of dots

Browse source 
Replace tiny 6px tag dots with readable pills showing colored dot +
tag name. Uses color-mix for subtle tinted background per tag color.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-03 00:30:44 +02:00
parent e9d4cbfdba
commit 0d142efa3c
3 changed files with 66 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

25
apps/manacore/apps/web/src/lib/modules/calendar/ListView.svelte
View file

@ -156,7 +156,10 @@
{#if eventTags.length > 0}
<div class="event-tags">
{#each eventTags as tag (tag.id)}
<span class="tag-dot" style="background: {tag.color}" title={tag.name}></span>
<span class="tag-pill" style="--tag-color: {tag.color}">
<span class="tag-dot" style="background: {tag.color}"></span>
{tag.name}
</span>
{/each}
</div>
{/if}
@ -318,9 +321,25 @@
gap: 0.25rem;
flex-shrink: 0;
}
.tag-pill {
display: inline-flex;
align-items: center;
gap: 0.1875rem;
padding: 0 0.325rem;
border-radius: 9999px;
background: color-mix(in srgb, var(--tag-color) 12%, transparent);
font-size: 0.5625rem;
color: #6b7280;
line-height: 1.25rem;
white-space: nowrap;
}
:global(.dark) .tag-pill {
background: color-mix(in srgb, var(--tag-color) 18%, transparent);
color: #9ca3af;
}
.tag-dot {
width: 6px;
height: 6px;
width: 5px;
height: 5px;
border-radius: 9999px;
flex-shrink: 0;
}

25
apps/manacore/apps/web/src/lib/modules/contacts/ListView.svelte
View file

@ -125,7 +125,10 @@
{#if contactTags.length > 0}
<div class="contact-tags">
{#each contactTags as tag (tag.id)}
<span class="tag-dot" style="background: {tag.color}" title={tag.name}></span>
<span class="tag-pill" style="--tag-color: {tag.color}">
<span class="tag-dot" style="background: {tag.color}"></span>
{tag.name}
</span>
{/each}
</div>
{/if}
@ -284,9 +287,25 @@
gap: 0.25rem;
margin-top: 0.125rem;
}
.tag-pill {
display: inline-flex;
align-items: center;
gap: 0.1875rem;
padding: 0 0.325rem;
border-radius: 9999px;
background: color-mix(in srgb, var(--tag-color) 12%, transparent);
font-size: 0.5625rem;
color: #6b7280;
line-height: 1.25rem;
white-space: nowrap;
}
:global(.dark) .tag-pill {
background: color-mix(in srgb, var(--tag-color) 18%, transparent);
color: #9ca3af;
}
.tag-dot {
width: 6px;
height: 6px;
width: 5px;
height: 5px;
border-radius: 9999px;
flex-shrink: 0;
}

25
apps/manacore/apps/web/src/lib/modules/todo/ListView.svelte
View file

@ -146,7 +146,10 @@
<span class="task-due">{new Date(task.dueDate).toLocaleDateString('de')}</span>
{/if}
{#each taskTags as tag (tag.id)}
<span class="tag-dot" style="background: {tag.color}" title={tag.name}></span>
<span class="tag-pill" style="--tag-color: {tag.color}">
<span class="tag-dot" style="background: {tag.color}"></span>
{tag.name}
</span>
{/each}
</div>
{/if}
@ -325,9 +328,25 @@
font-size: 0.6875rem;
color: #9ca3af;
}
.tag-pill {
display: inline-flex;
align-items: center;
gap: 0.1875rem;
padding: 0 0.325rem;
border-radius: 9999px;
background: color-mix(in srgb, var(--tag-color) 12%, transparent);
font-size: 0.5625rem;
color: #6b7280;
line-height: 1.25rem;
white-space: nowrap;
}
:global(.dark) .tag-pill {
background: color-mix(in srgb, var(--tag-color) 18%, transparent);
color: #9ca3af;
}
.tag-dot {
width: 6px;
height: 6px;
width: 5px;
height: 5px;
border-radius: 9999px;
flex-shrink: 0;
}