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

Move style rules of MatrixChat_useCompactLayout from _GroupLayout.scss to _EventTile.scss and _RoomView.scss (#8725)

Browse source 
* Move mx_RoomView_MessageList h2 block from _GroupLayout.scss to _RoomView.scss

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

* Move mx_MatrixChat_useCompactLayout block from _GroupLayout.scss to _EventTile.scss

This block is not related to the group layout.

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

* Include EventTile_continuation block in EventTile_emote

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

* Use logical properties for the padding values

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

* Sort declarations for maintainability

- EventTile_avatar
- EventTile_line
- EventTile_reply

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

* yarn run lint:style --fix

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

* Separate selectors of .markdown-body

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-06-03 06:45:10 +00:00 committed by GitHub
parent b5ed051ecc
commit 228abb6f07
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 84 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
res/css/structures/_RoomView.scss
View file

@ -272,6 +272,10 @@ hr.mx_RoomView_myReadMarker {
.mx_MatrixChat_useCompactLayout {
.mx_RoomView_MessageList {
margin-bottom: 4px;
h2 {
margin-top: 6px; // TODO: Use a spacing variable
}
}
.mx_RoomView_statusAreaBox {

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

@ -610,6 +610,86 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
}
}
/* Compact layout overrides */
.mx_MatrixChat_useCompactLayout {
.mx_EventTile {
padding-top: $spacing-4;
&.mx_EventTile_info {
padding-top: 0; // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
font-size: $font-13px;
.mx_EventTile_avatar {
top: 4px;
}
.mx_EventTile_line,
.mx_EventTile_reply {
line-height: $font-20px;
}
}
&.mx_EventTile_emote {
padding-top: $spacing-8; // add a bit more space for emotes so that avatars don't collide
&.mx_EventTile_continuation {
padding-top: 0;
.mx_EventTile_line,
.mx_EventTile_reply {
padding-block: 0;
}
}
.mx_EventTile_avatar {
top: 2px;
}
.mx_EventTile_line,
.mx_EventTile_reply {
padding-top: 0px;
padding-bottom: 1px;
}
}
.mx_EventTile_avatar {
top: 2px;
}
.mx_EventTile_line,
.mx_EventTile_reply {
padding-block: 0;
}
.mx_EventTile_e2eIcon {
top: 3px;
}
.mx_DisambiguatedProfile {
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_content .markdown-body {
p,
ul,
ol,
dl,
blockquote,
pre,
table {
margin-bottom: $spacing-4; // 1/4 of the non-compact margin-bottom
}
}
}
}
/* end of overrides */
.mx_EventTile_keyRequestInfo {

82
res/css/views/rooms/_GroupLayout.scss
View file

@ -46,85 +46,3 @@ $left-gutter: 64px;
}
}
}
/* Compact layout overrides */
.mx_MatrixChat_useCompactLayout {
.mx_EventTile {
padding-top: 4px;
.mx_EventTile_line,
.mx_EventTile_reply {
padding-top: 0;
padding-bottom: 0;
}
&.mx_EventTile_info {
// same as the padding for non-compact .mx_EventTile.mx_EventTile_info
padding-top: 0px;
font-size: $font-13px;
.mx_EventTile_line,
.mx_EventTile_reply {
line-height: $font-20px;
}
.mx_EventTile_avatar {
top: 4px;
}
}
.mx_DisambiguatedProfile {
font-size: $font-13px;
}
&.mx_EventTile_emote {
// add a bit more space for emotes so that avatars don't collide
padding-top: 8px;
.mx_EventTile_avatar {
top: 2px;
}
.mx_EventTile_line,
.mx_EventTile_reply {
padding-top: 0px;
padding-bottom: 1px;
}
}
&.mx_EventTile_emote.mx_EventTile_continuation {
padding-top: 0;
.mx_EventTile_line,
.mx_EventTile_reply {
padding-top: 0px;
padding-bottom: 0px;
}
}
.mx_EventTile_avatar {
top: 2px;
}
.mx_EventTile_e2eIcon {
top: 3px;
}
.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_content .markdown-body {
p, ul, ol, dl, blockquote, pre, table {
margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
}
}
}
.mx_RoomView_MessageList h2 {
margin-top: 6px;
}
}