OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

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

* 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>
pull/28788/head^2
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
Show Stats 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;
}
/* 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;
word-break: break-word;
margin-top: 10px;
padding-top: 0;
.mx_EventTile_line {
padding-inline-start: 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;
}
}
}

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

@ -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;

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_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);

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

@ -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;
@ -405,7 +410,7 @@ $left-gutter: 64px;
}
&.mx_EventTile_continuation {
padding-top: 0px !important;
padding-top: 0;
}
&.mx_EventTile_info {
@ -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;
@ -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"] {
@ -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_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_reply {
padding-block: var(--MatrixChat_useCompactLayout_line-spacing-block);
line-height: $font-20px;
}
}
.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_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_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_e2eIcon {
top: var(--MatrixChat_useCompactLayout-top-e2eIcon);
.mx_EventTile_line,
.mx_EventTile_reply {
padding-bottom: 1px;
}
.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 */
&.mx_EventTile_continuation {
.mx_EventTile_line,
.mx_EventTile_reply {
padding-bottom: var(--MatrixChat_useCompactLayout_line-spacing-block);
}
}
}
&[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)
);
/* 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_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));
}
}