imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Hook threads notification state to UI (#7298)

Browse source
This commit is contained in:
Germain 2021-12-13 14:05:42 +00:00 • committed by GitHub
parent 55eda7314b
commit ce570ab827
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 139 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -19,6 +19,7 @@ limitations under the License.
*/
import React from "react";
import classNames from "classnames";
import { Room } from "matrix-js-sdk/src/models/room";
import { _t } from '../../../languageHandler';
@ -36,6 +37,8 @@ import SettingsStore from "../../../settings/SettingsStore";
import dis from "../../../dispatcher/dispatcher";
import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
import { NotificationColor } from "../../../stores/notifications/NotificationColor";
import { ThreadsRoomNotificationState } from "../../../stores/notifications/ThreadsRoomNotificationState";
import { NotificationStateEvents } from "../../../stores/notifications/NotificationState";
const ROOM_INFO_PHASES = [
RightPanelPhases.RoomSummary,
@ -48,14 +51,22 @@ const ROOM_INFO_PHASES = [
];
interface IUnreadIndicatorProps {
className: string;
color?: NotificationColor;
}
const UnreadIndicator = ({ className }: IUnreadIndicatorProps) => {
return <React.Fragment>
const UnreadIndicator = ({ color }: IUnreadIndicatorProps) => {
if (color === NotificationColor.None) {
return null;
}
const classes = classNames({
"mx_RightPanel_headerButton_unreadIndicator": true,
"mx_Indicator_gray": color === NotificationColor.Grey,
});
return <>
<div className="mx_RightPanel_headerButton_unreadIndicator_bg" />
<div className={className} />
</React.Fragment>;
<div className={classes} />
</>;
};
interface IHeaderButtonProps {
@ -72,7 +83,7 @@ const PinnedMessagesHeaderButton = ({ room, isHighlighted, onClick }: IHeaderBut
let unreadIndicator;
if (pinnedEvents.some(id => !readPinnedEvents.has(id))) {
unreadIndicator = <UnreadIndicator className="mx_RightPanel_headerButton_unreadIndicator" />;
unreadIndicator = <UnreadIndicator />;
}
return <HeaderButton
@ -89,17 +100,11 @@ const PinnedMessagesHeaderButton = ({ room, isHighlighted, onClick }: IHeaderBut
const TimelineCardHeaderButton = ({ room, isHighlighted, onClick }: IHeaderButtonProps) => {
if (!SettingsStore.getValue("feature_maximised_widgets")) return null;
let unreadIndicator;
switch (RoomNotificationStateStore.instance.getRoomState(room).color) {
const color = RoomNotificationStateStore.instance.getRoomState(room).color;
switch (color) {
case NotificationColor.Grey:
unreadIndicator =
<UnreadIndicator className="mx_RightPanel_headerButton_unreadIndicator mx_Indicator_gray" />;
break;
case NotificationColor.Red:
unreadIndicator =
<UnreadIndicator className="mx_RightPanel_headerButton_unreadIndicator" />;
break;
default:
break;
unreadIndicator = <UnreadIndicator color={color} />;
}
return <HeaderButton
name="timelineCardButton"
@ -123,11 +128,30 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
RightPanelPhases.ThreadPanel,
RightPanelPhases.ThreadView,
];
private threadNotificationState: ThreadsRoomNotificationState;
constructor(props: IProps) {
super(props, HeaderKind.Room);
this.threadNotificationState = RoomNotificationStateStore.instance.getThreadsRoomState(this.props.room);
}
public componentDidMount(): void {
super.componentDidMount();
this.threadNotificationState.on(NotificationStateEvents.Update, this.onThreadNotification);
}
public componentWillUnmount(): void {
super.componentWillUnmount();
this.threadNotificationState.off(NotificationStateEvents.Update, this.onThreadNotification);
}
private onThreadNotification = (): void => {
this.setState({
threadNotificationColor: this.threadNotificationState.color,
});
};
protected onAction(payload: ActionPayload) {
if (payload.action === Action.ViewUser) {
if (payload.member) {
@ -188,12 +212,14 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
rightPanelPhaseButtons.set(RightPanelPhases.PinnedMessages,
<PinnedMessagesHeaderButton
key="pinnedMessagesButton"
room={this.props.room}
isHighlighted={this.isPhase(RightPanelPhases.PinnedMessages)}
onClick={this.onPinnedMessagesClicked} />,
);
rightPanelPhaseButtons.set(RightPanelPhases.Timeline,
<TimelineCardHeaderButton
key="timelineButton"
room={this.props.room}
isHighlighted={this.isPhase(RightPanelPhases.Timeline)}
onClick={this.onTimelineCardClicked} />,
@ -205,11 +231,14 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
title={_t("Threads")}
onClick={this.onThreadsPanelClicked}
isHighlighted={this.isPhase(RoomHeaderButtons.THREAD_PHASES)}
analytics={['Right Panel', 'Threads List Button', 'click']} />
analytics={['Right Panel', 'Threads List Button', 'click']}>
<UnreadIndicator color={this.threadNotificationState.color} />
</HeaderButton>
: null,
);
rightPanelPhaseButtons.set(RightPanelPhases.NotificationPanel,
<HeaderButton
key="notifsButton"
name="notifsButton"
title={_t('Notifications')}
isHighlighted={this.isPhase(RightPanelPhases.NotificationPanel)}
@ -218,6 +247,7 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
);
rightPanelPhaseButtons.set(RightPanelPhases.RoomSummary,
<HeaderButton
key="roomSummaryButton"
name="roomSummaryButton"
title={_t('Room Info')}
isHighlighted={this.isPhase(ROOM_INFO_PHASES)}