Stop using mx_GroupLayout for styling (#8711)

pull/28788/head^2
Suguru Hirahara 2022-06-15 17:26:24 +00:00 committed by GitHub
parent f9100d5fb6
commit 81c894f2d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 59 deletions

View File

@ -116,29 +116,11 @@ limitations under the License.
height: 100%; height: 100%;
} }
// Override _GroupLayout.scss for the thread panel .mx_EventTile[data-layout=group] {
.mx_GroupLayout { .mx_MessageActionBar {
.mx_EventTile { right: 0;
.mx_MessageActionBar { top: -36px; // 2px above EventTile
right: 0; z-index: 10; // See _EventTile.scss
top: -36px; // 2px above EventTile
z-index: 10; // See _EventTile.scss
}
&[data-shape=ThreadsList] {
> .mx_DisambiguatedProfile {
margin-inline-start: 0;
}
.mx_MessageTimestamp {
position: initial;
width: auto;
}
.mx_EventTile_line {
padding-bottom: 0; // Override mx_EventTile_line on _GroupLayout.scss
}
}
} }
} }

View File

@ -66,8 +66,25 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
} }
&[data-layout=group] { &[data-layout=group] {
.mx_EventTile_line { > .mx_DisambiguatedProfile {
line-height: var(--GroupLayout-EventTile-line-height); line-height: $font-20px;
margin-left: $left-gutter;
}
> .mx_EventTile_avatar {
position: absolute;
z-index: 9;
}
.mx_MessageTimestamp {
position: absolute; // for modern layout
}
.mx_EventTile_line,
.mx_EventTile_reply {
padding-top: 1px;
padding-bottom: 3px;
line-height: $font-22px;
} }
} }
} }
@ -128,7 +145,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
display: inline-block; display: inline-block;
padding-bottom: 0px; padding-bottom: 0px;
padding-top: 0px; padding-top: 0px;
margin: 0px;
max-width: calc(100% - $left-gutter); max-width: calc(100% - $left-gutter);
} }
@ -789,7 +805,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
} }
.mx_DisambiguatedProfile { .mx_DisambiguatedProfile {
margin-right: $spacing-12; margin-inline: 0 $spacing-12;
display: inline-flex; display: inline-flex;
flex: 1; flex: 1;
@ -813,6 +829,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
.mx_EventTile_line { .mx_EventTile_line {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding-bottom: 0;
.mx_ThreadPanel_replies { .mx_ThreadPanel_replies {
margin-top: $spacing-8; margin-top: $spacing-8;
@ -835,6 +852,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
.mx_MessageTimestamp { .mx_MessageTimestamp {
max-width: 80px; max-width: 80px;
width: auto; width: auto;
position: initial;
} }
} }

View File

@ -15,38 +15,6 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
$left-gutter: 64px;
.mx_GroupLayout {
--GroupLayout-EventTile-line-height: $font-22px;
.mx_EventTile {
> .mx_DisambiguatedProfile {
line-height: $font-20px;
margin-left: $left-gutter;
}
> .mx_EventTile_avatar {
position: absolute;
z-index: 9;
}
.mx_MessageTimestamp {
position: absolute; // for modern layout
}
.mx_EventTile_line,
.mx_EventTile_reply {
padding-top: 1px;
padding-bottom: 3px;
}
.mx_EventTile_reply {
line-height: var(--GroupLayout-EventTile-line-height);
}
}
}
/* Compact layout overrides */ /* Compact layout overrides */
.mx_MatrixChat_useCompactLayout { .mx_MatrixChat_useCompactLayout {

View File

@ -173,6 +173,7 @@ $irc-line-height: $font-18px;
.mx_DisambiguatedProfile { .mx_DisambiguatedProfile {
width: var(--name-width); width: var(--name-width);
margin-inline-end: 0; // override mx_EventTile > *
display: flex; display: flex;
order: 2; order: 2;
flex-shrink: 0; flex-shrink: 0;