Merge pull request cboard-org#1301 from RodriSanchez1/feature/SideNav…

…igationButtons Side navigation buttons
l3atjin · Dec 1, 2022 · 4de8576 · 4de8576
2 parents 5aba7fe + 1b9e935
commit 4de8576
Show file tree

Hide file tree

Showing 17 changed files with 435 additions and 54 deletions.
diff --git a/src/components/App/App.reducer.js b/src/components/App/App.reducer.js
@@ -15,6 +15,7 @@ import {
 } from '../Settings/Display/Display.constants';
 
 import { DEFAULT_FONT_FAMILY } from './../../providers/ThemeProvider/ThemeProvider.constants';
+import { NAVIGATION_BUTTONS_STYLE_SIDES } from '../Settings/Navigation/Navigation.constants';
 
 const initialState = {
   isConnected: true,
@@ -43,6 +44,7 @@ const initialState = {
     active: false,
     shareShowActive: false,
     bigScrollButtonsActive: false,
+    navigationButtonsStyle: NAVIGATION_BUTTONS_STYLE_SIDES,
     caBackButtonActive: false,
     quickUnlockActive: false,
     removeOutputActive: false,

diff --git a/src/components/App/__tests__/App.reducer.test.js b/src/components/App/__tests__/App.reducer.test.js
@@ -9,6 +9,7 @@ import {
 import { LOGIN_SUCCESS, LOGOUT } from '../../Account/Login/Login.constants';
 import { DISPLAY_SIZE_STANDARD } from '../../Settings/Display/Display.constants';
 import { DEFAULT_FONT_FAMILY } from '../../../providers/ThemeProvider/ThemeProvider.constants';
+import { NAVIGATION_BUTTONS_STYLE_SIDES } from '../../Settings/Navigation/Navigation.constants';
 
 let mockApp, uData, initialState;
 
@@ -41,6 +42,7 @@ describe('reducer', () => {
         active: false,
         bigScrollButtonsActive: false,
         caBackButtonActive: false,
+        navigationButtonsStyle: NAVIGATION_BUTTONS_STYLE_SIDES,
         liveMode: false,
         shareShowActive: false,
         quickUnlockActive: false,
@@ -66,6 +68,7 @@ describe('reducer', () => {
         active: false,
         bigScrollButtonsActive: false,
         caBackButtonActive: false,
+        navigationButtonsStyle: NAVIGATION_BUTTONS_STYLE_SIDES,
         liveMode: false,
         shareShowActive: false,
         quickUnlockActive: false,

diff --git a/src/components/Board/Board.component.js b/src/components/Board/Board.component.js
@@ -33,6 +33,7 @@ import messages from './Board.messages';
 import './Board.css';
 import BoardTour from './BoardTour/BoardTour';
 import ScrollButtons from '../ScrollButtons';
+import { NAVIGATION_BUTTONS_STYLE_SIDES } from '../Settings/Navigation/Navigation.constants';
 
 export class Board extends Component {
   static propTypes = {
@@ -317,6 +318,9 @@ export class Board extends Component {
     const tiles = this.renderTiles(board.tiles);
     const cols = DISPLAY_SIZE_GRID_COLS[this.props.displaySettings.uiSize];
     const isLoggedIn = !!userData.email;
+    const isNavigationButtonsOnTheSide =
+      navigationSettings.navigationButtonsStyle ===
+      NAVIGATION_BUTTONS_STYLE_SIDES;
 
     return (
       <Scanner
@@ -417,7 +421,20 @@ export class Board extends Component {
           <Scannable>
             <div
               id="BoardTilesContainer"
-              className="Board__tiles"
+              className={classNames(
+                'Board__tiles',
+                {
+                  CABackButtonOnTheSides:
+                    navigationSettings.caBackButtonActive &&
+                    isNavigationButtonsOnTheSide &&
+                    !isSelecting
+                },
+                {
+                  ScrollButtonsOnTheSides:
+                    navigationSettings.bigScrollButtonsActive &&
+                    isNavigationButtonsOnTheSide
+                }
+              )}
               onKeyUp={this.handleBoardKeyUp}
               ref={this.boardContainerRef}
             >
@@ -451,6 +468,7 @@ export class Board extends Component {
                   fixedRef={this.fixedBoardContainerRef}
                   setIsScroll={setIsScroll}
                   isBigScrollBtns={navigationSettings.bigScrollButtonsActive}
+                  isNavigationButtonsOnTheSide={isNavigationButtonsOnTheSide}
                 />
               )}
 
@@ -462,6 +480,10 @@ export class Board extends Component {
                 rows={board.grid ? board.grid.rows : DEFAULT_ROWS_NUMBER}
                 onAddRemoveRow={onAddRemoveRow}
                 onAddRemoveColumn={onAddRemoveColumn}
+                moveColsButtonToLeft={
+                  navigationSettings.bigScrollButtonsActive &&
+                  isNavigationButtonsOnTheSide
+                }
               />
             </div>
           </Scannable>
@@ -470,11 +492,11 @@ export class Board extends Component {
             <ScrollButtons
               active={
                 navigationSettings.bigScrollButtonsActive &&
-                !isSelecting &&
                 !isSaving &&
                 !this.props.scannerSettings.active &&
-                isScroll
+                (isScroll || isNavigationButtonsOnTheSide)
               }
+              isScroll={isScroll}
               isLocked={isLocked}
               boardContainer={
                 board.isFixed
@@ -483,6 +505,7 @@ export class Board extends Component {
               }
               totalRows={totalRows}
               boardId={board.id}
+              isNavigationButtonsOnTheSide={isNavigationButtonsOnTheSide}
             />
           )}
 
@@ -496,6 +519,8 @@ export class Board extends Component {
             navHistory={this.props.navHistory}
             previousBoard={onRequestPreviousBoard}
             toRootBoard={onRequestToRootBoard}
+            isLocked={this.props.isLocked}
+            isNavigationButtonsOnTheSide={isNavigationButtonsOnTheSide}
           />
 
           <Dialog

diff --git a/src/components/Board/Board.css b/src/components/Board/Board.css
@@ -62,6 +62,20 @@
   -webkit-overflow-scrolling: touch;
 }
 
+.CABackButtonOnTheSides {
+  margin-left: 5rem;
+}
+
+.ScrollButtonsOnTheSides {
+  margin-right: 5rem;
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+/* Hide scrollbar for Chrome, Safari and Opera */
+.ScrollButtonsOnTheSides::-webkit-scrollbar {
+  display: none;
+}
+
 .is-dark .Board__tiles {
   background: #444;
 }

diff --git a/src/components/EditGridButtons/EditGridButtons.component.js b/src/components/EditGridButtons/EditGridButtons.component.js
@@ -15,7 +15,8 @@ class EditGridButtons extends React.Component {
     rows: PropTypes.number.isRequired,
     columns: PropTypes.number.isRequired,
     onAddRemoveColumn: PropTypes.func.isRequired,
-    onAddRemoveRow: PropTypes.func.isRequired
+    onAddRemoveRow: PropTypes.func.isRequired,
+    moveColsButtonToLeft: PropTypes.bool
   };
 
   constructor(props) {
@@ -73,14 +74,18 @@ class EditGridButtons extends React.Component {
   };
 
   render() {
-    const { active } = this.props;
+    const { active, moveColsButtonToLeft } = this.props;
     if (!active) {
       return null;
     }
 
     return (
       <React.Fragment>
-        <div className="EditGridButtons right">
+        <div
+          className={`EditGridButtons ${
+            moveColsButtonToLeft ? 'left' : 'right'
+          }`}
+        >
           {this.renderButtons(true, false)}
         </div>
         <div className="EditGridButtons bottom">

diff --git a/src/components/EditGridButtons/EditGridButtons.css b/src/components/EditGridButtons/EditGridButtons.css
@@ -16,7 +16,8 @@
 
 .EditGridButtons.left {
   top: 55%;
-  left: 0;
+  left: 6px;
+  max-width: 4rem;
 }
 
 .EditGridButtons.right {
@@ -25,7 +26,8 @@
   max-width: 4rem;
 }
 
-.EditGridButtons.right button {
+.EditGridButtons.right button,
+.EditGridButtons.left button {
   min-height: 50px;
   padding-right: 10px;
   padding-left: 10px;

diff --git a/src/components/FixedGrid/Grid.js b/src/components/FixedGrid/Grid.js
@@ -28,6 +28,7 @@ function Grid(props) {
     setIsScroll,
     fixedRef,
     isBigScrollBtns,
+    isNavigationButtonsOnTheSide,
     ...other
   } = props;
 
@@ -215,7 +216,10 @@ function Grid(props) {
 
   return (
     <div
-      className={styles.root}
+      className={classNames(styles.root, {
+        FixedGridScrollButtonsOnTheSides:
+          isNavigationButtonsOnTheSide && isBigScrollBtns
+      })}
       style={style}
       onKeyDown={handleOnKeyDown}
       ref={props.fixedRef}
@@ -283,9 +287,13 @@ Grid.propTypes = {
    */
   fixedRef: PropTypes.object,
   /**
-   * Ref to fixed grid container
+   * Big scroll buttons active
+   */
+  isBigScrollBtns: PropTypes.bool,
+  /**
+   * Is navigation buttons on the side
    */
-  isBigScrollBtns: PropTypes.bool
+  isNavigationButtonsOnTheSide: PropTypes.bool
 };
 
 export default Grid;
diff --git a/src/components/Grid/Grid.css b/src/components/Grid/Grid.css
@@ -10,3 +10,12 @@
 .dragging .react-grid-item.cssTransforms {
   transition-property: transform;
 }
+
+.FixedGridScrollButtonsOnTheSides::-webkit-scrollbar {
+  display: none;
+}
+
+.FixedGridScrollButtonsOnTheSides {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
diff --git a/src/components/NavigationButtons/NavigationButtons.component.js b/src/components/NavigationButtons/NavigationButtons.component.js
@@ -9,36 +9,59 @@ const NavigationButtons = ({
   active,
   navHistory,
   previousBoard,
-  toRootBoard
+  toRootBoard,
+  isLocked,
+  isNavigationButtonsOnTheSide
 }) => {
   if (!active) {
     return null;
   }
+  const classPreviousBoardButton = isNavigationButtonsOnTheSide
+    ? `SideNavigationButton SideButtonPreviousBoard ${
+        navHistory.length > 2 ? '' : 'disable'
+      }`
+    : `NavigationButton left`;
+
+  const classToRootBoardButton = isNavigationButtonsOnTheSide
+    ? `SideNavigationButton SideButtonToRootBoard ${
+        navHistory.length > 1 ? '' : 'disable'
+      }`
+    : 'NavigationButton right';
 
   return (
     <React.Fragment>
-      {navHistory.length > 2 && (
-        <div className="NavigationButton left">
-          <button onClick={toRootBoard}>
-            <FirstPageIcon />
-          </button>
-        </div>
-      )}
-      {navHistory.length > 1 && (
-        <div className="NavigationButton right">
-          <button onClick={previousBoard}>
-            <ChevronLeftIcon />
-          </button>
-        </div>
-      )}
+      <div
+        className={
+          isNavigationButtonsOnTheSide
+            ? `SideNavigationButtonsContainer ${!isLocked ? 'moveDown' : ''}`
+            : ''
+        }
+      >
+        {(navHistory.length > 2 || isNavigationButtonsOnTheSide) && (
+          <div className={classPreviousBoardButton}>
+            <button onClick={toRootBoard}>
+              <FirstPageIcon />
+            </button>
+          </div>
+        )}
+        {(navHistory.length > 1 || isNavigationButtonsOnTheSide) && (
+          <div className={classToRootBoardButton}>
+            <button onClick={previousBoard}>
+              <ChevronLeftIcon />
+            </button>
+          </div>
+        )}
+      </div>
     </React.Fragment>
   );
 };
 
 NavigationButtons.props = {
   navHistory: PropTypes.arrayOf(PropTypes.string),
   previousBoard: PropTypes.func,
-  toRootBoard: PropTypes.func
+  toRootBoard: PropTypes.func,
+  isLocked: PropTypes.bool,
+  isNavigationButtonsOnTheSide: PropTypes.bool
 };
 
 export default NavigationButtons;