From 5be5549089a65e861011475715722893faae41ea Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 17 Jul 2022 18:59:18 +0900 Subject: [PATCH] Display view source toggle on IRC layout Signed-off-by: Suguru Hirahara --- cypress/e2e/14-timeline/timeline.spec.ts | 25 ++++++++++++++++++++++++ res/css/views/rooms/_IRCLayout.pcss | 7 ++++++- 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/cypress/e2e/14-timeline/timeline.spec.ts b/cypress/e2e/14-timeline/timeline.spec.ts index e941e6920e7..da166b2cf57 100644 --- a/cypress/e2e/14-timeline/timeline.spec.ts +++ b/cypress/e2e/14-timeline/timeline.spec.ts @@ -151,6 +151,31 @@ describe("Timeline", () => { cy.percySnapshot("Configured room on IRC layout"); }); + it("should click view source toggle on IRC layout", () => { + sendEvent(roomId); + cy.visit("/#/room/" + roomId); + cy.setSettingValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, true); + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); + cy.contains(".mx_RoomView_body .mx_GenericEventListSummary[data-layout=irc] " + + ".mx_GenericEventListSummary_summary", "created and configured the room."); + + // Edit message + cy.get(".mx_RoomView_body .mx_EventTile").contains(".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"); + + // Exclude timestamp from snapshot + const percyCSS = ".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp " + + "{ visibility: hidden !important; }"; + + // Click view source event toggle + cy.get(".mx_EventTile[data-layout=irc].mx_EventTile_info:first-of-type .mx_EventTile_line").realHover() + .percySnapshot("Hovered hidden event line", { percyCSS }) + .get(".mx_ViewSourceEvent_toggle").click({ force: false }); + }); + it("should click 'collapse' link button on the first hovered info event line on bubble layout", () => { cy.visit("/#/room/" + roomId); cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss index cad8d8d6c0c..2517a3415d8 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -129,11 +129,16 @@ $irc-line-height: $font-18px; .mx_TextualEvent, .mx_ViewSourceEvent, .mx_MTextBody { - display: inline-block; // add a 1px padding top and bottom because our larger emoji font otherwise gets cropped by anti-zalgo padding: var(--EventTile_irc_line-padding-block) 0; } + .mx_EventTile_e2eIcon, + .mx_TextualEvent, + .mx_MTextBody { + display: inline-block; + } + .mx_ReplyTile { .mx_MTextBody { display: -webkit-box; // Enable -webkit-line-clamp