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

Commit

Permalink
Remove mx_EventTile:not([data-layout="bubble"]) selector (#9033)
Browse files Browse the repository at this point in the history 
* Move declarations out of `mx_EventTile:not([data-layout=bubble])`

merging style rules on _EventBubbleTile.scss

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

* Remove an obsolete `!important` flag from `&.mx_EventTile_continuation`

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

* Remove `clear: unset` declaration from EventTile on bubble layout

While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss.

Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here.

Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline.

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

* Remove `:not()` pseudo class from `_FilePanel.pcss`

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

* Remove `!important` flag from `_MessageEditHistoryDialog.pcss`

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

* Remove a comment about overriding

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

* Run prettier

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
  • Loading branch information
@luixxiul @richvdh
luixxiul and richvdh authored Apr 27, 2023
1 parent f5d05f3 commit 569ef31
Show file tree
Hide file tree
Showing 4 changed files with 101 additions and 109 deletions.
30 changes: 14 additions & 16 deletions res/css/structures/_FilePanel.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,24 +42,22 @@ limitations under the License.
display: none;
}

/* Overrides for the attachment body tiles */
.mx_EventTile {
/* Overrides for the attachment body tiles */
&:not([data-layout="bubble"]) {
word-break: break-word;
margin-top: 10px;
padding-top: 0;

.mx_EventTile_line {
padding-inline-start: 0;
}
word-break: break-word;
margin-top: 10px;
padding-top: 0;

.mx_EventTile_line {
padding-inline-start: 0;
}

&:hover {
&.mx_EventTile_verified,
&.mx_EventTile_unverified,
&.mx_EventTile_unknown {
.mx_EventTile_line {
box-shadow: none;
}
&:hover {
&.mx_EventTile_verified,
&.mx_EventTile_unverified,
&.mx_EventTile_unknown {
.mx_EventTile_line {
box-shadow: none;
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion res/css/views/dialogs/_MessageEditHistoryDialog.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ limitations under the License.

/* Emulate mx_EventTile[data-layout="group"] */
.mx_EventTile {
padding-top: 0 !important; /* Override mx_EventTile:not([data-layout="bubble"]) */
padding-top: 0;

.mx_MessageTimestamp {
position: absolute;
Expand Down
7 changes: 0 additions & 7 deletions res/css/views/rooms/_EventBubbleTile.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,6 @@ limitations under the License.
--EventTile_bubble_line-margin-inline-end: -12px;
--EventTile_bubble_gap-inline: 5px;

position: relative;
/* Other half of the gutter is provided by margin-bottom on the last tile
of the section */
margin-top: calc(var(--gutterSize) / 2);
margin-left: var(--EventTile_bubble-margin-inline-start);
font-size: $font-14px;

.mx_MessageTimestamp {
width: unset; /* Cancel the default width */
max-width: var(--MessageTimestamp-max-width);
Expand Down
171 changes: 86 additions & 85 deletions res/css/views/rooms/_EventTile.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,11 @@ $left-gutter: 64px;
--EventTile_ThreadSummary-line-height: calc(2 * $font-12px);

flex-shrink: 0;
max-width: 100%;
clear: both; /* TODO: check if this is necessary */
padding-top: 18px;
font-size: $font-14px;
position: relative;

.mx_EventTile_avatar {
cursor: pointer;
Expand Down Expand Up @@ -405,7 +410,7 @@ $left-gutter: 64px;
}

&.mx_EventTile_continuation {
padding-top: 0px !important;
padding-top: 0;
}

&.mx_EventTile_info {
Expand Down Expand Up @@ -451,6 +456,15 @@ $left-gutter: 64px;
}

&[data-layout="bubble"] {
/* Other half of the gutter is provided by margin-bottom on the last tile
of the section */
margin-top: calc(var(--gutterSize) / 2);
margin-left: var(--EventTile_bubble-margin-inline-start);

/* Reset default values. TODO: remove */
max-width: unset;
padding-top: 0;

.mx_EventTile_msgOption {
.mx_ReadReceiptGroup {
position: absolute;
Expand Down Expand Up @@ -480,14 +494,6 @@ $left-gutter: 64px;
}
}

.mx_EventTile:not([data-layout="bubble"]) {
max-width: 100%;
clear: both;
padding-top: 18px;
font-size: $font-14px;
position: relative;
}

.mx_GenericEventListSummary {
&[data-layout="irc"],
&[data-layout="group"] {
Expand Down Expand Up @@ -1214,106 +1220,101 @@ $left-gutter: 64px;

/* Cascading - compact modern layout on the main timeline and the right panel */
.mx_MatrixChat_useCompactLayout {
.mx_EventTile {
/* Override :not([data-layout="bubble"]) */
&[data-layout="group"] {
--MatrixChat_useCompactLayout_group-padding-top: $spacing-4;
--MatrixChat_useCompactLayout-top-avatar: 2px;
--MatrixChat_useCompactLayout-top-e2eIcon: 3px;
--MatrixChat_useCompactLayout_line-spacing-block: 0px;
.mx_EventTile[data-layout="group"] {
--MatrixChat_useCompactLayout_group-padding-top: $spacing-4;
--MatrixChat_useCompactLayout-top-avatar: 2px;
--MatrixChat_useCompactLayout-top-e2eIcon: 3px;
--MatrixChat_useCompactLayout_line-spacing-block: 0px;

padding-top: var(--MatrixChat_useCompactLayout_group-padding-top);
padding-top: var(--MatrixChat_useCompactLayout_group-padding-top);

.mx_EventTile_line,
.mx_EventTile_reply {
padding-block: var(--MatrixChat_useCompactLayout_line-spacing-block);
}
.mx_EventTile_line,
.mx_EventTile_reply {
padding-block: var(--MatrixChat_useCompactLayout_line-spacing-block);
}

.mx_ReplyChain {
margin-bottom: $spacing-4;
}
.mx_ReplyChain {
margin-bottom: $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_info {
padding-top: 0; /* same as the padding for non-compact .mx_EventTile.mx_EventTile_info */
font-size: $font-13px;

.mx_EventTile_e2eIcon,
.mx_EventTile_avatar {
top: 0;
margin-block: var(--MatrixChat_useCompactLayout_line-spacing-block);
}
.mx_EventTile_e2eIcon,
.mx_EventTile_avatar {
top: 0;
margin-block: var(--MatrixChat_useCompactLayout_line-spacing-block);
}

.mx_EventTile_line,
.mx_EventTile_reply {
line-height: $font-20px;
}
.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_emote {
padding-top: $spacing-8; /* add a bit more space for emotes so that avatars don't collide */

.mx_EventTile_avatar {
top: var(--MatrixChat_useCompactLayout-top-avatar);
}
.mx_EventTile_avatar {
top: var(--MatrixChat_useCompactLayout-top-avatar);
}

.mx_EventTile_line,
.mx_EventTile_reply {
padding-bottom: 1px;
}

&.mx_EventTile_continuation {
.mx_EventTile_line,
.mx_EventTile_reply {
padding-bottom: 1px;
}

&.mx_EventTile_continuation {
.mx_EventTile_line,
.mx_EventTile_reply {
padding-bottom: var(--MatrixChat_useCompactLayout_line-spacing-block);
}
padding-bottom: var(--MatrixChat_useCompactLayout_line-spacing-block);
}
}
}

/* Cascading - apply zero padding to every element including mx_EventTile_emote */
&.mx_EventTile_continuation {
padding-top: var(--MatrixChat_useCompactLayout_line-spacing-block);
}
/* Cascading - apply zero padding to every element including mx_EventTile_emote */
&.mx_EventTile_continuation {
padding-top: var(--MatrixChat_useCompactLayout_line-spacing-block);
}

.mx_EventTile_avatar {
top: var(--MatrixChat_useCompactLayout-top-avatar);
}
.mx_EventTile_avatar {
top: var(--MatrixChat_useCompactLayout-top-avatar);
}

.mx_EventTile_e2eIcon {
top: var(--MatrixChat_useCompactLayout-top-e2eIcon);
}
.mx_EventTile_e2eIcon {
top: var(--MatrixChat_useCompactLayout-top-e2eIcon);
}

.mx_DisambiguatedProfile {
font-size: $font-13px;
}
.mx_DisambiguatedProfile {
font-size: $font-13px;
}

.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_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 {
p,
ul,
ol,
dl,
blockquote,
pre,
table {
margin-bottom: $spacing-4; /* 1/4 of the non-compact margin-bottom */
}
.mx_EventTile_content .markdown-body {
p,
ul,
ol,
dl,
blockquote,
pre,
table {
margin-bottom: $spacing-4; /* 1/4 of the non-compact margin-bottom */
}
}
}

&[data-shape="ThreadsList"][data-notification]::before,
.mx_NotificationBadge {
/* stylelint-disable-next-line declaration-colon-space-after */
inset-block-start: calc(
$notification-inset-block-start - var(--MatrixChat_useCompactLayout_group-padding-top)
);
}
&[data-shape="ThreadsList"][data-notification]::before,
.mx_NotificationBadge {
/* stylelint-disable-next-line declaration-colon-space-after */
inset-block-start: calc($notification-inset-block-start - var(--MatrixChat_useCompactLayout_group-padding-top));
}
}

Expand Down

0 comments on commit 569ef31

Please sign in to comment.