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 f1e43ccb2..1a01e5d5a 100644 --- a/client/src/views/Settings.tsx +++ b/client/src/views/Settings.tsx @@ -1,28 +1,43 @@ import React from 'react'; +import classnames from 'classnames'; + import { useTranslation } from 'react-i18next'; 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 UsageStatisticsSettingsCard from './components/UsageAnalyticsSettings'; +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'; +const drawerWidth = 240; + const useStyles = makeStyles((theme: Theme) => createStyles({ appBar: { @@ -33,8 +48,8 @@ const useStyles = makeStyles((theme: Theme) => flex: 1 }, root: { - width: '100%', - display: 'flex' + display: 'flex', + marginLeft: '100px' }, heading: { fontSize: theme.typography.pxToRem(15), @@ -48,6 +63,24 @@ const useStyles = makeStyles((theme: Theme) => center: { padding: 20, margin: 'auto' + }, + bg: { + background: theme.palette.background.default + }, + paper: { + minWidth: '640px' + }, + drawer: { + width: drawerWidth, + flexShrink: 0 + }, + drawerPaper: { + width: drawerWidth, + marginTop: '64px' + }, + selected: { + backgroundColor: theme.palette.background.default, + color: theme.palette.primary.main } }) ); @@ -65,6 +98,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 +116,7 @@ export default function FullScreenDialog() { -
-
- - - - + + + + setSection('general')} + className={classnames({ + [classes.selected]: section === 'general' + })} + > + + + + + + setSection('updates')} + className={classnames({ + [classes.selected]: section === 'updates' + })} + > + + + + + + {/* setSection('h5p-libraries')} + style={{ + backgroundColor: + section === 'general' + ? '#EFEFEF' + : '#FFFFFF', + color: '#3498db' + }} + > + + + + + + */} + setSection('account')} + className={classnames({ + [classes.selected]: section === 'account' + })} + > + + + + + + + + +
+
+ + {(() => { + switch (section) { + case 'general': + default: + return ; + + case 'updates': + return ; + + case 'h5p-libraries': + return ( + + ); + + case 'account': + return ; + } + })()} + +
-
+
); diff --git a/client/src/views/components/BugReportSettings.tsx b/client/src/views/components/BugReportSettings.tsx deleted file mode 100644 index 9cdc42442..000000000 --- a/client/src/views/components/BugReportSettings.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 BugReportIcon from '@material-ui/icons/BugReport'; - -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 BugReportSettingsCard() { - const classes = useStyles(); - const settings = useSelector((state: IState) => state.settings); - const dispatch = useDispatch(); - const { t } = useTranslation(); - - return ( - - - - - - - - {t('bug_report.title')} - - - {t('bug_report.description')} - - - - - - dispatch( - actions.settings.changeSetting({ - bugTracking: !settings.bugTracking - }) - ) - } - /> - } - label={t('settings.enable')} - /> - - - - - - ); -} diff --git a/client/src/views/components/Settings/AccountSettingsList.tsx b/client/src/views/components/Settings/AccountSettingsList.tsx new file mode 100644 index 000000000..9e939510c --- /dev/null +++ b/client/src/views/components/Settings/AccountSettingsList.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +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'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + backgroundColor: theme.palette.background.paper + } + }) +); + +export default function SettingsAccountSettingsList() { + const classes = useStyles(); + + const { t } = useTranslation(); + + return ( + {t('settings.account.label')} + } + className={classes.root} + > + + + + + + + + + + + ); +} diff --git a/client/src/views/components/SettingsList.tsx b/client/src/views/components/Settings/GeneralSettingsList.tsx similarity index 62% rename from client/src/views/components/SettingsList.tsx rename to client/src/views/components/Settings/GeneralSettingsList.tsx index c8dd3960c..ad24859ab 100644 --- a/client/src/views/components/SettingsList.tsx +++ b/client/src/views/components/Settings/GeneralSettingsList.tsx @@ -10,14 +10,13 @@ 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'; +import { actions, IState } from '../../../state'; import LanguageList from './LanguageList'; const useStyles = makeStyles((theme: Theme) => @@ -29,7 +28,7 @@ const useStyles = makeStyles((theme: Theme) => }) ); -export default function SwitchListSecondary() { +export default function SettingsGeneralSettingsList() { const classes = useStyles(); const dispatch = useDispatch(); @@ -40,37 +39,10 @@ export default function SwitchListSecondary() { 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 SwitchListSecondary() { /> - - - - - - - - dispatch( - actions.settings.changeSetting({ - autoUpdates: !settings.autoUpdates - }) - ) - } - checked={settings.autoUpdates} - inputProps={{ - 'aria-labelledby': 'switch-list-label-updates' - }} - /> - - + + + + + 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/Settings/LibraryManagement.tsx b/client/src/views/components/Settings/LibraryManagement.tsx new file mode 100644 index 000000000..f0fe021c6 --- /dev/null +++ b/client/src/views/components/Settings/LibraryManagement.tsx @@ -0,0 +1,52 @@ +import React from 'react'; +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'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + backgroundColor: theme.palette.background.paper + } + }) +); + +export default function SettingsLibraryManagement() { + const classes = useStyles(); + + const { t } = useTranslation(); + + return ( + {t('settings.libraries.label')} + } + className={classes.root} + > + + + + + + + + + + + ); +} 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/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..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 './SettingsList'; +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 : ( 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')} - /> - - - - - - ); -} diff --git a/locales/lumi/en.json b/locales/lumi/en.json index 6f5030f65..2950b4be0 100644 --- a/locales/lumi/en.json +++ b/locales/lumi/en.json @@ -55,7 +55,27 @@ }, "settings": { "appbar": { "label": "Settings", "save": "Save" }, - "enable": "Enable" + "enable": "Enable", + "menu": { + "general": "General", + "updates": "Updates", + "h5p-libraries": "H5P Libraries", + "account": "Account" + }, + "general": { + "header": "General" + }, + "updates": { + "header": "Updates" + }, + "account": { + "label": "Account", + "email": { + "title": "Email", + "change": "Change Email", + "not-set": "Email is not set" + } + } }, "analytics": { "startPage": {