PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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

Browse source 
* 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>
This commit is contained in:
Suguru Hirahara 2022-07-18 07:41:01 +00:00 committed by GitHub
parent b90ea87d11
commit 38a913488f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
cypress/e2e/14-timeline/timeline.spec.ts
View file

@ -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);

8
res/css/views/messages/_MessageActionBar.pcss
View file

@ -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;
}
}
>* {

1
res/css/views/messages/_ViewSourceEvent.pcss
View file

@ -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");
}