Merge pull request #625 from cboard-org/push-hide-output

Option for hiding the sentence bar available through the settings menu.
cboard-org · Feb 6, 2020 · 1913e1a · 1913e1a
2 parents db75de7 + d11a7fd
commit 1913e1a
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 20 deletions.
diff --git a/src/components/App/App.reducer.js b/src/components/App/App.reducer.js
@@ -13,7 +13,8 @@ const initialState = {
   isFirstVisit: true,
   displaySettings: {
     uiSize: DISPLAY_SIZE_STANDARD,
-    fontSize: DISPLAY_SIZE_STANDARD
+    fontSize: DISPLAY_SIZE_STANDARD,
+    hideOutputActive: false
   },
   navigationSettings: {
     active: false,

diff --git a/src/components/Board/Board.component.js b/src/components/Board/Board.component.js
@@ -77,7 +77,8 @@ export class Board extends Component {
 
   static defaultProps = {
     displaySettings: {
-      uiSize: 'Standard'
+      uiSize: 'Standard',
+      hideOutputActive: false
     },
     navigationSettings: {},
     scannerSettings: { active: false, delay: 2000, strategy: 'automatic' },
@@ -238,7 +239,11 @@ export class Board extends Component {
           })}
         >
           <Scannable>
-            <div className="Board__output">
+            <div
+              className={classNames('Board__output', {
+                hidden: this.props.displaySettings.hideOutputActive
+              })}
+            >
               <OutputContainer />
             </div>
           </Scannable>

diff --git a/src/components/Board/Board.css b/src/components/Board/Board.css
@@ -1,26 +1,32 @@
 .Board {
   height: 100%;
+  overflow-y: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .Board__output {
-  position: fixed;
+  position: relative;
   top: 0;
   right: 0;
   width: 100%;
   height: 112px;
   z-index: 1;
 }
 
+.hidden {
+  display: none;
+}
+
 .Board__output button[class*='MuiButtonBase-'].scanner__focused {
   outline: 4px solid rgba(255, 0, 0, 1);
 }
 
 .Board__navbar {
-  position: fixed;
-  top: 112px;
+  position: relative;
   right: 0;
   width: 100%;
-  z-index: 3;
+  z-index: 2;
 }
 
 .Board__loading {
@@ -33,15 +39,10 @@
 
 .Board__edit-toolbar,
 .Board__communicator-toolbar {
-  position: fixed;
-  top: 160px;
+  position: relative;
   right: 0;
   width: 100%;
-  z-index: 4;
-}
-
-.Board__edit-toolbar {
-  top: 200px;
+  z-index: 3;
 }
 
 .is-locked .Board__edit-toolbar,
@@ -51,8 +52,9 @@
 
 .Board__tiles {
   position: relative;
-  top: 160px;
-  height: calc(100% - 160px);
+  height: 100%;
+  z-index: 4;
+  flex: 1;
   background: #fff;
   direction: ltr; /* for grid */
   overflow-x: hidden;
@@ -61,7 +63,7 @@
 }
 
 .Board__tiles .Grid {
-  margin-top: 80px;
+  margin-top: 0px;
 }
 
 .is-locked .Board__tiles .Grid {

diff --git a/src/components/Settings/Display/Display.component.js b/src/components/Settings/Display/Display.component.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
+import Switch from '@material-ui/core/Switch';
 import Paper from '@material-ui/core/Paper';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
@@ -19,6 +20,15 @@ import {
   DISPLAY_SIZE_EXTRALARGE
 } from './Display.constants';
 
+const propTypes = {
+  /**
+   * Callback fired when clicking the back button
+   */
+  onClose: PropTypes.func,
+  displaySettings: PropTypes.object.isRequired,
+  updateDisplaySettings: PropTypes.func.isRequired
+};
+
 class Display extends React.Component {
   constructor(props) {
     super(props);
@@ -28,6 +38,12 @@ class Display extends React.Component {
     };
   }
 
+  toggleHideOutput = () => {
+    this.setState({
+      hideOutputActive: !this.state.hideOutputActive
+    });
+  };
+
   onDisplaySettingsChange(displaySetting, event) {
     const {
       target: { value }
@@ -101,15 +117,29 @@ class Display extends React.Component {
                 {this.renderRadioGroup('fontSize')}
               </ListItemSecondaryAction>
             </ListItem>
+            <ListItem>
+              <ListItemText
+                primary={<FormattedMessage {...messages.outputHide} />}
+                secondary={
+                  <FormattedMessage {...messages.outputHideSecondary} />
+                }
+              />
+              <ListItemSecondaryAction>
+                <Switch
+                  checked={this.state.hideOutputActive}
+                  onChange={this.toggleHideOutput}
+                  value="active"
+                  color="primary"
+                />
+              </ListItemSecondaryAction>
+            </ListItem>
           </List>
         </Paper>
       </FullScreenDialog>
     );
   }
 }
 
-Display.propTypes = {
-  displaySettings: PropTypes.object.isRequired
-};
+Display.propTypes = propTypes;
 
 export default Display;
diff --git a/src/components/Settings/Display/Display.messages.js b/src/components/Settings/Display/Display.messages.js
@@ -37,5 +37,13 @@ export default defineMessages({
   fontSizeSecondary: {
     id: 'cboard.components.Settings.Display.fontSizeSecondary',
     defaultMessage: 'App font size'
+  },
+  outputHide: {
+    id: 'cboard.components.Settings.Navigation.outputHide',
+    defaultMessage: 'Hide the output bar'
+  },
+  outputHideSecondary: {
+    id: 'cboard.components.Settings.Navigation.outputHideSecondary',
+    defaultMessage: 'Hides the white bar on the top where you build a sentence.'
   }
 });