From 330dfd7b3f9035aa39188515890de1b85a490ba3 Mon Sep 17 00:00:00 2001 From: JPSchellenberg Date: Mon, 5 Apr 2021 01:31:58 +0200 Subject: [PATCH 1/8] fix(settings): overhaul settings layout --- client/src/views/Settings.tsx | 127 +++++++++++++++--- .../views/components/AccountSettingsList.tsx | 57 ++++++++ .../components/SettingsLibraryManagement.tsx | 59 ++++++++ 3 files changed, 226 insertions(+), 17 deletions(-) create mode 100644 client/src/views/components/AccountSettingsList.tsx create mode 100644 client/src/views/components/SettingsLibraryManagement.tsx diff --git a/client/src/views/Settings.tsx b/client/src/views/Settings.tsx index f1e43ccb2..dcd9a9c75 100644 --- a/client/src/views/Settings.tsx +++ b/client/src/views/Settings.tsx @@ -4,25 +4,36 @@ import { useDispatch } from 'react-redux'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; import Dialog from '@material-ui/core/Dialog'; +import DialogContent from '@material-ui/core/DialogContent'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; import IconButton from '@material-ui/core/IconButton'; -import CloseIcon from '@material-ui/icons/Close'; import Slide from '@material-ui/core/Slide'; import { TransitionProps } from '@material-ui/core/transitions'; -import SettingsIcon from '@material-ui/icons/Settings'; - +import Paper from '@material-ui/core/Paper'; import Typography from '@material-ui/core/Typography'; -import BugReportSettings from './components/BugReportSettings'; -import UpdateSettings from './components/UpdateSettngs'; -import SettingsLanguage from './components/SettingsLanguage'; +import Drawer from '@material-ui/core/Drawer'; +import List from '@material-ui/core/List'; +import Divider from '@material-ui/core/Divider'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; +import ListItemText from '@material-ui/core/ListItemText'; + +import CloseIcon from '@material-ui/icons/Close'; +import SettingsIcon from '@material-ui/icons/Settings'; +import LibraryBooksIcon from '@material-ui/icons/LibraryBooks'; +import AccountBoxIcon from '@material-ui/icons/AccountBox'; -import UsageStatisticsSettingsCard from './components/UsageAnalyticsSettings'; +import SettingsList from './components/SettingsList'; +import AccountSettingsList from './components/AccountSettingsList'; +import SettingsLibraryManagement from './components/SettingsLibraryManagement'; import { track } from '../state/track/actions'; +const drawerWidth = 240; + const useStyles = makeStyles((theme: Theme) => createStyles({ appBar: { @@ -34,7 +45,8 @@ const useStyles = makeStyles((theme: Theme) => }, root: { width: '100%', - display: 'flex' + display: 'flex', + marginLeft: '100px' }, heading: { fontSize: theme.typography.pxToRem(15), @@ -48,7 +60,22 @@ const useStyles = makeStyles((theme: Theme) => center: { padding: 20, margin: 'auto' - } + }, + bg: { + background: '#f1f3f4' + }, + paper: { + minWidth: '640px' + }, + drawer: { + width: drawerWidth, + flexShrink: 0 + }, + drawerPaper: { + width: drawerWidth, + marginTop: '64px' + }, + toolbar: {} }) ); @@ -65,6 +92,8 @@ export default function FullScreenDialog() { const { t } = useTranslation(); const dispatch = useDispatch(); + const [section, setSection] = React.useState('general'); + const handleClickOpen = () => { setOpen(true); dispatch(track('Settings', 'click', 'open')); @@ -81,7 +110,7 @@ export default function FullScreenDialog() { -
-
- - - - + +
+ + + setSection('general')} + > + + + + + + setSection('h5p-libraries')} + > + + + + + + setSection('account')} + > + + + + + + + + +
+
+ + {(() => { + switch (section) { + case 'general': + default: + return ; + + case 'h5p-libraries': + return ( + + ); + + case 'account': + return ; + } + })()} + +
-
+
); diff --git a/client/src/views/components/AccountSettingsList.tsx b/client/src/views/components/AccountSettingsList.tsx new file mode 100644 index 000000000..f6e2ccc4d --- /dev/null +++ b/client/src/views/components/AccountSettingsList.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { useTranslation } from 'react-i18next'; + +import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; +import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; +import ListItemText from '@material-ui/core/ListItemText'; +import ListSubheader from '@material-ui/core/ListSubheader'; + +import Button from '@material-ui/core/Button'; + +import EmailIcon from '@material-ui/icons/Email'; + +import { IState } from '../../state'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + backgroundColor: theme.palette.background.paper + } + }) +); + +export default function AccountSettingsList() { + const classes = useStyles(); + + const { t } = useTranslation(); + + return ( + {t('settings.account.label')} + } + className={classes.root} + > + + + + + + + + + + + ); +} diff --git a/client/src/views/components/SettingsLibraryManagement.tsx b/client/src/views/components/SettingsLibraryManagement.tsx new file mode 100644 index 000000000..9ede47f57 --- /dev/null +++ b/client/src/views/components/SettingsLibraryManagement.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { useTranslation } from 'react-i18next'; + +import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; +import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; +import ListItemText from '@material-ui/core/ListItemText'; +import ListSubheader from '@material-ui/core/ListSubheader'; +import Switch from '@material-ui/core/Switch'; + +import Button from '@material-ui/core/Button'; + +import EmailIcon from '@material-ui/icons/Email'; + +import { actions, IState } from '../../state'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + backgroundColor: theme.palette.background.paper + } + }) +); + +export default function SettingsLibraryManagement() { + const classes = useStyles(); + + const dispatch = useDispatch(); + const settings = useSelector((state: IState) => state.settings); + + const { t } = useTranslation(); + + return ( + {t('settings.libraries.label')} + } + className={classes.root} + > + + + + + + + + + + + ); +} From ff6e006bc2e810e2dec1a34934b31ea731847d4a Mon Sep 17 00:00:00 2001 From: JPSchellenberg Date: Mon, 5 Apr 2021 01:39:51 +0200 Subject: [PATCH 2/8] test(lint): make ESLint happy --- client/src/views/components/AccountSettingsList.tsx | 3 --- client/src/views/components/SettingsLibraryManagement.tsx | 7 ------- 2 files changed, 10 deletions(-) diff --git a/client/src/views/components/AccountSettingsList.tsx b/client/src/views/components/AccountSettingsList.tsx index f6e2ccc4d..060582485 100644 --- a/client/src/views/components/AccountSettingsList.tsx +++ b/client/src/views/components/AccountSettingsList.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { useDispatch, useSelector } from 'react-redux'; import { useTranslation } from 'react-i18next'; import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; @@ -14,8 +13,6 @@ import Button from '@material-ui/core/Button'; import EmailIcon from '@material-ui/icons/Email'; -import { IState } from '../../state'; - const useStyles = makeStyles((theme: Theme) => createStyles({ root: { diff --git a/client/src/views/components/SettingsLibraryManagement.tsx b/client/src/views/components/SettingsLibraryManagement.tsx index 9ede47f57..f0fe021c6 100644 --- a/client/src/views/components/SettingsLibraryManagement.tsx +++ b/client/src/views/components/SettingsLibraryManagement.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { useDispatch, useSelector } from 'react-redux'; import { useTranslation } from 'react-i18next'; import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; @@ -9,14 +8,11 @@ import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; import ListItemText from '@material-ui/core/ListItemText'; import ListSubheader from '@material-ui/core/ListSubheader'; -import Switch from '@material-ui/core/Switch'; import Button from '@material-ui/core/Button'; import EmailIcon from '@material-ui/icons/Email'; -import { actions, IState } from '../../state'; - const useStyles = makeStyles((theme: Theme) => createStyles({ root: { @@ -29,9 +25,6 @@ const useStyles = makeStyles((theme: Theme) => export default function SettingsLibraryManagement() { const classes = useStyles(); - const dispatch = useDispatch(); - const settings = useSelector((state: IState) => state.settings); - const { t } = useTranslation(); return ( From f8638e674290e632a700f1f27b4b6568426d256f Mon Sep 17 00:00:00 2001 From: JPSchellenberg Date: Mon, 5 Apr 2021 21:31:34 +0200 Subject: [PATCH 3/8] fix(settings): add locales for settings --- .../src/views/components/AccountSettingsList.tsx | 6 +++++- locales/lumi/en.json | 15 ++++++++++++++- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/client/src/views/components/AccountSettingsList.tsx b/client/src/views/components/AccountSettingsList.tsx index 060582485..ddc8d82a2 100644 --- a/client/src/views/components/AccountSettingsList.tsx +++ b/client/src/views/components/AccountSettingsList.tsx @@ -41,7 +41,11 @@ export default function AccountSettingsList() { - - - - ); -} diff --git a/client/src/views/components/AccountSettingsList.tsx b/client/src/views/components/Settings/AccountSettingsList.tsx similarity index 97% rename from client/src/views/components/AccountSettingsList.tsx rename to client/src/views/components/Settings/AccountSettingsList.tsx index ddc8d82a2..9e939510c 100644 --- a/client/src/views/components/AccountSettingsList.tsx +++ b/client/src/views/components/Settings/AccountSettingsList.tsx @@ -22,7 +22,7 @@ const useStyles = makeStyles((theme: Theme) => }) ); -export default function AccountSettingsList() { +export default function SettingsAccountSettingsList() { const classes = useStyles(); const { t } = useTranslation(); diff --git a/client/src/views/components/SettingsList.tsx b/client/src/views/components/Settings/GeneralSettingsList.tsx similarity index 98% rename from client/src/views/components/SettingsList.tsx rename to client/src/views/components/Settings/GeneralSettingsList.tsx index c8dd3960c..ee20f9a62 100644 --- a/client/src/views/components/SettingsList.tsx +++ b/client/src/views/components/Settings/GeneralSettingsList.tsx @@ -17,7 +17,7 @@ import InsertChartIcon from '@material-ui/icons/InsertChart'; import UpdateIcon from '@material-ui/icons/Update'; import TranslateIcon from '@material-ui/icons/Translate'; -import { actions, IState } from '../../state'; +import { actions, IState } from '../../../state'; import LanguageList from './LanguageList'; const useStyles = makeStyles((theme: Theme) => @@ -29,7 +29,7 @@ const useStyles = makeStyles((theme: Theme) => }) ); -export default function SwitchListSecondary() { +export default function SettingsGeneralSettingsList() { const classes = useStyles(); const dispatch = useDispatch(); diff --git a/client/src/views/components/LanguageList.tsx b/client/src/views/components/Settings/LanguageList.tsx similarity index 97% rename from client/src/views/components/LanguageList.tsx rename to client/src/views/components/Settings/LanguageList.tsx index af659c657..e3e237596 100644 --- a/client/src/views/components/LanguageList.tsx +++ b/client/src/views/components/Settings/LanguageList.tsx @@ -10,8 +10,8 @@ import MenuItem from '@material-ui/core/MenuItem'; import FormControl from '@material-ui/core/FormControl'; import Select from '@material-ui/core/Select'; -import { IState, actions } from '../../state'; -import { track } from '../../state/track/actions'; +import { IState, actions } from '../../../state'; +import { track } from '../../../state/track/actions'; const useStyles = makeStyles({ formControl: { diff --git a/client/src/views/components/SettingsLibraryManagement.tsx b/client/src/views/components/Settings/LibraryManagement.tsx similarity index 100% rename from client/src/views/components/SettingsLibraryManagement.tsx rename to client/src/views/components/Settings/LibraryManagement.tsx diff --git a/client/src/views/components/SettingsLanguage.tsx b/client/src/views/components/SettingsLanguage.tsx deleted file mode 100644 index 3b9b84f2d..000000000 --- a/client/src/views/components/SettingsLanguage.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import React from 'react'; - -import { makeStyles } from '@material-ui/core/styles'; -import Card from '@material-ui/core/Card'; -import CardActionArea from '@material-ui/core/CardActionArea'; -import CardActions from '@material-ui/core/CardActions'; -import CardContent from '@material-ui/core/CardContent'; -import CardMedia from '@material-ui/core/CardMedia'; -import Typography from '@material-ui/core/Typography'; -import TranslateIcon from '@material-ui/icons/Translate'; -import Button from '@material-ui/core/Button'; - -import { useTranslation } from 'react-i18next'; - -import LanguageList from './LanguageList'; - -const useStyles = makeStyles({ - root: { - maxWidth: 345, - margin: 25 - }, - media: { - height: 140, - background: 'linear-gradient(45deg, #1abc9c 0%, #3498db 100%)', - color: 'white', - display: 'flex', - alignItems: 'center' - }, - analyticsIcon: { - margin: 'auto', - height: 120, - width: 120 - }, - formControl: { - width: '100%' - } -}); - -export default function BugReportSettingsCard() { - const classes = useStyles(); - const { t } = useTranslation(); - - return ( - - - - - - - - {t('language.title')} - - - {t('language.description')} - - - - - - - - - - - ); -} diff --git a/client/src/views/components/SetupDialog.tsx b/client/src/views/components/SetupDialog.tsx index f79803508..95367837e 100644 --- a/client/src/views/components/SetupDialog.tsx +++ b/client/src/views/components/SetupDialog.tsx @@ -16,7 +16,7 @@ import Dialog from '@material-ui/core/Dialog'; import MuiDialogContent from '@material-ui/core/DialogContent'; import MuiDialogActions from '@material-ui/core/DialogActions'; -import SettingsList from './SettingsList'; +import SettingsList from './Settings/GeneralSettingsList'; import PolicyIcon from '@material-ui/icons/Policy'; import GitHubIcon from '@material-ui/icons/GitHub'; diff --git a/client/src/views/components/UpdateSettngs.tsx b/client/src/views/components/UpdateSettngs.tsx deleted file mode 100644 index 83b6c4846..000000000 --- a/client/src/views/components/UpdateSettngs.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import React from 'react'; -import { useDispatch, useSelector } from 'react-redux'; -import { useTranslation } from 'react-i18next'; - -import { makeStyles } from '@material-ui/core/styles'; -import Card from '@material-ui/core/Card'; -import CardActionArea from '@material-ui/core/CardActionArea'; -import CardActions from '@material-ui/core/CardActions'; -import CardContent from '@material-ui/core/CardContent'; -import CardMedia from '@material-ui/core/CardMedia'; -import Typography from '@material-ui/core/Typography'; -import Button from '@material-ui/core/Button'; - -import UpdateIcon from '@material-ui/icons/Update'; - -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import Switch from '@material-ui/core/Switch'; - -import { IState, actions } from '../../state'; - -const useStyles = makeStyles({ - root: { - maxWidth: 345, - margin: 25 - }, - media: { - height: 140, - background: 'linear-gradient(45deg, #1abc9c 0%, #3498db 100%)', - color: 'white', - display: 'flex', - alignItems: 'center' - }, - analyticsIcon: { - margin: 'auto', - height: 120, - width: 120 - } -}); - -export default function UsageStatisticsSettingsCard() { - const classes = useStyles(); - const settings = useSelector((state: IState) => state.settings); - const dispatch = useDispatch(); - const { t } = useTranslation(); - - return ( - - - - - - - - {t('updates.title')} - - - {t('updates.description')} - - - - - - dispatch( - actions.settings.changeSetting({ - autoUpdates: !settings.autoUpdates - }) - ) - } - /> - } - label={t('settings.enable')} - /> - - - - - - ); -} diff --git a/client/src/views/components/UsageAnalyticsSettings.tsx b/client/src/views/components/UsageAnalyticsSettings.tsx deleted file mode 100644 index cb014cacf..000000000 --- a/client/src/views/components/UsageAnalyticsSettings.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import React from 'react'; -import { useDispatch, useSelector } from 'react-redux'; -import { useTranslation } from 'react-i18next'; - -import { makeStyles } from '@material-ui/core/styles'; -import Card from '@material-ui/core/Card'; -import CardActionArea from '@material-ui/core/CardActionArea'; -import CardActions from '@material-ui/core/CardActions'; -import CardContent from '@material-ui/core/CardContent'; -import CardMedia from '@material-ui/core/CardMedia'; -import Typography from '@material-ui/core/Typography'; -import Button from '@material-ui/core/Button'; - -import InsertChartIcon from '@material-ui/icons/InsertChart'; - -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import Switch from '@material-ui/core/Switch'; - -import { IState, actions } from '../../state'; - -const useStyles = makeStyles({ - root: { - maxWidth: 345, - margin: 25 - }, - media: { - height: 140, - background: 'linear-gradient(45deg, #1abc9c 0%, #3498db 100%)', - color: 'white', - display: 'flex', - alignItems: 'center' - }, - analyticsIcon: { - margin: 'auto', - height: 120, - width: 120 - } -}); - -export default function UsageStatisticsSettingsCard() { - const classes = useStyles(); - const settings = useSelector((state: IState) => state.settings); - const dispatch = useDispatch(); - const { t } = useTranslation(); - - return ( - - - - - - - - {t('usage_statistics.title')} - - - {t('usage_statistics.description')} - - - - - - dispatch( - actions.settings.changeSetting({ - usageStatistics: !settings.usageStatistics - }) - ) - } - /> - } - label={t('settings.enable')} - /> - - - - - - ); -} From 6a33b548ae1cfb2cf7c47ef20dec8670865285f7 Mon Sep 17 00:00:00 2001 From: JPSchellenberg Date: Mon, 5 Apr 2021 23:36:04 +0200 Subject: [PATCH 5/8] test(lint): make eslint happy --- client/src/views/Settings.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/views/Settings.tsx b/client/src/views/Settings.tsx index ba728c343..f0699e362 100644 --- a/client/src/views/Settings.tsx +++ b/client/src/views/Settings.tsx @@ -23,8 +23,8 @@ import ListItemText from '@material-ui/core/ListItemText'; import CloseIcon from '@material-ui/icons/Close'; import SettingsIcon from '@material-ui/icons/Settings'; -import LibraryBooksIcon from '@material-ui/icons/LibraryBooks'; -import AccountBoxIcon from '@material-ui/icons/AccountBox'; +// import LibraryBooksIcon from '@material-ui/icons/LibraryBooks'; +// import AccountBoxIcon from '@material-ui/icons/AccountBox'; import SettingsList from './components/Settings/GeneralSettingsList'; import AccountSettingsList from './components/Settings/AccountSettingsList'; From 035de0760d2b1222ff758377e5efabf3c8968322 Mon Sep 17 00:00:00 2001 From: JPSchellenberg Date: Tue, 6 Apr 2021 22:48:18 +0200 Subject: [PATCH 6/8] fix(settings): scrollable main-area --- client/src/views/Settings.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/src/views/Settings.tsx b/client/src/views/Settings.tsx index f0699e362..9298490be 100644 --- a/client/src/views/Settings.tsx +++ b/client/src/views/Settings.tsx @@ -44,7 +44,6 @@ const useStyles = makeStyles((theme: Theme) => flex: 1 }, root: { - width: '100%', display: 'flex', marginLeft: '100px' }, From db364e97f0680d3c31861a1a1bdeb7e5ca23f8a7 Mon Sep 17 00:00:00 2001 From: JPSchellenberg Date: Tue, 6 Apr 2021 23:29:04 +0200 Subject: [PATCH 7/8] fix(settings): highlight the current selected listitem --- client/src/theme/index.tsx | 1 - client/src/views/Settings.tsx | 28 +++++++++++++++++++++++----- 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/client/src/theme/index.tsx b/client/src/theme/index.tsx index b9a8288fb..a85c7541c 100644 --- a/client/src/theme/index.tsx +++ b/client/src/theme/index.tsx @@ -16,7 +16,6 @@ const theme = createMuiTheme({ secondary: { main: '#1abc9c' }, - background: { default: '#f1f3f4' } diff --git a/client/src/views/Settings.tsx b/client/src/views/Settings.tsx index 9298490be..763456f22 100644 --- a/client/src/views/Settings.tsx +++ b/client/src/views/Settings.tsx @@ -1,4 +1,6 @@ import React from 'react'; +import classnames from 'classnames'; + import { useTranslation } from 'react-i18next'; import { useDispatch } from 'react-redux'; @@ -24,7 +26,7 @@ import ListItemText from '@material-ui/core/ListItemText'; import CloseIcon from '@material-ui/icons/Close'; import SettingsIcon from '@material-ui/icons/Settings'; // import LibraryBooksIcon from '@material-ui/icons/LibraryBooks'; -// import AccountBoxIcon from '@material-ui/icons/AccountBox'; +import AccountBoxIcon from '@material-ui/icons/AccountBox'; import SettingsList from './components/Settings/GeneralSettingsList'; import AccountSettingsList from './components/Settings/AccountSettingsList'; @@ -61,7 +63,7 @@ const useStyles = makeStyles((theme: Theme) => margin: 'auto' }, bg: { - background: '#f1f3f4' + background: theme.palette.background.default }, paper: { minWidth: '640px' @@ -74,7 +76,10 @@ const useStyles = makeStyles((theme: Theme) => width: drawerWidth, marginTop: '64px' }, - toolbar: {} + selected: { + backgroundColor: theme.palette.background.default, + color: theme.palette.primary.main + } }) ); @@ -137,13 +142,15 @@ export default function FullScreenDialog() { }} anchor="left" > -
setSection('general')} + className={classnames({ + [classes.selected]: section === 'general' + })} > @@ -156,6 +163,13 @@ export default function FullScreenDialog() { button key="h5p-libraries" onClick={() => setSection('h5p-libraries')} + style={{ + backgroundColor: + section === 'general' + ? '#EFEFEF' + : '#FFFFFF', + color: '#3498db' + }} > @@ -164,10 +178,14 @@ export default function FullScreenDialog() { primary={t('settings.menu.h5p-libraries')} /> + */} setSection('account')} + className={classnames({ + [classes.selected]: section === 'account' + })} > @@ -175,7 +193,7 @@ export default function FullScreenDialog() { - */} + From b82401d4aec2a6805d002704cae13cc4edf6aba3 Mon Sep 17 00:00:00 2001 From: JPSchellenberg Date: Tue, 6 Apr 2021 23:58:28 +0200 Subject: [PATCH 8/8] fix(settings): rework general listitem --- client/src/views/Settings.tsx | 20 +++ .../Settings/GeneralSettingsList.tsx | 75 ++------- .../components/Settings/UpdatesSettings.tsx | 69 ++++++++ client/src/views/components/SetupDialog.tsx | 150 +++++++++++++++++- locales/lumi/en.json | 7 + 5 files changed, 261 insertions(+), 60 deletions(-) create mode 100644 client/src/views/components/Settings/UpdatesSettings.tsx diff --git a/client/src/views/Settings.tsx b/client/src/views/Settings.tsx index 763456f22..1a01e5d5a 100644 --- a/client/src/views/Settings.tsx +++ b/client/src/views/Settings.tsx @@ -27,10 +27,12 @@ import CloseIcon from '@material-ui/icons/Close'; import SettingsIcon from '@material-ui/icons/Settings'; // import LibraryBooksIcon from '@material-ui/icons/LibraryBooks'; import AccountBoxIcon from '@material-ui/icons/AccountBox'; +import UpdateIcon from '@material-ui/icons/Update'; import SettingsList from './components/Settings/GeneralSettingsList'; import AccountSettingsList from './components/Settings/AccountSettingsList'; import SettingsLibraryManagement from './components/Settings/LibraryManagement'; +import UpdateSettings from './components/Settings/UpdatesSettings'; import { track } from '../state/track/actions'; @@ -159,6 +161,21 @@ export default function FullScreenDialog() { primary={t('settings.menu.general')} /> + setSection('updates')} + className={classnames({ + [classes.selected]: section === 'updates' + })} + > + + + + + {/* ; + case 'updates': + return ; + case 'h5p-libraries': return ( diff --git a/client/src/views/components/Settings/GeneralSettingsList.tsx b/client/src/views/components/Settings/GeneralSettingsList.tsx index ee20f9a62..ad24859ab 100644 --- a/client/src/views/components/Settings/GeneralSettingsList.tsx +++ b/client/src/views/components/Settings/GeneralSettingsList.tsx @@ -10,11 +10,10 @@ import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; import ListItemText from '@material-ui/core/ListItemText'; import ListSubheader from '@material-ui/core/ListSubheader'; import Switch from '@material-ui/core/Switch'; - -import PolicyIcon from '@material-ui/icons/Policy'; +import Button from '@material-ui/core/Button'; import BugReportIcon from '@material-ui/icons/BugReport'; import InsertChartIcon from '@material-ui/icons/InsertChart'; -import UpdateIcon from '@material-ui/icons/Update'; + import TranslateIcon from '@material-ui/icons/Translate'; import { actions, IState } from '../../../state'; @@ -40,37 +39,10 @@ export default function SettingsGeneralSettingsList() { return ( {t('settings.appbar.label')} + {t('settings.general.header')} } className={classes.root} > - - - - - - - - dispatch( - actions.settings.changeSetting({ - privacyPolicyConsent: !settings.privacyPolicyConsent - }) - ) - } - checked={settings.privacyPolicyConsent} - inputProps={{ - 'aria-labelledby': - 'switch-list-label-privacy-policy' - }} - /> - - @@ -123,41 +95,28 @@ export default function SettingsGeneralSettingsList() { /> - - - - - - - - dispatch( - actions.settings.changeSetting({ - autoUpdates: !settings.autoUpdates - }) - ) - } - checked={settings.autoUpdates} - inputProps={{ - 'aria-labelledby': 'switch-list-label-updates' - }} - /> - - + + + + + diff --git a/client/src/views/components/Settings/UpdatesSettings.tsx b/client/src/views/components/Settings/UpdatesSettings.tsx new file mode 100644 index 000000000..3f784e4c0 --- /dev/null +++ b/client/src/views/components/Settings/UpdatesSettings.tsx @@ -0,0 +1,69 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { useDispatch, useSelector } from 'react-redux'; + +import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; +import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; +import ListItemText from '@material-ui/core/ListItemText'; +import ListSubheader from '@material-ui/core/ListSubheader'; +import Switch from '@material-ui/core/Switch'; + +import UpdateIcon from '@material-ui/icons/Update'; + +import { actions, IState } from '../../../state'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + backgroundColor: theme.palette.background.paper + } + }) +); + +export default function UpdatesSettingsList() { + const classes = useStyles(); + + const dispatch = useDispatch(); + const { t } = useTranslation(); + const settings = useSelector((state: IState) => state.settings); + + return ( + {t('settings.updates.header')} + } + className={classes.root} + > + + + + + + + + dispatch( + actions.settings.changeSetting({ + autoUpdates: !settings.autoUpdates + }) + ) + } + checked={settings.autoUpdates} + inputProps={{ + 'aria-labelledby': 'switch-list-label-updates' + }} + /> + + + + ); +} diff --git a/client/src/views/components/SetupDialog.tsx b/client/src/views/components/SetupDialog.tsx index 95367837e..4b3841d8a 100644 --- a/client/src/views/components/SetupDialog.tsx +++ b/client/src/views/components/SetupDialog.tsx @@ -16,10 +16,23 @@ import Dialog from '@material-ui/core/Dialog'; import MuiDialogContent from '@material-ui/core/DialogContent'; import MuiDialogActions from '@material-ui/core/DialogActions'; -import SettingsList from './Settings/GeneralSettingsList'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; +import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; +import ListItemText from '@material-ui/core/ListItemText'; +import ListSubheader from '@material-ui/core/ListSubheader'; +import Switch from '@material-ui/core/Switch'; import PolicyIcon from '@material-ui/icons/Policy'; +import BugReportIcon from '@material-ui/icons/BugReport'; +import InsertChartIcon from '@material-ui/icons/InsertChart'; +import UpdateIcon from '@material-ui/icons/Update'; +import TranslateIcon from '@material-ui/icons/Translate'; import GitHubIcon from '@material-ui/icons/GitHub'; + +import LanguageList from './Settings/LanguageList'; + import { IState, actions } from '../../state'; const styles = (theme: Theme) => @@ -34,6 +47,10 @@ const styles = (theme: Theme) => right: theme.spacing(1), top: theme.spacing(1), color: theme.palette.grey[500] + }, + list: { + width: '100%', + backgroundColor: theme.palette.background.paper } }); @@ -121,7 +138,136 @@ export default function CustomizedDialogs() { Open Source - + + {t('settings.appbar.label')} + + } + // className={classes.list} + > + + + + + + + + dispatch( + actions.settings.changeSetting({ + privacyPolicyConsent: !settings.privacyPolicyConsent + }) + ) + } + checked={settings.privacyPolicyConsent} + inputProps={{ + 'aria-labelledby': + 'switch-list-label-privacy-policy' + }} + /> + + + + + + + + + + dispatch( + actions.settings.changeSetting({ + bugTracking: !settings.bugTracking + }) + ) + } + checked={settings.bugTracking} + inputProps={{ + 'aria-labelledby': + 'switch-list-label-bluetooth' + }} + /> + + + + + + + + + + dispatch( + actions.settings.changeSetting({ + usageStatistics: !settings.usageStatistics + }) + ) + } + checked={settings.usageStatistics} + inputProps={{ + 'aria-labelledby': + 'switch-list-label-bluetooth' + }} + /> + + + + + + + + + + dispatch( + actions.settings.changeSetting({ + autoUpdates: !settings.autoUpdates + }) + ) + } + checked={settings.autoUpdates} + inputProps={{ + 'aria-labelledby': + 'switch-list-label-updates' + }} + /> + + + + + + + + + + + + {settings.privacyPolicyConsent ? null : (