mirror of
https://github.com/element-hq/element-web
synced 2024-11-21 16:55:34 +03:00
Use semantic headings in user settings - Ignored users (#11006)
* 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
GitHub
parent
3847367088
commit
7ef6e1b6f8
6 changed files with 262 additions and 49 deletions
|
|
@ -17,7 +17,6 @@ limitations under the License.
|
|||
.mx_SettingsSection {
|
||||
--SettingsTab_section-margin-bottom-preferences-labs: 30px;
|
||||
--SettingsTab_heading_nth_child-margin-top: 30px; /* TODO: Use a spacing variable */
|
||||
--SettingsTab_fullWidthField-margin-inline-end: 100px;
|
||||
--SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */
|
||||
|
||||
color: $primary-content;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ limitations under the License.
|
|||
|
||||
.mx_SettingsTab {
|
||||
--SettingsTab_heading_nth_child-margin-top: 30px; /* TODO: Use a spacing variable */
|
||||
--SettingsTab_fullWidthField-margin-inline-end: 100px;
|
||||
--SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */
|
||||
|
||||
color: $primary-content;
|
||||
|
|
|
|||
|
|
@ -14,10 +14,6 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_MjolnirUserSettingsTab .mx_Field {
|
||||
margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
|
||||
}
|
||||
|
||||
.mx_MjolnirUserSettingsTab_listItem {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { render } from "@testing-library/react";
|
||||
|
||||
import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../../../test-utils";
|
||||
import MjolnirUserSettingsTab from "../../../../../../src/components/views/settings/tabs/user/MjolnirUserSettingsTab";
|
||||
import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
|
||||
import SettingsStore from "../../../../../../src/settings/SettingsStore";
|
||||
|
||||
describe("<MjolnirUserSettingsTab />", () => {
|
||||
const userId = "@alice:server.org";
|
||||
const mockClient = getMockClientWithEventEmitter({
|
||||
...mockClientMethodsUser(userId),
|
||||
getRoom: jest.fn(),
|
||||
});
|
||||
|
||||
const getComponent = () =>
|
||||
render(<MjolnirUserSettingsTab />, {
|
||||
wrapper: ({ children }) => (
|
||||
<MatrixClientContext.Provider value={mockClient}>{children}</MatrixClientContext.Provider>
|
||||
),
|
||||
});
|
||||
|
||||
it("renders correctly when user has no ignored users", () => {
|
||||
jest.spyOn(SettingsStore, "getValue").mockReturnValue(null);
|
||||
const { container } = getComponent();
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<MjolnirUserSettingsTab /> renders correctly when user has no ignored users 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_SettingsTab"
|
||||
>
|
||||
<div
|
||||
class="mx_SettingsTab_sections"
|
||||
>
|
||||
<div
|
||||
class="mx_SettingsSection"
|
||||
>
|
||||
<h2
|
||||
class="mx_Heading_h2"
|
||||
>
|
||||
Ignored users
|
||||
</h2>
|
||||
<div
|
||||
class="mx_SettingsSection_subSections"
|
||||
>
|
||||
<div
|
||||
class="mx_SettingsSubsection_text"
|
||||
>
|
||||
<span
|
||||
class="warning"
|
||||
>
|
||||
⚠ These settings are meant for advanced users.
|
||||
</span>
|
||||
<p>
|
||||
<span>
|
||||
Add users and servers you want to ignore here. Use asterisks to have Element match any characters. For example,
|
||||
<code>
|
||||
@bot:*
|
||||
</code>
|
||||
would ignore all users that have the name 'bot' on any server.
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
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>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SettingsSubsection"
|
||||
>
|
||||
<div
|
||||
class="mx_SettingsSubsectionHeading"
|
||||
>
|
||||
<h3
|
||||
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
|
||||
>
|
||||
Personal ban list
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SettingsSubsection_description"
|
||||
>
|
||||
<div
|
||||
class="mx_SettingsSubsection_text"
|
||||
>
|
||||
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 'My Ban List' - stay in this room to keep the ban list in effect.
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SettingsSubsection_content"
|
||||
>
|
||||
<i>
|
||||
You have not ignored anyone.
|
||||
</i>
|
||||
<form
|
||||
autocomplete="off"
|
||||
>
|
||||
<div
|
||||
class="mx_Field mx_Field_input"
|
||||
>
|
||||
<input
|
||||
id="mx_Field_1"
|
||||
label="Server or user ID to ignore"
|
||||
placeholder="eg: @bot:* or example.org"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<label
|
||||
for="mx_Field_1"
|
||||
>
|
||||
Server or user ID to ignore
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
type="submit"
|
||||
>
|
||||
Ignore
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SettingsSubsection"
|
||||
>
|
||||
<div
|
||||
class="mx_SettingsSubsectionHeading"
|
||||
>
|
||||
<h3
|
||||
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
|
||||
>
|
||||
Subscribed lists
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SettingsSubsection_description"
|
||||
>
|
||||
<div
|
||||
class="mx_SettingsSubsection_text"
|
||||
>
|
||||
<span
|
||||
class="warning"
|
||||
>
|
||||
Subscribing to a ban list will cause you to join it!
|
||||
</span>
|
||||
|
||||
<span>
|
||||
If this isn't what you want, please use a different tool to ignore users.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SettingsSubsection_content"
|
||||
>
|
||||
<i>
|
||||
You are not subscribed to any lists
|
||||
</i>
|
||||
<form
|
||||
autocomplete="off"
|
||||
>
|
||||
<div
|
||||
class="mx_Field mx_Field_input"
|
||||
>
|
||||
<input
|
||||
id="mx_Field_2"
|
||||
label="Room ID or address of ban list"
|
||||
placeholder="Room ID or address of ban list"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<label
|
||||
for="mx_Field_2"
|
||||
>
|
||||
Room ID or address of ban list
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
type="submit"
|
||||
>
|
||||
Subscribe
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
Loading…
Reference in a new issue