Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 05:04:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

RoomList listen to notificationState updates for bolding

Browse Source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-07-27 14:39:30 +01:00
parent 57a5b47aa4
commit 1085d89e11
1 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/views/rooms/RoomTile.tsx
View File

@ -53,7 +53,7 @@ import RoomListActions from "../../../actions/RoomListActions";
import defaultDispatcher from "../../../dispatcher/dispatcher"; import defaultDispatcher from "../../../dispatcher/dispatcher";
import {ActionPayload} from "../../../dispatcher/payloads"; import {ActionPayload} from "../../../dispatcher/payloads";
import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore"; import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
import { NotificationState } from "../../../stores/notifications/NotificationState"; import {NOTIFICATION_STATE_UPDATE, NotificationState} from "../../../stores/notifications/NotificationState";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
interface IProps { interface IProps {
@ -69,7 +69,6 @@ type PartialDOMRect = Pick<DOMRect, "left" | "bottom">;
interface IState { interface IState {
hover: boolean; hover: boolean;
notificationState: NotificationState;
selected: boolean; selected: boolean;
notificationsMenuPosition: PartialDOMRect; notificationsMenuPosition: PartialDOMRect;
generalMenuPosition: PartialDOMRect; generalMenuPosition: PartialDOMRect;
@ -114,13 +113,13 @@ const NotifOption: React.FC<INotifOptionProps> = ({active, onClick, iconClassNam
export default class RoomTile extends React.Component<IProps, IState> { export default class RoomTile extends React.Component<IProps, IState> {
private dispatcherRef: string; private dispatcherRef: string;
private roomTileRef = createRef<HTMLDivElement>(); private roomTileRef = createRef<HTMLDivElement>();
private notificationState: NotificationState;
constructor(props: IProps) { constructor(props: IProps) {
super(props); super(props);
this.state = { this.state = {
hover: false, hover: false,
notificationState: RoomNotificationStateStore.instance.getRoomState(this.props.room),
selected: ActiveRoomObserver.activeRoomId === this.props.room.roomId, selected: ActiveRoomObserver.activeRoomId === this.props.room.roomId,
notificationsMenuPosition: null, notificationsMenuPosition: null,
generalMenuPosition: null, generalMenuPosition: null,
@ -129,8 +128,14 @@ export default class RoomTile extends React.Component<IProps, IState> {
ActiveRoomObserver.addListener(this.props.room.roomId, this.onActiveRoomUpdate); ActiveRoomObserver.addListener(this.props.room.roomId, this.onActiveRoomUpdate);
this.dispatcherRef = defaultDispatcher.register(this.onAction); this.dispatcherRef = defaultDispatcher.register(this.onAction);
MessagePreviewStore.instance.on(ROOM_PREVIEW_CHANGED, this.onRoomPreviewChanged); MessagePreviewStore.instance.on(ROOM_PREVIEW_CHANGED, this.onRoomPreviewChanged);
this.notificationState = RoomNotificationStateStore.instance.getRoomState(this.props.room);
this.notificationState.on(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
} }
private onNotificationUpdate = () => {
this.forceUpdate(); // notification state changed - update
};
private get showContextMenu(): boolean { private get showContextMenu(): boolean {
return !this.props.isMinimized && this.props.tag !== DefaultTagID.Invite; return !this.props.isMinimized && this.props.tag !== DefaultTagID.Invite;
} }
@ -152,6 +157,7 @@ export default class RoomTile extends React.Component<IProps, IState> {
} }
defaultDispatcher.unregister(this.dispatcherRef); defaultDispatcher.unregister(this.dispatcherRef);
MessagePreviewStore.instance.off(ROOM_PREVIEW_CHANGED, this.onRoomPreviewChanged); MessagePreviewStore.instance.off(ROOM_PREVIEW_CHANGED, this.onRoomPreviewChanged);
this.notificationState.off(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
} }
private onAction = (payload: ActionPayload) => { private onAction = (payload: ActionPayload) => {
@ -490,7 +496,7 @@ export default class RoomTile extends React.Component<IProps, IState> {
badge = ( badge = (
<div className="mx_RoomTile_badgeContainer" aria-hidden="true"> <div className="mx_RoomTile_badgeContainer" aria-hidden="true">
<NotificationBadge <NotificationBadge
notification={this.state.notificationState} notification={this.notificationState}
forceCount={false} forceCount={false}
roomId={this.props.room.roomId} roomId={this.props.room.roomId}
/> />
@ -520,7 +526,7 @@ export default class RoomTile extends React.Component<IProps, IState> {
const nameClasses = classNames({ const nameClasses = classNames({
"mx_RoomTile_name": true, "mx_RoomTile_name": true,
"mx_RoomTile_nameWithPreview": !!messagePreview, "mx_RoomTile_nameWithPreview": !!messagePreview,
"mx_RoomTile_nameHasUnreadEvents": this.state.notificationState.isUnread, "mx_RoomTile_nameHasUnreadEvents": this.notificationState.isUnread,
}); });
let nameContainer = ( let nameContainer = (
@ -537,15 +543,15 @@ export default class RoomTile extends React.Component<IProps, IState> {
// The following labels are written in such a fashion to increase screen reader efficiency (speed). // The following labels are written in such a fashion to increase screen reader efficiency (speed).
if (this.props.tag === DefaultTagID.Invite) { if (this.props.tag === DefaultTagID.Invite) {
// append nothing // append nothing
} else if (this.state.notificationState.hasMentions) { } else if (this.notificationState.hasMentions) {
ariaLabel += " " + _t("%(count)s unread messages including mentions.", { ariaLabel += " " + _t("%(count)s unread messages including mentions.", {
count: this.state.notificationState.count, count: this.notificationState.count,
}); });
} else if (this.state.notificationState.hasUnreadCount) { } else if (this.notificationState.hasUnreadCount) {
ariaLabel += " " + _t("%(count)s unread messages.", { ariaLabel += " " + _t("%(count)s unread messages.", {
count: this.state.notificationState.count, count: this.notificationState.count,
}); });
} else if (this.state.notificationState.isUnread) { } else if (this.notificationState.isUnread) {
ariaLabel += " " + _t("Unread messages."); ariaLabel += " " + _t("Unread messages.");
} }