Relocated row and column selectors

src/components/Board/Board.component.js

@@ -510,10 +510,7 @@ export class Board extends Component {
                   rows={board.grid ? board.grid.rows : DEFAULT_ROWS_NUMBER}
                   onAddRemoveRow={onAddRemoveRow}
                   onAddRemoveColumn={onAddRemoveColumn}
-                  moveColsButtonToLeft={
-                    navigationSettings.bigScrollButtonsActive &&
-                    isNavigationButtonsOnTheSide
-                  }
+                  position="toolbar-left"
                 />
               </div>
             </Scannable>

src/components/Board/EditToolbar/EditToolbar.css

@@ -59,13 +59,16 @@
   order: 2;
   justify-content: flex-end;
 }
+
 @media (max-width: 480px) {
   .EditToolbar .EditToolbar__BoardTitle {
     display: none;
   }
+
   .SelectedCounter {
     display: none;
   }
+
   .EditToolbar__group .MuiIconButton-root {
     padding: 9px;
   }

src/components/EditGridButtons/EditGridButtons.component.js

@@ -16,82 +16,92 @@ class EditGridButtons extends React.Component {
     columns: PropTypes.number.isRequired,
     onAddRemoveColumn: PropTypes.func.isRequired,
     onAddRemoveRow: PropTypes.func.isRequired,
-    moveColsButtonToLeft: PropTypes.bool
+    position: PropTypes.string
   };
 
-  constructor(props) {
-    super(props);
+  static defaultProps = {
+    position: 'toolbar-left'
+  };
 
-    this.state = {};
-  }
+  onAddRemoveColumn = (isAdd, isLeftOrTop) => {
+    this.props.onAddRemoveColumn(isAdd, isLeftOrTop);
+  };
 
-  onAddRemoveColumn(isAdd, isLeftOrTop) {
-    const { onAddRemoveColumn } = this.props;
-    onAddRemoveColumn(isAdd, isLeftOrTop);
-  }
+  onAddRemoveRow = (isAdd, isLeftOrTop) => {
+    this.props.onAddRemoveRow(isAdd, isLeftOrTop);
+  };
 
-  onAddRemoveRow(isAdd, isLeftOrTop) {
-    const { onAddRemoveRow } = this.props;
-    onAddRemoveRow(isAdd, isLeftOrTop);
-  }
+  renderColumnButtons = () => {
+    const { columns } = this.props;
+    return (
+      <ButtonGroup
+        orientation="horizontal"
+        color="primary"
+        aria-label="edit_grid_column_buttons"
+        size="small"
+        variant="contained"
+      >
+        <Button
+          onClick={() => this.onAddRemoveColumn(false, false)}
+          aria-label="remove_column"
+        >
+          <KeyboardArrowLeftIcon />
+        </Button>
+        <Button aria-label="column_count" disabled>
+          {columns}
+        </Button>
+        <Button
+          onClick={() => this.onAddRemoveColumn(true, false)}
+          aria-label="add_column"
+        >
+          <KeyboardArrowRightIcon />
+        </Button>
+      </ButtonGroup>
+    );
+  };
 
-  renderButtons = (isVertical, isLeftOrTop) => {
-    const { rows, columns } = this.props;
+  renderRowButtons = () => {
+    const { rows } = this.props;
     return (
       <ButtonGroup
-        orientation={isVertical ? 'vertical' : 'horizontal'}
+        orientation="horizontal"
         color="primary"
-        aria-label="edit_grid_button_group"
-        fullWidth={true}
-        size="large"
+        aria-label="edit_grid_row_buttons"
+        size="small"
         variant="contained"
       >
         <Button
-          onClick={
-            isVertical
-              ? this.onAddRemoveColumn.bind(this, true, isLeftOrTop)
-              : this.onAddRemoveRow.bind(this, true, isLeftOrTop)
-          }
-          aria-label="edit_grid_button"
+          onClick={() => this.onAddRemoveRow(false, false)}
+          aria-label="remove_row"
         >
-          {isVertical ? <KeyboardArrowRightIcon /> : <KeyboardArrowDownIcon />}
+          <KeyboardArrowDownIcon />
         </Button>
-        <Button aria-label="edit_grid_value">
-          {isVertical ? columns.toString() : rows.toString()}
+        <Button aria-label="row_count" disabled>
+          {rows}
         </Button>
         <Button
-          onClick={
-            isVertical
-              ? this.onAddRemoveColumn.bind(this, false, isLeftOrTop)
-              : this.onAddRemoveRow.bind(this, false, isLeftOrTop)
-          }
-          aria-label="edit_grid_button"
+          onClick={() => this.onAddRemoveRow(true, false)}
+          aria-label="add_row"
         >
-          {isVertical ? <KeyboardArrowLeftIcon /> : <KeyboardArrowUpIcon />}
+          <KeyboardArrowUpIcon />
         </Button>
       </ButtonGroup>
     );
   };
 
   render() {
-    const { active, moveColsButtonToLeft } = this.props;
+    const { active, position } = this.props;
     if (!active) {
       return null;
     }
 
     return (
-      <React.Fragment>
-        <div
-          className={`EditGridButtons ${
-            moveColsButtonToLeft ? 'left' : 'right'
-          }`}
-        >
-          {this.renderButtons(true, false)}
-        </div>
-        <div className="EditGridButtons bottom">
-          {this.renderButtons(false, false)}
+      <div className={`EditGridButtons ${position}`}>
+        <div className="button-container">
+          {this.renderRowButtons()}
+          {this.renderColumnButtons()}
         </div>
-      </React.Fragment>
+      </div>
     );
   }
 }

src/components/EditGridButtons/EditGridButtons.css

@@ -1,53 +1,40 @@
 .EditGridButtons {
   position: fixed;
-  z-index: 1000;
+  z-index: 1100;
   padding: 8px;
-  background: rgba(40, 158, 255, 0.5);
-  border-radius: 6px;
-  overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.EditGridButtons:hover {
-  background: rgba(40, 158, 255, 0.8);
+.EditGridButtons.toolbar-left {
+  top: 170px;
+  left: 170px;
+  transform: translateY(0);
 }
 
-.EditGridButtons.left {
-  top: 55%;
-  left: 6px;
-  max-width: 4rem;
-}
-
-.EditGridButtons.right {
-  top: 55%;
-  right: 6px;
-  max-width: 4rem;
-}
-
-.EditGridButtons.right button,
-.EditGridButtons.left button {
-  min-height: 50px;
-  padding-right: 10px;
-  padding-left: 10px;
+.EditGridButtons.toolbar-left .button-container {
+  display: flex;
+  gap: 10px;
+  align-items: center;
 }
 
-.EditGridButtons.top {
-  left: 40%;
-  top: 240px;
+.EditGridButtons.toolbar-left button {
+  min-width: 40px;
+  padding: 2px 8px;
 }
 
-.EditGridButtons.bottom {
-  left: 50%;
-  margin-right: -50%;
-  transform: translate(-50%);
-  bottom: 6px;
-  max-width: 50%;
-  max-height: 4rem;
+.EditGridButtons .MuiButton-root.Mui-disabled {
+  background-color: #1976d2 !important;
+  color: white !important;
 }
 
 @media (max-width: 480px) {
+  .EditGridButtons.toolbar-left {
+    left: 150px;
+    top: 120px;
+  }
+
   .EditGridButtons button svg {
     width: 100%;
     height: 100%;