PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix read avatars overflow from the right chat panel with a maximized widget on bubble message layout (#8470)

Browse source 
* Fix RR overflow on the right chat panel

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Align with RR outside of info tile

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use inset-inline property

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-06-02 02:43:07 +00:00 committed by GitHub
parent 6574c5c3e2
commit 7c57680b93
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
res/css/views/right_panel/_TimelineCard.scss
View file

@ -92,7 +92,8 @@ limitations under the License.
} }
.mx_EventTile_msgOption { .mx_EventTile_msgOption {
margin-right: 2px; // Override mx_EventTile_msgOption of mx_EventTile:not([data-layout="bubble"])
margin-inline-end: 0;
} }
&.mx_EventTile_info { &.mx_EventTile_info {
@ -149,11 +150,19 @@ limitations under the License.
flex-basis: 48px; // 12 (padding on message list) + 36 (padding on event lines) flex-basis: 48px; // 12 (padding on message list) + 36 (padding on event lines)
} }
&.mx_BaseCard { .mx_GenericEventListSummary_unstyledList, // RR next to a message on the event list summary
// For a chat timeline on the right panel when the widget is maximised .mx_RoomView_MessageList { // RR next to a message on the messsge list
// TODO: rename ThreadPanel .mx_EventTile[data-layout=bubble] {
&.mx_ThreadPanel { .mx_ReadReceiptGroup {
padding-right: 8px; // .mx_RightPanel padding // 6px: scroll bar width (magic number)
inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + $container-gap-width + 6px);
}
&.mx_EventTile_info {
.mx_ReadReceiptGroup {
inset-inline-end: -4px; // align with RR outside of info tile
}
}
} }
} }
} }

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

@ -539,8 +539,10 @@ limitations under the License.
.mx_ReadReceiptGroup { .mx_ReadReceiptGroup {
position: absolute; position: absolute;
// as close to right gutter without clipping as possible // as close to right gutter without clipping as possible
right: -78px; inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end));
// (EventTileLine.line-height - ReadReceiptGroup.height) / 2 // (EventTileLine.line-height - ReadReceiptGroup.height) / 2
// this centers the ReadReceiptGroup if we’ve got a single line // this centers the ReadReceiptGroup if we’ve got a single line
bottom: calc(($font-18px - 24px) / 2); bottom: calc(($font-18px - 24px) / 2);
@ -691,15 +693,16 @@ limitations under the License.
.mx_MessageActionBar { .mx_MessageActionBar {
inset-inline-start: initial; // Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar inset-inline-start: initial; // Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar
right: 48px; // align with that of right-column bubbles inset-inline-end: 48px; // align with that of right-column bubbles
} }
.mx_ReadReceiptGroup { .mx_ReadReceiptGroup {
right: -18px; // match alignment to RRs of chat bubbles // match alignment to RRs of chat bubbles
inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + 60px);
} }
&::before { &::before {
right: 0; // match alignment of the hover background to that of chat bubbles inset-inline-end: 0; // match alignment of the hover background to that of chat bubbles
} }
} }
} }

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

@ -15,6 +15,8 @@ limitations under the License.
*/ */
.mx_ReadReceiptGroup { .mx_ReadReceiptGroup {
--ReadReceiptGroup_EventBubbleTile-spacing-end: 78px;
position: relative; position: relative;
display: inline-block; display: inline-block;
// This aligns the avatar with the last line of the // This aligns the avatar with the last line of the