imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use semantic headings in user settings - Ignored users (#11006)

Browse source 
* account password section

* account email and phone numbers

* update cypress selectors

* use settingsection for General section

* use semantic headings for profile settings

* fix show advanced spacing

* udpate snapshot

* use semantic headings in mjolnir settings

* remove debug

* unit test UI changes for mjolnir settings
This commit is contained in:
Kerry 2023-05-31 10:42:53 +12:00 • committed by GitHub
parent 3847367088
commit 7ef6e1b6f8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 262 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

90
src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx
View file

@ -28,6 +28,9 @@ import ErrorDialog from "../../../dialogs/ErrorDialog";
import QuestionDialog from "../../../dialogs/QuestionDialog";
import AccessibleButton from "../../../elements/AccessibleButton";
import Field from "../../../elements/Field";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
import SettingsSubsection, { SettingsSubsectionText } from "../../shared/SettingsSubsection";
interface IState {
busy: boolean;
@ -250,33 +253,30 @@ export default class MjolnirUserSettingsTab extends React.Component<{}, IState>
const brand = SdkConfig.get().brand;
return (
<div className="mx_SettingsTab mx_MjolnirUserSettingsTab">
<div className="mx_SettingsTab_heading">{_t("Ignored users")}</div>
<div className="mx_SettingsTab_section">
<div className="mx_SettingsTab_subsectionText">
<SettingsTab>
<SettingsSection heading={_t("Ignored users")}>
<SettingsSubsectionText>
<span className="warning">{_t("⚠ These settings are meant for advanced users.")}</span>
<br />
<br />
{_t(
"Add users and servers you want to ignore here. Use asterisks " +
"to have %(brand)s match any characters. For example, <code>@bot:*</code> " +
"would ignore all users that have the name 'bot' on any server.",
{ brand },
{ code: (s) => <code>{s}</code> },
)}
<br />
<br />
{_t(
"Ignoring people is done through ban lists which contain rules for " +
"who to ban. Subscribing to a ban list means the users/servers blocked by " +
"that list will be hidden from you.",
)}
</div>
</div>
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Personal ban list")}</span>
<div className="mx_SettingsTab_subsectionText">
{_t(
<p>
{_t(
"Add users and servers you want to ignore here. Use asterisks " +
"to have %(brand)s match any characters. For example, <code>@bot:*</code> " +
"would ignore all users that have the name 'bot' on any server.",
{ brand },
{ code: (s) => <code>{s}</code> },
)}
</p>
<p>
{_t(
"Ignoring people is done through ban lists which contain rules for " +
"who to ban. Subscribing to a ban list means the users/servers blocked by " +
"that list will be hidden from you.",
)}
</p>
</SettingsSubsectionText>
<SettingsSubsection
heading={_t("Personal ban list")}
description={_t(
"Your personal ban list holds all the users/servers you personally don't " +
"want to see messages from. After ignoring your first user/server, a new room " +
"will show up in your room list named '%(myBanList)s' - stay in this room to keep " +
@ -285,9 +285,8 @@ export default class MjolnirUserSettingsTab extends React.Component<{}, IState>
myBanList: _t("My Ban List"),
},
)}
</div>
<div>{this.renderPersonalBanListRules()}</div>
<div>
>
{this.renderPersonalBanListRules()}
<form onSubmit={this.onAddPersonalRule} autoComplete="off">
<Field
type="text"
@ -305,17 +304,22 @@ export default class MjolnirUserSettingsTab extends React.Component<{}, IState>
{_t("Ignore")}
</AccessibleButton>
</form>
</div>
</div>
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Subscribed lists")}</span>
<div className="mx_SettingsTab_subsectionText">
<span className="warning">{_t("Subscribing to a ban list will cause you to join it!")}</span>
&nbsp;
<span>{_t("If this isn't what you want, please use a different tool to ignore users.")}</span>
</div>
<div>{this.renderSubscribedBanLists()}</div>
<div>
</SettingsSubsection>
<SettingsSubsection
heading={_t("Subscribed lists")}
description={
<>
<span className="warning">
{_t("Subscribing to a ban list will cause you to join it!")}
</span>
&nbsp;
<span>
{_t("If this isn't what you want, please use a different tool to ignore users.")}
</span>
</>
}
>
{this.renderSubscribedBanLists()}
<form onSubmit={this.onSubscribeList} autoComplete="off">
<Field
type="text"
@ -332,9 +336,9 @@ export default class MjolnirUserSettingsTab extends React.Component<{}, IState>
{_t("Subscribe")}
</AccessibleButton>
</form>
</div>
</div>
</div>
</SettingsSubsection>
</SettingsSection>
</SettingsTab>
);
}
}