Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Fix read receipts and sent indicators for bubble layout (#7460)
Browse files Browse the repository at this point in the history
  • Loading branch information
t3chguy authored Jan 10, 2022
1 parent 8b88b48 commit fbfd2c3
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 29 deletions.
2 changes: 1 addition & 1 deletion res/css/views/rooms/_EventBubbleTile.scss
Original file line number Diff line number Diff line change
Expand Up @@ -306,7 +306,7 @@ limitations under the License.

.mx_EventTile_readAvatars {
position: absolute;
right: -110px;
right: -78px; // as close to right gutter without clipping as possible
bottom: 0;
top: auto;
}
Expand Down
54 changes: 28 additions & 26 deletions res/css/views/rooms/_EventTile.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,34 @@ limitations under the License.

$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:not([data-layout=bubble]) {
max-width: 100%;
clear: both;
Expand Down Expand Up @@ -172,32 +200,6 @@ $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;
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/views/rooms/EventTile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -451,7 +451,7 @@ export default class EventTile extends React.Component<IProps, IState> {

// 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 || [];
Expand All @@ -468,7 +468,7 @@ export default class EventTile extends React.Component<IProps, IState> {

// 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.
Expand Down

0 comments on commit fbfd2c3

Please sign in to comment.