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

Remove mx_EventTile:not([data-layout="bubble"]) selector #9033

Merged
merged 12 commits into from
Apr 27, 2023
Merged

Remove mx_EventTile:not([data-layout="bubble"]) selector #9033

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
ca0731f
Move declarations out of `mx_EventTile:not([data-layout=bubble])`
luixxiul Apr 23, 2023
8b7d56f
Remove an obsolete `!important` flag from `&.mx_EventTile_continuation`
luixxiul Jul 16, 2022
621c060
Remove `clear: unset` declaration from EventTile on bubble layout
luixxiul Mar 17, 2023
a1505f4
Remove `:not()` pseudo class from `_FilePanel.pcss`
luixxiul Mar 30, 2023
4bbea59
Remove `!important` flag from `_MessageEditHistoryDialog.pcss`
luixxiul Mar 30, 2023
45558c6
Remove a comment about overriding
luixxiul Mar 31, 2023
517fb4c
Run prettier
luixxiul Mar 31, 2023
8151ffd
Merge branch 'develop' into positivism4
luixxiul Apr 24, 2023
b3b7ea7
Merge branch 'develop' into positivism4
luixxiul Apr 26, 2023
7ef9d1e
Merge branch 'develop' into positivism4
luixxiul Apr 27, 2023
90ab08a
Merge branch 'develop' into positivism4
richvdh Apr 27, 2023
152e89a
Merge branch 'develop' into positivism4
luixxiul Apr 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 14 additions & 16 deletions res/css/structures/_FilePanel.pcss
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!important has been required due to https://github.com/matrix-org/matrix-react-sdk/pull/9033/files#diff-5d3e25eb1d22dd7a96e0e87ea9c1298dc7dbce8eb965d30b2d1ebc1436bfec3fL484 inside :not()

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