From 2800975d3e87ab1296a696075701bae6e1f414ed Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 2 Apr 2023 17:20:07 +0900 Subject: [PATCH 1/4] Replace: %s/mx_RightPanel_headerButton/mx_RoomHeader_button/g --- cypress/e2e/room/room-header.spec.ts | 8 +------- cypress/e2e/threads/threads.spec.ts | 2 +- res/css/structures/_RightPanel.pcss | 12 ++++++------ src/components/views/right_panel/HeaderButton.tsx | 6 +++--- .../views/right_panel/RoomHeaderButtons.tsx | 4 ++-- .../views/right_panel/RoomHeaderButtons-test.tsx | 4 ++-- 6 files changed, 15 insertions(+), 21 deletions(-) diff --git a/cypress/e2e/room/room-header.spec.ts b/cypress/e2e/room/room-header.spec.ts index b4c73532d4f..1073c123e93 100644 --- a/cypress/e2e/room/room-header.spec.ts +++ b/cypress/e2e/room/room-header.spec.ts @@ -94,14 +94,8 @@ describe("Room Header", () => { // Assert the size of buttons on RoomHeader are specified and the buttons are not compressed // Note these assertions do not check the size of mx_RoomHeader_name button - // TODO: merge the assertions by using the same class name cy.get(".mx_RoomHeader_button") - .should("have.length", 3) - .should("be.visible") - .should("have.css", "height", "32px") - .should("have.css", "width", "32px"); - cy.get(".mx_RightPanel_headerButton") - .should("have.length", 3) + .should("have.length", 6) .should("be.visible") .should("have.css", "height", "32px") .should("have.css", "width", "32px"); diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 465aeb9520c..b22cb52b66d 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -296,7 +296,7 @@ describe("Threads", () => { }); cy.findByRole("button", { name: "Threads" }) - .should("have.class", "mx_RightPanel_headerButton_unread") // User asserts thread list unread indicator + .should("have.class", "mx_RoomHeader_button_unread") // User asserts thread list unread indicator .click(); // User opens thread list // User asserts thread with correct root & latest events & unread dot diff --git a/res/css/structures/_RightPanel.pcss b/res/css/structures/_RightPanel.pcss index f76388296b3..fa6ec39c23b 100644 --- a/res/css/structures/_RightPanel.pcss +++ b/res/css/structures/_RightPanel.pcss @@ -37,7 +37,7 @@ limitations under the License. /* See: mx_RoomHeader_button, of which this is a copy. * TODO: factor out a common component to avoid this duplication. */ -.mx_RightPanel_headerButton { +.mx_RoomHeader_button { cursor: pointer; flex: 0 0 auto; margin-left: 1px; @@ -93,7 +93,7 @@ $pulse-color: $alert; } } -.mx_RightPanel_headerButton_unreadIndicator_bg { +.mx_RoomHeader_button_unreadIndicator_bg { position: absolute; right: $dot-offset; top: $dot-offset; @@ -106,7 +106,7 @@ $pulse-color: $alert; background: rgba($background, 1); } -.mx_RightPanel_headerButton_unreadIndicator { +.mx_RoomHeader_button_unreadIndicator { position: absolute; right: $dot-offset; top: $dot-offset; @@ -135,14 +135,14 @@ $pulse-color: $alert; } } -.mx_RightPanel_headerButton_unread { +.mx_RoomHeader_button_unread { &::before { background-color: $room-icon-unread-color !important; } } -.mx_RightPanel_headerButton_highlight, -.mx_RightPanel_headerButton:hover { +.mx_RoomHeader_button_highlight, +.mx_RoomHeader_button:hover { &::before { background-color: $accent !important; } diff --git a/src/components/views/right_panel/HeaderButton.tsx b/src/components/views/right_panel/HeaderButton.tsx index 03106face21..741cfcb2bfc 100644 --- a/src/components/views/right_panel/HeaderButton.tsx +++ b/src/components/views/right_panel/HeaderButton.tsx @@ -45,9 +45,9 @@ export default class HeaderButton extends React.Component { const { isHighlighted, isUnread = false, onClick, name, title, ...props } = this.props; const classes = classNames({ - mx_RightPanel_headerButton: true, - mx_RightPanel_headerButton_highlight: isHighlighted, - mx_RightPanel_headerButton_unread: isUnread, + mx_RoomHeader_button: true, + mx_RoomHeader_button_highlight: isHighlighted, + mx_RoomHeader_button_unread: isUnread, [`mx_RightPanel_${name}`]: true, }); diff --git a/src/components/views/right_panel/RoomHeaderButtons.tsx b/src/components/views/right_panel/RoomHeaderButtons.tsx index 0826548664c..4cc292e2633 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.tsx +++ b/src/components/views/right_panel/RoomHeaderButtons.tsx @@ -64,14 +64,14 @@ const UnreadIndicator: React.FC = ({ color }) => { const classes = classNames({ mx_Indicator: true, - mx_RightPanel_headerButton_unreadIndicator: true, + mx_RoomHeader_button_unreadIndicator: true, mx_Indicator_bold: color === NotificationColor.Bold, mx_Indicator_gray: color === NotificationColor.Grey, mx_Indicator_red: color === NotificationColor.Red, }); return ( <> -
+
); diff --git a/test/components/views/right_panel/RoomHeaderButtons-test.tsx b/test/components/views/right_panel/RoomHeaderButtons-test.tsx index fa9f19e861e..8869168aaa9 100644 --- a/test/components/views/right_panel/RoomHeaderButtons-test.tsx +++ b/test/components/views/right_panel/RoomHeaderButtons-test.tsx @@ -75,10 +75,10 @@ describe("RoomHeaderButtons-test.tsx", function () { it("thread notification does change the thread button", () => { const { container } = getComponent(room); - expect(getThreadButton(container)!.className.includes("mx_RightPanel_headerButton_unread")).toBeFalsy(); + expect(getThreadButton(container)!.className.includes("mx_RoomHeader_button_unread")).toBeFalsy(); room.setThreadUnreadNotificationCount("$123", NotificationCountType.Total, 1); - expect(getThreadButton(container)!.className.includes("mx_RightPanel_headerButton_unread")).toBeTruthy(); + expect(getThreadButton(container)!.className.includes("mx_RoomHeader_button_unread")).toBeTruthy(); expect(isIndicatorOfType(container, "gray")).toBe(true); room.setThreadUnreadNotificationCount("$123", NotificationCountType.Highlight, 1); From 1d60215c4b2dfe6ad3ab836bb4f86363bf4849a5 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 6 May 2023 05:00:52 +0000 Subject: [PATCH 2/4] Conform the selectors to our naming policy: with flag (--) - %s/mx_RoomHeader_button_highlight/mx_RoomHeader_button--highlight/g - %s/mx_RoomHeader_button_unread/mx_RoomHeader_button--unread/g --- cypress/e2e/threads/threads.spec.ts | 2 +- res/css/structures/_RightPanel.pcss | 4 ++-- src/components/views/right_panel/HeaderButton.tsx | 6 +++--- .../components/views/right_panel/RoomHeaderButtons-test.tsx | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index b22cb52b66d..d9b8b4c70b8 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -296,7 +296,7 @@ describe("Threads", () => { }); cy.findByRole("button", { name: "Threads" }) - .should("have.class", "mx_RoomHeader_button_unread") // User asserts thread list unread indicator + .should("have.class", "mx_RoomHeader_button--unread") // User asserts thread list unread indicator .click(); // User opens thread list // User asserts thread with correct root & latest events & unread dot diff --git a/res/css/structures/_RightPanel.pcss b/res/css/structures/_RightPanel.pcss index fa6ec39c23b..11890702564 100644 --- a/res/css/structures/_RightPanel.pcss +++ b/res/css/structures/_RightPanel.pcss @@ -135,13 +135,13 @@ $pulse-color: $alert; } } -.mx_RoomHeader_button_unread { +.mx_RoomHeader_button--unread { &::before { background-color: $room-icon-unread-color !important; } } -.mx_RoomHeader_button_highlight, +.mx_RoomHeader_button--highlight, .mx_RoomHeader_button:hover { &::before { background-color: $accent !important; diff --git a/src/components/views/right_panel/HeaderButton.tsx b/src/components/views/right_panel/HeaderButton.tsx index 741cfcb2bfc..5c6559262c0 100644 --- a/src/components/views/right_panel/HeaderButton.tsx +++ b/src/components/views/right_panel/HeaderButton.tsx @@ -45,9 +45,9 @@ export default class HeaderButton extends React.Component { const { isHighlighted, isUnread = false, onClick, name, title, ...props } = this.props; const classes = classNames({ - mx_RoomHeader_button: true, - mx_RoomHeader_button_highlight: isHighlighted, - mx_RoomHeader_button_unread: isUnread, + "mx_RoomHeader_button": true, + "mx_RoomHeader_button--highlight": isHighlighted, + "mx_RoomHeader_button--unread": isUnread, [`mx_RightPanel_${name}`]: true, }); diff --git a/test/components/views/right_panel/RoomHeaderButtons-test.tsx b/test/components/views/right_panel/RoomHeaderButtons-test.tsx index 8869168aaa9..0399a6ae75a 100644 --- a/test/components/views/right_panel/RoomHeaderButtons-test.tsx +++ b/test/components/views/right_panel/RoomHeaderButtons-test.tsx @@ -75,10 +75,10 @@ describe("RoomHeaderButtons-test.tsx", function () { it("thread notification does change the thread button", () => { const { container } = getComponent(room); - expect(getThreadButton(container)!.className.includes("mx_RoomHeader_button_unread")).toBeFalsy(); + expect(getThreadButton(container)!.className.includes("mx_RoomHeader_button--unread")).toBeFalsy(); room.setThreadUnreadNotificationCount("$123", NotificationCountType.Total, 1); - expect(getThreadButton(container)!.className.includes("mx_RoomHeader_button_unread")).toBeTruthy(); + expect(getThreadButton(container)!.className.includes("mx_RoomHeader_button--unread")).toBeTruthy(); expect(isIndicatorOfType(container, "gray")).toBe(true); room.setThreadUnreadNotificationCount("$123", NotificationCountType.Highlight, 1); From b071200e7d5edaaf4837673076b9b61438019076 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 12 May 2023 19:33:17 +0000 Subject: [PATCH 3/4] Update a Jest snapshot --- .../__snapshots__/RoomHeaderButtons-test.tsx.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/test/components/views/right_panel/__snapshots__/RoomHeaderButtons-test.tsx.snap b/test/components/views/right_panel/__snapshots__/RoomHeaderButtons-test.tsx.snap index ed5acd4886a..83a35431e88 100644 --- a/test/components/views/right_panel/__snapshots__/RoomHeaderButtons-test.tsx.snap +++ b/test/components/views/right_panel/__snapshots__/RoomHeaderButtons-test.tsx.snap @@ -5,14 +5,14 @@ exports[`RoomHeaderButtons-test.tsx should render 1`] = `
From be8f8c13158cb27a5438dd9e0477f788d9b8ad3e Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 15 May 2023 08:14:50 +0000 Subject: [PATCH 4/4] Move the declarations and Sass variables - Move Sass variables to the place where they are used --- res/css/structures/_RightPanel.pcss | 86 ---------------------------- res/css/structures/_RoomView.pcss | 3 + res/css/views/rooms/_RoomHeader.pcss | 50 ++++++++++++++++ 3 files changed, 53 insertions(+), 86 deletions(-) diff --git a/res/css/structures/_RightPanel.pcss b/res/css/structures/_RightPanel.pcss index 11890702564..71c98607641 100644 --- a/res/css/structures/_RightPanel.pcss +++ b/res/css/structures/_RightPanel.pcss @@ -34,40 +34,6 @@ limitations under the License. /** Fixme - factor this out with the main header **/ -/* See: mx_RoomHeader_button, of which this is a copy. - * TODO: factor out a common component to avoid this duplication. - */ -.mx_RoomHeader_button { - cursor: pointer; - flex: 0 0 auto; - margin-left: 1px; - margin-right: 1px; - height: 32px; - width: 32px; - position: relative; - border-radius: 100%; - - &::before { - content: ""; - position: absolute; - top: 4px; /* center with parent of 32px */ - left: 4px; /* center with parent of 32px */ - height: 24px; - width: 24px; - background-color: $icon-button-color; - mask-repeat: no-repeat; - mask-size: contain; - } - - &:hover { - background: rgba($accent, 0.1); - - &::before { - background-color: $accent; - } - } -} - .mx_RightPanel_threadsButton::before { mask-image: url("$(res)/img/element-icons/room/thread.svg"); } @@ -82,10 +48,6 @@ limitations under the License. mask-position: center; } -$dot-size: 8px; -$dot-offset: -3px; -$pulse-color: $alert; - .mx_RightPanel_pinnedMessagesButton { &::before { mask-image: url("$(res)/img/element-icons/room/pin.svg"); @@ -93,41 +55,6 @@ $pulse-color: $alert; } } -.mx_RoomHeader_button_unreadIndicator_bg { - position: absolute; - right: $dot-offset; - top: $dot-offset; - margin: 4px; - width: $dot-size; - height: $dot-size; - border-radius: 50%; - transform: scale(1.6); - transform-origin: center center; - background: rgba($background, 1); -} - -.mx_RoomHeader_button_unreadIndicator { - position: absolute; - right: $dot-offset; - top: $dot-offset; - margin: 4px; - - &.mx_Indicator_red { - background: rgba($alert, 1); - box-shadow: rgba($alert, 1); - } - - &.mx_Indicator_gray { - background: rgba($room-icon-unread-color, 1); - box-shadow: rgba($room-icon-unread-color, 1); - } - - &.mx_Indicator_bold { - background: rgba($primary-content, 1); - box-shadow: rgba($primary-content, 1); - } -} - .mx_RightPanel_timelineCardButton { &::before { mask-image: url("$(res)/img/element-icons/feedback.svg"); @@ -135,19 +62,6 @@ $pulse-color: $alert; } } -.mx_RoomHeader_button--unread { - &::before { - background-color: $room-icon-unread-color !important; - } -} - -.mx_RoomHeader_button--highlight, -.mx_RoomHeader_button:hover { - &::before { - background-color: $accent !important; - } -} - .mx_RightPanel .mx_MemberList, .mx_RightPanel .mx_MemberInfo { order: 2; diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss index 91f2048b255..c0ea19cf0d9 100644 --- a/res/css/structures/_RoomView.pcss +++ b/res/css/structures/_RoomView.pcss @@ -278,6 +278,9 @@ hr.mx_RoomView_myReadMarker { } } +$dot-size: 8px; +$pulse-color: $alert; + .mx_Indicator { position: absolute; right: -3px; diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index 4cf1d44e102..004ddb82569 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -188,6 +188,56 @@ limitations under the License. } } +$dot-offset: -3px; + +.mx_RoomHeader_button_unreadIndicator_bg { + position: absolute; + right: $dot-offset; + top: $dot-offset; + margin: 4px; + width: $dot-size; + height: $dot-size; + border-radius: 50%; + transform: scale(1.6); + transform-origin: center center; + background: rgba($background, 1); +} + +.mx_RoomHeader_button_unreadIndicator { + position: absolute; + right: $dot-offset; + top: $dot-offset; + margin: 4px; + + &.mx_Indicator_red { + background: rgba($alert, 1); + box-shadow: rgba($alert, 1); + } + + &.mx_Indicator_gray { + background: rgba($room-icon-unread-color, 1); + box-shadow: rgba($room-icon-unread-color, 1); + } + + &.mx_Indicator_bold { + background: rgba($primary-content, 1); + box-shadow: rgba($primary-content, 1); + } +} + +.mx_RoomHeader_button--unread { + &::before { + background-color: $room-icon-unread-color !important; + } +} + +.mx_RoomHeader_button--highlight, +.mx_RoomHeader_button:hover { + &::before { + background-color: $accent !important; + } +} + .mx_RoomHeader_forgetButton::before { mask-image: url("$(res)/img/element-icons/leave.svg"); width: 26px;