From 92fce71e393ff451415591d260762d65f7815783 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 25 Jul 2022 09:05:32 +0000 Subject: [PATCH] Align the right edge of info tile lines with normal ones on IRC layout (#9058) * Apply inline start margin to info event tile line to align the right edge with normal event tile lines Signed-off-by: Suguru Hirahara * Rename the variable Signed-off-by: Suguru Hirahara * Add a test to check inline start margin Signed-off-by: Suguru Hirahara * Rerun CI Signed-off-by: Suguru Hirahara * Improve tests a little bit Signed-off-by: Suguru Hirahara --- cypress/e2e/14-timeline/timeline.spec.ts | 30 ++++++++++++++++++++++-- res/css/views/rooms/_EventTile.pcss | 10 +++++--- res/css/views/rooms/_IRCLayout.pcss | 4 ---- 3 files changed, 35 insertions(+), 9 deletions(-) diff --git a/cypress/e2e/14-timeline/timeline.spec.ts b/cypress/e2e/14-timeline/timeline.spec.ts index 614a4a78089..09b15b5afee 100644 --- a/cypress/e2e/14-timeline/timeline.spec.ts +++ b/cypress/e2e/14-timeline/timeline.spec.ts @@ -151,6 +151,32 @@ describe("Timeline", () => { cy.percySnapshot("Configured room on IRC layout"); }); + it("should add inline start margin to an event line on IRC layout", () => { + cy.visit("/#/room/" + roomId); + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); + + // Wait until configuration is finished + cy.contains(".mx_RoomView_body .mx_GenericEventListSummary " + + ".mx_GenericEventListSummary_summary", "created and configured the room."); + + // Click "expand" link button + cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click(); + + // Check the event line has margin instead of inset property + // cf. _EventTile.pcss + // --EventTile_irc_line_info-margin-inline-start + // = calc(var(--name-width) + 10px + var(--icon-width)) + // = 80 + 10 + 14 = 104px + cy.get(".mx_EventTile[data-layout=irc].mx_EventTile_info:first-of-type .mx_EventTile_line") + .should('have.css', "margin-inline-start", "104px") + .should('have.css', "inset-inline-start", "0px"); + + // Exclude timestamp from snapshot + const percyCSS = ".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp " + + "{ visibility: hidden !important; }"; + cy.percySnapshot("Event line with inline start margin on IRC layout", { percyCSS }); + }); + it("should click top left of view source event toggle", () => { sendEvent(roomId); cy.visit("/#/room/" + roomId); @@ -159,11 +185,11 @@ describe("Timeline", () => { ".mx_GenericEventListSummary_summary", "created and configured the room."); // Edit message - cy.get(".mx_RoomView_body .mx_EventTile").contains(".mx_EventTile_line", "Message").within(() => { + cy.contains(".mx_RoomView_body .mx_EventTile .mx_EventTile_line", "Message").within(() => { cy.get('[aria-label="Edit"]').click({ force: true }); // Cypress has no ability to hover cy.get(".mx_BasicMessageComposer_input").type("Edit{enter}"); }); - cy.get(".mx_RoomView_body .mx_EventTile").contains(".mx_EventTile[data-scroll-tokens]", "MessageEdit"); + cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", "MessageEdit"); // Click top left of the event toggle, which should not be covered by MessageActionBar's safe area cy.get(".mx_EventTile .mx_ViewSourceEvent").realHover() diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 1e48abb62f1..250a99664bf 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -274,7 +274,7 @@ $left-gutter: 64px; } &[data-layout="irc"] { - --EventTile_irc_line_info-inset-inline-start: calc(var(--name-width) + 10px + var(--icon-width)); + --EventTile_irc_line_info-margin-inline-start: calc(var(--name-width) + 10px + var(--icon-width)); .mx_EventTile_msgOption { .mx_ReadReceiptGroup { @@ -288,7 +288,7 @@ $left-gutter: 64px; .mx_EventTileBubble { position: relative; - left: var(--EventTile_irc_line_info-inset-inline-start); + left: var(--EventTile_irc_line_info-margin-inline-start); &.mx_cryptoEvent { left: unset; @@ -308,11 +308,15 @@ $left-gutter: 64px; &.mx_EventTile_info { .mx_EventTile_avatar { - left: var(--EventTile_irc_line_info-inset-inline-start); + left: var(--EventTile_irc_line_info-margin-inline-start); top: 0; margin-right: var(--right-padding); padding-block: var(--EventTile_irc_line-padding-block); } + + .mx_EventTile_line { + margin-inline-start: var(--EventTile_irc_line_info-margin-inline-start); + } } } diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss index cad8d8d6c0c..6d0a97df1fe 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -161,10 +161,6 @@ $irc-line-height: $font-18px; } .mx_EventTile.mx_EventTile_info { - .mx_EventTile_line { - left: var(--EventTile_irc_line_info-inset-inline-start); - } - .mx_ViewSourceEvent, // For hidden events .mx_TextualEvent { line-height: $irc-line-height;