Skip to content

Commit f62fe26

Browse files
justjanneSimonBrandner
justjanne
and
SimonBrandner
authored
GYU: Account Notification Settings (matrix-org#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 <[email protected]> * 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 <[email protected]>
1 parent 95283d2 commit f62fe26

25 files changed

+3797
-33
lines changed

‎res/css/_components.pcss

+4
Original file line numberDiff line numberDiff line change
@@ -321,6 +321,8 @@
321321
@import "./views/settings/_JoinRuleSettings.pcss";
322322
@import "./views/settings/_KeyboardShortcut.pcss";
323323
@import "./views/settings/_LayoutSwitcher.pcss";
324+
@import "./views/settings/_NotificationPusherSettings.pcss";
325+
@import "./views/settings/_NotificationSettings2.pcss";
324326
@import "./views/settings/_Notifications.pcss";
325327
@import "./views/settings/_PhoneNumbers.pcss";
326328
@import "./views/settings/_ProfileSettings.pcss";
@@ -331,6 +333,8 @@
331333
@import "./views/settings/_SpellCheckLanguages.pcss";
332334
@import "./views/settings/_ThemeChoicePanel.pcss";
333335
@import "./views/settings/_UpdateCheckButton.pcss";
336+
@import "./views/settings/tabs/_SettingsBanner.pcss";
337+
@import "./views/settings/tabs/_SettingsIndent.pcss";
334338
@import "./views/settings/tabs/_SettingsSection.pcss";
335339
@import "./views/settings/tabs/_SettingsTab.pcss";
336340
@import "./views/settings/tabs/room/_NotificationSettingsTab.pcss";

‎res/css/views/settings/_NotificationPusherSettings.pcss

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/*
2+
Copyright 2023 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_NotificationPusherSettings {
18+
.mx_NotificationPusherSettings_description {
19+
color: $primary-content;
20+
}
21+
22+
.mx_NotificationPusherSettings_detail {
23+
margin-top: -4px;
24+
margin-bottom: 12px;
25+
}
26+
}

‎res/css/views/settings/_NotificationSettings2.pcss

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
/*
2+
Copyright 2023 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_NotificationSettings2 {
18+
.mx_SettingsSection_subSections {
19+
color: $primary-content;
20+
gap: 32px;
21+
display: flex;
22+
flex-direction: column;
23+
}
24+
25+
.mx_SettingsSubsection_description {
26+
margin-bottom: 20px;
27+
28+
.mx_SettingsSubsection_text {
29+
font-size: 1.2rem;
30+
31+
.mx_NotificationBadge {
32+
vertical-align: baseline;
33+
display: inline-flex;
34+
margin: 0 2px;
35+
}
36+
}
37+
}
38+
39+
.mx_SettingsSubsection_content {
40+
margin-top: 12px;
41+
grid-gap: 12px;
42+
justify-items: stretch;
43+
justify-content: stretch;
44+
}
45+
46+
.mx_SettingsBanner {
47+
margin-bottom: 32px;
48+
}
49+
50+
.mx_NotificationSettings2_flags {
51+
grid-gap: 4px;
52+
}
53+
54+
.mx_StyledRadioButton_content {
55+
margin-left: 10px;
56+
margin-right: 10px;
57+
}
58+
59+
.mx_TagComposer {
60+
margin-top: 16px;
61+
62+
&.mx_TagComposer_disabled {
63+
opacity: 0.7;
64+
}
65+
66+
.mx_TagComposer_tags {
67+
margin-top: 16px;
68+
gap: 8px;
69+
70+
.mx_Tag {
71+
border-radius: 18px;
72+
line-height: 2.4rem;
73+
padding: 6px 12px;
74+
background: $panel-actions;
75+
margin: 0;
76+
77+
.mx_Tag_delete {
78+
background: $tertiary-content;
79+
color: #fff;
80+
align-self: initial;
81+
}
82+
}
83+
}
84+
}
85+
}

‎res/css/views/settings/tabs/_SettingsBanner.pcss

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/*
2+
Copyright 2023 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_SettingsBanner {
18+
background: $system;
19+
line-height: 2.25rem;
20+
border-radius: 8px;
21+
padding: 12px 16px;
22+
gap: 12px;
23+
display: flex;
24+
flex-direction: row;
25+
align-items: center;
26+
27+
.mx_SettingsBanner_content {
28+
margin: 0;
29+
}
30+
31+
.mx_AccessibleButton {
32+
align-self: initial;
33+
white-space: nowrap;
34+
}
35+
}

‎res/css/views/settings/tabs/_SettingsIndent.pcss

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/*
2+
Copyright 2023 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_SettingsIndent {
18+
padding-left: 16px;
19+
display: flex;
20+
flex-direction: column;
21+
gap: 12px;
22+
}

‎res/img/element-icons/new-and-improved.svg

+4
Loading

‎src/components/views/elements/Tag.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
Copyright 2022 The Matrix.org Foundation C.I.C.
2+
Copyright 2022-2023 The Matrix.org Foundation C.I.C.
33
44
Licensed under the Apache License, Version 2.0 (the "License");
55
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
1414
limitations under the License.
1515
*/
1616

17-
import React from "react";
17+
import React, { DetailedHTMLProps, HTMLAttributes } from "react";
1818

1919
import AccessibleButton from "./AccessibleButton";
2020
import { Icon as CancelRounded } from "../../../../res/img/element-icons/cancel-rounded.svg";
2121

22-
interface IProps {
22+
interface IProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
2323
icon?: () => JSX.Element;
2424
label: string;
2525
onDeleteClick?: () => void;
2626
disabled?: boolean;
2727
}
2828

29-
export const Tag: React.FC<IProps> = ({ icon, label, onDeleteClick, disabled = false }) => {
29+
export const Tag: React.FC<IProps> = ({ icon, label, onDeleteClick, disabled = false, ...other }) => {
3030
return (
31-
<div className="mx_Tag">
31+
<div className="mx_Tag" {...other}>
3232
{icon?.()}
3333
{label}
3434
{onDeleteClick && (

‎src/components/views/elements/TagComposer.tsx

+11-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
Copyright 2021 The Matrix.org Foundation C.I.C.
2+
Copyright 2021-2023 The Matrix.org Foundation C.I.C.
33
44
Licensed under the Apache License, Version 2.0 (the "License");
55
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
1414
limitations under the License.
1515
*/
1616

17+
import classNames from "classnames";
1718
import React, { ChangeEvent, FormEvent } from "react";
1819

1920
import Field from "./Field";
@@ -22,6 +23,7 @@ import AccessibleButton from "./AccessibleButton";
2223
import { Tag } from "./Tag";
2324

2425
interface IProps {
26+
id?: string;
2527
tags: string[];
2628
onAdd: (tag: string) => void;
2729
onRemove: (tag: string) => void;
@@ -67,9 +69,14 @@ export default class TagComposer extends React.PureComponent<IProps, IState> {
6769

6870
public render(): React.ReactNode {
6971
return (
70-
<div className="mx_TagComposer">
72+
<div
73+
className={classNames("mx_TagComposer", {
74+
mx_TagComposer_disabled: this.props.disabled,
75+
})}
76+
>
7177
<form className="mx_TagComposer_input" onSubmit={this.onAdd}>
7278
<Field
79+
id={this.props.id ? this.props.id + "_field" : undefined}
7380
value={this.state.newTag}
7481
onChange={this.onInputChange}
7582
label={this.props.label || _t("Keyword")}
@@ -81,13 +88,14 @@ export default class TagComposer extends React.PureComponent<IProps, IState> {
8188
{_t("Add")}
8289
</AccessibleButton>
8390
</form>
84-
<div className="mx_TagComposer_tags">
91+
<div className="mx_TagComposer_tags" role="list">
8592
{this.props.tags.map((t, i) => (
8693
<Tag
8794
label={t}
8895
key={t}
8996
onDeleteClick={this.onRemove.bind(this, t)}
9097
disabled={this.props.disabled}
98+
role="listitem"
9199
/>
92100
))}
93101
</div>

0 commit comments

Comments
 (0)