From ecebac6ea155ad4609b7cc139cda4def5dbc08f3 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 3 Mar 2023 09:32:38 +0000 Subject: [PATCH] Align info EventTile and normal EventTile on IRC layout (#10197) * fixes alignment issue in IRC layout * adds cypress test for alignment --------- Contributed-by: Suguru Hirahara Signed-off-by: Alun Turner --- cypress/e2e/timeline/timeline.spec.ts | 114 +++++++++++++++++++++++++- res/css/views/rooms/_EventTile.pcss | 18 ++-- res/css/views/rooms/_IRCLayout.pcss | 3 +- 3 files changed, 120 insertions(+), 15 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 8cc4b8a093..8d6aa93101 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -179,10 +179,11 @@ describe("Timeline", () => { // 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 + // = calc(var(--name-width) + var(--icon-width) + 1 * var(--right-padding)) + // = 80 + 14 + 5 = 99px + 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", "margin-inline-start", "99px") .should("have.css", "inset-inline-start", "0px"); // Exclude timestamp and read marker from snapshot @@ -193,6 +194,113 @@ describe("Timeline", () => { cy.checkA11y(); }); + it("should align generic event list summary with messages and emote on IRC layout", () => { + // This test aims to check: + // 1. Alignment of collapsed GELS (generic event list summary) and messages + // 2. Alignment of expanded GELS and messages + // 3. Alignment of expanded GELS and placeholder of deleted message + // 4. Alignment of expanded GELS, placeholder of deleted message, and emote + + // Exclude timestamp from snapshot of mx_MainSplit + const percyCSS = ".mx_MainSplit .mx_MessageTimestamp { visibility: hidden !important; }"; + + 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.", + ).should("exist"); + + // Send messages + cy.get(".mx_RoomView_body .mx_BasicMessageComposer_input").type("Hello Mr. Bot{enter}"); + cy.get(".mx_RoomView_body .mx_BasicMessageComposer_input").type("Hello again, Mr. Bot{enter}"); + // Make sure the second message was sent + cy.get(".mx_RoomView_MessageList > .mx_EventTile_last .mx_EventTile_receiptSent").should("be.visible"); + + // 1. Alignment of collapsed GELS (generic event list summary) and messages + // Check inline start spacing of collapsed GELS + // See: _EventTile.pcss + // .mx_GenericEventListSummary[data-layout="irc"] > .mx_EventTile_line + // = var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 2 * var(--right-padding) + // = 80 + 14 + 46 + 2 * 5 + // = 150px + cy.get(".mx_GenericEventListSummary[data-layout=irc] > .mx_EventTile_line").should( + "have.css", + "padding-inline-start", + "150px", + ); + // Check width and spacing values of elements in .mx_EventTile, which should be equal to 150px + // --right-padding should be applied + cy.get(".mx_EventTile > *").should("have.css", "margin-right", "5px"); + // --name-width width zero inline end margin should be applied + cy.get(".mx_EventTile .mx_DisambiguatedProfile") + .should("have.css", "width", "80px") + .should("have.css", "margin-inline-end", "0px"); + // --icon-width should be applied + cy.get(".mx_EventTile .mx_EventTile_avatar > .mx_BaseAvatar").should("have.css", "width", "14px"); + // $MessageTimestamp_width should be applied + cy.get(".mx_EventTile > a").should("have.css", "min-width", "46px"); + // Record alignment of collapsed GELS and messages on messagePanel + cy.get(".mx_MainSplit").percySnapshotElement("Collapsed GELS and messages on IRC layout", { percyCSS }); + + // 2. Alignment of expanded GELS and messages + // Click "expand" link button + cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click(); + // Check inline start spacing of info line on expanded GELS + cy.get(".mx_EventTile[data-layout=irc].mx_EventTile_info:first-of-type .mx_EventTile_line") + // See: _EventTile.pcss + // --EventTile_irc_line_info-margin-inline-start + // = 80 + 14 + 1 * 5 + .should("have.css", "margin-inline-start", "99px"); + // Record alignment of expanded GELS and messages on messagePanel + cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS and messages on IRC layout", { percyCSS }); + + // 3. Alignment of expanded GELS and placeholder of deleted message + // Delete the second (last) message + cy.get(".mx_RoomView_MessageList > .mx_EventTile_last").realHover(); + cy.get(".mx_RoomView_MessageList > .mx_EventTile_last .mx_MessageActionBar_optionsButton", { + timeout: 1000, + }) + .should("exist") + .realHover() + .click({ force: false }); + cy.get(".mx_IconizedContextMenu_item[aria-label=Remove]").should("be.visible").click({ force: false }); + // Confirm deletion + cy.get(".mx_Dialog_buttons button[data-testid=dialog-primary-button]") + .should("have.text", "Remove") + .click({ force: false }); + // Make sure the dialog was closed and the second (last) message was redacted + cy.get(".mx_Dialog").should("not.exist"); + cy.get(".mx_GenericEventListSummary .mx_EventTile_last .mx_RedactedBody").should("be.visible"); + cy.get(".mx_GenericEventListSummary .mx_EventTile_last .mx_EventTile_receiptSent").should("be.visible"); + // Record alignment of expanded GELS and placeholder of deleted message on messagePanel + cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS and with placeholder of deleted message", { + percyCSS, + }); + + // 4. Alignment of expanded GELS, placeholder of deleted message, and emote + // Send a emote + cy.get(".mx_RoomView_body .mx_BasicMessageComposer_input").type("/me says hello to Mr. Bot{enter}"); + // Check inline start margin of its avatar + // Here --right-padding is for the avatar on the message line + // See: _IRCLayout.pcss + // .mx_IRCLayout .mx_EventTile_emote .mx_EventTile_avatar + // = calc(var(--name-width) + var(--icon-width) + 1 * var(--right-padding)) + // = 80 + 14 + 1 * 5 + cy.get(".mx_EventTile_emote .mx_EventTile_avatar").should("have.css", "margin-left", "99px"); + // Make sure emote was sent + cy.get(".mx_EventTile_last.mx_EventTile_emote .mx_EventTile_receiptSent").should("be.visible"); + // Record alignment of expanded GELS, placeholder of deleted message, and emote + cy.get(".mx_MainSplit").percySnapshotElement( + "Expanded GELS and with emote and placeholder of deleted message", + { + percyCSS, + }, + ); + }); + it("should set inline start padding to a hidden event line", () => { sendEvent(roomId); cy.visit("/#/room/" + roomId); diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 5425697ff9..bb608e8594 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -270,7 +270,11 @@ $left-gutter: 64px; } &[data-layout="irc"] { - --EventTile_irc_line_info-margin-inline-start: calc(var(--name-width) + 10px + var(--icon-width)); + /* 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) + ); .mx_EventTile_msgOption { .mx_ReadReceiptGroup { @@ -483,20 +487,12 @@ $left-gutter: 64px; } &[data-layout="irc"] { - .mx_EventTile_line .mx_RedactedBody { - padding-left: 24px; /* 25px - 1px */ - - &::before { - left: var(--right-padding); - } - } - /* Apply only collapsed events block */ > .mx_EventTile_line { - /* 15 px of padding */ + /* add --right-padding value of MessageTimestamp and avatar only */ /* stylelint-disable-next-line declaration-colon-space-after */ padding-left: calc( - var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 3 * var(--right-padding) + var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 2 * var(--right-padding) ); } } diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss index cc10e97609..84b15ccd38 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -159,7 +159,8 @@ $irc-line-height: $font-18px; .mx_EventTile_emote { .mx_EventTile_avatar { - margin-left: calc(var(--name-width) + var(--icon-width) + var(--right-padding)); + /* add --right-padding value of MessageTimestamp only */ + margin-left: calc(var(--name-width) + var(--icon-width) + 1 * var(--right-padding)); } }