mirror of
https://github.com/element-hq/element-web
synced 2024-10-23 03:05:45 +03:00
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>
This commit is contained in:
Suguru Hirahara
GitHub
parent
b48b968ac4
commit
ecebac6ea1
3 changed files with 120 additions and 15 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue