Improve clickability of view source event toggle button (#9068)

* Improve clickability of view source event toggle button Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix compression Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Make it easy to select subsequent events Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
matrix-org · Jul 18, 2022 · 38a9134 · 38a9134
1 parent b90ea87
commit 38a9134
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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");
     }