PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix the hidden view source toggle on IRC layout (#10266)

Browse source 
* Display view source toggle on IRC layout

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

* Add a test

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

* Merge tests

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

* Collapse hidden event source before checking clickability of view source toggle on IRC layout

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

* Select view source event under the edited line on the test

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

* Fix the test

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

* lint

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2023-03-01 14:41:56 +00:00 committed by GitHub
parent 4f1e5a71de
commit db7748b743
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 49 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
cypress/e2e/timeline/timeline.spec.ts
View file

@ -238,7 +238,11 @@ describe("Timeline", () => {
}); });
}); });
it("should click top left of view source event toggle", () => { it("should click view source event toggle", () => {
// This test checks:
// 1. clickability of top left of view source event toggle
// 2. clickability of view source toggle on IRC layout
sendEvent(roomId); sendEvent(roomId);
cy.visit("/#/room/" + roomId); cy.visit("/#/room/" + roomId);
cy.setSettingValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, true); cy.setSettingValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, true);
@ -254,8 +258,10 @@ describe("Timeline", () => {
}); });
cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", "MessageEdit").should("exist"); cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", "MessageEdit").should("exist");
// 1. clickability of top left of view source event toggle
// Click top left of the event toggle, which should not be covered by MessageActionBar's safe area // Click top left of the event toggle, which should not be covered by MessageActionBar's safe area
cy.get(".mx_EventTile:not(:first-child) .mx_ViewSourceEvent") cy.get(".mx_EventTile_last[data-layout=group] .mx_ViewSourceEvent")
.should("exist") .should("exist")
.realHover() .realHover()
.within(() => { .within(() => {
@ -263,7 +269,41 @@ describe("Timeline", () => {
}); });
// Make sure the expand toggle worked // Make sure the expand toggle worked
cy.get(".mx_EventTile .mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle").should("be.visible"); cy.get(".mx_EventTile .mx_ViewSourceEvent_expanded").should("be.visible");
// Click again to collapse the source
cy.get(".mx_EventTile_last[data-layout=group] .mx_ViewSourceEvent")
.should("exist")
.realHover()
.within(() => {
cy.get(".mx_ViewSourceEvent_toggle").click("topLeft", { force: false });
});
cy.get(".mx_EventTile .mx_ViewSourceEvent_expanded").should("not.exist");
// 2. clickability of view source toggle on IRC layout
// Enable IRC layout
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
// Exclude timestamp from snapshot
const percyCSS = ".mx_MessageTimestamp { visibility: hidden !important; }";
// Hover the view source toggle on IRC layout
cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_EventTile .mx_ViewSourceEvent")
.should("exist")
.realHover()
.percySnapshotElement("Hovered hidden event line on IRC layout", { percyCSS });
// Click view source event toggle
cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_EventTile .mx_ViewSourceEvent")
.should("exist")
.realHover()
.within(() => {
cy.get(".mx_ViewSourceEvent_toggle").click("topLeft", { force: false });
});
// Make sure the expand toggle worked
cy.get(".mx_EventTile[data-layout=irc] .mx_ViewSourceEvent_expanded").should("be.visible");
}); });
it("should click 'collapse' link button on the first hovered info event line on bubble layout", () => { it("should click 'collapse' link button on the first hovered info event line on bubble layout", () => {

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

@ -130,12 +130,17 @@ $irc-line-height: $font-18px;
.mx_TextualEvent, .mx_TextualEvent,
.mx_ViewSourceEvent, .mx_ViewSourceEvent,
.mx_MTextBody { .mx_MTextBody {
display: inline-block;
/* add a 1px padding top and bottom because our larger /* add a 1px padding top and bottom because our larger
emoji font otherwise gets cropped by anti-zalgo */ emoji font otherwise gets cropped by anti-zalgo */
padding: var(--EventTile_irc_line-padding-block) 0; padding: var(--EventTile_irc_line-padding-block) 0;
} }
.mx_EventTile_e2eIcon,
.mx_TextualEvent,
.mx_MTextBody {
display: inline-block;
}
.mx_ReplyTile { .mx_ReplyTile {
.mx_MTextBody { .mx_MTextBody {
display: -webkit-box; /* Enable -webkit-line-clamp */ display: -webkit-box; /* Enable -webkit-line-clamp */