imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix read receipts and sent indicators for bubble layout (#7460)

Browse source
This commit is contained in:
Michael Telatynski 2022-01-10 12:53:23 +00:00 • committed by GitHub
parent 8b88b48edc
commit fbfd2c3d20
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

2
res/css/views/rooms/_EventBubbleTile.scss
View file

@ -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;
}

54
res/css/views/rooms/_EventTile.scss
View file

@ -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;
}