From 1d6890b5f30fa3e862a3b6f40b455439d5ba254d Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 11 Jul 2022 11:40:42 +0900 Subject: [PATCH 1/4] Improve clickability of "collapse" link button on bubble layout Signed-off-by: Suguru Hirahara --- res/css/views/messages/_MessageActionBar.pcss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/res/css/views/messages/_MessageActionBar.pcss b/res/css/views/messages/_MessageActionBar.pcss index 9dfb6b74955..9670df242bc 100644 --- a/res/css/views/messages/_MessageActionBar.pcss +++ b/res/css/views/messages/_MessageActionBar.pcss @@ -53,6 +53,14 @@ limitations under the License. left: -58px; z-index: -1; cursor: initial; + + .mx_GenericEventListSummary[data-layout="bubble"] .mx_GenericEventListSummary_toggle ~ .mx_GenericEventListSummary_unstyledList .mx_EventTile_info:first-of-type & { + // improve clickability of "collapse" link button on bubble layout by reducing width and height values + width: 100%; + height: 100%; + top: 0; + left: 0; + } } >* { From 3b3b4764ba985b948bab331bd9082481819221a9 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 11 Jul 2022 12:19:18 +0900 Subject: [PATCH 2/4] Add comments to explain the selector Signed-off-by: Suguru Hirahara --- res/css/views/messages/_MessageActionBar.pcss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/res/css/views/messages/_MessageActionBar.pcss b/res/css/views/messages/_MessageActionBar.pcss index 9670df242bc..1f7a3777ebd 100644 --- a/res/css/views/messages/_MessageActionBar.pcss +++ b/res/css/views/messages/_MessageActionBar.pcss @@ -56,6 +56,9 @@ limitations under the License. .mx_GenericEventListSummary[data-layout="bubble"] .mx_GenericEventListSummary_toggle ~ .mx_GenericEventListSummary_unstyledList .mx_EventTile_info:first-of-type & { // improve clickability of "collapse" link button on bubble layout by reducing width and height values + // mx_GenericEventListSummary_toggle ~: to apply rules to action bar when "collapse" button is available + // mx_EventTile_info:first-of-type: to apply rules to the info event tile just under "collapse" button + // TODO: use a new class name instead width: 100%; height: 100%; top: 0; From 23e9989f4004734e11bad7fae533cd07091a0942 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 16 Jul 2022 01:03:53 +0900 Subject: [PATCH 3/4] Add a test Signed-off-by: Suguru Hirahara --- cypress/e2e/14-timeline/timeline.spec.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/cypress/e2e/14-timeline/timeline.spec.ts b/cypress/e2e/14-timeline/timeline.spec.ts index 22861c8fd70..53f87de8b1d 100644 --- a/cypress/e2e/14-timeline/timeline.spec.ts +++ b/cypress/e2e/14-timeline/timeline.spec.ts @@ -23,6 +23,7 @@ import type { EventType } from "matrix-js-sdk/src/@types/event"; import type { MatrixClient } from "matrix-js-sdk/src/client"; import { SynapseInstance } from "../../plugins/synapsedocker"; import { SettingLevel } from "../../../src/settings/SettingLevel"; +import { Layout } from "../../../src/settings/enums/Layout"; import Chainable = Cypress.Chainable; // The avatar size used in the timeline @@ -141,5 +142,22 @@ describe("Timeline", () => { expectAvatar(e, newAvatarUrl); }); }); + + 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); + cy.contains(".mx_RoomView_body .mx_GenericEventListSummary[data-layout=bubble] " + + ".mx_GenericEventListSummary_summary", "created and configured the room."); + + // Click "expand" link button + cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click(); + + // Click "collapse" link button on the first hovered info event line + cy.get(".mx_GenericEventListSummary_unstyledList .mx_EventTile_info:first-of-type").realHover() + .get(".mx_GenericEventListSummary_toggle[aria-expanded=true]").click({ force: false }); + + // Make sure "collapse" link button worked + cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]"); + }); }); }); From 9b775d7463864630ef0d8eadea4c64c36a8e32e5 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 16 Jul 2022 17:35:37 +0900 Subject: [PATCH 4/4] Add /* stylelint-disable-next-line max-line-length */ Signed-off-by: Suguru Hirahara --- res/css/views/messages/_MessageActionBar.pcss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/messages/_MessageActionBar.pcss b/res/css/views/messages/_MessageActionBar.pcss index 1f7a3777ebd..23c6abfcca4 100644 --- a/res/css/views/messages/_MessageActionBar.pcss +++ b/res/css/views/messages/_MessageActionBar.pcss @@ -54,6 +54,7 @@ limitations under the License. z-index: -1; cursor: initial; + /* stylelint-disable-next-line max-line-length */ .mx_GenericEventListSummary[data-layout="bubble"] .mx_GenericEventListSummary_toggle ~ .mx_GenericEventListSummary_unstyledList .mx_EventTile_info:first-of-type & { // improve clickability of "collapse" link button on bubble layout by reducing width and height values // mx_GenericEventListSummary_toggle ~: to apply rules to action bar when "collapse" button is available