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

Align the right edge of info tile lines with normal ones on IRC layout (#9058)

Browse source 
* Apply inline start margin to info event tile line to align the right edge with normal event tile lines

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Rename the variable

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Add a test to check inline start margin

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Rerun CI

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Improve tests a little bit

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-07-25 09:05:32 +00:00 committed by GitHub
parent c5eaeafe8e
commit 92fce71e39
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 35 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -151,6 +151,32 @@ describe("Timeline", () => {
cy.percySnapshot("Configured room on IRC layout");
});
it("should add inline start margin to an event line on IRC layout", () => {
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.");
// Click "expand" link button
cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click();
// 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
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', "inset-inline-start", "0px");
// Exclude timestamp from snapshot
const percyCSS = ".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp "
+ "{ visibility: hidden !important; }";
cy.percySnapshot("Event line with inline start margin on IRC layout", { percyCSS });
});
it("should click top left of view source event toggle", () => {
sendEvent(roomId);
cy.visit("/#/room/" + roomId);
@ -159,11 +185,11 @@ describe("Timeline", () => {
".mx_GenericEventListSummary_summary", "created and configured the room.");
// Edit message
cy.get(".mx_RoomView_body .mx_EventTile").contains(".mx_EventTile_line", "Message").within(() => {
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");
cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", "MessageEdit");
// Click top left of the event toggle, which should not be covered by MessageActionBar's safe area
cy.get(".mx_EventTile .mx_ViewSourceEvent").realHover()

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

@ -274,7 +274,7 @@ $left-gutter: 64px;
}
&[data-layout="irc"] {
--EventTile_irc_line_info-inset-inline-start: calc(var(--name-width) + 10px + var(--icon-width));
--EventTile_irc_line_info-margin-inline-start: calc(var(--name-width) + 10px + var(--icon-width));
.mx_EventTile_msgOption {
.mx_ReadReceiptGroup {
@ -288,7 +288,7 @@ $left-gutter: 64px;
.mx_EventTileBubble {
position: relative;
left: var(--EventTile_irc_line_info-inset-inline-start);
left: var(--EventTile_irc_line_info-margin-inline-start);
&.mx_cryptoEvent {
left: unset;
@ -308,11 +308,15 @@ $left-gutter: 64px;
&.mx_EventTile_info {
.mx_EventTile_avatar {
left: var(--EventTile_irc_line_info-inset-inline-start);
left: var(--EventTile_irc_line_info-margin-inline-start);
top: 0;
margin-right: var(--right-padding);
padding-block: var(--EventTile_irc_line-padding-block);
}
.mx_EventTile_line {
margin-inline-start: var(--EventTile_irc_line_info-margin-inline-start);
}
}
}

4
res/css/views/rooms/_IRCLayout.pcss
View file

@ -161,10 +161,6 @@ $irc-line-height: $font-18px;
}
.mx_EventTile.mx_EventTile_info {
.mx_EventTile_line {
left: var(--EventTile_irc_line_info-inset-inline-start);
}
.mx_ViewSourceEvent, // For hidden events
.mx_TextualEvent {
line-height: $irc-line-height;