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

Fix buttons on the room header being compressed due to long room name (#10155)

Browse source 
This PR adds the flex declaration to mx_RoomHeader_button to prevent the buttons from being compressed due to a long room name, copying the whole declarations from mx_RightPanel_headerButton for reference.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2023-03-01 12:21:44 +00:00 committed by GitHub
parent da2fcdd346
commit 9e5c4e95f9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
cypress/e2e/create-room/create-room.spec.ts
View file

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

3
res/css/structures/_RightPanel.pcss
View file

@ -48,6 +48,9 @@ limitations under the License.
align-items: center;
}
/* 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;

5
res/css/views/rooms/_RoomHeader.pcss
View file

@ -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 {