feat: add font size setting

Author: pyphilia

public/app/config/channels.js

@@ -77,4 +77,6 @@ module.exports = {
   GET_APP_UPGRADE_CHANNEL: 'app:upgrade:get',
   INSTALL_APP_UPGRADE_CHANNEL: 'app:upgrade:install',
   GET_TOURS_ENABLED_CHANNEL: 'tour:enabled:get',
+  SET_FONT_SIZE_CHANNEL: 'user:font-size:set',
+  GET_FONT_SIZE_CHANNEL: 'user:font-size:get',
 };

public/app/config/config.js

@@ -61,6 +61,7 @@ const AUTHENTICATED = 'authenticated';
 const DEFAULT_AUTHENTICATION = false;
 const DEFAULT_ACTION_ACCESSIBILITY = false;
 const DEFAULT_ACTIONS_AS_ENABLED = true;
+const DEFAULT_FONT_SIZE = 14;
 
 const buildDefaultUser = (lang = DEFAULT_LANG) => ({
   geolocation: null,
@@ -79,6 +80,7 @@ const buildDefaultUser = (lang = DEFAULT_LANG) => ({
     [tours.VISIT_SPACE_TOUR]: false,
     [tours.SETTINGS_TOUR]: false,
   },
+  fontSize: DEFAULT_FONT_SIZE,
 });
 
 const ANONYMOUS_USERNAME = 'Anonymous';

public/app/config/messages.js

@@ -104,6 +104,8 @@ const ERROR_SETTING_ACTION_ACCESSIBILITY =
 const ERROR_SETTING_ACTIONS_AS_ENABLED = 'There was an error enabling actions';
 const ERROR_POSTING_FILE_MESSAGE = 'There was an error uploading the file';
 const ERROR_DELETING_FILE_MESSAGE = 'There was an error deleting the file';
+const ERROR_SETTING_FONT_SIZE = 'There was an error setting the font size';
+const ERROR_GETTING_FONT_SIZE = 'There was an error getting the font size';
 
 module.exports = {
   ERROR_GETTING_DEVELOPER_MODE,
@@ -176,4 +178,6 @@ module.exports = {
   ERROR_SETTING_ACTIONS_AS_ENABLED,
   ERROR_POSTING_FILE_MESSAGE,
   ERROR_DELETING_FILE_MESSAGE,
+  ERROR_GETTING_FONT_SIZE,
+  ERROR_SETTING_FONT_SIZE,
 };

public/app/listeners/getFontSize.js

@@ -0,0 +1,15 @@
+const { GET_FONT_SIZE_CHANNEL } = require('../config/channels');
+const { ERROR_GENERAL } = require('../config/errors');
+const logger = require('../logger');
+
+const getFontSize = (mainWindow, db) => async () => {
+  try {
+    const fontSize = db.get('user.settings.fontSize').value();
+    mainWindow.webContents.send(GET_FONT_SIZE_CHANNEL, fontSize);
+  } catch (e) {
+    logger.error(e);
+    mainWindow.webContents.send(GET_FONT_SIZE_CHANNEL, ERROR_GENERAL);
+  }
+};
+
+module.exports = getFontSize;

public/app/listeners/index.js

@@ -57,6 +57,8 @@ const deleteFile = require('./deleteFile');
 const installAppUpgrade = require('./installAppUpgrade');
 const getAppUpgrade = require('./getAppUpgrade');
 const getToursEnabled = require('./getToursEnabled');
+const setFontSize = require('./setFontSize');
+const getFontSize = require('./getFontSize');
 
 module.exports = {
   loadSpace,
@@ -117,4 +119,6 @@ module.exports = {
   installAppUpgrade,
   getAppUpgrade,
   getToursEnabled,
+  setFontSize,
+  getFontSize,
 };

public/app/listeners/setFontSize.js

@@ -0,0 +1,15 @@
+const { SET_FONT_SIZE_CHANNEL } = require('../config/channels');
+const { ERROR_GENERAL } = require('../config/errors');
+const logger = require('../logger');
+
+const setFontSize = (mainWindow, db) => async (event, fontSize) => {
+  try {
+    db.set('user.settings.fontSize', fontSize).write();
+    mainWindow.webContents.send(SET_FONT_SIZE_CHANNEL, fontSize);
+  } catch (e) {
+    logger.error(e);
+    mainWindow.webContents.send(SET_FONT_SIZE_CHANNEL, ERROR_GENERAL);
+  }
+};
+
+module.exports = setFontSize;

public/electron.js

@@ -85,6 +85,8 @@ const {
   GET_APP_UPGRADE_CHANNEL,
   INSTALL_APP_UPGRADE_CHANNEL,
   GET_TOURS_ENABLED_CHANNEL,
+  SET_FONT_SIZE_CHANNEL,
+  GET_FONT_SIZE_CHANNEL,
 } = require('./app/config/channels');
 const env = require('./env.json');
 const {
@@ -145,6 +147,8 @@ const {
   installAppUpgrade,
   getAppUpgrade,
   getToursEnabled,
+  setFontSize,
+  getFontSize,
 } = require('./app/listeners');
 const isMac = require('./app/utils/isMac');
 
@@ -493,6 +497,12 @@ app.on('ready', async () => {
     setActionsAsEnabled(mainWindow, db)
   );
 
+  // called when getting the font size
+  ipcMain.on(GET_FONT_SIZE_CHANNEL, getFontSize(mainWindow, db));
+
+  // called when setting the font size
+  ipcMain.on(SET_FONT_SIZE_CHANNEL, setFontSize(mainWindow, db));
+
   // called when getting student mode
   ipcMain.on(GET_USER_MODE_CHANNEL, getUserMode(mainWindow, db));
 

src/actions/user.js

@@ -33,6 +33,10 @@ import {
   SET_ACTION_ACCESSIBILITY_SUCCEEDED,
   FLAG_SETTING_ACTIONS_AS_ENABLED,
   SET_ACTIONS_AS_ENABLED_SUCCEEDED,
+  FLAG_SETTING_FONT_SIZE,
+  SET_FONT_SIZE_SUCCEEDED,
+  GET_FONT_SIZE_SUCCEEDED,
+  FLAG_GETTING_FONT_SIZE,
 } from '../types';
 import {
   ERROR_GETTING_GEOLOCATION,
@@ -52,6 +56,8 @@ import {
   ERROR_SETTING_SPACE_AS_RECENT,
   ERROR_SETTING_ACTION_ACCESSIBILITY,
   ERROR_SETTING_ACTIONS_AS_ENABLED,
+  ERROR_SETTING_FONT_SIZE,
+  ERROR_GETTING_FONT_SIZE,
 } from '../config/messages';
 import {
   GET_USER_FOLDER_CHANNEL,
@@ -69,6 +75,8 @@ import {
   SET_SPACE_AS_RECENT_CHANNEL,
   SET_ACTION_ACCESSIBILITY_CHANNEL,
   SET_ACTIONS_AS_ENABLED_CHANNEL,
+  SET_FONT_SIZE_CHANNEL,
+  GET_FONT_SIZE_CHANNEL,
 } from '../config/channels';
 import { createFlag } from './common';
 import { ERROR_GENERAL } from '../config/errors';
@@ -94,6 +102,8 @@ const flagSettingActionAccessibility = createFlag(
   FLAG_SETTING_ACTION_ACCESSIBILITY
 );
 const flagSettingActionsAsEnabled = createFlag(FLAG_SETTING_ACTIONS_AS_ENABLED);
+const flagSettingFontSize = createFlag(FLAG_SETTING_FONT_SIZE);
+const flagGettingFontSize = createFlag(FLAG_GETTING_FONT_SIZE);
 
 const getGeolocation = async () => async (dispatch) => {
   // only fetch location if online
@@ -535,6 +545,54 @@ const setActionsAsEnabled = (payload) => (dispatch) => {
   }
 };
 
+const setFontSize = (payload) => (dispatch) => {
+  try {
+    dispatch(flagSettingFontSize(true));
+    window.ipcRenderer.send(SET_FONT_SIZE_CHANNEL, payload);
+    window.ipcRenderer.once(SET_FONT_SIZE_CHANNEL, (event, response) => {
+      if (response === ERROR_GENERAL) {
+        toastr.error(
+          i18n.t(ERROR_MESSAGE_HEADER),
+          i18n.t(ERROR_SETTING_FONT_SIZE)
+        );
+      } else {
+        dispatch({
+          type: SET_FONT_SIZE_SUCCEEDED,
+          payload,
+        });
+      }
+      dispatch(flagSettingFontSize(false));
+    });
+  } catch (e) {
+    console.error(e);
+    toastr.error(i18n.t(ERROR_MESSAGE_HEADER), i18n.t(ERROR_SETTING_FONT_SIZE));
+  }
+};
+
+const getFontSize = () => (dispatch) => {
+  try {
+    dispatch(flagGettingFontSize(true));
+    window.ipcRenderer.send(GET_FONT_SIZE_CHANNEL);
+    window.ipcRenderer.once(GET_FONT_SIZE_CHANNEL, (event, response) => {
+      if (response === ERROR_GENERAL) {
+        toastr.error(
+          i18n.t(ERROR_MESSAGE_HEADER),
+          i18n.t(ERROR_GETTING_FONT_SIZE)
+        );
+      } else {
+        dispatch({
+          type: GET_FONT_SIZE_SUCCEEDED,
+          payload: response,
+        });
+      }
+      dispatch(flagGettingFontSize(false));
+    });
+  } catch (e) {
+    console.error(e);
+    toastr.error(i18n.t(ERROR_MESSAGE_HEADER), i18n.t(ERROR_GETTING_FONT_SIZE));
+  }
+};
+
 export {
   getUserFolder,
   getGeolocation,
@@ -552,4 +610,6 @@ export {
   setSpaceAsRecent,
   setActionAccessibility,
   setActionsAsEnabled,
+  setFontSize,
+  getFontSize,
 };

src/components/Settings.js

@@ -26,6 +26,7 @@ import {
   DEFAULT_USER_MODE,
   AUTHENTICATED,
 } from '../config/constants';
+import FontSizeSlider from './common/FontSizeSlider';
 
 const styles = (theme) => ({
   ...Styles(theme),
@@ -74,6 +75,18 @@ export class Settings extends Component {
     );
   };
 
+  renderSpaceSettings = () => {
+    const { t } = this.props;
+    return (
+      <>
+        <Typography variant="h5" color="inherit" className="mt-2">
+          {t('Spaces')}
+        </Typography>
+        <FontSizeSlider />
+      </>
+    );
+  };
+
   render() {
     const { classes, t, authenticated } = this.props;
 
@@ -96,6 +109,10 @@ export class Settings extends Component {
           </FormGroup>
           <Divider variant="middle" classes={{ root: classes.divider }} />
 
+          {this.renderSpaceSettings()}
+
+          <Divider variant="middle" classes={{ root: classes.divider }} />
+
           {authenticated && this.renderActionSettings()}
         </div>
       </Main>

src/components/__snapshots__/Settings.test.js.snap

@@ -29,6 +29,22 @@ exports[`<Settings /> renders correctly 1`] = `
       }
       variant="middle"
     />
+    <WithStyles(ForwardRef(Typography))
+      className="mt-2"
+      color="inherit"
+      variant="h5"
+    >
+      Spaces
+    </WithStyles(ForwardRef(Typography))>
+    <Connect(FontSizeSlider) />
+    <WithStyles(ForwardRef(Divider))
+      classes={
+        Object {
+          "root": "",
+        }
+      }
+      variant="middle"
+    />
     <WithStyles(ForwardRef(Typography))
       className="mt-2"
       color="inherit"

src/components/common/FontSizeSlider.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import { useTranslation } from 'react-i18next';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/core/Slider';
+import { connect } from 'react-redux';
+import Input from '@material-ui/core/Input';
+import FormatSizeIcon from '@material-ui/icons/FormatSize';
+import { setFontSize } from '../../actions';
+import {
+  FONT_SIZE_MAX_VALUE,
+  DEFAULT_FONT_SIZE,
+  FONT_SIZE_MIN_VALUE,
+} from '../../config/constants';
+
+const useStyles = makeStyles({
+  root: {
+    width: 250,
+  },
+  input: {
+    width: 42,
+  },
+});
+
+const FontSizeSlider = ({ fontSize, dispatchSetFontSize }) => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+
+  const handleSliderChange = (event, newValue) => {
+    dispatchSetFontSize(newValue);
+  };
+
+  const handleInputChange = (event) => {
+    dispatchSetFontSize(
+      event.target.value === '' ? '' : Number(event.target.value)
+    );
+  };
+
+  const handleBlur = () => {
+    if (fontSize < FONT_SIZE_MIN_VALUE) {
+      dispatchSetFontSize(FONT_SIZE_MIN_VALUE);
+    } else if (fontSize > FONT_SIZE_MAX_VALUE) {
+      dispatchSetFontSize(FONT_SIZE_MAX_VALUE);
+    }
+  };
+
+  return (
+    <div className={classes.root}>
+      <Typography id="font-size" gutterBottom>
+        {t('Font Size')}
+      </Typography>
+      <Grid container spacing={2} alignItems="center">
+        <Grid item>
+          <FormatSizeIcon />
+        </Grid>
+        <Grid item xs>
+          <Slider
+            value={typeof fontSize === 'number' ? fontSize : DEFAULT_FONT_SIZE}
+            onChange={handleSliderChange}
+            aria-labelledby="font-size"
+            min={FONT_SIZE_MIN_VALUE}
+            max={FONT_SIZE_MAX_VALUE}
+          />
+        </Grid>
+        <Grid item>
+          <Input
+            className={classes.input}
+            value={fontSize}
+            margin="dense"
+            onChange={handleInputChange}
+            onBlur={handleBlur}
+            inputProps={{
+              step: 1,
+              min: FONT_SIZE_MIN_VALUE,
+              max: FONT_SIZE_MAX_VALUE,
+              type: 'number',
+              'aria-labelledby': 'font-size',
+            }}
+          />
+        </Grid>
+      </Grid>
+    </div>
+  );
+};
+
+FontSizeSlider.propTypes = {
+  dispatchSetFontSize: PropTypes.func.isRequired,
+  fontSize: PropTypes.string.isRequired,
+};
+
+const mapStateToProps = ({ authentication }) => ({
+  fontSize:
+    authentication.getIn(['user', 'settings', 'fontSize']) || DEFAULT_FONT_SIZE,
+});
+
+const mapDispatchToProps = {
+  dispatchSetFontSize: setFontSize,
+};
+
+const ConnectedComponent = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(FontSizeSlider);
+
+export default ConnectedComponent;