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

Deprecate mx_RightPanel_headerButton class (#10821)

Browse source 
* Replace: %s/mx_RightPanel_headerButton/mx_RoomHeader_button/g

* 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

* Update a Jest snapshot

* Move the declarations and Sass variables

- Move Sass variables to the place where they are used
This commit is contained in:
Suguru Hirahara 2023-05-16 15:42:58 +00:00 committed by GitHub
parent 6f1020bb92
commit e01d47923d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 61 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
cypress/e2e/room/room-header.spec.ts
View file

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

2
cypress/e2e/threads/threads.spec.ts
View file

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

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

@ -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_RightPanel_headerButton {
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");
}
@ -89,41 +55,6 @@ limitations under the License.
}
}
.mx_RightPanel_headerButton_unreadIndicator_bg {
position: absolute;
right: var(--RoomHeader-indicator-dot-offset);
top: var(--RoomHeader-indicator-dot-offset);
margin: 4px;
width: var(--RoomHeader-indicator-dot-size);
height: var(--RoomHeader-indicator-dot-size);
border-radius: 50%;
transform: scale(1.6);
transform-origin: center center;
background: rgba($background, 1);
}
.mx_RightPanel_headerButton_unreadIndicator {
position: absolute;
right: var(--RoomHeader-indicator-dot-offset);
top: var(--RoomHeader-indicator-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");
@ -131,19 +62,6 @@ limitations under the License.
}
}
.mx_RightPanel_headerButton_unread {
&::before {
background-color: $room-icon-unread-color !important;
}
}
.mx_RightPanel_headerButton_highlight,
.mx_RightPanel_headerButton:hover {
&::before {
background-color: $accent !important;
}
}
.mx_RightPanel .mx_MemberList,
.mx_RightPanel .mx_MemberInfo {
order: 2;

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

@ -194,6 +194,54 @@ limitations under the License.
}
}
.mx_RoomHeader_button_unreadIndicator_bg {
position: absolute;
right: var(--RoomHeader-indicator-dot-offset);
top: var(--RoomHeader-indicator-dot-offset);
margin: 4px;
width: var(--RoomHeader-indicator-dot-size);
height: var(--RoomHeader-indicator-dot-size);
border-radius: 50%;
transform: scale(1.6);
transform-origin: center center;
background: rgba($background, 1);
}
.mx_RoomHeader_button_unreadIndicator {
position: absolute;
right: var(--RoomHeader-indicator-dot-offset);
top: var(--RoomHeader-indicator-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;

6
src/components/views/right_panel/HeaderButton.tsx
View file

@ -45,9 +45,9 @@ export default class HeaderButton extends React.Component<IProps> {
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,
});

4
src/components/views/right_panel/RoomHeaderButtons.tsx
View file

@ -64,14 +64,14 @@ const UnreadIndicator: React.FC<IUnreadIndicatorProps> = ({ 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 (
<>
<div className="mx_RightPanel_headerButton_unreadIndicator_bg" />
<div className="mx_RoomHeader_button_unreadIndicator_bg" />
<div className={classes} />
</>
);

4
test/components/views/right_panel/RoomHeaderButtons-test.tsx
View file

@ -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);

8
test/components/views/right_panel/__snapshots__/RoomHeaderButtons-test.tsx.snap
View file

@ -5,14 +5,14 @@ exports[`RoomHeaderButtons-test.tsx should render 1`] = `
<div
aria-current="false"
aria-label="Chat"
class="mx_AccessibleButton mx_RightPanel_headerButton mx_RightPanel_timelineCardButton"
class="mx_AccessibleButton mx_RoomHeader_button mx_RightPanel_timelineCardButton"
role="button"
tabindex="0"
/>
<div
aria-current="false"
aria-label="Threads"
class="mx_AccessibleButton mx_RightPanel_headerButton mx_RightPanel_threadsButton"
class="mx_AccessibleButton mx_RoomHeader_button mx_RightPanel_threadsButton"
data-testid="threadsButton"
role="button"
tabindex="0"
@ -20,14 +20,14 @@ exports[`RoomHeaderButtons-test.tsx should render 1`] = `
<div
aria-current="false"
aria-label="Notifications"
class="mx_AccessibleButton mx_RightPanel_headerButton mx_RightPanel_notifsButton"
class="mx_AccessibleButton mx_RoomHeader_button mx_RightPanel_notifsButton"
role="button"
tabindex="0"
/>
<div
aria-current="false"
aria-label="Room info"
class="mx_AccessibleButton mx_RightPanel_headerButton mx_RightPanel_roomSummaryButton"
class="mx_AccessibleButton mx_RoomHeader_button mx_RightPanel_roomSummaryButton"
role="button"
tabindex="0"
/>