Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) #8994

luixxiul · 2022-07-06T09:35:33Z

This PR moves mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) to prevent an unexpected regression due to :not() pseudo class which has a number of quirks, tricks, and unexpected results that you should be aware of before using it.

This PR also aligns avatars and event texts on IRC layout.
Fixes element-hq/element-web#22783

	Before	After
E2E icon (modern layout)	(unchanged)
Line (modern layout)	(unchanged)
E2E icon (IRC layout)	↑ Mind the block margin
Line (IRC layout)

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

type: defect
Notes: Align avatars and event texts on IRC layout

This change is marked as an internal change (Task), so will not be included in the changelog.

…-layout=bubble]) to mx_EventTile[data-layout=group] Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

…ntTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group] Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

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

…for both IRC and modern layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

…to group layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

…ro padding by default) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

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

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

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

into positivism

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

res/css/views/rooms/_EventTile.scss

into positivism

luixxiul · 2022-07-09T03:47:01Z

res/css/views/rooms/_EventTile.scss

@@ -318,8 +336,30 @@ $left-gutter: 64px;
            padding-top: 0px !important;
        }

-        &.mx_EventTile_info .mx_EventTile_line {
-            padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
+        &.mx_EventTile_info {


For modern layout

luixxiul · 2022-07-09T03:47:18Z

res/css/views/rooms/_EventTile.scss

@@ -350,33 +390,6 @@ $left-gutter: 64px;
    font-size: $font-14px;
    position: relative;

-    &.mx_EventTile_info {


For both IRC and modern layouts

luixxiul · 2022-07-09T03:48:00Z

res/css/views/rooms/_EventTile.scss

@@ -424,10 +437,6 @@ $left-gutter: 64px;
    }

    &[data-layout=irc] {
-        .mx_EventTile_info .mx_EventTile_line {
-            padding-left: 0; // Override .mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info .mx_EventTile_line


Because overriding :not() pseudo class is no longer necessary.

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

addressed

robintown

LGTM

robintown · 2022-07-11T21:29:10Z

except it looks like you have merge conflicts

luixxiul · 2022-07-12T13:41:01Z

@robintown Thanks for reviewing.

github-actions bot added Z-Community-PR Issue is solved by a community member's PR T-Task Refactoring, enabling or disabling functionality, other engineering tasks labels Jul 6, 2022

github-actions bot deployed to Netlify July 6, 2022 09:40 View deployment

luixxiul added 8 commits July 7, 2022 00:44

Move mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data…

532769a

…-layout=bubble]) to mx_EventTile[data-layout=group] Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Move style rules for avatar and E2E icon of mx_EventTile_info .mx_Eve…

be78289

…ntTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group] Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Use variables

bb3dcda

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

Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) …

b96ff7b

…for both IRC and modern layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Apply the style rule for mx_MessageTimestamp on info event tile line …

cc281c8

…to group layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Apply zero padding-top to modern/group layout only (IRC layout has ze…

ecca514

…ro padding by default) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Apply avatar position settings to modern/group layout only

e61fe4c

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

Maintain the style block for avatar on info event tile in IRC layout …

c971486

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

github-actions bot deployed to Netlify July 6, 2022 15:49 View deployment

Remove obsolete style block

902a283

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

luixxiul marked this pull request as ready for review July 6, 2022 17:09

luixxiul requested a review from a team as a code owner July 6, 2022 17:09

luixxiul requested review from kerryarchibald, justjanne and duxovni July 6, 2022 17:09

Merge branch 'develop' into positivism

78dd03e

github-actions bot deployed to Netlify July 7, 2022 07:19 View deployment

Merge branch 'develop' into positivism

6ae8019

github-actions bot deployed to Netlify July 7, 2022 08:34 View deployment

Merge branch 'develop' of https://github.com/matrix-org/matrix-react-sdk

3a412fa

into positivism

github-actions bot deployed to Netlify July 7, 2022 10:59 View deployment

Remove inline padding setting from mx_EventTile_line

997756e

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

github-actions bot deployed to Netlify July 7, 2022 11:30 View deployment

luixxiul mentioned this pull request Jul 7, 2022

Textual events not correctly positioned in modern layout element-hq/element-web#22759

Closed

luixxiul commented Jul 7, 2022

View reviewed changes

res/css/views/rooms/_EventTile.scss Outdated Show resolved Hide resolved

luixxiul mentioned this pull request Jul 7, 2022

Fix lost padding of event tile info line #9009

Merged

Merge branch 'develop' of https://github.com/matrix-org/matrix-react-sdk

4efc96f

into positivism

luixxiul commented Jul 9, 2022

View reviewed changes

Fix misalignment of avatars and textual events on IRC layout

b6f8282

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

github-actions bot deployed to Netlify July 9, 2022 04:34 View deployment

Align avatars and hidden events on IRC layout

90f1f3c

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

github-actions bot deployed to Netlify July 9, 2022 04:45 View deployment

Merge branch 'develop' into positivism

d394290

github-actions bot deployed to Netlify July 10, 2022 08:19 View deployment

Merge branch 'develop' into positivism

3c50b5f

github-actions bot deployed to Netlify July 11, 2022 07:21 View deployment

turt2live requested review from a team, duxovni, SimonBrandner and robintown and removed request for turt2live and a team July 11, 2022 20:03

robintown approved these changes Jul 11, 2022

View reviewed changes

luixxiul added 2 commits July 12, 2022 21:19

Merge remote-tracking branch 'upstream/develop' into positivism

e6fba07

Merge branch 'develop' into positivism

2185870

github-actions bot deployed to Netlify July 12, 2022 12:27 View deployment

robintown enabled auto-merge (squash) July 12, 2022 12:55

Merge branch 'develop' into positivism

946bc87

github-actions bot deployed to Netlify July 12, 2022 13:26 View deployment

robintown merged commit c175263 into matrix-org:develop Jul 12, 2022

luixxiul deleted the positivism branch July 13, 2022 03:03

bbhtt mentioned this pull request Jul 16, 2022

Collapsed state events are misaligned in IRC layout element-hq/element-web#22868

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) #8994

Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) #8994

luixxiul commented Jul 6, 2022 •

edited by github-actions bot

Loading

luixxiul Jul 9, 2022

luixxiul Jul 9, 2022

luixxiul Jul 9, 2022

robintown left a comment

robintown commented Jul 11, 2022

luixxiul commented Jul 12, 2022

Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) #8994

Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) #8994

Conversation

luixxiul commented Jul 6, 2022 • edited by github-actions bot Loading

luixxiul Jul 9, 2022

Choose a reason for hiding this comment

luixxiul Jul 9, 2022

Choose a reason for hiding this comment

luixxiul Jul 9, 2022

Choose a reason for hiding this comment

robintown left a comment

Choose a reason for hiding this comment

robintown commented Jul 11, 2022

luixxiul commented Jul 12, 2022

luixxiul commented Jul 6, 2022 •

edited by github-actions bot

Loading