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

Don't reference the notification levels by colour (#12138)

Browse source 
* Don't reference the notification levels by colour

We're about to change what colours they are so either we'd have to rename
a bunch of constants. We may as well make things not reference what colour
anything is in the actual UI. Hopefully these constants are clear enough.

 * Rename NotificationColor -> NotificationLevel
 * Red -> Highlight
 * Grey -> Notification
 * Bold -> Activity
 * Anywhere else that calls it 'color' -> 'level'

Also fixes some weird mixes of US & UK English.

It turns out this is referenced in... quite a lot of places, so this is
quite a large PR. It can't really be much smaller, sorry.

* One test rename & some hiding due to ts-ignore

* More hiding behind ts-ignore

* Damn you, @ts-ignore...

* Fix test CSS values

* Missed some colour -> level

Co-authored-by: Florian Duros <florianduros@element.io>

* Change other instances of variables renamed in suggestion

* Update new test for renames

---------

Co-authored-by: Florian Duros <florianduros@element.io>
This commit is contained in:
David Baker 2024-01-15 15:25:48 +00:00 • committed by GitHub
parent 97339ee2f6
commit 9254e9562e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
42 changed files with 268 additions and 265 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/structures/MatrixChat.tsx
View file

@ -140,7 +140,7 @@ import GenericToast from "../views/toasts/GenericToast";
import RovingSpotlightDialog from "../views/dialogs/spotlight/SpotlightDialog";
import { findDMForUser } from "../../utils/dm/findDMForUser";
import { Linkify } from "../../HtmlUtils";
import { NotificationColor } from "../../stores/notifications/NotificationColor";
import { NotificationLevel } from "../../stores/notifications/NotificationLevel";
import { UserTab } from "../views/dialogs/UserTab";
import { shouldSkipSetupEncryption } from "../../utils/crypto/shouldSkipSetupEncryption";
import { Filter } from "../views/dialogs/spotlight/Filter";
@ -2019,7 +2019,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
}
if (numUnreadRooms > 0) {
this.subTitleStatus += `[${numUnreadRooms}]`;
} else if (notificationState.color >= NotificationColor.Bold) {
} else if (notificationState.level >= NotificationLevel.Activity) {
this.subTitleStatus += `*`;
}

6
src/components/views/context_menus/RoomGeneralContextMenu.tsx
View file

