GYU: Account Notification Settings (#11008)
* Implement new notification settings UI * Sort new keywords at the front * Make ts-strict happier * Make ts-strict happier * chore: fixed lint issues * update beta card * Fix issue with the user settings test * chore: fixed lint issues * Add tests for notification settings * chore: fixed lint issues * fix: spurious text failures * improve tests further * make ts-strict happier * improve tests further * Reduce uncovered conditions * Correct snapshot * even more test coverage * Fix an issue with inverted rules * Update res/css/views/settings/tabs/_SettingsIndent.pcss Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix license headers * Improve i18n * make linters happier * Improve beta labels * improve i18n * chore: fixed lint issues * fix: more lint issues * Update snapshots to match changed text * Update text as requested * Remove labs image * Update snapshots * Correct an issue with one of the tests * fix: keyword reconcilation code * Determine mute status more accurately * Address review comments * Prevent duplicate updates * Fix missing license header * slight change to avoid ts-strict complaining * fix test issue caused by previous merge --------- Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Janne Mareike Koschinski
GitHub
parent
95283d21bb
commit
f62fe2626c
25 changed files with 3797 additions and 33 deletions
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
Copyright 2022-2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
|
@ -14,21 +14,21 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import React, { DetailedHTMLProps, HTMLAttributes } from "react";
|
||||
|
||||
import AccessibleButton from "./AccessibleButton";
|
||||
import { Icon as CancelRounded } from "../../../../res/img/element-icons/cancel-rounded.svg";
|
||||
|
||||
interface IProps {
|
||||
interface IProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
||||
icon?: () => JSX.Element;
|
||||
label: string;
|
||||
onDeleteClick?: () => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export const Tag: React.FC<IProps> = ({ icon, label, onDeleteClick, disabled = false }) => {
|
||||
export const Tag: React.FC<IProps> = ({ icon, label, onDeleteClick, disabled = false, ...other }) => {
|
||||
return (
|
||||
<div className="mx_Tag">
|
||||
<div className="mx_Tag" {...other}>
|
||||
{icon?.()}
|
||||
{label}
|
||||
{onDeleteClick && (
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
Copyright 2021-2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
|
@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import classNames from "classnames";
|
||||
import React, { ChangeEvent, FormEvent } from "react";
|
||||
|
||||
import Field from "./Field";
|
||||
|
|
@ -22,6 +23,7 @@ import AccessibleButton from "./AccessibleButton";
|
|||
import { Tag } from "./Tag";
|
||||
|
||||
interface IProps {
|
||||
id?: string;
|
||||
tags: string[];
|
||||
onAdd: (tag: string) => void;
|
||||
onRemove: (tag: string) => void;
|
||||
|
|
@ -67,9 +69,14 @@ export default class TagComposer extends React.PureComponent<IProps, IState> {
|
|||
|
||||
public render(): React.ReactNode {
|
||||
return (
|
||||
<div className="mx_TagComposer">
|
||||
<div
|
||||
className={classNames("mx_TagComposer", {
|
||||
mx_TagComposer_disabled: this.props.disabled,
|
||||
})}
|
||||
>
|
||||
<form className="mx_TagComposer_input" onSubmit={this.onAdd}>
|
||||
<Field
|
||||
id={this.props.id ? this.props.id + "_field" : undefined}
|
||||
value={this.state.newTag}
|
||||
onChange={this.onInputChange}
|
||||
label={this.props.label || _t("Keyword")}
|
||||
|
|
@ -81,13 +88,14 @@ export default class TagComposer extends React.PureComponent<IProps, IState> {
|
|||
{_t("Add")}
|
||||
</AccessibleButton>
|
||||
</form>
|
||||
<div className="mx_TagComposer_tags">
|
||||
<div className="mx_TagComposer_tags" role="list">
|
||||
{this.props.tags.map((t, i) => (
|
||||
<Tag
|
||||
label={t}
|
||||
key={t}
|
||||
onDeleteClick={this.onRemove.bind(this, t)}
|
||||
disabled={this.props.disabled}
|
||||
role="listitem"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,134 @@
|
|||
/*
|
||||
Copyright 2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { ThreepidMedium } from "matrix-js-sdk/src/@types/threepids";
|
||||
import { IPusher } from "matrix-js-sdk/src/matrix";
|
||||
import React, { useCallback, useMemo } from "react";
|
||||
|
||||
import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
|
||||
import { Action } from "../../../../dispatcher/actions";
|
||||
import dispatcher from "../../../../dispatcher/dispatcher";
|
||||
import { usePushers } from "../../../../hooks/usePushers";
|
||||
import { useThreepids } from "../../../../hooks/useThreepids";
|
||||
import { _t } from "../../../../languageHandler";
|
||||
import SdkConfig from "../../../../SdkConfig";
|
||||
import { UserTab } from "../../dialogs/UserTab";
|
||||
import AccessibleButton from "../../elements/AccessibleButton";
|
||||
import LabelledCheckbox from "../../elements/LabelledCheckbox";
|
||||
import { SettingsIndent } from "../shared/SettingsIndent";
|
||||
import SettingsSubsection, { SettingsSubsectionText } from "../shared/SettingsSubsection";
|
||||
|
||||
function generalTabButton(content: string): JSX.Element {
|
||||
return (
|
||||
<AccessibleButton
|
||||
kind="link_inline"
|
||||
onClick={() => {
|
||||
dispatcher.dispatch({
|
||||
action: Action.ViewUserSettings,
|
||||
initialTabId: UserTab.General,
|
||||
});
|
||||
}}
|
||||
>
|
||||
{content}
|
||||
</AccessibleButton>
|
||||
);
|
||||
}
|
||||
|
||||
export function NotificationPusherSettings(): JSX.Element {
|
||||
const EmailPusherTemplate: Omit<IPusher, "pushkey" | "device_display_name" | "append"> = useMemo(
|
||||
() => ({
|
||||
kind: "email",
|
||||
app_id: "m.email",
|
||||
app_display_name: _t("Email Notifications"),
|
||||
lang: navigator.language,
|
||||
data: {
|
||||
brand: SdkConfig.get().brand,
|
||||
},
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
const cli = useMatrixClientContext();
|
||||
const [pushers, refreshPushers] = usePushers(cli);
|
||||
const [threepids, refreshThreepids] = useThreepids(cli);
|
||||
|
||||
const setEmailEnabled = useCallback(
|
||||
(email: string, enabled: boolean) => {
|
||||
if (enabled) {
|
||||
cli.setPusher({
|
||||
...EmailPusherTemplate,
|
||||
pushkey: email,
|
||||
device_display_name: email,
|
||||
// We always append for email pushers since we don't want to stop other
|
||||
// accounts notifying to the same email address
|
||||
append: true,
|
||||
}).catch((err) => console.error(err));
|
||||
} else {
|
||||
const pusher = pushers.find((p) => p.kind === "email" && p.pushkey === email);
|
||||
if (pusher) {
|
||||
cli.removePusher(pusher.pushkey, pusher.app_id).catch((err) => console.error(err));
|
||||
}
|
||||
}
|
||||
refreshThreepids();
|
||||
refreshPushers();
|
||||
},
|
||||
[EmailPusherTemplate, cli, pushers, refreshPushers, refreshThreepids],
|
||||
);
|
||||
|
||||
const notificationTargets = pushers.filter((it) => it.kind !== "email");
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsSubsection className="mx_NotificationPusherSettings" heading={_t("Email summary")}>
|
||||
<SettingsSubsectionText className="mx_NotificationPusherSettings_description">
|
||||
{_t("Receive an email summary of missed notifications")}
|
||||
</SettingsSubsectionText>
|
||||
<div className="mx_SettingsSubsection_description mx_NotificationPusherSettings_detail">
|
||||
<SettingsSubsectionText>
|
||||
{_t(
|
||||
"Select which emails you want to send summaries to. Manage your emails in <button>General</button>.",
|
||||
{},
|
||||
{ button: generalTabButton },
|
||||
)}
|
||||
</SettingsSubsectionText>
|
||||
</div>
|
||||
<SettingsIndent>
|
||||
{threepids
|
||||
.filter((t) => t.medium === ThreepidMedium.Email)
|
||||
.map((email) => (
|
||||
<LabelledCheckbox
|
||||
key={email.address}
|
||||
label={email.address}
|
||||
value={pushers.find((it) => it.pushkey === email.address) !== undefined}
|
||||
onChange={(value) => setEmailEnabled(email.address, value)}
|
||||
/>
|
||||
))}
|
||||
</SettingsIndent>
|
||||
</SettingsSubsection>
|
||||
{notificationTargets.length > 0 && (
|
||||
<SettingsSubsection heading={_t("Notification targets")}>
|
||||
<ul>
|
||||
{pushers
|
||||
.filter((it) => it.kind !== "email")
|
||||
.map((pusher) => (
|
||||
<li key={pusher.pushkey}>{pusher.device_display_name || pusher.app_display_name}</li>
|
||||
))}
|
||||
</ul>
|
||||
</SettingsSubsection>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,370 @@
|
|||
/*
|
||||
Copyright 2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { useState } from "react";
|
||||
|
||||
import NewAndImprovedIcon from "../../../../../res/img/element-icons/new-and-improved.svg";
|
||||
import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
|
||||
import { useNotificationSettings } from "../../../../hooks/useNotificationSettings";
|
||||
import { useSettingValue } from "../../../../hooks/useSettings";
|
||||
import { _t } from "../../../../languageHandler";
|
||||
import {
|
||||
DefaultNotificationSettings,
|
||||
NotificationSettings,
|
||||
} from "../../../../models/notificationsettings/NotificationSettings";
|
||||
import { RoomNotifState } from "../../../../RoomNotifs";
|
||||
import { SettingLevel } from "../../../../settings/SettingLevel";
|
||||
import SettingsStore from "../../../../settings/SettingsStore";
|
||||
import { NotificationColor } from "../../../../stores/notifications/NotificationColor";
|
||||
import { clearAllNotifications } from "../../../../utils/notifications";
|
||||
import AccessibleButton from "../../elements/AccessibleButton";
|
||||
import LabelledCheckbox from "../../elements/LabelledCheckbox";
|
||||
import LabelledToggleSwitch from "../../elements/LabelledToggleSwitch";
|
||||
import StyledRadioGroup from "../../elements/StyledRadioGroup";
|
||||
import TagComposer from "../../elements/TagComposer";
|
||||
import { StatelessNotificationBadge } from "../../rooms/NotificationBadge/StatelessNotificationBadge";
|
||||
import { SettingsBanner } from "../shared/SettingsBanner";
|
||||
import { SettingsSection } from "../shared/SettingsSection";
|
||||
import SettingsSubsection from "../shared/SettingsSubsection";
|
||||
import { NotificationPusherSettings } from "./NotificationPusherSettings";
|
||||
|
||||
enum NotificationDefaultLevels {
|
||||
AllMessages = "all_messages",
|
||||
PeopleMentionsKeywords = "people_mentions_keywords",
|
||||
MentionsKeywords = "mentions_keywords",
|
||||
}
|
||||
|
||||
function toDefaultLevels(levels: NotificationSettings["defaultLevels"]): NotificationDefaultLevels {
|
||||
if (levels.room === RoomNotifState.AllMessages) {
|
||||
return NotificationDefaultLevels.AllMessages;
|
||||
} else if (levels.dm === RoomNotifState.AllMessages) {
|
||||
return NotificationDefaultLevels.PeopleMentionsKeywords;
|
||||
} else {
|
||||
return NotificationDefaultLevels.MentionsKeywords;
|
||||
}
|
||||
}
|
||||
|
||||
const NotificationOptions = [
|
||||
{
|
||||
value: NotificationDefaultLevels.AllMessages,
|
||||
label: _t("All messages"),
|
||||
},
|
||||
{
|
||||
value: NotificationDefaultLevels.PeopleMentionsKeywords,
|
||||
label: _t("People, Mentions and Keywords"),
|
||||
},
|
||||
{
|
||||
value: NotificationDefaultLevels.MentionsKeywords,
|
||||
label: _t("Mentions and Keywords only"),
|
||||
},
|
||||
];
|
||||
|
||||
function boldText(text: string): JSX.Element {
|
||||
return <strong>{text}</strong>;
|
||||
}
|
||||
|
||||
function useHasUnreadNotifications(): boolean {
|
||||
const cli = useMatrixClientContext();
|
||||
return cli.getRooms().some((room) => room.getUnreadNotificationCount() > 0);
|
||||
}
|
||||
|
||||
export default function NotificationSettings2(): JSX.Element {
|
||||
const cli = useMatrixClientContext();
|
||||
|
||||
const desktopNotifications = useSettingValue<boolean>("notificationsEnabled");
|
||||
const desktopShowBody = useSettingValue<boolean>("notificationBodyEnabled");
|
||||
const audioNotifications = useSettingValue<boolean>("audioNotificationsEnabled");
|
||||
|
||||
const { model, hasPendingChanges, reconcile } = useNotificationSettings(cli);
|
||||
|
||||
const disabled = model === null || hasPendingChanges;
|
||||
const settings = model ?? DefaultNotificationSettings;
|
||||
|
||||
const [updatingUnread, setUpdatingUnread] = useState<boolean>(false);
|
||||
const hasUnreadNotifications = useHasUnreadNotifications();
|
||||
|
||||
return (
|
||||
<div className="mx_NotificationSettings2">
|
||||
{hasPendingChanges && model !== null && (
|
||||
<SettingsBanner
|
||||
icon={<img src={NewAndImprovedIcon} alt="" width={12} />}
|
||||
action={_t("Switch now")}
|
||||
onAction={() => reconcile(model!)}
|
||||
>
|
||||
{_t(
|
||||
"<strong>Update:</strong> We have updated our notification settings. This won’t affect your previously selected settings.",
|
||||
{},
|
||||
{ strong: boldText },
|
||||
)}
|
||||
</SettingsBanner>
|
||||
)}
|
||||
<SettingsSection heading={_t("Notifications")}>
|
||||
<div className="mx_SettingsSubsection_content mx_NotificationSettings2_flags">
|
||||
<LabelledToggleSwitch
|
||||
label={_t("Enable notifications for this account")}
|
||||
value={!settings.globalMute}
|
||||
disabled={disabled}
|
||||
onChange={(value) => {
|
||||
reconcile({
|
||||
...model!,
|
||||
globalMute: !value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<LabelledToggleSwitch
|
||||
label={_t("Enable desktop notifications for this session")}
|
||||
value={desktopNotifications}
|
||||
onChange={(value) =>
|
||||
SettingsStore.setValue("notificationsEnabled", null, SettingLevel.DEVICE, value)
|
||||
}
|
||||
/>
|
||||
<LabelledToggleSwitch
|
||||
label={_t("Show message preview in desktop notification")}
|
||||
value={desktopShowBody}
|
||||
onChange={(value) =>
|
||||
SettingsStore.setValue("notificationBodyEnabled", null, SettingLevel.DEVICE, value)
|
||||
}
|
||||
/>
|
||||
<LabelledToggleSwitch
|
||||
label={_t("Enable audible notifications for this session")}
|
||||
value={audioNotifications}
|
||||
onChange={(value) =>
|
||||
SettingsStore.setValue("audioNotificationsEnabled", null, SettingLevel.DEVICE, value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<SettingsSubsection
|
||||
heading={_t("I want to be notified for (Default Setting)")}
|
||||
description={_t("This setting will be applied by default to all your rooms.")}
|
||||
>
|
||||
<StyledRadioGroup
|
||||
name="defaultNotificationLevel"
|
||||
value={toDefaultLevels(settings.defaultLevels)}
|
||||
disabled={disabled}
|
||||
definitions={NotificationOptions}
|
||||
onChange={(value) => {
|
||||
reconcile({
|
||||
...model!,
|
||||
defaultLevels: {
|
||||
...model!.defaultLevels,
|
||||
dm:
|
||||
value !== NotificationDefaultLevels.MentionsKeywords
|
||||
? RoomNotifState.AllMessages
|
||||
: RoomNotifState.MentionsOnly,
|
||||
room:
|
||||
value === NotificationDefaultLevels.AllMessages
|
||||
? RoomNotifState.AllMessages
|
||||
: RoomNotifState.MentionsOnly,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</SettingsSubsection>
|
||||
<SettingsSubsection
|
||||
heading={_t("Play a sound for")}
|
||||
description={_t("Applied by default to all rooms on all devices.")}
|
||||
>
|
||||
<LabelledCheckbox
|
||||
label="People"
|
||||
value={settings.sound.people !== undefined}
|
||||
disabled={disabled}
|
||||
onChange={(value) => {
|
||||
reconcile({
|
||||
...model!,
|
||||
sound: {
|
||||
...model!.sound,
|
||||
people: value ? "default" : undefined,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<LabelledCheckbox
|
||||
label={_t("Mentions and Keywords")}
|
||||
value={settings.sound.mentions !== undefined}
|
||||
disabled={disabled}
|
||||
onChange={(value) => {
|
||||
reconcile({
|
||||
...model!,
|
||||
sound: {
|
||||
...model!.sound,
|
||||
mentions: value ? "default" : undefined,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<LabelledCheckbox
|
||||
label={_t("Audio and Video calls")}
|
||||
value={settings.sound.calls !== undefined}
|
||||
disabled={disabled}
|
||||
onChange={(value) => {
|
||||
reconcile({
|
||||
...model!,
|
||||
sound: {
|
||||
...model!.sound,
|
||||
calls: value ? "ring" : undefined,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</SettingsSubsection>
|
||||
<SettingsSubsection heading={_t("Other things we think you might be interested in:")}>
|
||||
<LabelledCheckbox
|
||||
label={_t("Invited to a room")}
|
||||
value={settings.activity.invite}
|
||||
disabled={disabled}
|
||||
onChange={(value) => {
|
||||
reconcile({
|
||||
...model!,
|
||||
activity: {
|
||||
...model!.activity,
|
||||
invite: value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<LabelledCheckbox
|
||||
label={_t("New room activity, upgrades and status messages occur")}
|
||||
value={settings.activity.status_event}
|
||||
disabled={disabled}
|
||||
onChange={(value) => {
|
||||
reconcile({
|
||||
...model!,
|
||||
activity: {
|
||||
...model!.activity,
|
||||
status_event: value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<LabelledCheckbox
|
||||
label={_t("Messages sent by bots")}
|
||||
value={settings.activity.bot_notices}
|
||||
disabled={disabled}
|
||||
onChange={(value) => {
|
||||
reconcile({
|
||||
...model!,
|
||||
activity: {
|
||||
...model!.activity,
|
||||
bot_notices: value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</SettingsSubsection>
|
||||
<SettingsSubsection
|
||||
heading={_t("Mentions and Keywords")}
|
||||
description={_t(
|
||||
"Show a badge <badge/> when keywords are used in a room.",
|
||||
{},
|
||||
{
|
||||
badge: <StatelessNotificationBadge symbol="1" count={1} color={NotificationColor.Grey} />,
|
||||
},
|
||||
)}
|
||||
>
|
||||
<LabelledCheckbox
|
||||
label={_t("Notify when someone mentions using @room")}
|
||||
value={settings.mentions.room}
|
||||
disabled={disabled}
|
||||
onChange={(value) => {
|
||||
reconcile({
|
||||
...model!,
|
||||
mentions: {
|
||||
...model!.mentions,
|
||||
room: value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<LabelledCheckbox
|
||||
label={_t("Notify when someone mentions using @displayname or %(mxid)s", {
|
||||
mxid: cli.getUserId()!,
|
||||
})}
|
||||
value={settings.mentions.user}
|
||||
disabled={disabled}
|
||||
onChange={(value) => {
|
||||
reconcile({
|
||||
...model!,
|
||||
mentions: {
|
||||
...model!.mentions,
|
||||
user: value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<LabelledCheckbox
|
||||
label={_t("Notify when someone uses a keyword")}
|
||||
byline={_t("Enter keywords here, or use for spelling variations or nicknames")}
|
||||
value={settings.mentions.keywords}
|
||||
disabled={disabled}
|
||||
onChange={(value) => {
|
||||
reconcile({
|
||||
...model!,
|
||||
mentions: {
|
||||
...model!.mentions,
|
||||
keywords: value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<TagComposer
|
||||
id="mx_NotificationSettings2_Keywords"
|
||||
tags={model?.keywords ?? []}
|
||||
disabled={disabled}
|
||||
onAdd={(keyword) => {
|
||||
reconcile({
|
||||
...model!,
|
||||
keywords: [keyword, ...model!.keywords],
|
||||
});
|
||||
}}
|
||||
onRemove={(keyword) => {
|
||||
reconcile({
|
||||
...model!,
|
||||
keywords: model!.keywords.filter((it) => it !== keyword),
|
||||
});
|
||||
}}
|
||||
label={_t("Keyword")}
|
||||
placeholder={_t("New keyword")}
|
||||
/>
|
||||
</SettingsSubsection>
|
||||
<NotificationPusherSettings />
|
||||
<SettingsSubsection heading={_t("Quick Actions")}>
|
||||
{hasUnreadNotifications && (
|
||||
<AccessibleButton
|
||||
kind="primary_outline"
|
||||
disabled={updatingUnread}
|
||||
onClick={async () => {
|
||||
setUpdatingUnread(true);
|
||||
await clearAllNotifications(cli);
|
||||
setUpdatingUnread(false);
|
||||
}}
|
||||
>
|
||||
{_t("Mark all messages as read")}
|
||||
</AccessibleButton>
|
||||
)}
|
||||
<AccessibleButton
|
||||
kind="danger_outline"
|
||||
disabled={model === null}
|
||||
onClick={() => {
|
||||
reconcile(DefaultNotificationSettings);
|
||||
}}
|
||||
>
|
||||
{_t("Reset to default settings")}
|
||||
</AccessibleButton>
|
||||
</SettingsSubsection>
|
||||
</SettingsSection>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
39
src/components/views/settings/shared/SettingsBanner.tsx
Normal file
39
src/components/views/settings/shared/SettingsBanner.tsx
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
/*
|
||||
Copyright 2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { PropsWithChildren, ReactNode } from "react";
|
||||
|
||||
import AccessibleButton from "../../elements/AccessibleButton";
|
||||
|
||||
interface Props {
|
||||
icon?: ReactNode;
|
||||
action?: ReactNode;
|
||||
onAction?: () => void;
|
||||
}
|
||||
|
||||
export function SettingsBanner({ children, icon, action, onAction }: PropsWithChildren<Props>): JSX.Element {
|
||||
return (
|
||||
<div className="mx_SettingsBanner">
|
||||
{icon}
|
||||
<div className="mx_SettingsBanner_content">{children}</div>
|
||||
{action && (
|
||||
<AccessibleButton kind="primary_outline" onClick={onAction ?? null}>
|
||||
{action}
|
||||
</AccessibleButton>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
src/components/views/settings/shared/SettingsIndent.tsx
Normal file
27
src/components/views/settings/shared/SettingsIndent.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
/*
|
||||
Copyright 2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { HTMLAttributes } from "react";
|
||||
|
||||
export interface SettingsIndentProps extends HTMLAttributes<HTMLDivElement> {
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export const SettingsIndent: React.FC<SettingsIndentProps> = ({ children, ...rest }) => (
|
||||
<div {...rest} className="mx_SettingsIndent">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
Copyright 2022-2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
|
@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import classnames from "classnames";
|
||||
import React, { HTMLAttributes } from "react";
|
||||
|
||||
import Heading from "../../typography/Heading";
|
||||
|
|
@ -40,8 +41,8 @@ export interface SettingsSectionProps extends HTMLAttributes<HTMLDivElement> {
|
|||
* </SettingsTab>
|
||||
* ```
|
||||
*/
|
||||
export const SettingsSection: React.FC<SettingsSectionProps> = ({ heading, children, ...rest }) => (
|
||||
<div {...rest} className="mx_SettingsSection">
|
||||
export const SettingsSection: React.FC<SettingsSectionProps> = ({ className, heading, children, ...rest }) => (
|
||||
<div {...rest} className={classnames("mx_SettingsSection", className)}>
|
||||
{typeof heading === "string" ? <Heading size="2">{heading}</Heading> : <>{heading}</>}
|
||||
<div className="mx_SettingsSection_subSections">{children}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Copyright 2019-2021 The Matrix.org Foundation C.I.C.
|
||||
Copyright 2019-2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
|
@ -17,17 +17,26 @@ limitations under the License.
|
|||
import React from "react";
|
||||
|
||||
import { _t } from "../../../../../languageHandler";
|
||||
import { Features } from "../../../../../settings/Settings";
|
||||
import SettingsStore from "../../../../../settings/SettingsStore";
|
||||
import Notifications from "../../Notifications";
|
||||
import NotificationSettings2 from "../../notifications/NotificationSettings2";
|
||||
import { SettingsSection } from "../../shared/SettingsSection";
|
||||
import SettingsTab from "../SettingsTab";
|
||||
|
||||
export default class NotificationUserSettingsTab extends React.Component {
|
||||
public render(): React.ReactNode {
|
||||
const newNotificationSettingsEnabled = SettingsStore.getValue(Features.NotificationSettings2);
|
||||
|
||||
return (
|
||||
<SettingsTab>
|
||||
<SettingsSection heading={_t("Notifications")}>
|
||||
<Notifications />
|
||||
</SettingsSection>
|
||||
{newNotificationSettingsEnabled ? (
|
||||
<NotificationSettings2 />
|
||||
) : (
|
||||
<SettingsSection heading={_t("Notifications")}>
|
||||
<Notifications />
|
||||
</SettingsSection>
|
||||
)}
|
||||
</SettingsTab>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue