GYU: Account Notification Settings

res/css/_components.pcss

@@ -322,6 +322,7 @@
 @import "./views/settings/_JoinRuleSettings.pcss";
 @import "./views/settings/_KeyboardShortcut.pcss";
 @import "./views/settings/_LayoutSwitcher.pcss";
+@import "./views/settings/_NotificationSettings2.pcss";
 @import "./views/settings/_Notifications.pcss";
 @import "./views/settings/_PhoneNumbers.pcss";
 @import "./views/settings/_ProfileSettings.pcss";
@@ -332,6 +333,8 @@
 @import "./views/settings/_SpellCheckLanguages.pcss";
 @import "./views/settings/_ThemeChoicePanel.pcss";
 @import "./views/settings/_UpdateCheckButton.pcss";
+@import "./views/settings/tabs/_SettingsBanner.pcss";
+@import "./views/settings/tabs/_SettingsIndent.pcss";
 @import "./views/settings/tabs/_SettingsSection.pcss";
 @import "./views/settings/tabs/_SettingsTab.pcss";
 @import "./views/settings/tabs/room/_NotificationSettingsTab.pcss";

res/css/views/settings/_NotificationSettings2.pcss

@@ -0,0 +1,96 @@
+/*
+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.
+*/
+
+.mx_NotificationSettings2 {
+ .mx_SettingsSection_subSections {
+ color: $primary-content;
+ gap: 32px;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .mx_SettingsSubsection_description {
+ margin-bottom: 20px;
+
+ .mx_SettingsSubsection_text {
+ font-size: 1.2rem;
+
+ .mx_NotificationBadge {
+ vertical-align: baseline;
+ display: inline-flex;
+ margin: 0 2px;
+ }
+ }
+ }
+
+ .mx_SettingsSubsection_content {
+ margin-top: 12px;
+ grid-gap: 12px;
+ justify-items: stretch;
+ justify-content: stretch;
+ }
+
+ .mx_SettingsBanner {
+ margin-bottom: 32px;
+ }
+
+ .mx_NotificationSettings2_flags {
+ grid-gap: 4px;
+ }
+
+ .mx_StyledRadioButton_content {
+ margin-left: 10px;
+ margin-right: 10px;
+ }
+
+ .mx_TagComposer {
+ margin-top: 16px;
+
+ &.mx_TagComposer_disabled {
+ opacity: 0.7;
+ }
+
+ .mx_TagComposer_tags {
+ margin-top: 16px;
+ gap: 8px;
+
+ .mx_Tag {
+ border-radius: 18px;
+ line-height: 2.4rem;
+ padding: 6px 12px;
+ background: $panel-actions;
+ margin: 0;
+
+ .mx_Tag_delete {
+ background: $tertiary-content;
+ color: #fff;
+ align-self: initial;
+ }
+ }
+ }
+ }
+}
+
+.mx_NotificationPusherSettings {
+ .mx_NotificationPusherSettings_description {
+ color: $primary-content;
+ }
+
+ .mx_NotificationPusherSettings_detail {
+ margin-top: -4px;
+ margin-bottom: 12px;
+ }
+}

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

@@ -0,0 +1,35 @@
+/*
+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.
+*/
+
+.mx_SettingsBanner {
+ background: $system;
+ line-height: 2.25rem;
+ border-radius: 8px;
+ padding: 12px 16px;
+ gap: 12px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ .mx_SettingsBanner_content {
+ margin: 0;
+ }
+
+ .mx_AccessibleButton {
+ align-self: initial;
+ white-space: nowrap;
+ }
+}

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

@@ -0,0 +1,22 @@
+/*
+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.
+*/
+
+.mx_SettingsIndent {
+ padding-left: 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}

src/components/views/elements/Tag.tsx

@@ -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 && (

src/components/views/elements/TagComposer.tsx

@@ -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>