diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index adaf66134e8..6c6d8146d34 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -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; } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index a1ad892bee4..8dc291256f1 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -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; @@ -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; } diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 112a8dd3dc0..67927d156ef 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.