From 23174904ed3884101eb910a4ec03fb2d4057d90b Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 3 May 2023 11:06:51 +0000 Subject: [PATCH] Merge style rules related to EventTile on IRC layout (#10700) * Manage rules related to EventTile on `_EventTile.pcss` The style rules with the selector "mx_EventTile" should be managed on _EventTile.pcss. Signed-off-by: Suguru Hirahara * Merge - `--EventTile_irc_line_info-margin-inline-start` Signed-off-by: Suguru Hirahara * Merge - `mx_EventTile_msgOption` Signed-off-by: Suguru Hirahara * Merge - `mx_MessageTimestamp` Signed-off-by: Suguru Hirahara * Merge - `mx_EventTileBubble` Signed-off-by: Suguru Hirahara * Merge - `mx_ReplyChain` Signed-off-by: Suguru Hirahara * Merge - `mx_ReplyTile .mx_EventTileBubble` Signed-off-by: Suguru Hirahara * Merge - `&.mx_EventTile_isEditing > .mx_EventTile_line` Signed-off-by: Suguru Hirahara * Merge - `&.mx_EventTile_info` Signed-off-by: Suguru Hirahara * Convert the variable with a custom property To fix the syntax error "Undefined variable $irc-line-height" because of cascading order. Signed-off-by: Suguru Hirahara * Merge - '.mx_EventTile_emote' The class is both specified by the const 'classes' (for classNames of mx_EventTile) and const 'lineClasses' (for mx_EventTile_line), but it is irrelevant here because the style rule does not expect mx_EventTile_avatar to be a direct descendant. In other words, both ".mx_EventTile.mx_EventTile_emote" and ".mx_EventTile .mx_EventTile_emote" are accepted. Signed-off-by: Suguru Hirahara --------- Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 2 +- res/css/views/rooms/_EventTile.pcss | 154 ++++++++++++++++++++++++- res/css/views/rooms/_IRCLayout.pcss | 156 +------------------------- 3 files changed, 154 insertions(+), 158 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 06b289d1e2..c2743a3c89 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -207,7 +207,7 @@ describe("Timeline", () => { cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_GenericEventListSummary_spacer").should( "have.css", "line-height", - "18px", // $irc-line-height: $font-18px (See: _IRCLayout.pcss) + "18px", // var(--irc-line-height): $font-18px (See: _IRCLayout.pcss) ); cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on IRC layout", { percyCSS }); diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 88b600365a..bde48014d3 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -281,22 +281,156 @@ $left-gutter: 64px; } &[data-layout="irc"] { + --EventTile_irc_line-padding-block: 1px; + /* add --right-padding value of MessageTimestamp only */ /* stylelint-disable-next-line declaration-colon-space-after */ --EventTile_irc_line_info-margin-inline-start: calc( var(--name-width) + var(--icon-width) + 1 * var(--right-padding) ); + display: flex; + align-items: flex-start; + padding-top: 0; + + > a { + text-decoration: none; /* timestamps are links which shouldn't be underlined */ + min-width: $MessageTimestamp_width; /* ensure space for EventTile without timestamp */ + } + + > * { + margin-right: var(--right-padding); + } + + .mx_EventTile_avatar, + .mx_EventTile_e2eIcon { + height: var(--irc-line-height); + } + + .mx_EventTile_avatar, + .mx_DisambiguatedProfile, + .mx_EventTile_e2eIcon, .mx_EventTile_msgOption { - .mx_ReadReceiptGroup { - inset-block-start: -0.3rem; /* ($irc-line-height - avatar height) / 2 */ + flex-shrink: 0; + } + + .mx_EventTile_avatar { + order: 1; + position: relative; + display: flex; + align-items: center; + + /* Need to use important to override the js provided height and width values. */ + > .mx_BaseAvatar, + > .mx_BaseAvatar > * { + height: $font-14px !important; + width: $font-14px !important; + font-size: $font-10px !important; + line-height: $font-15px !important; } } + .mx_DisambiguatedProfile { + order: 2; + width: var(--name-width); + margin-inline-end: 0; /* override mx_EventTile > * */ + + > .mx_DisambiguatedProfile_displayName { + width: 100%; + text-align: end; + overflow: hidden; + text-overflow: ellipsis; + } + + > .mx_DisambiguatedProfile_mxid { + visibility: collapse; + margin-left: 0; /* Override the inherited margin. */ + padding: 0 5px; /* TODO: Use a spacing variable */ + } + + &:hover { + overflow: visible; + z-index: 10; + + > .mx_DisambiguatedProfile_displayName { + overflow: visible; + display: inline; + background-color: $event-selected-color; + border-radius: 8px 0 0 8px; + padding-right: $spacing-8; + } + + > .mx_DisambiguatedProfile_mxid { + visibility: visible; + opacity: 1; + background-color: $event-selected-color; + } + } + } + + .mx_EventTile_e2eIcon { + padding: 0; + flex-grow: 0; + background-position: center; + } + + .mx_EventTile_line { + .mx_EventTile_e2eIcon, + .mx_TextualEvent, + .mx_ViewSourceEvent, + .mx_MTextBody { + /* add a 1px padding top and bottom because our larger + emoji font otherwise gets cropped by anti-zalgo */ + padding: var(--EventTile_irc_line-padding-block) 0; + } + + .mx_EventTile_e2eIcon, + .mx_TextualEvent, + .mx_MTextBody { + display: inline-block; + } + + .mx_ReplyTile { + .mx_MTextBody { + display: -webkit-box; /* Enable -webkit-line-clamp */ + } + } + } + + .mx_EventTile_line, + .mx_EventTile_reply { + order: 3; + display: flex; + flex-direction: column; + flex-grow: 1; + flex-shrink: 1; + min-width: 0; + } + + .mx_EventTile_reply { + order: 4; + } + + .mx_EventTile_msgOption { + order: 5; + + .mx_ReadReceiptGroup { + inset-block-start: -0.3rem; /* (var(--irc-line-height) - avatar height) / 2 */ + } + } + + .mx_ReplyChain { + margin: 0; + } + .mx_MessageTimestamp { text-align: right; } + .mx_EditMessageComposer_buttons { + position: relative; + } + .mx_EventTileBubble { position: relative; left: var(--EventTile_irc_line_info-margin-inline-start); @@ -306,10 +440,6 @@ $left-gutter: 64px; } } - .mx_ReplyChain { - margin: 0; - } - .mx_ReplyTile .mx_EventTileBubble { left: unset; /* Cancel the value specified above for the tile inside ReplyTile */ } @@ -332,6 +462,18 @@ $left-gutter: 64px; .mx_EventTile_line { margin-inline-start: var(--EventTile_irc_line_info-margin-inline-start); } + + .mx_ViewSourceEvent, /* For hidden events */ + .mx_TextualEvent { + line-height: var(--irc-line-height); + } + } + + &.mx_EventTile_emote { + .mx_EventTile_avatar { + /* add --right-padding value of MessageTimestamp only */ + margin-left: calc(var(--name-width) + var(--icon-width) + 1 * var(--right-padding)); + } } } diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss index cd4371b6a0..07400f2f49 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -14,12 +14,14 @@ See the License for the specific language governing permissions and limitations under the License. */ -$irc-line-height: $font-18px; +:root { + --irc-line-height: $font-18px; +} .mx_IRCLayout { --name-width: 80px; /* cf. ircDisplayNameWidth on Settings.tsx */ --icon-width: 14px; - --line-height: $irc-line-height; + --line-height: var(--irc-line-height); --right-padding: 5px; /* TODO: Use a spacing variable */ line-height: var(--line-height) !important; @@ -30,155 +32,7 @@ $irc-line-height: $font-18px; .mx_NewRoomIntro { > h2 { - line-height: initial; /* Cancel $irc-line-height */ - } - } - - .mx_EventTile[data-layout="irc"] { - --EventTile_irc_line-padding-block: 1px; - - display: flex; - align-items: flex-start; - padding-top: 0; - - > a { - text-decoration: none; /* timestamps are links which shouldn't be underlined */ - min-width: $MessageTimestamp_width; /* ensure space for EventTile without timestamp */ - } - - > * { - margin-right: var(--right-padding); - } - - .mx_EventTile_avatar, - .mx_EventTile_e2eIcon { - height: $irc-line-height; - } - - .mx_EventTile_avatar, - .mx_DisambiguatedProfile, - .mx_EventTile_e2eIcon, - .mx_EventTile_msgOption { - flex-shrink: 0; - } - - .mx_EventTile_avatar { - order: 1; - position: relative; - display: flex; - align-items: center; - - /* Need to use important to override the js provided height and width values. */ - > .mx_BaseAvatar, - > .mx_BaseAvatar > * { - height: $font-14px !important; - width: $font-14px !important; - font-size: $font-10px !important; - line-height: $font-15px !important; - } - } - - .mx_DisambiguatedProfile { - order: 2; - width: var(--name-width); - margin-inline-end: 0; /* override mx_EventTile > * */ - - > .mx_DisambiguatedProfile_displayName { - width: 100%; - text-align: end; - overflow: hidden; - text-overflow: ellipsis; - } - - > .mx_DisambiguatedProfile_mxid { - visibility: collapse; - margin-left: 0; /* Override the inherited margin. */ - padding: 0 5px; /* TODO: Use a spacing variable */ - } - - &:hover { - overflow: visible; - z-index: 10; - - > .mx_DisambiguatedProfile_displayName { - overflow: visible; - display: inline; - background-color: $event-selected-color; - border-radius: 8px 0 0 8px; - padding-right: $spacing-8; - } - - > .mx_DisambiguatedProfile_mxid { - visibility: visible; - opacity: 1; - background-color: $event-selected-color; - } - } - } - - .mx_EventTile_e2eIcon { - padding: 0; - flex-grow: 0; - background-position: center; - } - - .mx_EventTile_line { - .mx_EventTile_e2eIcon, - .mx_TextualEvent, - .mx_ViewSourceEvent, - .mx_MTextBody { - /* add a 1px padding top and bottom because our larger - emoji font otherwise gets cropped by anti-zalgo */ - padding: var(--EventTile_irc_line-padding-block) 0; - } - - .mx_EventTile_e2eIcon, - .mx_TextualEvent, - .mx_MTextBody { - display: inline-block; - } - - .mx_ReplyTile { - .mx_MTextBody { - display: -webkit-box; /* Enable -webkit-line-clamp */ - } - } - } - - .mx_EventTile_line, - .mx_EventTile_reply { - order: 3; - display: flex; - flex-direction: column; - flex-grow: 1; - flex-shrink: 1; - min-width: 0; - } - - .mx_EventTile_reply { - order: 4; - } - - .mx_EventTile_msgOption { - order: 5; - } - - .mx_EditMessageComposer_buttons { - position: relative; - } - - &.mx_EventTile_info { - .mx_ViewSourceEvent, /* For hidden events */ - .mx_TextualEvent { - line-height: $irc-line-height; - } - } - } - - .mx_EventTile_emote { - .mx_EventTile_avatar { - /* add --right-padding value of MessageTimestamp only */ - margin-left: calc(var(--name-width) + var(--icon-width) + 1 * var(--right-padding)); + line-height: initial; /* Cancel var(--irc-line-height) */ } }