mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-22 17:25:50 +03:00
Code Issues Projects Releases Packages Wiki Activity

Apply inline start padding to selected lines on modern layout only (#9006)

Browse source
This commit is contained in:
Suguru Hirahara 2022-08-01 06:19:22 +00:00 committed by GitHub
parent fb25b3729d
commit 82fb21aff5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
cypress/e2e/14-timeline/timeline.spec.ts
View file

@ -180,6 +180,41 @@ describe("Timeline", () => {
cy.percySnapshot("Event line with inline start margin on IRC layout", { percyCSS });
});
it("should set inline start padding to a hidden event line", () => {
sendEvent(roomId);
cy.visit("/#/room/" + roomId);
cy.setSettingValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, true);
cy.contains(".mx_RoomView_body .mx_GenericEventListSummary .mx_GenericEventListSummary_summary",
"created and configured the room.");
// Edit message
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");
// Click timestamp to highlight hidden event line
cy.get(".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp").click();
// Exclude timestamp from snapshot
const percyCSS = ".mx_RoomView_body .mx_EventTile .mx_MessageTimestamp "
+ "{ visibility: hidden !important; }";
// should not add inline start padding to a hidden event line on IRC layout
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
cy.get(".mx_EventTile[data-layout=irc].mx_EventTile_info .mx_EventTile_line")
.should('have.css', 'padding-inline-start', '0px');
cy.percySnapshot("Hidden event line with zero padding on IRC layout", { percyCSS });
// should add inline start padding to a hidden event line on modern layout
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group);
cy.get(".mx_EventTile[data-layout=group].mx_EventTile_info .mx_EventTile_line")
// calc(var(--EventTile_group_line-spacing-inline-start) + 20px) = 64 + 20 = 84px
.should('have.css', 'padding-inline-start', '84px');
cy.percySnapshot("Hidden event line with padding on modern layout", { percyCSS });
});
it("should click top left of view source event toggle", () => {
sendEvent(roomId);
cy.visit("/#/room/" + roomId);

12
res/css/views/rooms/_EventTile.pcss
View file

@ -424,6 +424,11 @@ $left-gutter: 64px;
top: 0;
}
}
&.mx_EventTile_selected .mx_EventTile_line {
// TODO: check if this would be necessary
padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
}
}
&:hover {
@ -466,10 +471,6 @@ $left-gutter: 64px;
padding-top: 18px;
font-size: $font-14px;
position: relative;
&.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
padding-left: calc($left-gutter + 18px);
}
}
.mx_GenericEventListSummary {
@ -504,7 +505,8 @@ $left-gutter: 64px;
}
.mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
padding-left: calc($left-gutter + 20px); /* override padding-left $left-gutter */
/* override padding-left $left-gutter */
padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
}
}
}