Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 228abb6

Browse files
luixxiulluixxiul
authored
Move style rules of MatrixChat_useCompactLayout from _GroupLayout.scss to _EventTile.scss and _RoomView.scss (#8725)
* Move mx_RoomView_MessageList h2 block from _GroupLayout.scss to _RoomView.scss Signed-off-by: Suguru Hirahara <[email protected]> * 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 <[email protected]> * Include EventTile_continuation block in EventTile_emote Signed-off-by: Suguru Hirahara <[email protected]> * Use logical properties for the padding values Signed-off-by: Suguru Hirahara <[email protected]> * Sort declarations for maintainability - EventTile_avatar - EventTile_line - EventTile_reply Signed-off-by: Suguru Hirahara <[email protected]> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <[email protected]> * Separate selectors of .markdown-body Signed-off-by: Suguru Hirahara <[email protected]>
1 parent b5ed051 commit 228abb6

File tree

3 files changed

+84
-82
lines changed

3 files changed

+84
-82
lines changed

‎res/css/structures/_RoomView.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -272,6 +272,10 @@ hr.mx_RoomView_myReadMarker {
272272
.mx_MatrixChat_useCompactLayout {
273273
.mx_RoomView_MessageList {
274274
margin-bottom: 4px;
275+
276+
h2 {
277+
margin-top: 6px; // TODO: Use a spacing variable
278+
}
275279
}
276280

277281
.mx_RoomView_statusAreaBox {

‎res/css/views/rooms/_EventTile.scss‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -610,6 +610,86 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
610610
}
611611
}
612612

613+
/* Compact layout overrides */
614+
615+
.mx_MatrixChat_useCompactLayout {
616+
.mx_EventTile {
617+
padding-top: $spacing-4;
618+
619+
&.mx_EventTile_info {
620+
padding-top: 0; // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
621+
font-size: $font-13px;
622+
623+
.mx_EventTile_avatar {
624+
top: 4px;
625+
}
626+
627+
.mx_EventTile_line,
628+
.mx_EventTile_reply {
629+
line-height: $font-20px;
630+
}
631+
}
632+
633+
&.mx_EventTile_emote {
634+
padding-top: $spacing-8; // add a bit more space for emotes so that avatars don't collide
635+
636+
&.mx_EventTile_continuation {
637+
padding-top: 0;
638+
639+
.mx_EventTile_line,
640+
.mx_EventTile_reply {
641+
padding-block: 0;
642+
}
643+
}
644+
645+
.mx_EventTile_avatar {
646+
top: 2px;
647+
}
648+
649+
.mx_EventTile_line,
650+
.mx_EventTile_reply {
651+
padding-top: 0px;
652+
padding-bottom: 1px;
653+
}
654+
}
655+
656+
.mx_EventTile_avatar {
657+
top: 2px;
658+
}
659+
660+
.mx_EventTile_line,
661+
.mx_EventTile_reply {
662+
padding-block: 0;
663+
}
664+
665+
.mx_EventTile_e2eIcon {
666+
top: 3px;
667+
}
668+
669+
.mx_DisambiguatedProfile {
670+
font-size: $font-13px;
671+
}
672+
673+
.mx_ReadReceiptGroup {
674+
// This aligns the avatar with the last line of the
675+
// message. We want to move it one line up - 2rem
676+
top: -2rem;
677+
}
678+
679+
.mx_EventTile_content .markdown-body {
680+
p,
681+
ul,
682+
ol,
683+
dl,
684+
blockquote,
685+
pre,
686+
table {
687+
margin-bottom: $spacing-4; // 1/4 of the non-compact margin-bottom
688+
}
689+
}
690+
}
691+
}
692+
613693
/* end of overrides */
614694

615695
.mx_EventTile_keyRequestInfo {

‎res/css/views/rooms/_GroupLayout.scss‎

Lines changed: 0 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -46,85 +46,3 @@ $left-gutter: 64px;
4646
}
4747
}
4848
}
49-
50-
/* Compact layout overrides */
51-
52-
.mx_MatrixChat_useCompactLayout {
53-
.mx_EventTile {
54-
padding-top: 4px;
55-
56-
.mx_EventTile_line,
57-
.mx_EventTile_reply {
58-
padding-top: 0;
59-
padding-bottom: 0;
60-
}
61-
62-
&.mx_EventTile_info {
63-
// same as the padding for non-compact .mx_EventTile.mx_EventTile_info
64-
padding-top: 0px;
65-
font-size: $font-13px;
66-
67-
.mx_EventTile_line,
68-
.mx_EventTile_reply {
69-
line-height: $font-20px;
70-
}
71-
72-
.mx_EventTile_avatar {
73-
top: 4px;
74-
}
75-
}
76-
77-
.mx_DisambiguatedProfile {
78-
font-size: $font-13px;
79-
}
80-
81-
&.mx_EventTile_emote {
82-
// add a bit more space for emotes so that avatars don't collide
83-
padding-top: 8px;
84-
85-
.mx_EventTile_avatar {
86-
top: 2px;
87-
}
88-
89-
.mx_EventTile_line,
90-
.mx_EventTile_reply {
91-
padding-top: 0px;
92-
padding-bottom: 1px;
93-
}
94-
}
95-
96-
&.mx_EventTile_emote.mx_EventTile_continuation {
97-
padding-top: 0;
98-
99-
.mx_EventTile_line,
100-
.mx_EventTile_reply {
101-
padding-top: 0px;
102-
padding-bottom: 0px;
103-
}
104-
}
105-
106-
.mx_EventTile_avatar {
107-
top: 2px;
108-
}
109-
110-
.mx_EventTile_e2eIcon {
111-
top: 3px;
112-
}
113-
114-
.mx_ReadReceiptGroup {
115-
// This aligns the avatar with the last line of the
116-
// message. We want to move it one line up - 2rem
117-
top: -2rem;
118-
}
119-
120-
.mx_EventTile_content .markdown-body {
121-
p, ul, ol, dl, blockquote, pre, table {
122-
margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
123-
}
124-
}
125-
}
126-
127-
.mx_RoomView_MessageList h2 {
128-
margin-top: 6px;
129-
}
130-
}

0 commit comments

Comments
 (0)