From 22eb252982b7eded0b0b1de6eee32fe6eec1630e Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 17 Dec 2021 14:40:57 +0000 Subject: [PATCH 1/3] Fix message sent states and read receipts for message bubbles --- res/css/views/rooms/_EventBubbleTile.scss | 12 ++- res/css/views/rooms/_EventTile.scss | 90 ++++++++++++----------- src/components/views/rooms/EventTile.tsx | 4 +- 3 files changed, 57 insertions(+), 49 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 92daa223f73..d036e1dc940 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -304,11 +304,17 @@ limitations under the License. } } - .mx_EventTile_readAvatars { + .mx_EventTile_msgOption { position: absolute; - right: -110px; bottom: 0; - top: auto; + right: 0; + + .mx_EventTile_readAvatars { + position: absolute; + right: -80px; + bottom: 0; + top: auto; + } } .mx_MTextBody { diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index b7ad40d0e71..d9b91923fde 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -172,54 +172,10 @@ $left-gutter: 64px; color: $accent-fg-color; } - .mx_EventTile_receiptSent, - .mx_EventTile_receiptSending { - // We don't use `position: relative` on the element because then it won't line - // up with the other read receipts - - &::before { - background-color: $tertiary-content; - mask-repeat: no-repeat; - mask-position: center; - mask-size: 14px; - width: 14px; - height: 14px; - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - } - } - .mx_EventTile_receiptSent::before { - mask-image: url('$(res)/img/element-icons/circle-sent.svg'); - } - .mx_EventTile_receiptSending::before { - mask-image: url('$(res)/img/element-icons/circle-sending.svg'); - } - &.mx_EventTile_contextual { opacity: 0.4; } - .mx_EventTile_msgOption { - float: right; - text-align: right; - position: relative; - width: 90px; - - /* Hack to stop the height of this pushing the messages apart. - Replaces margin-top: -6px. This interacts better with a read - marker being in between. Content overflows. */ - height: 1px; - - margin-right: 10px; - } - - .mx_EventTile_msgOption a { - text-decoration: none; - } - /* De-zalgoing */ .mx_EventTile_body { overflow-y: hidden; @@ -272,6 +228,52 @@ $left-gutter: 64px; } } +.mx_EventTile { + .mx_EventTile_receiptSent, + .mx_EventTile_receiptSending { + // We don't use `position: relative` on the element because then it won't line + // up with the other read receipts + + &::before { + background-color: $tertiary-content; + mask-repeat: no-repeat; + mask-position: center; + mask-size: 14px; + width: 14px; + height: 14px; + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + } + } + .mx_EventTile_receiptSent::before { + mask-image: url('$(res)/img/element-icons/circle-sent.svg'); + } + .mx_EventTile_receiptSending::before { + mask-image: url('$(res)/img/element-icons/circle-sending.svg'); + } + + .mx_EventTile_msgOption { + float: right; + text-align: right; + position: relative; + width: 90px; + + /* Hack to stop the height of this pushing the messages apart. + Replaces margin-top: -6px. This interacts better with a read + marker being in between. Content overflows. */ + height: 1px; + + margin-right: 10px; + } + + .mx_EventTile_msgOption a { + text-decoration: none; + } +} + .mx_EventTile:not([data-layout=bubble]).mx_EventTile_info .mx_EventTile_line, .mx_EventListSummary:not([data-layout=bubble]) > :not(.mx_EventTile) .mx_EventTile_avatar ~ .mx_EventTile_line { padding-left: calc($left-gutter + 18px); diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index e35c7286f6b..7ec688b1564 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -449,7 +449,7 @@ export default class EventTile extends React.Component { // Check to make sure the sending state is appropriate. A null/undefined send status means // that the message is 'sent', so we're just double checking that it's explicitly not sent. - if (this.props.eventSendStatus && this.props.eventSendStatus !== 'sent') return false; + if (this.props.eventSendStatus && this.props.eventSendStatus !== EventStatus.SENT) return false; // If anyone has read the event besides us, we don't want to show a sent receipt. const receipts = this.props.readReceipts || []; @@ -466,7 +466,7 @@ export default class EventTile extends React.Component { // Check the event send status to see if we are pending. Null/undefined status means the // message was sent, so check for that and 'sent' explicitly. - if (!this.props.eventSendStatus || this.props.eventSendStatus === 'sent') return false; + if (!this.props.eventSendStatus || this.props.eventSendStatus === EventStatus.SENT) return false; // Default to showing - there's no other event properties/behaviours we care about at // this point. From 6be58a1bf1053e7c51fd4a1b5034072a841ffa67 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 20 Dec 2021 11:49:00 +0000 Subject: [PATCH 2/3] Move timestamps into message bubbles --- res/css/views/rooms/_EventBubbleTile.scss | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 92daa223f73..13eb32aad2b 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -20,7 +20,7 @@ limitations under the License. --gutterSize: 11px; --cornerRadius: 12px; --maxWidth: 70%; - margin-right: 100px; + margin-right: 60px; } .mx_EventTile[data-layout=bubble] { @@ -112,10 +112,6 @@ limitations under the License. .mx_EventTile_line { float: right; border-bottom-left-radius: var(--cornerRadius); - > a { - left: auto; - right: -68px; - } .mx_MImageBody .mx_MImageBody_thumbnail { border-bottom-left-radius: var(--cornerRadius); @@ -160,11 +156,13 @@ limitations under the License. margin: 0 -12px 0 -9px; border-top-left-radius: var(--cornerRadius); border-top-right-radius: var(--cornerRadius); + > a { position: absolute; - padding: 10px 20px; - top: 0; - left: -68px; + padding: 4px 8px; + bottom: 0; + right: 0; + z-index: 1; // above media } //noinspection CssReplaceWithShorthandSafely @@ -184,6 +182,7 @@ limitations under the License. .mx_EventTile_line:not(.mx_EventTile_mediaLine) { padding: var(--gutterSize); + padding-right: 60px; // space for the timestamp background: var(--backgroundColor); } From 694cf64c49a3e07a38b806506c17d2b0e0de64b6 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 20 Dec 2021 11:57:19 +0000 Subject: [PATCH 3/3] Fix alignment of RRs/sent state with new timestamp positioning --- res/css/views/rooms/_EventBubbleTile.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 5d9e071cc4b..7aea3b34b37 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -20,7 +20,7 @@ limitations under the License. --gutterSize: 11px; --cornerRadius: 12px; --maxWidth: 70%; - margin-right: 60px; + margin-right: 80px; } .mx_EventTile[data-layout=bubble] { @@ -307,10 +307,11 @@ limitations under the License. position: absolute; bottom: 0; right: 0; + z-index: 10; // above avatar .mx_EventTile_readAvatars { position: absolute; - right: -80px; + right: -100px; bottom: 0; top: auto; }