diff --git a/website/src/js/channel-preview.jsc b/website/src/js/channel-preview.jsc
index aa36944ae4..170aa79dc1 100644
--- a/website/src/js/channel-preview.jsc
+++ b/website/src/js/channel-preview.jsc
@@ -110,7 +110,7 @@ const STYLE = `
.simplex-preview-msg-name {
font-size: 13.5px;
color: #8b8786;
- padding: 0 0 2px 45px;
+ padding: 0 0 2px 34px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -133,16 +133,15 @@ const STYLE = `
}
.simplex-preview-msg-avatar {
- width: 37px;
- height: 37px;
- border-radius: 50%;
+ width: 30px;
+ height: 30px;
+ border-radius: 7px;
object-fit: cover;
flex-shrink: 0;
- align-self: flex-end;
}
.simplex-preview-msg-avatar-placeholder {
- width: 37px;
+ width: 30px;
flex-shrink: 0;
}
@@ -151,27 +150,46 @@ const STYLE = `
background: #f5f5f6;
border-radius: 18px;
min-width: 80px;
+ overflow: visible;
+}
+
+.simplex-preview-bubble-inner {
+ border-radius: 18px;
overflow: hidden;
}
-
.simplex-preview-bubble.has-tail {
+ margin-left: 9px;
+}
+
+.simplex-preview-bubble.has-tail .simplex-preview-bubble-inner {
border-bottom-left-radius: 4px;
}
.simplex-preview-bubble-tail {
position: absolute;
bottom: 0;
- left: -7px;
- width: 11px;
- height: 17px;
- overflow: hidden;
+ left: -9px;
+ width: 9px;
+ height: 16px;
}
-.simplex-preview-bubble-tail svg {
+.simplex-preview-bubble.media-only {
+ background: transparent;
+}
+
+.simplex-preview-meta-overlay {
position: absolute;
- bottom: 0;
- left: 0;
+ bottom: 6px;
+ right: 12px;
+ font-size: 12px;
+ color: #fff;
+ mix-blend-mode: difference;
+ white-space: nowrap;
+}
+
+.simplex-preview-meta-overlay .simplex-preview-meta-edited {
+ font-style: italic;
}
.simplex-preview-forwarded-header {
@@ -379,7 +397,11 @@ const STYLE = `
const DEFAULT_AVATAR = 'data:image/svg+xml,' + encodeURIComponent('');
-const TAIL_SVG = ``;
+const TAIL_SVG_COLOR = '#f5f5f6';
+
+function tailSvg(color) {
+ return ``;
+}
const FILE_ICON_SVG = ``;
@@ -574,51 +596,66 @@ function renderMessages(container, messages, membersMap, channel) {
}
function renderBubble(msg, member, showTail) {
+ const mc = msg.content;
+ const mediaOnly = (mc.type === 'image' || mc.type === 'video') && !mc.text && !msg.quote && !msg.forward;
+
const bubble = document.createElement('div');
- bubble.className = 'simplex-preview-bubble' + (showTail ? ' has-tail' : '');
+ bubble.className = 'simplex-preview-bubble' + (showTail ? ' has-tail' : '') + (mediaOnly ? ' media-only' : '');
if (showTail) {
const tail = document.createElement('div');
tail.className = 'simplex-preview-bubble-tail';
- tail.innerHTML = TAIL_SVG;
+ tail.innerHTML = tailSvg(mediaOnly ? 'transparent' : TAIL_SVG_COLOR);
bubble.appendChild(tail);
}
+ const inner = document.createElement('div');
+ inner.className = 'simplex-preview-bubble-inner';
+
if (msg.forward) {
const fwd = document.createElement('div');
fwd.className = 'simplex-preview-forwarded-header';
fwd.innerHTML = FORWARD_ICON_SVG + ' Forwarded';
- bubble.appendChild(fwd);
+ inner.appendChild(fwd);
}
if (msg.quote) {
- bubble.appendChild(renderQuote(msg.quote));
+ inner.appendChild(renderQuote(msg.quote));
}
- const mc = msg.content;
switch (mc.type) {
case 'image':
- renderImageContent(bubble, mc, msg);
+ renderImageContent(inner, mc, msg, mediaOnly);
break;
case 'video':
- renderVideoContent(bubble, mc, msg);
+ renderVideoContent(inner, mc, msg, mediaOnly);
break;
case 'link':
- renderLinkContent(bubble, mc, msg);
+ renderLinkContent(inner, mc, msg);
break;
case 'voice':
- renderVoiceContent(bubble, mc, msg);
+ renderVoiceContent(inner, mc, msg);
break;
case 'file':
- renderFileContent(bubble, mc, msg);
+ renderFileContent(inner, mc, msg);
break;
default:
- renderTextContent(bubble, msg);
+ renderTextContent(inner, msg);
break;
}
if (msg.reactions && msg.reactions.length > 0) {
- bubble.appendChild(renderReactions(msg.reactions));
+ inner.appendChild(renderReactions(msg.reactions));
+ }
+
+ bubble.appendChild(inner);
+
+ if (mediaOnly) {
+ const overlay = document.createElement('div');
+ overlay.className = 'simplex-preview-meta-overlay';
+ if (msg.edited) overlay.innerHTML = 'edited ';
+ overlay.innerHTML += formatTime(msg.ts);
+ bubble.appendChild(overlay);
}
return bubble;
@@ -667,22 +704,22 @@ function renderQuote(quote) {
return quoteDiv;
}
-function renderImageContent(bubble, mc, msg) {
+function renderImageContent(inner, mc, msg, mediaOnly) {
if (mc.image) {
const img = document.createElement('img');
img.className = 'simplex-preview-image';
img.src = mc.image;
img.alt = 'Image';
- bubble.appendChild(img);
+ inner.appendChild(img);
}
if (mc.text) {
- appendTextBlock(bubble, msg);
- } else {
- appendMetaOnly(bubble, msg);
+ appendTextBlock(inner, msg);
+ } else if (!mediaOnly) {
+ appendMetaOnly(inner, msg);
}
}
-function renderVideoContent(bubble, mc, msg) {
+function renderVideoContent(inner, mc, msg, mediaOnly) {
if (mc.image) {
const wrapper = document.createElement('div');
wrapper.style.position = 'relative';
@@ -695,12 +732,12 @@ function renderVideoContent(bubble, mc, msg) {
dur.style.cssText = 'position:absolute;bottom:4px;left:8px;background:rgba(0,0,0,0.6);color:#fff;font-size:12px;padding:1px 6px;border-radius:4px;';
dur.textContent = formatDuration(mc.duration || 0);
wrapper.appendChild(dur);
- bubble.appendChild(wrapper);
+ inner.appendChild(wrapper);
}
if (mc.text) {
- appendTextBlock(bubble, msg);
- } else {
- appendMetaOnly(bubble, msg);
+ appendTextBlock(inner, msg);
+ } else if (!mediaOnly) {
+ appendMetaOnly(inner, msg);
}
}