Add feature flag 'feature_new_room_decoration_ui' and segrate legacy UI component (#11345)

* Move RoomHeader to LegacyRoomHeader

* Create new RoomHeader component
This commit is contained in:
Germain 2023-08-01 08:32:53 +01:00 committed by GitHub
parent 89a92c6351
commit 6ae7c033d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 2309 additions and 2103 deletions

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_RoomHeader_button": true,
"mx_RoomHeader_button--highlight": isHighlighted,
"mx_RoomHeader_button--unread": isUnread,
"mx_LegacyRoomHeader_button": true,
"mx_LegacyRoomHeader_button--highlight": isHighlighted,
"mx_LegacyRoomHeader_button--unread": isUnread,
[`mx_RightPanel_${name}`]: true,
});

View file

@ -64,14 +64,14 @@ const UnreadIndicator: React.FC<IUnreadIndicatorProps> = ({ color }) => {
const classes = classNames({
mx_Indicator: true,
mx_RoomHeader_button_unreadIndicator: true,
mx_LegacyRoomHeader_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_RoomHeader_button_unreadIndicator_bg" />
<div className="mx_LegacyRoomHeader_button_unreadIndicator_bg" />
<div className={classes} />
</>
);
@ -127,7 +127,10 @@ interface IProps {
excludedRightPanelPhaseButtons?: Array<RightPanelPhases>;
}
export default class RoomHeaderButtons extends HeaderButtons<IProps> {
/**
* @deprecated will be removed as part of 'feature_new_room_decoration_ui'
*/
export default class LegacyRoomHeaderButtons extends HeaderButtons<IProps> {
private static readonly THREAD_PHASES = [RightPanelPhases.ThreadPanel, RightPanelPhases.ThreadView];
private globalNotificationState: SummarizedNotificationState;
@ -257,7 +260,7 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
};
private onThreadsPanelClicked = (ev: ButtonEvent): void => {
if (this.state.phase && RoomHeaderButtons.THREAD_PHASES.includes(this.state.phase)) {
if (this.state.phase && LegacyRoomHeaderButtons.THREAD_PHASES.includes(this.state.phase)) {
RightPanelStore.instance.togglePanel(this.props.room?.roomId ?? null);
} else {
showThreadPanel();
@ -300,7 +303,7 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
data-testid="threadsButton"
title={_t("Threads")}
onClick={this.onThreadsPanelClicked}
isHighlighted={this.isPhase(RoomHeaderButtons.THREAD_PHASES)}
isHighlighted={this.isPhase(LegacyRoomHeaderButtons.THREAD_PHASES)}
isUnread={this.state.threadNotificationColor > NotificationColor.None}
>
<UnreadIndicator color={this.state.threadNotificationColor} />