Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Align info EventTile and normal EventTile on IRC layout (#10197)
Browse files Browse the repository at this point in the history 
* 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>
  • Loading branch information
@luixxiul
luixxiul authored Mar 3, 2023
1 parent b48b968 commit ecebac6
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 15 deletions.
114 changes: 111 additions & 3 deletions cypress/e2e/timeline/timeline.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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);
Expand Down
18 changes: 7 additions & 11 deletions res/css/views/rooms/_EventTile.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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)
);
}
}
Expand Down
3 changes: 2 additions & 1 deletion res/css/views/rooms/_IRCLayout.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
}

Expand Down

0 comments on commit ecebac6

Please sign in to comment.