Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Improve clickability of view source event toggle button #9068

Merged
merged 3 commits into from
Jul 18, 2022
Merged

Improve clickability of view source event toggle button #9068

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cd925de
Improve clickability of view source event toggle button
luixxiul Jul 17, 2022
0da8d0d
Fix compression
luixxiul Jul 17, 2022
75030b1
Make it easy to select subsequent events
luixxiul Jul 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions cypress/e2e/14-timeline/timeline.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
8 changes: 8 additions & 0 deletions res/css/views/messages/_MessageActionBar.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

>* {
Expand Down
1 change: 1 addition & 0 deletions res/css/views/messages/_ViewSourceEvent.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
}
Expand Down