@ -26,7 +26,7 @@ import { useEventEmitterState } from "../../../hooks/useEventEmitter";
import { useUnreadNotifications } from "../../../hooks/useUnreadNotifications";
import { getKeyBindingsManager } from "../../../KeyBindingsManager";
import { _t } from "../../../languageHandler";
import { NotificationColor } from "../../../stores/notifications/NotificationColor";
import { NotificationLevel } from "../../../stores/notifications/NotificationLevel";
import { DefaultTagID, TagID } from "../../../stores/room-list/models";
import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore";
import DMRoomMap from "../../../utils/DMRoomMap";
@ -212,9 +212,9 @@ export const RoomGeneralContextMenu: React.FC<RoomGeneralContextMenuProps> = ({
);
}
const { color } = useUnreadNotifications(room);
const { level } = useUnreadNotifications(room);
const markAsReadOption: JSX.Element | null =
color > NotificationColor.None ? (
level > NotificationLevel.None ? (
<IconizedContextMenuCheckbox
onClick={() => {
clearRoomNotification(room, cli);

8
src/components/views/dialogs/devtools/RoomNotifications.tsx
View file

@ -22,7 +22,7 @@ import MatrixClientContext from "../../../../contexts/MatrixClientContext";
import { useNotificationState } from "../../../../hooks/useRoomNotificationState";
import { _t, _td } from "../../../../languageHandler";
import { determineUnreadState } from "../../../../RoomNotifs";
import { humanReadableNotificationColor } from "../../../../stores/notifications/NotificationColor";
import { humanReadableNotificationLevel } from "../../../../stores/notifications/NotificationLevel";
import { doesRoomOrThreadHaveUnreadMessages } from "../../../../Unread";
import BaseTool, { DevtoolsContext, IDevtoolsProps } from "./BaseTool";
@ -68,7 +68,7 @@ export default function RoomNotifications({ onBack }: IDevtoolsProps): JSX.Eleme
const { room } = useContext(DevtoolsContext);
const cli = useContext(MatrixClientContext);
const { color, count } = determineUnreadState(room);
const { level, count } = determineUnreadState(room);
const [notificationState] = useNotificationState(room);
return (
@ -81,7 +81,7 @@ export default function RoomNotifications({ onBack }: IDevtoolsProps): JSX.Eleme
? _t(
"devtools|room_unread_status_count",
{
status: humanReadableNotificationColor(color),
status: humanReadableNotificationLevel(level),
count,
},
{
@ -91,7 +91,7 @@ export default function RoomNotifications({ onBack }: IDevtoolsProps): JSX.Eleme
: _t(
"devtools|room_unread_status",
{
status: humanReadableNotificationColor(color),
status: humanReadableNotificationLevel(level),
},
{
strong: (sub) => <strong>{sub}</strong>,

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

@ -24,7 +24,7 @@ import dis from "../../../dispatcher/dispatcher";
import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
import { UPDATE_EVENT } from "../../../stores/AsyncStore";
import { NotificationColor } from "../../../stores/notifications/NotificationColor";
import { NotificationLevel } from "../../../stores/notifications/NotificationLevel";
import SettingsStore from "../../../settings/SettingsStore";
export enum HeaderKind {
@ -34,8 +34,8 @@ export enum HeaderKind {
interface IState {
headerKind: HeaderKind;
phase: RightPanelPhases | null;
threadNotificationColor: NotificationColor;
globalNotificationColor: NotificationColor;
threadNotificationLevel: NotificationLevel;
globalNotificationLevel: NotificationLevel;
notificationsEnabled?: boolean;
}
@ -53,8 +53,8 @@ export default abstract class HeaderButtons<P = {}> extends React.Component<IPro
this.state = {
headerKind: kind,
phase: rps.currentCard.phase,
threadNotificationColor: NotificationColor.None,
globalNotificationColor: NotificationColor.None,
threadNotificationLevel: NotificationLevel.None,
globalNotificationLevel: NotificationLevel.None,
notificationsEnabled: SettingsStore.getValue("feature_notifications"),
};
this.watcherRef = SettingsStore.watchSetting("feature_notifications", null, (...[, , , value]) =>

46
src/components/views/right_panel/LegacyRoomHeaderButtons.tsx
View file

@ -35,7 +35,7 @@ import {
RoomNotificationStateStore,
UPDATE_STATUS_INDICATOR,
} from "../../../stores/notifications/RoomNotificationStateStore";
import { NotificationColor } from "../../../stores/notifications/NotificationColor";
import { NotificationLevel } from "../../../stores/notifications/NotificationLevel";
import { SummarizedNotificationState } from "../../../stores/notifications/SummarizedNotificationState";
import PosthogTrackers from "../../../PosthogTrackers";
import { ButtonEvent } from "../elements/AccessibleButton";
@ -52,20 +52,20 @@ const ROOM_INFO_PHASES = [
];
interface IUnreadIndicatorProps {
color?: NotificationColor;
color?: NotificationLevel;
}
const UnreadIndicator: React.FC<IUnreadIndicatorProps> = ({ color }) => {
if (color === NotificationColor.None) {
if (color === NotificationLevel.None) {
return null;
}
const classes = classNames({
mx_Indicator: true,
mx_LegacyRoomHeader_button_unreadIndicator: true,
mx_Indicator_bold: color === NotificationColor.Bold,
mx_Indicator_gray: color === NotificationColor.Grey,
mx_Indicator_red: color === NotificationColor.Red,
mx_Indicator_activity: color === NotificationLevel.Activity,
mx_Indicator_notification: color === NotificationLevel.Notification,
mx_Indicator_highlight: color === NotificationLevel.Highlight,
});
return (
<>
@ -106,11 +106,11 @@ const PinnedMessagesHeaderButton: React.FC<IHeaderButtonProps> = ({ room, isHigh
const TimelineCardHeaderButton: React.FC<IHeaderButtonProps> = ({ room, isHighlighted, onClick }) => {
let unreadIndicator;
const color = RoomNotificationStateStore.instance.getRoomState(room).color;
const color = RoomNotificationStateStore.instance.getRoomState(room).level;
switch (color) {
case NotificationColor.Bold:
case NotificationColor.Grey:
case NotificationColor.Red:
case NotificationLevel.Activity:
case NotificationLevel.Notification:
case NotificationLevel.Highlight:
unreadIndicator = <UnreadIndicator color={color} />;
}
return (
@ -174,36 +174,36 @@ export default class LegacyRoomHeaderButtons extends HeaderButtons<IProps> {
private onNotificationUpdate = (): void => {
// console.log
// XXX: why don't we read from this.state.threadNotificationColor in the render methods?
// XXX: why don't we read from this.state.threadNotificationLevel in the render methods?
this.setState({
threadNotificationColor: this.notificationColor,
threadNotificationLevel: this.notificationLevel,
});
};
private get notificationColor(): NotificationColor {
private get notificationLevel(): NotificationLevel {
switch (this.props.room?.threadsAggregateNotificationType) {
case NotificationCountType.Highlight:
return NotificationColor.Red;
return NotificationLevel.Highlight;
case NotificationCountType.Total:
return NotificationColor.Grey;
return NotificationLevel.Notification;
}
// We don't have any notified messages, but we might have unread messages. Let's
// find out.
for (const thread of this.props.room!.getThreads()) {
// If the current thread has unread messages, we're done.
if (doesRoomOrThreadHaveUnreadMessages(thread)) {
return NotificationColor.Bold;
return NotificationLevel.Activity;
}
}
// Otherwise, no notification color.
return NotificationColor.None;
return NotificationLevel.None;
}
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,
globalNotificationLevel: notificationState.level,
});
};
@ -282,9 +282,9 @@ export default class LegacyRoomHeaderButtons extends HeaderButtons<IProps> {
title={_t("common|threads")}
onClick={this.onThreadsPanelClicked}
isHighlighted={this.isPhase(LegacyRoomHeaderButtons.THREAD_PHASES)}
isUnread={this.state.threadNotificationColor > NotificationColor.None}
isUnread={this.state.threadNotificationLevel > NotificationLevel.None}
>
<UnreadIndicator color={this.state.threadNotificationColor} />
<UnreadIndicator color={this.state.threadNotificationLevel} />
</HeaderButton>,
);
if (this.state.notificationsEnabled) {
@ -296,10 +296,10 @@ export default class LegacyRoomHeaderButtons extends HeaderButtons<IProps> {
title={_t("notifications|enable_prompt_toast_title")}
isHighlighted={this.isPhase(RightPanelPhases.NotificationPanel)}
onClick={this.onNotificationsClicked}
isUnread={this.globalNotificationState.color === NotificationColor.Red}
isUnread={this.globalNotificationState.level === NotificationLevel.Highlight}
>
{this.globalNotificationState.color === NotificationColor.Red ? (
<UnreadIndicator color={this.globalNotificationState.color} />
{this.globalNotificationState.level === NotificationLevel.Highlight ? (
<UnreadIndicator color={this.globalNotificationState.level} />
) : null}
</HeaderButton>,
);

6
src/components/views/rooms/NotificationBadge.tsx
View file

@ -21,7 +21,7 @@ import SettingsStore from "../../../settings/SettingsStore";
import { XOR } from "../../../@types/common";
import { NotificationState, NotificationStateEvents } from "../../../stores/notifications/NotificationState";
import { _t } from "../../../languageHandler";
import { NotificationColor } from "../../../stores/notifications/NotificationColor";
import { NotificationLevel } from "../../../stores/notifications/NotificationLevel";
import { StatelessNotificationBadge } from "./NotificationBadge/StatelessNotificationBadge";
interface IProps {
@ -107,7 +107,7 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
const commonProps: React.ComponentProps<typeof StatelessNotificationBadge> = {
symbol: notification.symbol,
count: notification.count,
color: notification.color,
level: notification.level,
knocked: notification.knocked,
};
@ -118,7 +118,7 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
badge = <StatelessNotificationBadge {...commonProps} />;
}
if (showUnsentTooltip && notification.color === NotificationColor.Unsent) {
if (showUnsentTooltip && notification.level === NotificationLevel.Unsent) {
return (
<Tooltip label={_t("notifications|message_didnt_send")} side="right">
{badge}

12
src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
View file

@ -19,14 +19,14 @@ import classNames from "classnames";
import { formatCount } from "../../../../utils/FormattingUtils";
import AccessibleButton, { ButtonEvent } from "../../elements/AccessibleButton";
import { NotificationColor } from "../../../../stores/notifications/NotificationColor";
import { NotificationLevel } from "../../../../stores/notifications/NotificationLevel";
import { useSettingValue } from "../../../../hooks/useSettings";
import { XOR } from "../../../../@types/common";
interface Props {
symbol: string | null;
count: number;
color: NotificationColor;
level: NotificationLevel;
knocked?: boolean;
}
@ -39,15 +39,15 @@ interface ClickableProps extends Props {
}
export const StatelessNotificationBadge = forwardRef<HTMLDivElement, XOR<Props, ClickableProps>>(
({ symbol, count, color, knocked, ...props }, ref) => {
({ symbol, count, level, knocked, ...props }, ref) => {
const hideBold = useSettingValue("feature_hidebold");
// Don't show a badge if we don't need to
if ((color === NotificationColor.None || (hideBold && color == NotificationColor.Bold)) && !knocked) {
if ((level === NotificationLevel.None || (hideBold && level == NotificationLevel.Activity)) && !knocked) {
return <></>;
}
const hasUnreadCount = color >= NotificationColor.Grey && (!!count || !!symbol);
const hasUnreadCount = level >= NotificationLevel.Notification && (!!count || !!symbol);
const isEmptyBadge = symbol === null && count === 0;
@ -58,7 +58,7 @@ export const StatelessNotificationBadge = forwardRef<HTMLDivElement, XOR<Props,
const classes = classNames({
mx_NotificationBadge: true,
mx_NotificationBadge_visible: isEmptyBadge || knocked ? true : hasUnreadCount,
mx_NotificationBadge_highlighted: color >= NotificationColor.Red,
mx_NotificationBadge_highlighted: level >= NotificationLevel.Highlight,
mx_NotificationBadge_dot: isEmptyBadge && !knocked,
mx_NotificationBadge_knocked: knocked,
mx_NotificationBadge_2char: symbol && symbol.length > 0 && symbol.length < 3,

4
src/components/views/rooms/NotificationBadge/UnreadNotificationBadge.tsx
View file

@ -26,7 +26,7 @@ interface Props {
}
export function UnreadNotificationBadge({ room, threadId }: Props): JSX.Element {
const { symbol, count, color } = useUnreadNotifications(room, threadId);
const { symbol, count, level } = useUnreadNotifications(room, threadId);
return <StatelessNotificationBadge symbol={symbol} count={count} color={color} />;
return <StatelessNotificationBadge symbol={symbol} count={count} level={level} />;
}

12
src/components/views/rooms/RoomHeader.tsx
View file

@ -37,7 +37,7 @@ import { Flex } from "../../utils/Flex";
import { Box } from "../../utils/Box";
import { useRoomCall } from "../../../hooks/room/useRoomCall";
import { useRoomThreadNotifications } from "../../../hooks/room/useRoomThreadNotifications";
import { NotificationColor } from "../../../stores/notifications/NotificationColor";
import { NotificationLevel } from "../../../stores/notifications/NotificationLevel";
import { useGlobalNotificationState } from "../../../hooks/useGlobalNotificationState";
import SdkConfig from "../../../SdkConfig";
import { useFeatureEnabled } from "../../../hooks/useSettings";
@ -57,10 +57,10 @@ import { RoomKnocksBar } from "./RoomKnocksBar";
* A helper to transform a notification color to the what the Compound Icon Button
* expects
*/
function notificationColorToIndicator(color: NotificationColor): React.ComponentProps<typeof IconButton>["indicator"] {
if (color <= NotificationColor.None) {
function notificationLevelToIndicator(color: NotificationLevel): React.ComponentProps<typeof IconButton>["indicator"] {
if (color <= NotificationLevel.None) {
return undefined;
} else if (color <= NotificationColor.Grey) {
} else if (color <= NotificationLevel.Notification) {
return "default";
} else {
return "highlight";
@ -230,7 +230,7 @@ export default function RoomHeader({
<Tooltip label={_t("common|threads")}>
<IconButton
indicator={notificationColorToIndicator(threadNotifications)}
indicator={notificationLevelToIndicator(threadNotifications)}
onClick={(evt) => {
evt.stopPropagation();
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.ThreadPanel);
@ -244,7 +244,7 @@ export default function RoomHeader({
{notificationsEnabled && (
<Tooltip label={_t("notifications|enable_prompt_toast_title")}>
<IconButton
indicator={notificationColorToIndicator(globalNotificationState.color)}
indicator={notificationLevelToIndicator(globalNotificationState.level)}
onClick={(evt) => {
evt.stopPropagation();
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.NotificationPanel);

8
src/components/views/rooms/RoomHeader/VideoRoomChatButton.tsx
View file

@ -23,7 +23,7 @@ import { isVideoRoom as calcIsVideoRoom } from "../../../../utils/video-rooms";
import { _t } from "../../../../languageHandler";
import { useEventEmitterState } from "../../../../hooks/useEventEmitter";
import { NotificationStateEvents } from "../../../../stores/notifications/NotificationState";
import { NotificationColor } from "../../../../stores/notifications/NotificationColor";
import { NotificationLevel } from "../../../../stores/notifications/NotificationLevel";
import { RightPanelPhases } from "../../../../stores/right-panel/RightPanelStorePhases";
import { SDKContext } from "../../../../contexts/SDKContext";
import { ButtonEvent } from "../../elements/AccessibleButton";
@ -43,7 +43,7 @@ export const VideoRoomChatButton: React.FC<{ room: Room }> = ({ room }) => {
const notificationColor = useEventEmitterState(
notificationState,
NotificationStateEvents.Update,
() => notificationState?.color,
() => notificationState?.level,
);
if (!isVideoRoom) {
@ -52,7 +52,9 @@ export const VideoRoomChatButton: React.FC<{ room: Room }> = ({ room }) => {
const displayUnreadIndicator =
!!notificationColor &&
[NotificationColor.Bold, NotificationColor.Grey, NotificationColor.Red].includes(notificationColor);
[NotificationLevel.Activity, NotificationLevel.Notification, NotificationLevel.Highlight].includes(
notificationColor,
);
const onClick = (event: ButtonEvent): void => {
// stop event propagating up and triggering RoomHeader bar click

2
src/components/views/rooms/RoomSublist.tsx
View file

@ -421,7 +421,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
// find the first room with a count of the same colour as the badge count
room = RoomListStore.instance.orderedLists[this.props.tagId].find((r: Room) => {
const notifState = this.notificationState.getForRoom(r);
return notifState.count > 0 && notifState.color === this.notificationState.color;
return notifState.count > 0 && notifState.level === this.notificationState.level;
});
}

4
src/components/views/rooms/VoiceRecordComposerTile.tsx
View file

@ -33,7 +33,7 @@ import ErrorDialog from "../dialogs/ErrorDialog";
import MediaDeviceHandler, { MediaDeviceKindEnum } from "../../../MediaDeviceHandler";
import NotificationBadge from "./NotificationBadge";
import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
import { NotificationColor } from "../../../stores/notifications/NotificationColor";
import { NotificationLevel } from "../../../stores/notifications/NotificationLevel";
import InlineSpinner from "../elements/InlineSpinner";
import { PlaybackManager } from "../../../audio/PlaybackManager";
import { doMaybeLocalRoomAction } from "../../../utils/local-room";
@ -305,7 +305,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
<span className="mx_VoiceRecordComposerTile_uploadState_badge">
{/* Need to stick the badge in a span to ensure it doesn't create a block component */}
<NotificationBadge
notification={StaticNotificationState.forSymbol("!", NotificationColor.Red)}
notification={StaticNotificationState.forSymbol("!", NotificationLevel.Highlight)}
/>
</span>
<span className="text-warning">{_t("timeline|send_state_failed")}</span>

10
src/components/views/settings/notifications/NotificationSettings2.tsx
View file

@ -28,7 +28,7 @@ import {
import { RoomNotifState } from "../../../../RoomNotifs";
import { SettingLevel } from "../../../../settings/SettingLevel";
import SettingsStore from "../../../../settings/SettingsStore";
import { NotificationColor } from "../../../../stores/notifications/NotificationColor";
import { NotificationLevel } from "../../../../stores/notifications/NotificationLevel";
import { clearAllNotifications } from "../../../../utils/notifications";
import AccessibleButton from "../../elements/AccessibleButton";
import ExternalLink from "../../elements/ExternalLink";
@ -278,7 +278,13 @@ export default function NotificationSettings2(): JSX.Element {
"settings|notifications|keywords",
{},
{
badge: <StatelessNotificationBadge symbol="1" count={1} color={NotificationColor.Grey} />,
badge: (
<StatelessNotificationBadge
symbol="1"
count={1}
level={NotificationLevel.Notification}
/>
),
},
)}
>

4
src/components/views/spaces/SpaceTreeLevel.tsx
View file

@ -40,7 +40,7 @@ import { toRightOf, useContextMenu } from "../../structures/ContextMenu";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
import { NotificationColor } from "../../../stores/notifications/NotificationColor";
import { NotificationLevel } from "../../../stores/notifications/NotificationLevel";
import { getKeyBindingsManager } from "../../../KeyBindingsManager";
import { NotificationState } from "../../../stores/notifications/NotificationState";
import SpaceContextMenu from "../context_menus/SpaceContextMenu";
@ -329,7 +329,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
const isInvite = space.getMyMembership() === "invite";
const notificationState = isInvite
? StaticNotificationState.forSymbol("!", NotificationColor.Red)
? StaticNotificationState.forSymbol("!", NotificationLevel.Highlight)
: SpaceStore.instance.getNotificationState(space.roomId);
const hasChildren = this.state.childSpaces?.length;