Populate the theme list dynamically, and only show the theme picker if mulitple themes are defined

__tests__/src/components/ChangeThemeDialog.test.js

@@ -12,7 +12,8 @@ function createWrapper(props) {
       handleClose={() => {}}
       setSelectedTheme={() => {}}
       t={t => (t)}
-      theme="light"
+      selectedTheme="light"
+      themeIds={['light', 'dark']}
       {...props}
     />,
   );

__tests__/src/components/WorkspaceMenu.test.js

@@ -7,7 +7,7 @@ function createShallow(props) {
   return shallow(
     <WorkspaceMenu
       containerId="mirador"
-
+      showThemePicker
       {...props}
     />,
   );

__tests__/src/selectors/config.test.js

@@ -44,8 +44,21 @@ describe('getShowZoomControlsConfig', () => {
 
 describe('getTheme', () => {
   it('returns the theme', () => {
-    const state = { config: { theme: { whatever: 'dark' } } };
-    expect(getTheme(state)).toEqual({ whatever: 'dark' });
+    const state = {
+      config: {
+        selectedTheme: 'custom',
+        theme: {
+          whatever: 'dark',
+        },
+        themes: {
+          custom: {
+            and_another_thing: true,
+          },
+        },
+      },
+    };
+
+    expect(getTheme(state)).toEqual({ and_another_thing: true, whatever: 'dark' });
   });
 });
 

src/components/ChangeThemeDialog.js

@@ -39,8 +39,9 @@ export class ChangeThemeDialog extends Component {
       classes,
       handleClose,
       open,
+      selectedTheme,
       t,
-      theme,
+      themeIds,
     } = this.props;
     return (
       <Dialog
@@ -53,19 +54,17 @@ export class ChangeThemeDialog extends Component {
           </Typography>
         </DialogTitle>
         <DialogContent className={classes.dialogContent}>
-          <ListKeyboardNavigation selected={theme} onChange={this.handleThemeChange}>
-            <ListItem className={classes.listitem} value="light">
+          <ListKeyboardNavigation selected={selectedTheme} onChange={this.handleThemeChange}>
+            {
+              themeIds.map(value => (
+                <ListItem key={value} className={classes.listitem} value={value}>
                   <ListItemIcon>
-                <PaletteIcon className={classes.lightColor} />
+                    <PaletteIcon className={classes[value]} />
                   </ListItemIcon>
-              <ListItemText>{t('light')}</ListItemText>
-            </ListItem>
-            <ListItem className={classes.listitem} value="dark">
-              <ListItemIcon>
-                <PaletteIcon className={classes.darkColor} />
-              </ListItemIcon>
-              <ListItemText>{t('dark')}</ListItemText>
+                  <ListItemText>{t(value)}</ListItemText>
                 </ListItem>
+              ))
+            }
           </ListKeyboardNavigation>
         </DialogContent>
       </Dialog>
@@ -77,11 +76,13 @@ ChangeThemeDialog.propTypes = {
   classes: PropTypes.objectOf(PropTypes.string).isRequired,
   handleClose: PropTypes.func.isRequired,
   open: PropTypes.bool,
+  selectedTheme: PropTypes.string.isRequired,
   setSelectedTheme: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
-  theme: PropTypes.string.isRequired,
+  themeIds: PropTypes.arrayOf(PropTypes.string),
 };
 
 ChangeThemeDialog.defaultProps = {
   open: false,
+  themeIds: [],
 };

src/components/WorkspaceMenu.js

@@ -67,6 +67,7 @@ export class WorkspaceMenu extends Component {
       containerId,
       handleClose,
       anchorEl,
+      showThemePicker,
       isWorkspaceAddVisible,
       t,
       showZoomControls,
@@ -118,6 +119,7 @@ export class WorkspaceMenu extends Component {
           <NestedMenu label={t('language')}>
             <LanguageSettings afterSelect={handleClose} />
           </NestedMenu>
+          { showThemePicker && (
             <MenuItem
               aria-haspopup="true"
               onClick={(e) => { this.handleMenuItemClick('changeTheme', e); handleClose(e); }}
@@ -125,6 +127,7 @@ export class WorkspaceMenu extends Component {
             >
               <Typography variant="body1">{t('changeTheme')}</Typography>
             </MenuItem>
+          )}
         </Menu>
         {Boolean(changeTheme.open) && (
           <ChangeThemeDialog
@@ -150,6 +153,7 @@ WorkspaceMenu.propTypes = {
   containerId: PropTypes.string.isRequired,
   handleClose: PropTypes.func.isRequired,
   isWorkspaceAddVisible: PropTypes.bool,
+  showThemePicker: PropTypes.bool,
   showZoomControls: PropTypes.bool,
   t: PropTypes.func,
   toggleZoomControls: PropTypes.func,
@@ -158,6 +162,7 @@ WorkspaceMenu.propTypes = {
 WorkspaceMenu.defaultProps = {
   anchorEl: null,
   isWorkspaceAddVisible: false,
+  showThemePicker: false,
   showZoomControls: false,
   t: key => key,
   toggleZoomControls: () => {},

src/config/settings.js

@@ -4,7 +4,7 @@ export default {
     width: 50,
   },
   selectedTheme: 'light', // dark also available
-  theme: { // Sets up a MaterialUI theme. See https://material-ui.com/customization/default-theme/
+  themes: {
     dark: {
       palette: {
         type: 'dark',
@@ -13,6 +13,13 @@ export default {
         }
       }
     },
+    light: {
+      palette: {
+        type: 'light',
+      }
+    }
+  },
+  theme: { // Sets up a MaterialUI theme. See https://material-ui.com/customization/default-theme/
     palette: {
       type: 'light',
       primary: {

src/containers/ChangeThemeDialog.js

@@ -4,6 +4,7 @@ import { withStyles } from '@material-ui/core';
 import { withTranslation } from 'react-i18next';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
+import { getThemeIds } from '../state/selectors';
 import { ChangeThemeDialog } from '../components/ChangeThemeDialog';
 
 /**
@@ -21,18 +22,19 @@ const mapDispatchToProps = (dispatch, { windowId }) => ({
  * @private
  */
 const mapStateToProps = state => ({
-  theme: state.config.selectedTheme,
+  selectedTheme: state.config.selectedTheme,
+  themeIds: getThemeIds(state),
 });
 
 /** */
 const styles = theme => ({
-  darkColor: {
+  dark: {
     color: '#000000',
   },
   dialogContent: {
     padding: 0,
   },
-  lightColor: {
+  light: {
     color: '#BDBDBD',
   },
   listitem: {

src/containers/WorkspaceMenu.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
-import { getContainerId, getShowZoomControlsConfig } from '../state/selectors';
+import { getContainerId, getShowZoomControlsConfig, getThemeIds } from '../state/selectors';
 import { WorkspaceMenu } from '../components/WorkspaceMenu';
 
 /**
@@ -23,6 +23,7 @@ const mapDispatchToProps = {
 const mapStateToProps = state => ({
   containerId: getContainerId(state),
   isWorkspaceAddVisible: state.workspace.isWorkspaceAddVisible,
+  showThemePicker: getThemeIds(state).length > 0,
   showZoomControls: getShowZoomControlsConfig(state),
 });
 

src/state/selectors/config.js

@@ -27,7 +27,12 @@ export const getShowZoomControlsConfig = createSelector(
 
 export const getTheme = createSelector(
   [getConfig],
-  ({ theme, selectedTheme }) => deepmerge(theme, theme[selectedTheme] || {}),
+  ({ theme, themes, selectedTheme }) => deepmerge(theme, themes[selectedTheme] || {}),
+);
+
+export const getThemeIds = createSelector(
+  [getConfig],
+  ({ themes }) => Object.keys(themes),
 );
 
 export const getWorkspaceType = createSelector(