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 <luixxiul@users.noreply.github.com> Signed-off-by: Alun Turner <alunturner@users.noreply.github.com>

Author: luixxiul

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

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

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