diff --git a/src/Modal.module.css b/src/Modal.module.css index b69a1071..fae3a6fb 100644 --- a/src/Modal.module.css +++ b/src/Modal.module.css @@ -12,7 +12,7 @@ Please see LICENSE in the repository root for full details. .dialog { box-sizing: border-box; - inline-size: 520px; + inline-size: 580px; max-inline-size: 90%; max-block-size: 600px; } diff --git a/src/settings/PreferencesSettingsTab.tsx b/src/settings/PreferencesSettingsTab.tsx new file mode 100644 index 00000000..c6f26fbd --- /dev/null +++ b/src/settings/PreferencesSettingsTab.tsx @@ -0,0 +1,53 @@ +/* +Copyright 2022-2024 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only +Please see LICENSE in the repository root for full details. +*/ + +import { ChangeEvent, FC, useCallback } from "react"; +import { useTranslation } from "react-i18next"; +import { Text } from "@vector-im/compound-web"; + +import { FieldRow, InputField } from "../input/Input"; +import { + showHandRaisedTimer as showHandRaisedTimerSetting, + useSetting, +} from "./settings"; + +interface Props { + roomId?: string; +} + +export const PreferencesSettingsTab: FC = ({}) => { + const { t } = useTranslation(); + const [showHandRaisedTimer, setShowHandRaisedTimer] = useSetting( + showHandRaisedTimerSetting, + ); + + const onChangeSetting = useCallback( + (e: ChangeEvent) => { + setShowHandRaisedTimer(e.target.checked); + }, + [setShowHandRaisedTimer], + ); + + return ( +
+

{t("settings.preferences_tab_h4")}

+ {t("settings.preferences_tab_body")} + + + +
+ ); +}; diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx index c4ba24d1..db702ef8 100644 --- a/src/settings/SettingsModal.tsx +++ b/src/settings/SettingsModal.tsx @@ -30,11 +30,13 @@ import { useOptInAnalytics, } from "./settings"; import { isFirefox } from "../Platform"; +import { PreferencesSettingsTab } from "./PreferencesSettingsTab"; type SettingsTab = | "audio" | "video" | "profile" + | "preferences" | "feedback" | "more" | "developer"; @@ -135,6 +137,12 @@ export const SettingsModal: FC = ({ content: generateDeviceSelection(devices.videoInput, t("common.camera")), }; + const preferencesTab: Tab = { + key: "preferences", + name: t("common.preferences"), + content: , + }; + const profileTab: Tab = { key: "profile", name: t("common.profile"), @@ -234,7 +242,7 @@ export const SettingsModal: FC = ({ const tabs = [audioTab, videoTab]; if (widget === null) tabs.push(profileTab); - tabs.push(feedbackTab, moreTab); + tabs.push(preferencesTab, feedbackTab, moreTab); if (developerSettingsTab) tabs.push(developerTab); return (