From 58c942be453927afc87b34d0d95c20fd71ba160f Mon Sep 17 00:00:00 2001 From: Kerry Date: Mon, 1 May 2023 10:37:40 +1200 Subject: [PATCH] split SettingsSection out of SettingsTab, replace usage (#10735) * split SettingsSection out of SettingsTab, replace usage * correct copyright * fix VoipRoomSettingsTab --- res/css/_components.pcss | 1 + res/css/views/settings/_SettingsFieldset.pcss | 6 +- .../views/settings/tabs/_SettingsSection.pcss | 36 ++++++ .../views/settings/shared/SettingsSection.tsx | 48 ++++++++ .../views/settings/tabs/SettingsTab.tsx | 24 +++- .../tabs/room/VoipRoomSettingsTab.tsx | 11 +- .../settings/tabs/user/SessionManagerTab.tsx | 113 +++++++++--------- .../views/settings/tabs/SettingsTab-test.tsx | 2 +- .../__snapshots__/SettingsTab-test.tsx.snap | 5 - 9 files changed, 174 insertions(+), 72 deletions(-) create mode 100644 res/css/views/settings/tabs/_SettingsSection.pcss create mode 100644 src/components/views/settings/shared/SettingsSection.tsx diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 2b0cf70b9c..f200429ced 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -339,6 +339,7 @@ @import "./views/settings/_SpellCheckLanguages.pcss"; @import "./views/settings/_ThemeChoicePanel.pcss"; @import "./views/settings/_UpdateCheckButton.pcss"; +@import "./views/settings/tabs/_SettingsSection.pcss"; @import "./views/settings/tabs/_SettingsTab.pcss"; @import "./views/settings/tabs/room/_GeneralRoomSettingsTab.pcss"; @import "./views/settings/tabs/room/_NotificationSettingsTab.pcss"; diff --git a/res/css/views/settings/_SettingsFieldset.pcss b/res/css/views/settings/_SettingsFieldset.pcss index 5e2d466568..556fcdf8eb 100644 --- a/res/css/views/settings/_SettingsFieldset.pcss +++ b/res/css/views/settings/_SettingsFieldset.pcss @@ -20,9 +20,11 @@ limitations under the License. } .mx_SettingsFieldset_legend { - font-size: $font-16px; - display: block; + // matches h3 + font-size: $font-18px; font-weight: var(--font-semi-bold); + line-height: $font-22px; + display: block; color: $primary-content; margin-bottom: 10px; margin-top: 12px; diff --git a/res/css/views/settings/tabs/_SettingsSection.pcss b/res/css/views/settings/tabs/_SettingsSection.pcss new file mode 100644 index 0000000000..b0388a1d7a --- /dev/null +++ b/res/css/views/settings/tabs/_SettingsSection.pcss @@ -0,0 +1,36 @@ +/* +Copyright 2023 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_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; + + a { + color: $links; + } +} + +.mx_SettingsSection_subSections { + display: grid; + grid-template-columns: 1fr; + grid-gap: $spacing-32; + + padding: $spacing-16 0; +} diff --git a/src/components/views/settings/shared/SettingsSection.tsx b/src/components/views/settings/shared/SettingsSection.tsx new file mode 100644 index 0000000000..1fc0090565 --- /dev/null +++ b/src/components/views/settings/shared/SettingsSection.tsx @@ -0,0 +1,48 @@ +/* +Copyright 2022 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, { HTMLAttributes } from "react"; + +import Heading from "../../typography/Heading"; + +export interface SettingsSectionProps extends HTMLAttributes { + heading: string | React.ReactNode; + children?: React.ReactNode; +} + +/** + * A section of settings content + * A SettingsTab may contain one or more SettingsSections + * Eg: + * ``` + * + * + * + * // profile settings form + * + * + * // account settings + * + * + * + * ``` + */ +export const SettingsSection: React.FC = ({ heading, children, ...rest }) => ( +
+ {typeof heading === "string" ? {heading} : <>{heading}} +
{children}
+
+); diff --git a/src/components/views/settings/tabs/SettingsTab.tsx b/src/components/views/settings/tabs/SettingsTab.tsx index 57b29f49c4..e9f25ec740 100644 --- a/src/components/views/settings/tabs/SettingsTab.tsx +++ b/src/components/views/settings/tabs/SettingsTab.tsx @@ -15,16 +15,30 @@ limitations under the License. */ import React from "react"; -import Heading from "../../typography/Heading"; - export interface SettingsTabProps { - heading: string; children?: React.ReactNode; } -const SettingsTab: React.FC = ({ heading, children }) => ( +/** + * Container for a tab of settings panel content + * Should contain one or more SettingsSection + * Settings width, padding and spacing between sections + * Eg: + * ``` + * + * + * + * // profile settings form + * + * + * // account settings + * + * + * + * ``` + */ +const SettingsTab: React.FC = ({ children }) => (
- {heading}
{children}
); diff --git a/src/components/views/settings/tabs/room/VoipRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/VoipRoomSettingsTab.tsx index f2749d8131..94f89be331 100644 --- a/src/components/views/settings/tabs/room/VoipRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/VoipRoomSettingsTab.tsx @@ -28,6 +28,7 @@ import SettingsTab from "../SettingsTab"; import { ElementCall } from "../../../../../models/Call"; import { useRoomState } from "../../../../../hooks/useRoomState"; import SdkConfig, { DEFAULTS } from "../../../../../SdkConfig"; +import { SettingsSection } from "../../shared/SettingsSection"; interface ElementCallSwitchProps { room: Room; @@ -100,10 +101,12 @@ interface Props { export const VoipRoomSettingsTab: React.FC = ({ room }) => { return ( - - - - + + + + + + ); }; diff --git a/src/components/views/settings/tabs/user/SessionManagerTab.tsx b/src/components/views/settings/tabs/user/SessionManagerTab.tsx index 8162180b08..2b86e5b60f 100644 --- a/src/components/views/settings/tabs/user/SessionManagerTab.tsx +++ b/src/components/views/settings/tabs/user/SessionManagerTab.tsx @@ -38,6 +38,7 @@ import { useAsyncMemo } from "../../../../../hooks/useAsyncMemo"; import QuestionDialog from "../../../dialogs/QuestionDialog"; import { FilterVariation } from "../../devices/filter"; import { OtherSessionsSectionHeading } from "../../devices/OtherSessionsSectionHeading"; +import { SettingsSection } from "../../shared/SettingsSection"; const confirmSignOut = async (sessionsToSignOutCount: number): Promise => { const { finished } = Modal.createDialog(QuestionDialog, { @@ -225,62 +226,64 @@ const SessionManagerTab: React.FC = () => { } return ( - - - saveDeviceName(currentDeviceId, deviceName)} - onVerifyCurrentDevice={onVerifyCurrentDevice} - onSignOutCurrentDevice={onSignOutCurrentDevice} - signOutAllOtherSessions={signOutAllOtherSessions} - otherSessionsCount={otherSessionsCount} - /> - {shouldShowOtherSessions && ( - - } - description={_t( - `For best security, verify your sessions and sign out ` + - `from any session that you don't recognize or use anymore.`, - )} - data-testid="other-sessions-section" - > - + + + saveDeviceName(currentDeviceId, deviceName)} + onVerifyCurrentDevice={onVerifyCurrentDevice} + onSignOutCurrentDevice={onSignOutCurrentDevice} + signOutAllOtherSessions={signOutAllOtherSessions} + otherSessionsCount={otherSessionsCount} + /> + {shouldShowOtherSessions && ( + } - onSignOutDevices={onSignOutOtherDevices} - saveDeviceName={saveDeviceName} - setPushNotifications={setPushNotifications} - ref={filteredDeviceListRef} - supportsMSC3881={supportsMSC3881} - /> - - )} - + description={_t( + `For best security, verify your sessions and sign out ` + + `from any session that you don't recognize or use anymore.`, + )} + data-testid="other-sessions-section" + > + + + )} + + ); }; diff --git a/test/components/views/settings/tabs/SettingsTab-test.tsx b/test/components/views/settings/tabs/SettingsTab-test.tsx index 2cd678c672..9b1f8190f8 100644 --- a/test/components/views/settings/tabs/SettingsTab-test.tsx +++ b/test/components/views/settings/tabs/SettingsTab-test.tsx @@ -22,7 +22,7 @@ import SettingsTab, { SettingsTabProps } from "../../../../../src/components/vie describe("", () => { const getComponent = (props: SettingsTabProps): ReactElement => ; it("renders tab", () => { - const { container } = render(getComponent({ heading: "Test Tab", children:
test
})); + const { container } = render(getComponent({ children:
test
})); expect(container).toMatchSnapshot(); }); diff --git a/test/components/views/settings/tabs/__snapshots__/SettingsTab-test.tsx.snap b/test/components/views/settings/tabs/__snapshots__/SettingsTab-test.tsx.snap index 704189fb1f..cbebf4d8db 100644 --- a/test/components/views/settings/tabs/__snapshots__/SettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/__snapshots__/SettingsTab-test.tsx.snap @@ -5,11 +5,6 @@ exports[` renders tab 1`] = `
-

- Test Tab -