From 38a913488feb362fc40a9ab3222421a570cf91ce Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 18 Jul 2022 07:41:01 +0000 Subject: [PATCH] Improve clickability of view source event toggle button (#9068) * Improve clickability of view source event toggle button Signed-off-by: Suguru Hirahara * Fix compression Signed-off-by: Suguru Hirahara * Make it easy to select subsequent events Signed-off-by: Suguru Hirahara --- cypress/e2e/14-timeline/timeline.spec.ts | 22 +++++++++++++++++++ res/css/views/messages/_MessageActionBar.pcss | 8 +++++++ res/css/views/messages/_ViewSourceEvent.pcss | 1 + 3 files changed, 31 insertions(+) diff --git a/cypress/e2e/14-timeline/timeline.spec.ts b/cypress/e2e/14-timeline/timeline.spec.ts index e941e6920e..614a4a7808 100644 --- a/cypress/e2e/14-timeline/timeline.spec.ts +++ b/cypress/e2e/14-timeline/timeline.spec.ts @@ -151,6 +151,28 @@ describe("Timeline", () => { cy.percySnapshot("Configured room on IRC layout"); }); + it("should click top left of view source event toggle", () => { + 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.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"); + + // Click top left of the event toggle, which should not be covered by MessageActionBar's safe area + cy.get(".mx_EventTile .mx_ViewSourceEvent").realHover() + .get(".mx_EventTile .mx_ViewSourceEvent .mx_ViewSourceEvent_toggle").click('topLeft', { force: false }); + + // Make sure the expand toggle worked + cy.get(".mx_EventTile .mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle").should("be.visible"); + }); + 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/messages/_MessageActionBar.pcss b/res/css/views/messages/_MessageActionBar.pcss index 18333a3079..4aa44d1ad2 100644 --- a/res/css/views/messages/_MessageActionBar.pcss +++ b/res/css/views/messages/_MessageActionBar.pcss @@ -66,6 +66,14 @@ limitations under the License. top: 0; left: 0; } + + .mx_EventTile_info .mx_ViewSourceEvent ~ & { + // improve clickability of view source event toggle button by removing vertical safe area + width: 100%; + height: 100%; + top: 0; + left: 0; + } } >* { diff --git a/res/css/views/messages/_ViewSourceEvent.pcss b/res/css/views/messages/_ViewSourceEvent.pcss index 2febda3eba..0cb7359fc5 100644 --- a/res/css/views/messages/_ViewSourceEvent.pcss +++ b/res/css/views/messages/_ViewSourceEvent.pcss @@ -41,6 +41,7 @@ limitations under the License. mask-position: 0 center; mask-size: auto 12px; width: 12px; + min-width: 12px; background-color: $accent; mask-image: url("$(res)/img/element-icons/maximise-expand.svg"); }