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 2023-06-29 17:46:31 +02:00 committed by GitHub
parent 95283d21bb
commit f62fe2626c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 3797 additions and 33 deletions

View file

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

View file

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