imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
* 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>
This commit is contained in:
Suguru Hirahara 2023-04-27 13:02:34 +00:00 • committed by GitHub
parent f5d05f3284
commit 569ef31f9d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 106 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

28
res/css/structures/_FilePanel.pcss
View file

@ -42,24 +42,22 @@ limitations under the License.
display: none; display: none;
} }
/* Overrides for the attachment body tiles */
.mx_EventTile { .mx_EventTile {
/* Overrides for the attachment body tiles */ word-break: break-word;
&:not([data-layout="bubble"]) { margin-top: 10px;
word-break: break-word; padding-top: 0;
margin-top: 10px;
padding-top: 0;
.mx_EventTile_line { .mx_EventTile_line {
padding-inline-start: 0; padding-inline-start: 0;
} }
&:hover { &:hover {
&.mx_EventTile_verified, &.mx_EventTile_verified,
&.mx_EventTile_unverified, &.mx_EventTile_unverified,
&.mx_EventTile_unknown { &.mx_EventTile_unknown {
.mx_EventTile_line { .mx_EventTile_line {
box-shadow: none; box-shadow: none;
}
} }
} }
} }

2
res/css/views/dialogs/_MessageEditHistoryDialog.pcss
View file

@ -54,7 +54,7 @@ limitations under the License.
/* Emulate mx_EventTile[data-layout="group"] */ /* Emulate mx_EventTile[data-layout="group"] */
.mx_EventTile { .mx_EventTile {
padding-top: 0 !important; /* Override mx_EventTile:not([data-layout="bubble"]) */ padding-top: 0;
.mx_MessageTimestamp { .mx_MessageTimestamp {
position: absolute; position: absolute;

7
res/css/views/rooms/_EventBubbleTile.pcss
View file

@ -44,13 +44,6 @@ limitations under the License.
--EventTile_bubble_line-margin-inline-end: -12px; --EventTile_bubble_line-margin-inline-end: -12px;
--EventTile_bubble_gap-inline: 5px; --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 { .mx_MessageTimestamp {
width: unset; /* Cancel the default width */ width: unset; /* Cancel the default width */
max-width: var(--MessageTimestamp-max-width); max-width: var(--MessageTimestamp-max-width);

183
res/css/views/rooms/_EventTile.pcss
View file

@ -26,6 +26,11 @@ $left-gutter: 64px;
--EventTile_ThreadSummary-line-height: calc(2 * $font-12px); --EventTile_ThreadSummary-line-height: calc(2 * $font-12px);
flex-shrink: 0; 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 { .mx_EventTile_avatar {
cursor: pointer; cursor: pointer;
@ -405,7 +410,7 @@ $left-gutter: 64px;
} }
&.mx_EventTile_continuation { &.mx_EventTile_continuation {
padding-top: 0px !important; padding-top: 0;
} }
&.mx_EventTile_info { &.mx_EventTile_info {
@ -451,6 +456,15 @@ $left-gutter: 64px;
} }
&[data-layout="bubble"] { &[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_EventTile_msgOption {
.mx_ReadReceiptGroup { .mx_ReadReceiptGroup {
position: absolute; position: absolute;
@ -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 { .mx_GenericEventListSummary {
&[data-layout="irc"], &[data-layout="irc"],
&[data-layout="group"] { &[data-layout="group"] {
@ -1214,106 +1220,101 @@ $left-gutter: 64px;
/* Cascading - compact modern layout on the main timeline and the right panel */ /* Cascading - compact modern layout on the main timeline and the right panel */
.mx_MatrixChat_useCompactLayout { .mx_MatrixChat_useCompactLayout {
.mx_EventTile { .mx_EventTile[data-layout="group"] {
/* Override :not([data-layout="bubble"]) */ --MatrixChat_useCompactLayout_group-padding-top: $spacing-4;
&[data-layout="group"] { --MatrixChat_useCompactLayout-top-avatar: 2px;
--MatrixChat_useCompactLayout_group-padding-top: $spacing-4; --MatrixChat_useCompactLayout-top-e2eIcon: 3px;
--MatrixChat_useCompactLayout-top-avatar: 2px; --MatrixChat_useCompactLayout_line-spacing-block: 0px;
--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_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_e2eIcon,
.mx_EventTile_avatar {
top: 0;
margin-block: var(--MatrixChat_useCompactLayout_line-spacing-block);
}
.mx_EventTile_line, .mx_EventTile_line,
.mx_EventTile_reply { .mx_EventTile_reply {
padding-block: var(--MatrixChat_useCompactLayout_line-spacing-block); line-height: $font-20px;
} }
}
.mx_ReplyChain { &.mx_EventTile_emote {
margin-bottom: $spacing-4; padding-top: $spacing-8; /* add a bit more space for emotes so that avatars don't collide */
}
&.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_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_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: 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 { .mx_EventTile_avatar {
top: var(--MatrixChat_useCompactLayout-top-avatar); top: var(--MatrixChat_useCompactLayout-top-avatar);
} }
.mx_EventTile_e2eIcon { .mx_EventTile_line,
top: var(--MatrixChat_useCompactLayout-top-e2eIcon); .mx_EventTile_reply {
padding-bottom: 1px;
} }
.mx_DisambiguatedProfile { &.mx_EventTile_continuation {
font-size: $font-13px; .mx_EventTile_line,
} .mx_EventTile_reply {
padding-bottom: var(--MatrixChat_useCompactLayout_line-spacing-block);
.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 */
} }
} }
} }
&[data-shape="ThreadsList"][data-notification]::before, /* Cascading - apply zero padding to every element including mx_EventTile_emote */
.mx_NotificationBadge { &.mx_EventTile_continuation {
/* stylelint-disable-next-line declaration-colon-space-after */ padding-top: var(--MatrixChat_useCompactLayout_line-spacing-block);
inset-block-start: calc(
$notification-inset-block-start - var(--MatrixChat_useCompactLayout_group-padding-top)
);
} }
.mx_EventTile_avatar {
top: var(--MatrixChat_useCompactLayout-top-avatar);
}
.mx_EventTile_e2eIcon {
top: var(--MatrixChat_useCompactLayout-top-e2eIcon);
}
.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_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));
} }
} }