From 469413bc2737334238385d9220de3af5862f364e Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Mon, 1 May 2023 16:07:37 +1200 Subject: [PATCH 01/16] settingssubsection text component --- .../__snapshots__/SecurityRecommendations-test.tsx.snap | 6 +++--- .../shared/__snapshots__/SettingsSubsection-test.tsx.snap | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap index 190fc3d2d05..9d8af7aa178 100644 --- a/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap +++ b/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap @@ -16,7 +16,7 @@ exports[` renders both cards when user has both unver
renders inactive devices section when user
renders unverified devices section when use
renders with plain text description 1`] = `
renders with react element description 1`] = `
Date: Mon, 1 May 2023 17:00:50 +1200 Subject: [PATCH 02/16] use semantic headings in HelpUserSetttings tab --- test/components/views/dialogs/UserSettingsDialog-test.tsx | 2 +- .../__snapshots__/SecurityRecommendations-test.tsx.snap | 6 +++--- .../shared/__snapshots__/SettingsSubsection-test.tsx.snap | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/test/components/views/dialogs/UserSettingsDialog-test.tsx b/test/components/views/dialogs/UserSettingsDialog-test.tsx index 5e610b87ba7..c5e831c3947 100644 --- a/test/components/views/dialogs/UserSettingsDialog-test.tsx +++ b/test/components/views/dialogs/UserSettingsDialog-test.tsx @@ -15,7 +15,7 @@ limitations under the License. */ import React, { ReactElement } from "react"; -import { render } from "@testing-library/react"; +import { render, screen } from "@testing-library/react"; import { mocked } from "jest-mock"; import SettingsStore, { CallbackFn } from "../../../../src/settings/SettingsStore"; diff --git a/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap index 9d8af7aa178..190fc3d2d05 100644 --- a/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap +++ b/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap @@ -16,7 +16,7 @@ exports[` renders both cards when user has both unver
renders inactive devices section when user
renders unverified devices section when use
renders with plain text description 1`] = `
renders with react element description 1`] = `
Date: Tue, 2 May 2023 18:19:28 +1200 Subject: [PATCH 03/16] test --- src/components/structures/RoomStatusBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/RoomStatusBar.tsx b/src/components/structures/RoomStatusBar.tsx index 7afc9025e29..3be594fcebd 100644 --- a/src/components/structures/RoomStatusBar.tsx +++ b/src/components/structures/RoomStatusBar.tsx @@ -214,7 +214,7 @@ export default class RoomStatusBar extends React.PureComponent { {}, { consentLink: (sub) => ( - + {sub} ), From 267d5797c0f7a26daa74b02e40a46ac4d24ba1f8 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 3 May 2023 09:03:18 +1200 Subject: [PATCH 04/16] strict --- src/components/structures/RoomStatusBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/RoomStatusBar.tsx b/src/components/structures/RoomStatusBar.tsx index 3be594fcebd..7afc9025e29 100644 --- a/src/components/structures/RoomStatusBar.tsx +++ b/src/components/structures/RoomStatusBar.tsx @@ -214,7 +214,7 @@ export default class RoomStatusBar extends React.PureComponent { {}, { consentLink: (sub) => ( - + {sub} ), From 4eba85fec40beb9eb213992b40293372d23810fe Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 3 May 2023 14:56:07 +1200 Subject: [PATCH 05/16] lint --- test/components/views/dialogs/UserSettingsDialog-test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/components/views/dialogs/UserSettingsDialog-test.tsx b/test/components/views/dialogs/UserSettingsDialog-test.tsx index c5e831c3947..5e610b87ba7 100644 --- a/test/components/views/dialogs/UserSettingsDialog-test.tsx +++ b/test/components/views/dialogs/UserSettingsDialog-test.tsx @@ -15,7 +15,7 @@ limitations under the License. */ import React, { ReactElement } from "react"; -import { render, screen } from "@testing-library/react"; +import { render } from "@testing-library/react"; import { mocked } from "jest-mock"; import SettingsStore, { CallbackFn } from "../../../../src/settings/SettingsStore"; From 00c7158af219e828a54bea3e24b114f004d1a659 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 3 May 2023 15:27:18 +1200 Subject: [PATCH 06/16] semantic heading in labs settings --- res/css/_components.pcss | 1 - res/css/views/beta/_BetaCard.pcss | 5 - .../tabs/user/_LabsUserSettingsTab.pcss | 27 --- .../tabs/user/LabsUserSettingsTab.tsx | 51 ++--- .../tabs/user/LabsUserSettingsTab-test.tsx | 17 +- .../LabsUserSettingsTab-test.tsx.snap | 187 ++++++++++-------- 6 files changed, 138 insertions(+), 150 deletions(-) delete mode 100644 res/css/views/settings/tabs/user/_LabsUserSettingsTab.pcss diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 3a70f71c930..538556a9149 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -344,7 +344,6 @@ @import "./views/settings/tabs/user/_GeneralUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_HelpUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_KeyboardUserSettingsTab.pcss"; -@import "./views/settings/tabs/user/_LabsUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_MjolnirUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_PreferencesUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_SecurityUserSettingsTab.pcss"; diff --git a/res/css/views/beta/_BetaCard.pcss b/res/css/views/beta/_BetaCard.pcss index 591fff2d954..62f7d7b93a7 100644 --- a/res/css/views/beta/_BetaCard.pcss +++ b/res/css/views/beta/_BetaCard.pcss @@ -15,7 +15,6 @@ limitations under the License. */ .mx_BetaCard { - margin-bottom: $spacing-20; padding: $spacing-24; background-color: $system; border-radius: 8px; @@ -114,10 +113,6 @@ limitations under the License. } } } - - &:last-child { - margin-bottom: 0; - } } .mx_BetaCard_betaPill { diff --git a/res/css/views/settings/tabs/user/_LabsUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_LabsUserSettingsTab.pcss deleted file mode 100644 index f10b681668c..00000000000 --- a/res/css/views/settings/tabs/user/_LabsUserSettingsTab.pcss +++ /dev/null @@ -1,27 +0,0 @@ -/* -Copyright 2021 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_LabsUserSettingsTab { - .mx_SettingsTab_subsectionText, - .mx_SettingsTab_section { - margin-bottom: var(--SettingsTab_section-margin-bottom-preferences-labs); - } - - .mx_SettingsFlag { - margin-right: 0; /* remove right margin to align with beta cards */ - align-items: center; - } -} diff --git a/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx b/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx index f505ebb76f9..641eef0acbe 100644 --- a/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx @@ -25,6 +25,9 @@ import BetaCard from "../../../beta/BetaCard"; import SettingsFlag from "../../../elements/SettingsFlag"; import { LabGroup, labGroupNames } from "../../../../../settings/Settings"; import { EnhancedMap } from "../../../../../utils/maps"; +import SettingsTab from "../SettingsTab"; +import { SettingsSection } from "../../shared/SettingsSection"; +import SettingsSubsection, { SettingsSubsectionText } from "../../shared/SettingsSubsection"; export default class LabsUserSettingsTab extends React.Component<{}> { private readonly labs: string[]; @@ -54,11 +57,11 @@ export default class LabsUserSettingsTab extends React.Component<{}> { let betaSection: JSX.Element | undefined; if (this.betas.length) { betaSection = ( -
+ <> {this.betas.map((f) => ( ))} -
+ ); } @@ -93,31 +96,35 @@ export default class LabsUserSettingsTab extends React.Component<{}> { labsSections = ( <> {sortBy(Array.from(groups.entries()), "0").map(([group, flags]) => ( -
- {_t(labGroupNames[group])} + {flags} -
+ ))} ); } return ( -
-
{_t("Upcoming features")}
-
- {_t( - "What's next for %(brand)s? " + - "Labs are the best way to get things early, " + - "test out new features and help shape them before they actually launch.", - { brand: SdkConfig.get("brand") }, - )} -
- {betaSection} + + + + {_t( + "What's next for %(brand)s? " + + "Labs are the best way to get things early, " + + "test out new features and help shape them before they actually launch.", + { brand: SdkConfig.get("brand") }, + )} + + {betaSection} + + {labsSections && ( - <> -
{_t("Early previews")}
-
+ + {_t( "Feeling experimental? " + "Try out our latest ideas in development. " + @@ -139,11 +146,11 @@ export default class LabsUserSettingsTab extends React.Component<{}> { }, }, )} -
+ {labsSections} - + )} -
+ ); } } diff --git a/test/components/views/settings/tabs/user/LabsUserSettingsTab-test.tsx b/test/components/views/settings/tabs/user/LabsUserSettingsTab-test.tsx index ddf6105274c..4933deda6d2 100644 --- a/test/components/views/settings/tabs/user/LabsUserSettingsTab-test.tsx +++ b/test/components/views/settings/tabs/user/LabsUserSettingsTab-test.tsx @@ -15,7 +15,7 @@ limitations under the License. */ import React from "react"; -import { render, waitFor } from "@testing-library/react"; +import { render, screen, waitFor } from "@testing-library/react"; import { defer } from "matrix-js-sdk/src/utils"; import LabsUserSettingsTab from "../../../../../../src/components/views/settings/tabs/user/LabsUserSettingsTab"; @@ -51,17 +51,16 @@ describe("", () => { }); it("renders settings marked as beta as beta cards", () => { - const { getByTestId } = render(getComponent()); - expect(getByTestId("labs-beta-section")).toMatchSnapshot(); + render(getComponent()); + expect(screen.getByText("Upcoming features").parentElement!).toMatchSnapshot(); }); it("does not render non-beta labs settings when disabled in config", () => { - const { container } = render(getComponent()); + render(getComponent()); expect(sdkConfigSpy).toHaveBeenCalledWith("show_labs_settings"); - const labsSections = container.getElementsByClassName("mx_SettingsTab_section"); // only section is beta section - expect(labsSections.length).toEqual(1); + expect(screen.queryByText("Early previews")).not.toBeInTheDocument(); }); it("renders non-beta labs settings when enabled in config", () => { @@ -69,8 +68,10 @@ describe("", () => { sdkConfigSpy.mockImplementation((configName) => configName === "show_labs_settings"); const { container } = render(getComponent()); - const labsSections = container.getElementsByClassName("mx_SettingsTab_section"); - expect(labsSections).toHaveLength(12); + // non-beta labs section + expect(screen.getByText("Early previews")).toBeInTheDocument(); + const labsSections = container.getElementsByClassName("mx_SettingsSubsection"); + expect(labsSections).toHaveLength(11); }); it("allow setting a labs flag which requires unstable support once support is confirmed", async () => { diff --git a/test/components/views/settings/tabs/user/__snapshots__/LabsUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/LabsUserSettingsTab-test.tsx.snap index 2d562b8c32f..8d7d5628095 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/LabsUserSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/user/__snapshots__/LabsUserSettingsTab-test.tsx.snap @@ -2,121 +2,134 @@ exports[` renders settings marked as beta as beta cards 1`] = `
+

+ Upcoming features +

+ What's next for false? Labs are the best way to get things early, test out new features and help shape them before they actually launch. +
+
-

- - Video rooms - - - Beta - -

-

- A new way to chat over voice and video in . -

-

- Video rooms are always-on VoIP channels embedded within a room in . -

-
-
+

+ + Video rooms + + + Beta + +

- Join the beta +

+ A new way to chat over voice and video in . +

+

+ Video rooms are always-on VoIP channels embedded within a room in . +

+
+
+ Join the beta +
+
+
+ Joining the beta will reload . +
+
- Joining the beta will reload . +
-
-
-
-
-
-
-

- - New session manager - - - Beta - -

-

- Have greater visibility and control over all your sessions. -

-

- Our new sessions manager provides better visibility of all your sessions, and greater control over them including the ability to remotely toggle push notifications. -

-
-
+

+ + New session manager + + + Beta + +

- Join the beta +

+ Have greater visibility and control over all your sessions. +

+

+ Our new sessions manager provides better visibility of all your sessions, and greater control over them including the ability to remotely toggle push notifications. +

+
+
+
+ Join the beta +
-
-
- +
+ +
From a1f7bab453bada197cca7983d7a270faad37e612 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 3 May 2023 15:27:36 +1200 Subject: [PATCH 07/16] semantic headings in keyboard settings tab --- res/css/views/elements/_SettingsFlag.pcss | 1 + .../tabs/user/_KeyboardUserSettingsTab.pcss | 43 +- .../tabs/user/KeyboardUserSettingsTab.tsx | 33 +- .../tabs/user/PreferencesUserSettingsTab.tsx | 2 +- .../KeyboardUserSettingsTab-test.tsx.snap | 2044 +++++++++-------- 5 files changed, 1098 insertions(+), 1025 deletions(-) diff --git a/res/css/views/elements/_SettingsFlag.pcss b/res/css/views/elements/_SettingsFlag.pcss index b3908a158ad..16be54ef3c9 100644 --- a/res/css/views/elements/_SettingsFlag.pcss +++ b/res/css/views/elements/_SettingsFlag.pcss @@ -20,6 +20,7 @@ limitations under the License. align-items: flex-start; justify-content: space-between; margin-bottom: 4px; + width: 100%; .mx_ToggleSwitch { flex: 0 0 auto; diff --git a/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss index 6f387380f24..c4e5b5c0aa0 100644 --- a/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss +++ b/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss @@ -15,31 +15,26 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_KeyboardUserSettingsTab .mx_SettingsTab_section { - ul { - margin: 0; - padding: 0; - } - - .mx_KeyboardShortcut_shortcutRow, - .mx_KeyboardShortcut { - display: flex; - justify-content: space-between; - align-items: center; - } +.mx_KeyboardShortcut_shortcutList { + margin: 0; + padding: 0; + width: 100%; + display: grid; + grid-gap: $spacing-4; +} - .mx_KeyboardShortcut_shortcutRow { - column-gap: $spacing-8; - margin-bottom: $spacing-4; +.mx_KeyboardShortcut_shortcutRow, +.mx_KeyboardShortcut { + display: flex; + justify-content: space-between; + align-items: center; +} - /* TODO: Use flexbox */ - &:last-of-type { - margin-bottom: 0; - } +.mx_KeyboardShortcut_shortcutRow { + column-gap: $spacing-8; +} - .mx_KeyboardShortcut { - flex-wrap: nowrap; - column-gap: 5px; /* TODO: Use a spacing variable */ - } - } +.mx_KeyboardShortcut { + flex-wrap: nowrap; + column-gap: $spacing-4; } diff --git a/src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx b/src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx index ef79b98d483..c6cb4f1f0ab 100644 --- a/src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx @@ -25,6 +25,9 @@ import { getKeyboardShortcutValue, } from "../../../../../accessibility/KeyboardShortcutUtils"; import { KeyboardShortcut } from "../../KeyboardShortcut"; +import SettingsTab from "../SettingsTab"; +import { SettingsSection } from "../../shared/SettingsSection"; +import SettingsSubsection from "../../shared/SettingsSubsection"; interface IKeyboardShortcutRowProps { name: KeyBindingAction; @@ -57,26 +60,32 @@ const KeyboardShortcutSection: React.FC = ({ cate if (!category.categoryLabel) return null; return ( -
-
{_t(category.categoryLabel)}
-
    - {" "} + +
      + {/* {" "} */} {category.settingNames.map((shortcutName) => { return ; - })}{" "} + })} + {/* {" "} */}
    -
+ ); }; const KeyboardUserSettingsTab: React.FC = () => { return ( -
-
{_t("Keyboard")}
- {visibleCategories.map(([categoryName, category]: [CategoryName, ICategory]) => { - return ; - })} -
+ + + {visibleCategories.map(([categoryName, category]: [CategoryName, ICategory]) => { + return ( + + ); + })} + + + //
+ //
{_t("Keyboard")}
+ //
); }; diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx index 4fbb174516a..a3637ad4a81 100644 --- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx @@ -1,5 +1,5 @@ /* -Copyright 2019-2021 The Matrix.org Foundation C.I.C. +Copyright 2019-2023 The Matrix.org Foundation C.I.C. Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> Licensed under the Apache License, Version 2.0 (the "License"); diff --git a/test/components/views/settings/tabs/user/__snapshots__/KeyboardUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/KeyboardUserSettingsTab-test.tsx.snap index 112497f7bfe..9d0badffdad 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/KeyboardUserSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/user/__snapshots__/KeyboardUserSettingsTab-test.tsx.snap @@ -3,1023 +3,1091 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
- Keyboard -
-
-
- Composer -
-
    - -
  • - Send message -
    - - - Enter - - -
    -
    • -
  • - New line -
    - - - Shift - - - + - - - Enter - - -
    -
    • -
  • - Toggle Bold -
    - - - Ctrl - - - + - - - b - - -
    -
    • -
  • - Toggle Italics -
    - - - Ctrl - - - + - - - i - - -
    -
    • -
  • - Toggle Quote -
    - - - Ctrl - - - + - - - Shift - - - + - - - > - - -
    -
    • -
  • - Toggle Link -
    - - - Ctrl - - - + - - - Shift - - - + - - - l - - -
    -
    • -
  • - Toggle Code Block -
    - - - Ctrl - - - + - - - e - - -
    -
    • -
  • - Undo edit -
    - - - Ctrl - - - + - - - z - - -
    -
    • -
  • - Redo edit -
    - - - Ctrl - - - + - - - y - - -
    -
    • -
  • - Jump to start of the composer -
    - - - Ctrl - - - + - - - Home - - -
    -
    • -
  • - Jump to end of the composer -
    - - - Ctrl - - - + - - - End - - -
    -
    • -
  • - Cancel replying to a message -
    - - - Esc - - -
    -
    • -
  • - Navigate to next message to edit -
    - - - ↓ - - -
    -
    • -
  • - Navigate to previous message to edit -
    - - - ↑ - - -
    -
    • -
  • - Navigate to next message in composer history -
    - - - Ctrl - - - + - - - Alt - - - + - - - ↓ - - -
    -
    • -
  • - Navigate to previous message in composer history -
    - - - Ctrl - - - + - - - Alt - - - + - - - ↑ - - -
    -
    • -
  • - Send a sticker -
    - - - Ctrl - - - + - - - ; - - -
    -
    • - -
-
-
-
- Calls -
-
    - -
  • - Toggle microphone mute -
    - - - Ctrl - - - + - - - d - - -
    -
    • -
  • - Toggle webcam on/off -
    - - - Ctrl - - - + - - - e - - -
    -
    • - -
-
-
-
- Room -
-
    - -
  • - Search (must be enabled) -
    - - - Ctrl - - - + - - - f - - -
    -
    • -
  • - Upload a file -
    - - - Ctrl - - - + - - - Shift - - - + - - - u - - -
    -
    • -
  • - Dismiss read marker and jump to bottom -
    - - - Esc - - -
    -
    • -
  • - Jump to oldest unread message -
    - - - Shift - - - + - - - Page Up - - -
    -
    • -
  • - Scroll up in the timeline -
    - - - Page Up - - -
    -
    • -
  • - Scroll down in the timeline -
    - - - Page Down - - -
    -
    • -
  • - Jump to first message -
    - - - Ctrl - - - + - - - Home - - -
    -
    • -
  • - Jump to last message -
    - - - Ctrl - - - + - - - End - - -
    -
    • - -
-
-
-
- Room List -
-
    - -
  • - Select room from the room list -
    - - - Enter - - -
    -
    • -
  • - Collapse room list section -
    - - - ← - - -
    -
    • -
  • - Expand room list section -
    - - - → - - -
    -
    • -
  • - Navigate down in the room list -
    - - - ↓ - - -
    -
    • -
  • - Navigate up in the room list -
    - - - ↑ - - -
    -
    • - -
-
-
-
- Accessibility -
-
    - -
  • - Close dialog or context menu -
    - - - Esc - - -
    -
    • -
  • - Activate selected button -
    - - - Enter - - -
    -
    • - -
-
-
- Navigation -
-
    - -
  • - Toggle the top left menu -
    - - - Ctrl - - - + - - - \` - - -
    -
    • -
  • +
    - Toggle right panel
    - - - Ctrl - - - + - - - . - - +
    +

    + Composer +

    +
    +
    +
      +
    • + Send message +
      + + + Enter + + +
      +
      • +
    • + New line +
      + + + Shift + + + + + + + Enter + + +
      +
      • +
    • + Toggle Bold +
      + + + Ctrl + + + + + + + b + + +
      +
      • +
    • + Toggle Italics +
      + + + Ctrl + + + + + + + i + + +
      +
      • +
    • + Toggle Quote +
      + + + Ctrl + + + + + + + Shift + + + + + + + > + + +
      +
      • +
    • + Toggle Link +
      + + + Ctrl + + + + + + + Shift + + + + + + + l + + +
      +
      • +
    • + Toggle Code Block +
      + + + Ctrl + + + + + + + e + + +
      +
      • +
    • + Undo edit +
      + + + Ctrl + + + + + + + z + + +
      +
      • +
    • + Redo edit +
      + + + Ctrl + + + + + + + y + + +
      +
      • +
    • + Jump to start of the composer +
      + + + Ctrl + + + + + + + Home + + +
      +
      • +
    • + Jump to end of the composer +
      + + + Ctrl + + + + + + + End + + +
      +
      • +
    • + Cancel replying to a message +
      + + + Esc + + +
      +
      • +
    • + Navigate to next message to edit +
      + + + ↓ + + +
      +
      • +
    • + Navigate to previous message to edit +
      + + + ↑ + + +
      +
      • +
    • + Navigate to next message in composer history +
      + + + Ctrl + + + + + + + Alt + + + + + + + ↓ + + +
      +
      • +
    • + Navigate to previous message in composer history +
      + + + Ctrl + + + + + + + Alt + + + + + + + ↑ + + +
      +
      • +
    • + Send a sticker +
      + + + Ctrl + + + + + + + ; + + +
      +
      • +
    +
    -
    • -
  • - Toggle space panel
    - - - Ctrl - - - + - - - Shift - - - + - - - d - - +
    +

    + Calls +

    +
    +
    +
      +
    • + Toggle microphone mute +
      + + + Ctrl + + + + + + + d + + +
      +
      • +
    • + Toggle webcam on/off +
      + + + Ctrl + + + + + + + e + + +
      +
      • +
    +
    -
    • -
  • - Open this settings tab
    - - - Ctrl - - - + - - - / - - +
    +

    + Room +

    +
    +
    +
      +
    • + Search (must be enabled) +
      + + + Ctrl + + + + + + + f + + +
      +
      • +
    • + Upload a file +
      + + + Ctrl + + + + + + + Shift + + + + + + + u + + +
      +
      • +
    • + Dismiss read marker and jump to bottom +
      + + + Esc + + +
      +
      • +
    • + Jump to oldest unread message +
      + + + Shift + + + + + + + Page Up + + +
      +
      • +
    • + Scroll up in the timeline +
      + + + Page Up + + +
      +
      • +
    • + Scroll down in the timeline +
      + + + Page Down + + +
      +
      • +
    • + Jump to first message +
      + + + Ctrl + + + + + + + Home + + +
      +
      • +
    • + Jump to last message +
      + + + Ctrl + + + + + + + End + + +
      +
      • +
    +
    -
    • -
  • - Go to Home View
    - - - Ctrl - - - + - - - Alt - - - + - - - h - - +
    +

    + Room List +

    +
    +
    +
      +
    • + Select room from the room list +
      + + + Enter + + +
      +
      • +
    • + Collapse room list section +
      + + + ← + + +
      +
      • +
    • + Expand room list section +
      + + + → + + +
      +
      • +
    • + Navigate down in the room list +
      + + + ↓ + + +
      +
      • +
    • + Navigate up in the room list +
      + + + ↑ + + +
      +
      • +
    +
    -
    • -
  • - Jump to room search
    - - - Ctrl - - - + - - - k - - +
    +

    + Accessibility +

    +
    +
    +
      +
    • + Close dialog or context menu +
      + + + Esc + + +
      +
      • +
    • + Activate selected button +
      + + + Enter + + +
      +
      • +
    +
    -
    • -
  • - Next unread room or DM
    - - - Alt - - - + - - - Shift - - - + - - - ↓ - - +
    +

    + Navigation +

    +
    +
    +
      +
    • + Toggle the top left menu +
      + + + Ctrl + + + + + + + \` + + +
      +
      • +
    • + Toggle right panel +
      + + + Ctrl + + + + + + + . + + +
      +
      • +
    • + Toggle space panel +
      + + + Ctrl + + + + + + + Shift + + + + + + + d + + +
      +
      • +
    • + Open this settings tab +
      + + + Ctrl + + + + + + + / + + +
      +
      • +
    • + Go to Home View +
      + + + Ctrl + + + + + + + Alt + + + + + + + h + + +
      +
      • +
    • + Jump to room search +
      + + + Ctrl + + + + + + + k + + +
      +
      • +
    • + Next unread room or DM +
      + + + Alt + + + + + + + Shift + + + + + + + ↓ + + +
      +
      • +
    • + Previous unread room or DM +
      + + + Alt + + + + + + + Shift + + + + + + + ↑ + + +
      +
      • +
    • + Next room or DM +
      + + + Alt + + + + + + + ↓ + + +
      +
      • +
    • + Previous room or DM +
      + + + Alt + + + + + + + ↑ + + +
      +
      • +
    +
    -
    • -
  • - Previous unread room or DM
    - - - Alt - - - + - - - Shift - - - + - - - ↑ - - +
    +

    + Autocomplete +

    +
    +
    +
      +
    • + Cancel autocomplete +
      + + + Esc + + +
      +
      • +
    • + Next autocomplete suggestion +
      + + + ↓ + + +
      +
      • +
    • + Previous autocomplete suggestion +
      + + + ↑ + + +
      +
      • +
    • + Complete +
      + + + Enter + + +
      +
      • +
    • + Force complete +
      + + + Tab + + +
      +
      • +
    +
    -
    • -
  • - Next room or DM -
    - - - Alt - - - + - - - ↓ - - -
    -
    • -
  • - Previous room or DM -
    - - - Alt - - - + - - - ↑ - - -
    -
    • - -
-
-
-
- Autocomplete +
-
    - -
  • - Cancel autocomplete -
    - - - Esc - - -
    -
    • -
  • - Next autocomplete suggestion -
    - - - ↓ - - -
    -
    • -
  • - Previous autocomplete suggestion -
    - - - ↑ - - -
    -
    • -
  • - Complete -
    - - - Enter - - -
    -
    • -
  • - Force complete -
    - - - Tab - - -
    -
    • - -
From aef9c7e8ed67b95ce881815ca519520ae14addc0 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 3 May 2023 15:47:25 +1200 Subject: [PATCH 08/16] semantic heading in preferencesusersettingstab --- .../preferences-user-settings-tab.spec.ts | 6 +- res/css/_components.pcss | 1 - .../settings/shared/_SettingsSubsection.pcss | 4 + res/css/views/settings/tabs/_SettingsTab.pcss | 1 - .../user/_PreferencesUserSettingsTab.pcss | 25 - .../settings/shared/SettingsSubsection.tsx | 19 +- .../views/settings/tabs/SettingsTab.tsx | 8 +- .../tabs/user/PreferencesUserSettingsTab.tsx | 190 +- .../PreferencesUserSettingsTab-test.tsx.snap | 2118 +++++++++-------- 9 files changed, 1231 insertions(+), 1141 deletions(-) delete mode 100644 res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss diff --git a/cypress/e2e/settings/preferences-user-settings-tab.spec.ts b/cypress/e2e/settings/preferences-user-settings-tab.spec.ts index ad16f0a1c59..397a00a9ef8 100644 --- a/cypress/e2e/settings/preferences-user-settings-tab.spec.ts +++ b/cypress/e2e/settings/preferences-user-settings-tab.spec.ts @@ -35,12 +35,12 @@ describe("Preferences user settings tab", () => { it("should be rendered properly", () => { cy.openUserSettings("Preferences"); - cy.get(".mx_SettingsTab.mx_PreferencesUserSettingsTab").within(() => { + cy.get("[data-testid='mx_PreferencesUserSettingsTab']").within(() => { // Assert that the top heading is rendered - cy.findByTestId("preferences").should("have.text", "Preferences").should("be.visible"); + cy.contains("Preferences").should("be.visible"); }); - cy.get(".mx_SettingsTab.mx_PreferencesUserSettingsTab").percySnapshotElement( + cy.get("[data-testid='mx_PreferencesUserSettingsTab']").percySnapshotElement( "User settings tab - Preferences", { // Emulate TabbedView's actual min and max widths diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 538556a9149..d96bd606605 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -345,7 +345,6 @@ @import "./views/settings/tabs/user/_HelpUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_KeyboardUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_MjolnirUserSettingsTab.pcss"; -@import "./views/settings/tabs/user/_PreferencesUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_SecurityUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_SidebarUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_VoiceUserSettingsTab.pcss"; diff --git a/res/css/components/views/settings/shared/_SettingsSubsection.pcss b/res/css/components/views/settings/shared/_SettingsSubsection.pcss index e90585122b5..9ab33c93536 100644 --- a/res/css/components/views/settings/shared/_SettingsSubsection.pcss +++ b/res/css/components/views/settings/shared/_SettingsSubsection.pcss @@ -46,4 +46,8 @@ limitations under the License. margin-bottom: $spacing-8; } } + + &.mx_SettingsSubsection_contentStretch { + justify-items: stretch; + } } diff --git a/res/css/views/settings/tabs/_SettingsTab.pcss b/res/css/views/settings/tabs/_SettingsTab.pcss index fac189e8587..b060a025418 100644 --- a/res/css/views/settings/tabs/_SettingsTab.pcss +++ b/res/css/views/settings/tabs/_SettingsTab.pcss @@ -15,7 +15,6 @@ limitations under the License. */ .mx_SettingsTab { - --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 */ diff --git a/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss deleted file mode 100644 index c7eb699d4c9..00000000000 --- a/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss +++ /dev/null @@ -1,25 +0,0 @@ -/* -Copyright 2019 New Vector Ltd - -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_PreferencesUserSettingsTab { - .mx_Field { - margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end); - } - - .mx_SettingsTab_section { - margin-bottom: var(--SettingsTab_section-margin-bottom-preferences-labs); - } -} diff --git a/src/components/views/settings/shared/SettingsSubsection.tsx b/src/components/views/settings/shared/SettingsSubsection.tsx index 8fcdf327a9a..6c60de1296f 100644 --- a/src/components/views/settings/shared/SettingsSubsection.tsx +++ b/src/components/views/settings/shared/SettingsSubsection.tsx @@ -14,6 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ +import classNames from "classnames"; import React, { HTMLAttributes } from "react"; import { SettingsSubsectionHeading } from "./SettingsSubsectionHeading"; @@ -22,6 +23,8 @@ export interface SettingsSubsectionProps extends HTMLAttributes heading: string | React.ReactNode; description?: string | React.ReactNode; children?: React.ReactNode; + // when true content will be justify-items: stretch + stretchContent?: boolean; } export const SettingsSubsectionText: React.FC> = ({ children, ...rest }) => ( @@ -30,7 +33,13 @@ export const SettingsSubsectionText: React.FC> =
); -export const SettingsSubsection: React.FC = ({ heading, description, children, ...rest }) => ( +export const SettingsSubsection: React.FC = ({ + heading, + description, + children, + stretchContent, + ...rest +}) => (
{typeof heading === "string" ? : <>{heading}} {!!description && ( @@ -38,7 +47,13 @@ export const SettingsSubsection: React.FC = ({ heading, {description}
)} -
{children}
+
+ {children} +
); diff --git a/src/components/views/settings/tabs/SettingsTab.tsx b/src/components/views/settings/tabs/SettingsTab.tsx index e9f25ec7406..16764e9460d 100644 --- a/src/components/views/settings/tabs/SettingsTab.tsx +++ b/src/components/views/settings/tabs/SettingsTab.tsx @@ -13,9 +13,9 @@ 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 React, { HTMLAttributes } from "react"; -export interface SettingsTabProps { +export interface SettingsTabProps extends Omit, "className"> { children?: React.ReactNode; } @@ -37,8 +37,8 @@ export interface SettingsTabProps { * * ``` */ -const SettingsTab: React.FC = ({ children }) => ( -
+const SettingsTab: React.FC = ({ children, ...rest }) => ( +
{children}
); diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx index a3637ad4a81..cc485dca45c 100644 --- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx @@ -30,6 +30,9 @@ import { OpenToTabPayload } from "../../../../../dispatcher/payloads/OpenToTabPa import { Action } from "../../../../../dispatcher/actions"; import SdkConfig from "../../../../../SdkConfig"; import { showUserOnboardingPage } from "../../../user-onboarding/UserOnboardingPage"; +import SettingsSubsection from "../../shared/SettingsSubsection"; +import SettingsTab from "../SettingsTab"; +import { SettingsSection } from "../../shared/SettingsSection"; interface IProps { closeSettingsFn(success: boolean): void; @@ -143,27 +146,21 @@ export default class PreferencesUserSettingsTab extends React.Component it !== "FTUE.userOnboardingButton" || showUserOnboardingPage(useCase)); return ( -
-
- {_t("Preferences")} -
- - {roomListSettings.length > 0 && ( -
- {_t("Room list")} - {this.renderGroup(roomListSettings)} -
- )} - -
- {_t("Spaces")} - {this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS, SettingLevel.ACCOUNT)} -
- -
- {_t("Keyboard shortcuts")} -
- {_t( + + + {roomListSettings.length > 0 && ( + + {this.renderGroup(roomListSettings)} + + )} + + + {this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS, SettingLevel.ACCOUNT)} + + + click here.", {}, { @@ -174,85 +171,78 @@ export default class PreferencesUserSettingsTab extends React.Component - {this.renderGroup(PreferencesUserSettingsTab.KEYBINDINGS_SETTINGS)} -
- -
- {_t("Displaying time")} - {this.renderGroup(PreferencesUserSettingsTab.TIME_SETTINGS)} -
- -
- {_t("Presence")} - - {_t("Share your activity and status with others.")} - - {this.renderGroup(PreferencesUserSettingsTab.PRESENCE_SETTINGS)} -
- -
- {_t("Composer")} - {this.renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)} -
- -
- {_t("Code blocks")} - {this.renderGroup(PreferencesUserSettingsTab.CODE_BLOCKS_SETTINGS)} -
- -
- {_t("Images, GIFs and videos")} - {this.renderGroup(PreferencesUserSettingsTab.IMAGES_AND_VIDEOS_SETTINGS)} -
- -
- {_t("Timeline")} - {this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)} -
- -
- {_t("Room directory")} - {this.renderGroup(PreferencesUserSettingsTab.ROOM_DIRECTORY_SETTINGS)} -
- -
- {_t("General")} - {this.renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)} - - - - - - - - - - -
-
+ > + {this.renderGroup(PreferencesUserSettingsTab.KEYBINDINGS_SETTINGS)} + + + + {this.renderGroup(PreferencesUserSettingsTab.TIME_SETTINGS)} + + + + {this.renderGroup(PreferencesUserSettingsTab.PRESENCE_SETTINGS)} + + + + {this.renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)} + + + + {this.renderGroup(PreferencesUserSettingsTab.CODE_BLOCKS_SETTINGS)} + + + + {this.renderGroup(PreferencesUserSettingsTab.IMAGES_AND_VIDEOS_SETTINGS)} + + + + {this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)} + + + + {this.renderGroup(PreferencesUserSettingsTab.ROOM_DIRECTORY_SETTINGS)} + + + + {this.renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)} + + + + + + + + + + + + + ); } } diff --git a/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap index 45340dac369..2426d97f3a7 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap @@ -3,1046 +3,1154 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
- Preferences -
-
- - Room list -
- + Preferences +
-
-
-
-
-
- - Spaces - -
-