Skip to content
Snippets Groups Projects
Commit 05b71420 authored by Ziwei Wang's avatar Ziwei Wang
Browse files

Integrate general settings with sidebar

Break the general settings into smaller components as per the wireframe

Change-Id: Ic76d5cfdbd8e2d984f8f2ee698727ed10611d799
parent cffda38e
No related branches found
No related tags found
No related merge requests found
...@@ -18,11 +18,13 @@ ...@@ -18,11 +18,13 @@
import Grid from '@mui/material/Grid'; import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import { useTranslation } from 'react-i18next';
import { useAuthContext } from '../../contexts/AuthProvider'; import { useAuthContext } from '../../contexts/AuthProvider';
import JamiIdCard from '../JamiIdCard'; import JamiIdCard from '../JamiIdCard';
function ManageAccount() { function ManageAccount() {
const { t } = useTranslation();
const { account } = useAuthContext(); const { account } = useAuthContext();
const devices: string[][] = []; const devices: string[][] = [];
...@@ -32,12 +34,11 @@ function ManageAccount() { ...@@ -32,12 +34,11 @@ function ManageAccount() {
console.log(devices); console.log(devices);
const isJamiAccount = account.getType() === 'RING'; const isJamiAccount = account.getType() === 'RING';
const alias = isJamiAccount ? 'Jami account' : 'SIP account';
return ( return (
<> <>
<Typography variant="h2" component="h2" gutterBottom> <Typography variant="h2" component="h2" gutterBottom>
{alias} {t('jami_account')}
</Typography> </Typography>
<Grid container spacing={3} style={{ marginBottom: 16 }}> <Grid container spacing={3} style={{ marginBottom: 16 }}>
{isJamiAccount && ( {isJamiAccount && (
......
/*
* Copyright (C) 2022 Savoir-faire Linux Inc.
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation; either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public
* License along with this program. If not, see
* <https://www.gnu.org/licenses/>.
*/
import { useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { CustomThemeContext } from '../../contexts/CustomThemeProvider';
import { SettingsGroup, SettingSwitch } from '../Settings';
function Appearance() {
const { t } = useTranslation();
return (
<SettingsGroup label={t('settings_theme')}>
<SettingTheme />
</SettingsGroup>
);
}
const SettingTheme = () => {
const { t } = useTranslation();
const { mode, toggleMode } = useContext(CustomThemeContext);
return <SettingSwitch label={t('settings_dark_theme')} onChange={toggleMode} checked={mode === 'dark'} />;
};
export default Appearance;
/*
* Copyright (C) 2022 Savoir-faire Linux Inc.
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation; either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public
* License along with this program. If not, see
* <https://www.gnu.org/licenses/>.
*/
import { useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { languagesInfos, LanguageTag } from '../../i18n';
import { SettingSelect, SettingSelectProps, SettingsGroup, SettingSwitch } from '../Settings';
function System() {
const { t } = useTranslation();
return (
<SettingsGroup label={t('settings_title_system')}>
<SettingLanguage />
<SettingLinkPreview />
</SettingsGroup>
);
}
const settingLanguageOptions = languagesInfos.map(({ tag, fullName }) => ({
label: fullName,
payload: tag,
}));
const SettingLanguage = () => {
const { t, i18n } = useTranslation();
const option = useMemo(
// TODO: Tell Typescript the result can't be undefined
() => settingLanguageOptions.find((option) => option.payload === i18n.language),
[i18n.language]
);
const onChange = useCallback<SettingSelectProps<LanguageTag>['onChange']>(
(newValue) => {
if (newValue) {
i18n.changeLanguage(newValue.payload);
}
},
[i18n]
);
return (
<SettingSelect
label={t('settings_language')}
option={option}
options={settingLanguageOptions}
onChange={onChange}
/>
);
};
const SettingLinkPreview = () => {
const { t } = useTranslation();
const [isOn, setIsOn] = useState<boolean>(true);
return <SettingSwitch label={t('settings_link_preview')} onChange={() => setIsOn((isOn) => !isOn)} checked={isOn} />;
};
export default System;
...@@ -22,8 +22,8 @@ import { useTranslation } from 'react-i18next'; ...@@ -22,8 +22,8 @@ import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { useAuthContext } from '../contexts/AuthProvider'; import { useAuthContext } from '../contexts/AuthProvider';
//TODO: remove 'settings-account' and 'settings-general' when migration is finished
type NavigateURL = '/' | '/contacts' | '/settings-account' | '/settings-general'; type NavigateURL = '/' | '/contacts' | '/settings-account' | '/settings-general' | '/settings/account/manage-account';
export default function Header() { export default function Header() {
const { t } = useTranslation(); const { t } = useTranslation();
...@@ -51,6 +51,7 @@ export default function Header() { ...@@ -51,6 +51,7 @@ export default function Header() {
<MenuItem onClick={() => closeMenuAndNavigate(`/contacts`)}>{t('settings_menu_item_contacts')}</MenuItem> <MenuItem onClick={() => closeMenuAndNavigate(`/contacts`)}>{t('settings_menu_item_contacts')}</MenuItem>
<MenuItem onClick={() => closeMenuAndNavigate('/settings-account')}>{t('settings_menu_item_account')}</MenuItem> <MenuItem onClick={() => closeMenuAndNavigate('/settings-account')}>{t('settings_menu_item_account')}</MenuItem>
<MenuItem onClick={() => closeMenuAndNavigate('/settings-general')}>{t('settings_menu_item_general')}</MenuItem> <MenuItem onClick={() => closeMenuAndNavigate('/settings-general')}>{t('settings_menu_item_general')}</MenuItem>
<MenuItem onClick={() => closeMenuAndNavigate('/settings/account/manage-account')}>{t('settings')}</MenuItem>
<MenuItem onClick={logout}>{t('logout')}</MenuItem> <MenuItem onClick={logout}>{t('logout')}</MenuItem>
</Menu> </Menu>
</Box> </Box>
......
...@@ -78,8 +78,14 @@ function SettingSidebar() { ...@@ -78,8 +78,14 @@ function SettingSidebar() {
icon: null, icon: null,
title: t('settings_title_general'), title: t('settings_title_general'),
highlightKey: 'general', highlightKey: 'general',
link: '/settings/general/appearance', link: '/settings/general/system',
submenuItems: [ submenuItems: [
{
highlightKey: 'system',
icon: null,
title: t('settings_title_system'),
link: '/settings/general/system',
},
{ {
highlightKey: 'appearance', highlightKey: 'appearance',
icon: null, icon: null,
......
...@@ -69,6 +69,7 @@ ...@@ -69,6 +69,7 @@
"incoming_call_video": "Incoming video call from {{member0}}", "incoming_call_video": "Incoming video call from {{member0}}",
"invitations": "Invitations", "invitations": "Invitations",
"jami": "Jami", "jami": "Jami",
"jami_account": "Jami Account",
"jami_user_id": "Jami user ID", "jami_user_id": "Jami user ID",
"jams": "JAMS", "jams": "JAMS",
"loading": "Loading...", "loading": "Loading...",
...@@ -132,6 +133,7 @@ ...@@ -132,6 +133,7 @@
"registration_success": "You've successfully registered! — Logging you in...", "registration_success": "You've successfully registered! — Logging you in...",
"search_results": "Search Results", "search_results": "Search Results",
"select_placeholder": "Select an option", "select_placeholder": "Select an option",
"settings": "Settings",
"settings_appearance": "Appearance", "settings_appearance": "Appearance",
"settings_customize_profile": "Customize profile", "settings_customize_profile": "Customize profile",
"settings_dark_theme": "Dark theme", "settings_dark_theme": "Dark theme",
...@@ -142,6 +144,7 @@ ...@@ -142,6 +144,7 @@
"settings_menu_item_account": "Account settings", "settings_menu_item_account": "Account settings",
"settings_menu_item_contacts": "Contacts", "settings_menu_item_contacts": "Contacts",
"settings_menu_item_general": "General settings", "settings_menu_item_general": "General settings",
"settings_theme": "Theme",
"settings_title_account": "Account", "settings_title_account": "Account",
"settings_title_chat": "Chat", "settings_title_chat": "Chat",
"settings_title_general": "General", "settings_title_general": "General",
......
...@@ -69,6 +69,7 @@ ...@@ -69,6 +69,7 @@
"incoming_call_video": "Appel vidéo entrant de {{member0}}", "incoming_call_video": "Appel vidéo entrant de {{member0}}",
"invitations": "Invitations", "invitations": "Invitations",
"jami": "Jami", "jami": "Jami",
"jami_account": "Compte Jami",
"jami_user_id": "ID Jami de l'utilisateur", "jami_user_id": "ID Jami de l'utilisateur",
"jams": "JAMS", "jams": "JAMS",
"loading": "Chargement...", "loading": "Chargement...",
...@@ -132,6 +133,7 @@ ...@@ -132,6 +133,7 @@
"registration_success": "Inscription réussie! — Connexion en cours...", "registration_success": "Inscription réussie! — Connexion en cours...",
"search_results": "Résultats de la recherche", "search_results": "Résultats de la recherche",
"select_placeholder": "Sélectionner une option", "select_placeholder": "Sélectionner une option",
"settings": "Paramètres",
"settings_appearance": "Apparence", "settings_appearance": "Apparence",
"settings_customize_profile": "Paramétrer le profil", "settings_customize_profile": "Paramétrer le profil",
"settings_dark_theme": "Thème sombre", "settings_dark_theme": "Thème sombre",
...@@ -142,6 +144,7 @@ ...@@ -142,6 +144,7 @@
"settings_menu_item_account": "Paramètres du compte", "settings_menu_item_account": "Paramètres du compte",
"settings_menu_item_contacts": "Contacts", "settings_menu_item_contacts": "Contacts",
"settings_menu_item_general": "Paramètres généraux", "settings_menu_item_general": "Paramètres généraux",
"settings_theme": "Thème",
"settings_title_account": "Compte", "settings_title_account": "Compte",
"settings_title_chat": "Clavardage", "settings_title_chat": "Clavardage",
"settings_title_general": "Général", "settings_title_general": "Général",
......
...@@ -23,6 +23,8 @@ import LinkedDevices from './components/AccountSettings/LinkedDevices'; ...@@ -23,6 +23,8 @@ import LinkedDevices from './components/AccountSettings/LinkedDevices';
import ManageAccount from './components/AccountSettings/ManageAccount'; import ManageAccount from './components/AccountSettings/ManageAccount';
import ContactList from './components/ContactList'; import ContactList from './components/ContactList';
import ConversationView from './components/ConversationView'; import ConversationView from './components/ConversationView';
import Appearance from './components/GeneralSettings/Appearance';
import System from './components/GeneralSettings/System';
import Header from './components/Header'; import Header from './components/Header';
import SettingSidebar from './components/SettingSidebar'; import SettingSidebar from './components/SettingSidebar';
import AuthProvider from './contexts/AuthProvider'; import AuthProvider from './contexts/AuthProvider';
...@@ -88,7 +90,8 @@ export const router = createBrowserRouter( ...@@ -88,7 +90,8 @@ export const router = createBrowserRouter(
<Route path="settings/account/manage-account" element={<ManageAccount />} /> <Route path="settings/account/manage-account" element={<ManageAccount />} />
<Route path="settings/account/customize-profile" element={<CustomizeProfile />} /> <Route path="settings/account/customize-profile" element={<CustomizeProfile />} />
<Route path="settings/account/linked-devices" element={<LinkedDevices />} /> <Route path="settings/account/linked-devices" element={<LinkedDevices />} />
<Route path="settings/general/appearance" element={<GeneralSettings />} /> <Route path="settings/general/system" element={<System />} />
<Route path="settings/general/appearance" element={<Appearance />} />
<Route path="settings-account" element={<AccountSettings />} /> <Route path="settings-account" element={<AccountSettings />} />
<Route path="settings-general" element={<GeneralSettings />} /> <Route path="settings-general" element={<GeneralSettings />} />
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment