maciejpi/nordabiz
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

improve: add color-coded status pills for message read status
Some checks are pending
NordaBiz Tests / Unit & Integration Tests (push) Waiting to run
Details
NordaBiz Tests / E2E Tests (Playwright) (push) Blocked by required conditions
Details
NordaBiz Tests / Smoke Tests (Production) (push) Blocked by required conditions
Details
NordaBiz Tests / Send Failure Notification (push) Blocked by required conditions
Details

Browse Source 
Green pill for read messages, yellow/amber for unread/waiting,
blue for received. Applied consistently across sent list, message
view, and thread view.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Maciej Pienczyn 2026-03-11 20:53:47 +01:00
parent 0c5e4cf726
commit 28a4c2236e
2 changed files with 76 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
templates/messages/sent.html
View File

@ -150,22 +150,27 @@
font-weight: 500;
}
.read-status {
font-size: 11px;
.status-pill {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 1px 7px;
border-radius: 10px;
font-size: 11px;
font-weight: 500;
margin-top: 3px;
}
.read-status.is-read {
color: var(--primary);
.status-pill svg {
width: 12px;
height: 12px;
}
.read-status.is-unread {
color: var(--text-secondary);
.status-pill.read {
background: #dcfce7;
color: #15803d;
}
.read-status svg {
width: 13px;
height: 13px;
.status-pill.waiting {
background: #fef3c7;
color: #b45309;
}
.message-badges {
@ -292,15 +297,15 @@
<span class="message-recipient">Do: <strong>{{ msg.recipient.name or msg.recipient.email.split('@')[0] }}</strong></span>
</div>
{% if msg.is_read %}
<div class="read-status is-read" title="Przeczytana {{ msg.read_at.strftime('%d.%m.%Y %H:%M') if msg.read_at else '' }}">
<span class="status-pill read" title="Przeczytana {{ msg.read_at.strftime('%d.%m.%Y %H:%M') if msg.read_at else '' }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 7l-8 8-4-4"/><path d="M22 7l-8 8-1.5-1.5" opacity="0.6"/></svg>
Przeczytana
</div>
</span>
{% else %}
<div class="read-status is-unread">
<span class="status-pill waiting">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 7l-8 8-4-4"/></svg>
Wysłana
</div>
Nieprzeczytana
</span>
{% endif %}
</div>
</a>

77
templates/messages/view.html
View File

@ -122,13 +122,51 @@
}
.status-item.read {
color: var(--primary);
color: #16a34a;
}
.status-item.waiting {
color: #d97706;
}
.status-item.sent {
color: var(--text-secondary);
}
.status-item.received {
color: var(--primary);
}
.status-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 500;
}
.status-pill.read {
background: #dcfce7;
color: #15803d;
}
.status-pill.waiting {
background: #fef3c7;
color: #b45309;
}
.status-pill.sent {
background: #f3f4f6;
color: #6b7280;
}
.status-pill.received {
background: #dbeafe;
color: #1d4ed8;
}
/* Thread */
.thread-section {
margin-bottom: var(--spacing-lg);
@ -360,22 +398,21 @@
<span>{{ msg.created_at.strftime('%d.%m.%Y %H:%M') }}</span>
{% if msg.sender_id == current_user.id %}
{% if msg.is_read %}
<span class="status-item read" title="Przeczytana {{ msg.read_at.strftime('%d.%m.%Y %H:%M') if msg.read_at else '' }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 7l-8 8-4-4"/><path d="M22 7l-8 8-1.5-1.5" opacity="0.6"/></svg>
<span class="status-pill read" title="Przeczytana {{ msg.read_at.strftime('%d.%m.%Y %H:%M') if msg.read_at else '' }}">
<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 7l-8 8-4-4"/><path d="M22 7l-8 8-1.5-1.5" opacity="0.6"/></svg>
Przeczytana
</span>
{% else %}
<span class="status-item sent">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 7l-8 8-4-4"/></svg>
Wysłana
<span class="status-pill waiting">
<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 7l-8 8-4-4"/></svg>
Nieprzeczytana
</span>
{% endif %}
{% else %}
{% if msg.is_read %}
<span class="status-item read">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
<span class="status-pill received">
<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
Odebrana
</span>
{% endif %}
{% endif %}
{% if msg.attachments %}
<span title="{{ msg.attachments|length }} załącznik{{ 'ów' if msg.attachments|length > 1 else '' }}">📎</span>
@ -468,26 +505,26 @@
</div>
<div class="message-status-bar">
<span class="status-item">
<span class="status-item sent">
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
Wysłana {{ message.created_at.strftime('%d.%m.%Y o %H:%M') }}
{{ message.created_at.strftime('%d.%m.%Y o %H:%M') }}
</span>
{% if message.sender_id == current_user.id %}
{% if message.is_read %}
<span class="status-item read">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 7l-8 8-4-4"/><path d="M22 7l-8 8-1.5-1.5" opacity="0.6"/></svg>
Przeczytana {{ message.read_at.strftime('%d.%m.%Y o %H:%M') if message.read_at else '' }}
<span class="status-pill read" title="Przeczytana {{ message.read_at.strftime('%d.%m.%Y o %H:%M') if message.read_at else '' }}">
<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 7l-8 8-4-4"/><path d="M22 7l-8 8-1.5-1.5" opacity="0.6"/></svg>
Przeczytana{{ ' ' + message.read_at.strftime('%d.%m o %H:%M') if message.read_at else '' }}
</span>
{% else %}
<span class="status-item sent">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 7l-8 8-4-4"/></svg>
<span class="status-pill waiting">
<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 7l-8 8-4-4"/></svg>
Oczekuje na przeczytanie
</span>
{% endif %}
{% else %}
<span class="status-item read">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
Odebrana i przeczytana
<span class="status-pill received">
<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
Odebrana
</span>
{% endif %}
</div>