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

Manage style rules of ReadReceiptGroup position on one file (#8993)

Browse source 
* Specify positon of RR on IRC layout on _EventTile.scss

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

* Manage a declaration for position of RR on modern/group layout on _EventTile.scss, instead of applying it as a default one

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

* Use logical properties

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

* Include mx_ReadReceiptGroup in mx_EventTile_msgOption to prevent a regression

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

* Manage style blocks of mx_ReadReceiptGroup for every layout on one file

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

* Use logical properties

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

* Include mx_ReadReceiptGroup in mx_EventTile_msgOption for bubble layout same as the other layouts

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

* Include mx_ReadReceiptGroup in mx_EventTile_msgOption on TimelineCard

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-07-12 21:30:59 +00:00 committed by GitHub
parent 6fb8342003
commit 49c6d10ddb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 38 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -74,6 +74,10 @@ limitations under the License.
.mx_EventTile_msgOption {
margin-inline-end: 0;
.mx_ReadReceiptGroup {
top: var(--TimelineCard_ReadReceiptGroup-inset-block-start);
}
}
.mx_DisambiguatedProfile,
@ -100,10 +104,6 @@ limitations under the License.
margin-inline-end: $spacing-8; // See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.scss
}
.mx_ReadReceiptGroup {
top: var(--TimelineCard_ReadReceiptGroup-inset-block-start);
}
.mx_ThreadSummary {
margin-inline-end: 0;
max-width: min(calc(100% - 36px), 600px);

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

@ -527,18 +527,6 @@ limitations under the License.
}
}
.mx_ReadReceiptGroup {
position: absolute;
// as close to right gutter without clipping as possible
inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end));
// (EventTileLine.line-height - ReadReceiptGroup.height) / 2
// this centers the ReadReceiptGroup if we’ve got a single line
bottom: calc(($font-18px - 24px) / 2);
top: auto;
}
.mx_MTextBody {
max-width: 100%;
}

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

@ -250,6 +250,12 @@ $left-gutter: 64px;
&[data-layout=irc] {
--EventTile_irc_line_info-inset-inline-start: calc(var(--name-width) + 10px + var(--icon-width));
.mx_EventTile_msgOption {
.mx_ReadReceiptGroup {
inset-block-start: -0.3rem; // ($irc-line-height - avatar height) / 2
}
}
.mx_MessageTimestamp {
text-align: right;
}
@ -303,7 +309,14 @@ $left-gutter: 64px;
}
.mx_EventTile_msgOption {
margin-right: 10px;
margin-inline-end: 10px;
.mx_ReadReceiptGroup {
// This aligns the avatar with the last line of the
// message. We want to move it one line up
// See .mx_EventTile[data-layout=group] .mx_EventTile_line in _EventTile.scss
inset-block-start: calc(-$font-22px - 3px);
}
}
.mx_MessageTimestamp {
@ -390,6 +403,20 @@ $left-gutter: 64px;
}
&[data-layout=bubble] {
.mx_EventTile_msgOption {
.mx_ReadReceiptGroup {
position: absolute;
inset-block-start: auto;
// as close to right gutter without clipping as possible
inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end));
// (EventTileLine.line-height - ReadReceiptGroup.height) / 2
// this centers the ReadReceiptGroup if we’ve got a single line
inset-block-end: calc(($font-18px - 24px) / 2);
}
}
.mx_EventTileBubble {
// Timestamps are inside the tile, so the width can be less constrained
max-width: 600px;
@ -1221,10 +1248,12 @@ $left-gutter: 64px;
font-size: $font-13px;
}
.mx_ReadReceiptGroup {
// This aligns the avatar with the last line of the
// message. We want to move it one line up - 2rem
top: -2rem;
.mx_EventTile_msgOption {
.mx_ReadReceiptGroup {
// This aligns the avatar with the last line of the
// message. We want to move it one line up - 2rem
inset-block-start: -2rem;
}
}
.mx_EventTile_content .markdown-body {

4
res/css/views/rooms/_IRCLayout.scss
View file

@ -44,10 +44,6 @@ $irc-line-height: $font-18px;
.mx_EventTile_msgOption {
order: 5;
flex-shrink: 0;
.mx_ReadReceiptGroup {
top: -0.3rem; // ($irc-line-height - avatar height) / 2
}
}
.mx_EventTile_line,

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

@ -19,10 +19,6 @@ limitations under the License.
position: relative;
display: inline-block;
// This aligns the avatar with the last line of the
// message. We want to move it one line up
// See .mx_EventTile[data-layout=group] .mx_EventTile_line in _EventTile.scss
top: calc(-$font-22px - 3px);
user-select: none;
z-index: 1;