mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-10-23 19:25:48 +03:00
Code Issues Projects Releases Packages Wiki Activity

add NotifPanel dot back. (#9242)

Browse source 
partially fixes https://github.com/vector-im/element-web/issues/17641
provides a dot, but not a badge. fixes chronic bug 87.
This commit is contained in:
Matthew Hodgson 2022-09-08 15:53:57 +01:00 committed by GitHub
parent 52fc8ff255
commit eb97b9674c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/views/right_panel/HeaderButtons.tsx
View file

@ -35,6 +35,7 @@ interface IState {
headerKind: HeaderKind;
phase: RightPanelPhases;
threadNotificationColor: NotificationColor;
globalNotificationColor: NotificationColor;
}
interface IProps {}
@ -51,6 +52,7 @@ export default abstract class HeaderButtons<P = {}> extends React.Component<IPro
headerKind: kind,
phase: rps.currentCard.phase,
threadNotificationColor: NotificationColor.None,
globalNotificationColor: NotificationColor.None,
};
}

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

@ -33,9 +33,13 @@ import { useSettingValue } from "../../../hooks/useSettings";
import { useReadPinnedEvents, usePinnedEvents } from './PinnedMessagesCard';
import { showThreadPanel } from "../../../dispatcher/dispatch-actions/threads";
import SettingsStore from "../../../settings/SettingsStore";
import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
import {
RoomNotificationStateStore,
UPDATE_STATUS_INDICATOR,
} from "../../../stores/notifications/RoomNotificationStateStore";
import { NotificationColor } from "../../../stores/notifications/NotificationColor";
import { ThreadsRoomNotificationState } from "../../../stores/notifications/ThreadsRoomNotificationState";
import { SummarizedNotificationState } from "../../../stores/notifications/SummarizedNotificationState";
import { NotificationStateEvents } from "../../../stores/notifications/NotificationState";
import PosthogTrackers from "../../../PosthogTrackers";
import { ButtonEvent } from "../elements/AccessibleButton";
@ -130,29 +134,42 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
RightPanelPhases.ThreadView,
];
private threadNotificationState: ThreadsRoomNotificationState;
private globalNotificationState: SummarizedNotificationState;
constructor(props: IProps) {
super(props, HeaderKind.Room);
this.threadNotificationState = RoomNotificationStateStore.instance.getThreadsRoomState(this.props.room);
this.globalNotificationState = RoomNotificationStateStore.instance.globalState;
}
public componentDidMount(): void {
super.componentDidMount();
this.threadNotificationState.on(NotificationStateEvents.Update, this.onThreadNotification);
RoomNotificationStateStore.instance.on(UPDATE_STATUS_INDICATOR, this.onUpdateStatus);
}
public componentWillUnmount(): void {
super.componentWillUnmount();
this.threadNotificationState.off(NotificationStateEvents.Update, this.onThreadNotification);
RoomNotificationStateStore.instance.off(UPDATE_STATUS_INDICATOR, this.onUpdateStatus);
}
private onThreadNotification = (): void => {
// XXX: why don't we read from this.state.threadNotificationColor in the render methods?
this.setState({
threadNotificationColor: this.threadNotificationState.color,
});
};
private onUpdateStatus = (notificationState: SummarizedNotificationState): void => {
// XXX: why don't we read from this.state.globalNotificationCount in the render methods?
this.globalNotificationState = notificationState;
this.setState({
globalNotificationColor: notificationState.color,
});
};
protected onAction(payload: ActionPayload) {
if (payload.action === Action.ViewUser) {
if (payload.member) {
@ -254,7 +271,12 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
title={_t('Notifications')}
isHighlighted={this.isPhase(RightPanelPhases.NotificationPanel)}
onClick={this.onNotificationsClicked}
/>,
isUnread={this.globalNotificationState.color === NotificationColor.Red}
>
{ this.globalNotificationState.color === NotificationColor.Red ?
<UnreadIndicator color={this.globalNotificationState.color} /> :
null }
</HeaderButton>,
);
rightPanelPhaseButtons.set(RightPanelPhases.RoomSummary,
<HeaderButton
@ -269,7 +291,7 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
return <>
{
Array.from(rightPanelPhaseButtons.keys()).map((phase) =>
(this.props.excludedRightPanelPhaseButtons.includes(phase)
(this.props.excludedRightPanelPhaseButtons?.includes(phase)
? null
: rightPanelPhaseButtons.get(phase)))
}