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:
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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue