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

Fix translucent TextualEvent on search results panel (#10810)

Browse source 
* Unset the opacity value of textual events on the search results panel

* Add a test for checking opacity
This commit is contained in:
Suguru Hirahara 2023-06-08 11:11:18 +00:00 committed by GitHub
parent 0e682b6eae
commit 87f329789b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 66 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
cypress/e2e/timeline/timeline.spec.ts
View file

@ -718,24 +718,6 @@ describe("Timeline", () => {
});
});
it("should highlight search result words regardless of formatting", () => {
sendEvent(roomId);
sendEvent(roomId, true);
cy.visit("/#/room/" + roomId);
cy.get(".mx_RoomHeader").findByRole("button", { name: "Search" }).click();
cy.get(".mx_SearchBar").percySnapshotElement("Search bar on the timeline", {
// Emulate narrow timeline
widths: [320, 640],
});
cy.get(".mx_SearchBar_input").findByRole("textbox").type("Message{enter}");
cy.get(".mx_EventTile:not(.mx_EventTile_contextual) .mx_EventTile_searchHighlight").should("exist");
cy.get(".mx_RoomView_searchResultsPanel").percySnapshotElement("Highlighted search results");
});
it("should render url previews", () => {
cy.intercept("**/_matrix/media/r0/thumbnail/matrix.org/2022-08-16_yaiSVSRIsNFfxDnV?*", {
statusCode: 200,
@ -780,6 +762,68 @@ describe("Timeline", () => {
widths: [800, 400],
});
});
describe("on search results panel", () => {
it("should highlight search result words regardless of formatting", () => {
sendEvent(roomId);
sendEvent(roomId, true);
cy.visit("/#/room/" + roomId);
cy.get(".mx_RoomHeader").findByRole("button", { name: "Search" }).click();
cy.get(".mx_SearchBar").percySnapshotElement("Search bar on the timeline", {
// Emulate narrow timeline
widths: [320, 640],
});
cy.get(".mx_SearchBar_input").findByRole("textbox").type("Message{enter}");
cy.get(".mx_EventTile:not(.mx_EventTile_contextual) .mx_EventTile_searchHighlight").should("exist");
cy.get(".mx_RoomView_searchResultsPanel").percySnapshotElement("Highlighted search results");
});
it("should render a fully opaque textual event", () => {
const stringToSearch = "Message"; // Same with string sent with sendEvent()
sendEvent(roomId);
cy.visit("/#/room/" + roomId);
// Open a room setting dialog
cy.findByRole("button", { name: "Room options" }).click();
cy.findByRole("menuitem", { name: "Settings" }).click();
// Set a room topic to render a TextualEvent
cy.findByRole("textbox", { name: "Room Topic" }).type(`This is a room for ${stringToSearch}.`);
cy.findByRole("button", { name: "Save" }).click();
cy.closeDialog();
// Assert that the TextualEvent is rendered
cy.findByText(`${OLD_NAME} changed the topic to "This is a room for ${stringToSearch}.".`)
.should("exist")
.should("have.class", "mx_TextualEvent");
// Display the room search bar
cy.get(".mx_RoomHeader").findByRole("button", { name: "Search" }).click();
// Search the string to display both the message and TextualEvent on search results panel
cy.get(".mx_SearchBar").within(() => {
cy.findByRole("textbox").type(`${stringToSearch}{enter}`);
});
// On search results panel
cy.get(".mx_RoomView_searchResultsPanel").within(() => {
// Assert that contextual event tiles are translucent
cy.get(".mx_EventTile.mx_EventTile_contextual").should("have.css", "opacity", "0.4");
// Assert that the TextualEvent is fully opaque (visually solid).
cy.get(".mx_EventTile .mx_TextualEvent").should("have.css", "opacity", "1");
});
cy.get(".mx_RoomView_searchResultsPanel").percySnapshotElement("Search results - with TextualEvent");
});
});
});
describe("message sending", () => {

4
res/css/views/messages/_TextualEvent.pcss
View file

@ -23,4 +23,8 @@ limitations under the License.
color: $accent;
cursor: pointer;
}
.mx_RoomView_searchResultsPanel & {
opacity: unset; /* Unset the opacity value specified above on the search results panel */
}
}