Added new setting to display that can force labels to be in lowercase or uppercase

src/components/App/App.reducer.js

@@ -12,7 +12,8 @@ import {
 import { LOGIN_SUCCESS, LOGOUT } from '../Account/Login/Login.constants';
 import {
   DISPLAY_SIZE_STANDARD,
-  LABEL_POSITION_BELOW
+  LABEL_POSITION_BELOW,
+  LABEL_CASE_DEFAULT
 } from '../Settings/Display/Display.constants';
 
 import { DEFAULT_FONT_FAMILY } from './../../providers/ThemeProvider/ThemeProvider.constants';
@@ -39,6 +40,7 @@ const initialState = {
     hideOutputActive: false,
     increaseOutputButtons: false,
     labelPosition: LABEL_POSITION_BELOW,
+    labelCase: LABEL_CASE_DEFAULT,
     darkThemeActive: false
   },
   navigationSettings: {

src/components/Board/Board.component.js

@@ -21,7 +21,10 @@ import EditToolbar from './EditToolbar';
 import Tile from './Tile';
 import EmptyBoard from './EmptyBoard';
 import CommunicatorToolbar from '../Communicator/CommunicatorToolbar';
-import { DISPLAY_SIZE_GRID_COLS } from '../Settings/Display/Display.constants';
+import {
+  DISPLAY_SIZE_GRID_COLS,
+  LABEL_CASE_DEFAULT
+} from '../Settings/Display/Display.constants';
 import NavigationButtons from '../NavigationButtons';
 import EditGridButtons from '../EditGridButtons';
 import { DEFAULT_ROWS_NUMBER, DEFAULT_COLUMNS_NUMBER } from './Board.constants';
@@ -108,6 +111,7 @@ export class Board extends Component {
     displaySettings: {
       uiSize: 'Standard',
       labelPosition: 'Below',
+      labelCase: LABEL_CASE_DEFAULT,
       shareShowActive: false,
       hideOutputActive: false
     },
@@ -222,6 +226,7 @@ export class Board extends Component {
               label={tile.label}
               keyPath={tile.keyPath}
               labelpos={displaySettings.labelPosition}
+              labelCase={displaySettings.labelCase}
             />
 
             {isSelecting && !isSaving && (
@@ -265,6 +270,7 @@ export class Board extends Component {
           label={tile.label}
           keyPath={tile.keyPath}
           labelpos={displaySettings.labelPosition}
+          labelCase={displaySettings.labelCase}
         />
 
         {isSelecting && !isSaving && (

src/components/Board/Output/SymbolOutput/SymbolOutput.js

@@ -10,6 +10,7 @@ import Symbol from '../../Symbol';
 import BackspaceButton from './BackspaceButton';
 import ClearButton from './ClearButton';
 import messages from '../../Board.messages';
+import { LABEL_CASE_DEFAULT } from '../../../Settings/Display/Display.constants';
 import PhraseShare from '../PhraseShare';
 import Scroll from './Scroll';
 import './SymbolOutput.css';
@@ -130,6 +131,7 @@ class SymbolOutput extends PureComponent {
                 label={label}
                 type={type}
                 labelpos="Below"
+                labelCase={LABEL_CASE_DEFAULT}
                 onWrite={onWriteSymbol(index)}
                 intl={intl}
               />

src/components/Board/Symbol/Symbol.js

@@ -5,7 +5,12 @@ import { isCordova } from '../../../cordova-util';
 import OutlinedInput from '@material-ui/core/OutlinedInput';
 import messages from '../Board.messages';
 
-import { LABEL_POSITION_BELOW } from '../../Settings/Display/Display.constants';
+import {
+  LABEL_POSITION_BELOW,
+  LABEL_CASE_LOWER,
+  LABEL_CASE_DEFAULT,
+  LABEL_CASE_UPPER
+} from '../../Settings/Display/Display.constants';
 import './Symbol.css';
 import { Typography } from '@material-ui/core';
 import { getArasaacDB } from '../../../idb/arasaac/arasaacdb';
@@ -20,6 +25,7 @@ const propTypes = {
    */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
   labelpos: PropTypes.string,
+  labelCase: PropTypes.string,
   type: PropTypes.string,
   onWrite: PropTypes.func,
   intl: PropTypes.object
@@ -30,6 +36,7 @@ function Symbol(props) {
     className,
     label,
     labelpos,
+    labelCase,
     keyPath,
     type,
     onWrite,
@@ -76,6 +83,16 @@ function Symbol(props) {
     }
   };
 
+  let labelRender = label;
+
+  if (labelCase === LABEL_CASE_LOWER) {
+    labelRender = label.toLowerCase();
+  } else if (labelCase === LABEL_CASE_UPPER) {
+    labelRender = label.toUpperCase();
+  } else {
+    labelRender = label;
+  }
+
   return (
     <div className={symbolClassName} image={src} {...other}>
       {props.type === 'live' && (
@@ -102,7 +119,7 @@ function Symbol(props) {
       {props.type !== 'live' &&
         props.labelpos === 'Above' &&
         props.labelpos !== 'Hidden' && (
-          <Typography className="Symbol__label">{label}</Typography>
+          <Typography className="Symbol__label">{labelRender}</Typography>
         )}
       {src && (
         <div className="Symbol__image-container">
@@ -112,14 +129,15 @@ function Symbol(props) {
       {props.type !== 'live' &&
         props.labelpos === 'Below' &&
         props.labelpos !== 'Hidden' && (
-          <Typography className="Symbol__label">{label}</Typography>
+          <Typography className="Symbol__label">{labelRender}</Typography>
         )}
     </div>
   );
 }
 Symbol.propTypes = propTypes;
 Symbol.defaultProps = {
-  labelpos: LABEL_POSITION_BELOW
+  labelpos: LABEL_POSITION_BELOW,
+  labelCase: LABEL_CASE_DEFAULT
 };
 
 export default Symbol;

src/components/Board/SymbolSearch/SymbolSearch.component.js

@@ -15,7 +15,10 @@ import { getArasaacDB } from '../../../idb/arasaac/arasaacdb';
 import FullScreenDialog from '../../UI/FullScreenDialog';
 import FilterBar from '../../UI/FilterBar';
 import Symbol from '../Symbol';
-import { LABEL_POSITION_BELOW } from '../../Settings/Display/Display.constants';
+import {
+  LABEL_POSITION_BELOW,
+  LABEL_CASE_DEFAULT
+} from '../../Settings/Display/Display.constants';
 import messages from './SymbolSearch.messages';
 import './SymbolSearch.css';
 
@@ -344,6 +347,7 @@ export class SymbolSearch extends PureComponent {
           image={suggestion.src}
           keyPath={suggestion.keyPath}
           labelpos={LABEL_POSITION_BELOW}
+          labelCase={LABEL_CASE_DEFAULT}
         />
       </div>
     );

src/components/Settings/Display/Display.component.js

@@ -22,7 +22,10 @@ import {
   DISPLAY_SIZE_EXTRALARGE,
   LABEL_POSITION_ABOVE,
   LABEL_POSITION_BELOW,
-  LABEL_POSITION_HIDDEN
+  LABEL_POSITION_HIDDEN,
+  LABEL_CASE_LOWER,
+  LABEL_CASE_DEFAULT,
+  LABEL_CASE_UPPER
 } from './Display.constants';
 
 import {
@@ -104,6 +107,25 @@ class Display extends React.Component {
   }
 
   renderSelect(name) {
+    const values = {
+      uiSize: [
+        DISPLAY_SIZE_STANDARD,
+        DISPLAY_SIZE_LARGE,
+        DISPLAY_SIZE_EXTRALARGE
+      ],
+      fontSize: [
+        DISPLAY_SIZE_STANDARD,
+        DISPLAY_SIZE_LARGE,
+        DISPLAY_SIZE_EXTRALARGE
+      ],
+      labelPosition: [
+        LABEL_POSITION_ABOVE,
+        LABEL_POSITION_BELOW,
+        LABEL_POSITION_HIDDEN
+      ],
+      labelCase: [LABEL_CASE_LOWER, LABEL_CASE_DEFAULT, LABEL_CASE_UPPER]
+    };
+
     return (
       <FormControl>
         <Select
@@ -113,44 +135,14 @@ class Display extends React.Component {
           value={this.state[name]}
           onChange={e => this.onDisplaySettingsChange(name, e)}
         >
-          <MenuItem
-            value={
-              name === 'labelPosition'
-                ? LABEL_POSITION_ABOVE
-                : DISPLAY_SIZE_STANDARD
-            }
-          >
-            {this.props.intl.formatMessage(
-              name === 'labelPosition'
-                ? messages[LABEL_POSITION_ABOVE]
-                : messages[DISPLAY_SIZE_STANDARD]
-            )}
+          <MenuItem value={values[name][0]}>
+            {this.props.intl.formatMessage(messages[values[name][0]])}
           </MenuItem>
-          <MenuItem
-            value={
-              name === 'labelPosition'
-                ? LABEL_POSITION_BELOW
-                : DISPLAY_SIZE_LARGE
-            }
-          >
-            {this.props.intl.formatMessage(
-              name === 'labelPosition'
-                ? messages[LABEL_POSITION_BELOW]
-                : messages[DISPLAY_SIZE_LARGE]
-            )}
+          <MenuItem value={values[name][1]}>
+            {this.props.intl.formatMessage(messages[values[name][1]])}
           </MenuItem>
-          <MenuItem
-            value={
-              name === 'labelPosition'
-                ? LABEL_POSITION_HIDDEN
-                : DISPLAY_SIZE_EXTRALARGE
-            }
-          >
-            {this.props.intl.formatMessage(
-              name === 'labelPosition'
-                ? messages[LABEL_POSITION_HIDDEN]
-                : messages[DISPLAY_SIZE_EXTRALARGE]
-            )}
+          <MenuItem value={values[name][2]}>
+            {this.props.intl.formatMessage(messages[values[name][2]])}
           </MenuItem>
         </Select>
       </FormControl>
@@ -260,6 +252,19 @@ class Display extends React.Component {
               </ListItemSecondaryAction>
             </ListItem>
             <Divider />
+            <ListItem>
+              <ListItemText
+                className="Display__ListItemText"
+                primary={<FormattedMessage {...messages.labelCase} />}
+                secondary={
+                  <FormattedMessage {...messages.labelCaseSecondary} />
+                }
+              />
+              <ListItemSecondaryAction className="Display__Options">
+                {this.renderSelect('labelCase')}
+              </ListItemSecondaryAction>
+            </ListItem>
+            <Divider />
             <ListItem>
               <ListItemText
                 className="Display__ListItemText"

src/components/Settings/Display/Display.constants.js

@@ -7,6 +7,10 @@ export const LABEL_POSITION_ABOVE = 'Above';
 export const LABEL_POSITION_BELOW = 'Below';
 export const LABEL_POSITION_HIDDEN = 'Hidden';
 
+export const LABEL_CASE_LOWER = 'lower';
+export const LABEL_CASE_DEFAULT = 'default';
+export const LABEL_CASE_UPPER = 'UPPER';
+
 export const DISPLAY_SIZE_GRID_COLS = {
   [DISPLAY_SIZE_STANDARD]: {
     lg: 6,

src/components/Settings/Display/Display.messages.js

@@ -5,7 +5,10 @@ import {
   DISPLAY_SIZE_EXTRALARGE,
   LABEL_POSITION_ABOVE,
   LABEL_POSITION_BELOW,
-  LABEL_POSITION_HIDDEN
+  LABEL_POSITION_HIDDEN,
+  LABEL_CASE_LOWER,
+  LABEL_CASE_DEFAULT,
+  LABEL_CASE_UPPER
 } from './Display.constants';
 
 export default defineMessages({
@@ -37,6 +40,18 @@ export default defineMessages({
     id: 'cboard.components.Settings.Display.LabelPositionHidden',
     defaultMessage: 'Hidden'
   },
+  [LABEL_CASE_LOWER]: {
+    id: 'cboard.components.Settings.Display.LabelCaseLower',
+    defaultMessage: 'lowercase'
+  },
+  [LABEL_CASE_DEFAULT]: {
+    id: 'cboard.components.Settings.Display.LabelCaseDefault',
+    defaultMessage: 'default'
+  },
+  [LABEL_CASE_UPPER]: {
+    id: 'cboard.components.Settings.Display.LabelCaseUpper',
+    defaultMessage: 'UPPERCASE'
+  },
   uiSize: {
     id: 'cboard.components.Settings.Display.uiSize',
     defaultMessage: 'UI Size'
@@ -70,6 +85,15 @@ export default defineMessages({
     defaultMessage:
       'Whether labels on tiles should be visible, or positioned above or below'
   },
+  labelCase: {
+    id: 'cboard.components.Settings.Display.labelCase',
+    defaultMessage: 'Label Case'
+  },
+  labelCaseSecondary: {
+    id: 'cboard.components.Settings.Display.labelCaseSecondary',
+    defaultMessage:
+      'Whether labels on tiles should be left as they are or forced to lowercase or UPPERCASE'
+  },
   outputHide: {
     id: 'cboard.components.Settings.Display.outputHide',
     defaultMessage: 'Hide the output bar'

src/components/Settings/Export/Export.helpers.js

@@ -26,7 +26,10 @@ import {
 } from './Export.constants';
 import {
   LABEL_POSITION_ABOVE,
-  LABEL_POSITION_BELOW
+  LABEL_POSITION_BELOW,
+  LABEL_CASE_LOWER,
+  LABEL_CASE_DEFAULT,
+  LABEL_CASE_UPPER
 } from '../Display/Display.constants';
 import {
   isAndroid,
@@ -630,8 +633,20 @@ const addTileToGrid = async (
     border: PDF_GRID_BORDER[labelPosition].imageData
   };
 
+  const labelCase = getDisplaySettings().labelCase || LABEL_CASE_DEFAULT;
+
+  let labelRender = label;
+
+  if (labelCase === LABEL_CASE_LOWER) {
+    labelRender = label.toLowerCase();
+  } else if (labelCase === LABEL_CASE_UPPER) {
+    labelRender = label.toUpperCase();
+  } else {
+    labelRender = label;
+  }
+
   const labelData = {
-    text: label,
+    text: labelRender,
     alignment: 'center',
     fontSize: labelFontSize,
     fillColor: hexBackgroundColor,

src/components/Settings/Settings.messages.js

@@ -160,6 +160,15 @@ export default defineMessages({
     defaultMessage:
       'You can choose where to position the label. It can be above, below or hidden.'
   },
+  labelCaseTitle: {
+    id: 'cboard.components.Settings.labelCaseTitle',
+    defaultMessage: 'Label case'
+  },
+  labelCaseDescrip: {
+    id: 'cboard.components.Settings.labelCaseDescrip',
+    defaultMessage:
+      'You can leave the case of the characters as they are or force them to lowercase or UPPERCASE.'
+  },
   enableDarkThemeTitle: {
     id: 'cboard.components.Settings.enableDarkThemeTitle',
     defaultMessage: 'Enable dark theme'