From cd925de6fa4aedc0b20b5ed364309b549b8d43e4 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 18 Jul 2022 00:59:39 +0900 Subject: [PATCH 1/3] Improve clickability of view source event toggle button Signed-off-by: Suguru Hirahara --- cypress/e2e/14-timeline/timeline.spec.ts | 22 +++++++++++++++++++ res/css/views/messages/_MessageActionBar.pcss | 6 +++++ 2 files changed, 28 insertions(+) diff --git a/cypress/e2e/14-timeline/timeline.spec.ts b/cypress/e2e/14-timeline/timeline.spec.ts index e941e6920e7..614a4a78089 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 18333a3079f..014068e1bee 100644 --- a/res/css/views/messages/_MessageActionBar.pcss +++ b/res/css/views/messages/_MessageActionBar.pcss @@ -66,6 +66,12 @@ 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 + height: 100%; + top: 0; + } } >* { From 0da8d0d0d5506a0484f1e502896793902c0326c5 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 18 Jul 2022 01:03:04 +0900 Subject: [PATCH 2/3] Fix compression Signed-off-by: Suguru Hirahara --- res/css/views/messages/_ViewSourceEvent.pcss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/messages/_ViewSourceEvent.pcss b/res/css/views/messages/_ViewSourceEvent.pcss index 2febda3eba0..0cb7359fc50 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"); } From 75030b16072c2cf71c17568ffdee5b785e588d80 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 18 Jul 2022 01:26:52 +0900 Subject: [PATCH 3/3] Make it easy to select subsequent events Signed-off-by: Suguru Hirahara --- res/css/views/messages/_MessageActionBar.pcss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/res/css/views/messages/_MessageActionBar.pcss b/res/css/views/messages/_MessageActionBar.pcss index 014068e1bee..4aa44d1ad26 100644 --- a/res/css/views/messages/_MessageActionBar.pcss +++ b/res/css/views/messages/_MessageActionBar.pcss @@ -69,8 +69,10 @@ limitations under the License. .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; } }