From ab637cc386593eb71777955d6f208964c2c358fd Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 14 Feb 2023 04:09:19 +0900 Subject: [PATCH 1/4] Add the flex declaration to mx_RoomHeader_button like mx_RightPanel_headerButton to prevent the buttons from being compressed due to a long room name Signed-off-by: Suguru Hirahara --- res/css/structures/_RightPanel.pcss | 1 + res/css/views/rooms/_RoomHeader.pcss | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/res/css/structures/_RightPanel.pcss b/res/css/structures/_RightPanel.pcss index 4e307117306..7f125aabafb 100644 --- a/res/css/structures/_RightPanel.pcss +++ b/res/css/structures/_RightPanel.pcss @@ -48,6 +48,7 @@ limitations under the License. align-items: center; } +/* See: mx_RoomHeader_button */ .mx_RightPanel_headerButton { cursor: pointer; flex: 0 0 auto; diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index c6ab2add227..75f2ee31d01 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -191,12 +191,13 @@ limitations under the License. } .mx_RoomHeader_button { - position: relative; + cursor: pointer; + flex: 0 0 auto; margin-left: 1px; margin-right: 1px; - cursor: pointer; height: 32px; width: 32px; + position: relative; border-radius: 100%; &::before { From eaf278770efff1bf2bbbb7f017390279a21b3902 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 26 Feb 2023 01:36:03 +0900 Subject: [PATCH 2/4] Initial test to check buttons size on room header Signed-off-by: Suguru Hirahara --- cypress/e2e/create-room/create-room.spec.ts | 29 ++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/cypress/e2e/create-room/create-room.spec.ts b/cypress/e2e/create-room/create-room.spec.ts index 72805d5e12b..9d589900a2d 100644 --- a/cypress/e2e/create-room/create-room.spec.ts +++ b/cypress/e2e/create-room/create-room.spec.ts @@ -1,5 +1,5 @@ /* -Copyright 2022 The Matrix.org Foundation C.I.C. +Copyright 2022-2023 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -61,4 +61,31 @@ describe("Create Room", () => { cy.contains(".mx_RoomHeader_nametext", name); cy.contains(".mx_RoomHeader_topic", topic); }); + + it("should create a room with a long room name with horizontal ellipsis", () => { + let roomId: string; + const LONG_ROOM_NAME = + "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore " + + "et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut " + + "aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum " + + "dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui " + + "officia deserunt mollit anim id est laborum."; + + cy.createRoom({ name: LONG_ROOM_NAME }).then((_roomId) => { + roomId = _roomId; + cy.visit("/#/room/" + roomId); + }); + + // Wait until the room name is set + cy.get(".mx_RoomHeader_nametext").contains("Lorem ipsum"); + + // Make sure size of buttons on RoomHeader (except .mx_RoomHeader_name) are specified + // and the buttons are not compressed + // TODO: use a same class name + cy.get(".mx_RoomHeader_button").should("have.css", "height", "32px").should("have.css", "width", "32px"); + cy.get(".mx_HeaderButtons > .mx_RightPanel_headerButton") + .should("have.css", "height", "32px") + .should("have.css", "width", "32px"); + cy.get(".mx_RoomHeader").percySnapshotElement("Room header with a long room name"); + }); }); From 3c23250b7e0a807fd94772debaa5eef9efa6c7f9 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 1 Mar 2023 08:24:11 +0000 Subject: [PATCH 3/4] Update cypress/e2e/create-room/create-room.spec.ts Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> --- cypress/e2e/create-room/create-room.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/e2e/create-room/create-room.spec.ts b/cypress/e2e/create-room/create-room.spec.ts index 9d589900a2d..a51c22ef862 100644 --- a/cypress/e2e/create-room/create-room.spec.ts +++ b/cypress/e2e/create-room/create-room.spec.ts @@ -62,7 +62,7 @@ describe("Create Room", () => { cy.contains(".mx_RoomHeader_topic", topic); }); - it("should create a room with a long room name with horizontal ellipsis", () => { + it("should create a room with a long room name, which is displayed with ellipsis", () => { let roomId: string; const LONG_ROOM_NAME = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore " + From 73156f1e7afa3418cf9a7d2106365740951e8469 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 1 Mar 2023 08:24:22 +0000 Subject: [PATCH 4/4] Update res/css/structures/_RightPanel.pcss Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> --- res/css/structures/_RightPanel.pcss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/res/css/structures/_RightPanel.pcss b/res/css/structures/_RightPanel.pcss index 7f125aabafb..27a8b2caa2e 100644 --- a/res/css/structures/_RightPanel.pcss +++ b/res/css/structures/_RightPanel.pcss @@ -48,7 +48,9 @@ limitations under the License. align-items: center; } -/* See: mx_RoomHeader_button */ +/* See: mx_RoomHeader_button, of which this is a copy. + * TODO: factor out a common component to avoid this duplication. + */ .mx_RightPanel_headerButton { cursor: pointer; flex: 0 0 auto;