Don't reference the notification levels by colour (#12138)
* 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
GitHub
parent
97339ee2f6
commit
9254e9562e
42 changed files with 268 additions and 265 deletions
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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} />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue