Improve message layout
This commit is contained in:
@@ -257,6 +257,14 @@
|
||||
<div class="compose-source-badge-wrap">
|
||||
<span class="compose-source-badge source-{{ msg.source_service|default:'web'|lower }}">{{ msg.source_label }}</span>
|
||||
</div>
|
||||
{% if msg.block_gap_display %}
|
||||
<p
|
||||
class="compose-block-gap"
|
||||
title="Time since previous message in this sender block">
|
||||
<span class="icon is-small"><i class="fa-regular fa-hourglass-half"></i></span>
|
||||
<span class="compose-block-gap-val">{{ msg.block_gap_display }}</span>
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if msg.image_urls %}
|
||||
{% for image_url in msg.image_urls %}
|
||||
<figure class="compose-media">
|
||||
@@ -462,6 +470,20 @@
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 0.36rem;
|
||||
}
|
||||
#{{ panel_id }} .compose-block-gap {
|
||||
margin: -0.12rem 0 0.26rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.22rem;
|
||||
font-size: 0.64rem;
|
||||
line-height: 1.1;
|
||||
color: #5f6c7d;
|
||||
opacity: 0.95;
|
||||
}
|
||||
#{{ panel_id }} .compose-block-gap-val {
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
#{{ panel_id }} .compose-source-badge {
|
||||
font-size: 0.84rem;
|
||||
padding: 0.12rem 0.5rem;
|
||||
@@ -1815,6 +1837,22 @@
|
||||
badgeWrap.appendChild(badge);
|
||||
bubble.appendChild(badgeWrap);
|
||||
}
|
||||
if (msg.block_gap_display) {
|
||||
const blockGap = document.createElement("p");
|
||||
blockGap.className = "compose-block-gap";
|
||||
blockGap.title = "Time since previous message in this sender block";
|
||||
const icon = document.createElement("span");
|
||||
icon.className = "icon is-small";
|
||||
const i = document.createElement("i");
|
||||
i.className = "fa-regular fa-hourglass-half";
|
||||
icon.appendChild(i);
|
||||
const value = document.createElement("span");
|
||||
value.className = "compose-block-gap-val";
|
||||
value.textContent = String(msg.block_gap_display || "");
|
||||
blockGap.appendChild(icon);
|
||||
blockGap.appendChild(value);
|
||||
bubble.appendChild(blockGap);
|
||||
}
|
||||
const imageCandidatesFromPayload = Array.isArray(msg.image_urls) && msg.image_urls.length
|
||||
? msg.image_urls
|
||||
: (msg.image_url ? [msg.image_url] : []);
|
||||
@@ -1858,7 +1896,7 @@
|
||||
icon.appendChild(i);
|
||||
const timeSpan = document.createElement("span");
|
||||
timeSpan.className = "compose-tick-time";
|
||||
timeSpan.textContent = String(msg.read_display || "");
|
||||
timeSpan.textContent = String(msg.read_delta_display || "");
|
||||
tickWrap.appendChild(icon);
|
||||
tickWrap.appendChild(timeSpan);
|
||||
meta.appendChild(document.createTextNode(" "));
|
||||
@@ -1874,7 +1912,7 @@
|
||||
icon.appendChild(i);
|
||||
const timeSpan = document.createElement("span");
|
||||
timeSpan.className = "compose-tick-time";
|
||||
timeSpan.textContent = String(msg.delivered_display || "");
|
||||
timeSpan.textContent = String(msg.delivered_delta_display || "");
|
||||
tickWrap.appendChild(icon);
|
||||
tickWrap.appendChild(timeSpan);
|
||||
meta.appendChild(document.createTextNode(" "));
|
||||
|
||||
Reference in New Issue
Block a user