Progress Commit

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/trello-board/controllers/BoardContainer.jsx

@@ -141,12 +141,13 @@ class BoardContainer extends Component {
       laneStyle,
       onCardMoveAcrossLanes,
       t,
+      orientation,
       ...otherProps
     } = this.props;
 
     const { addLaneMode } = this.state;
     // Stick to whitelisting attributes to segregate board and lane props
-    const passthroughProps = pick(this.props, [
+    const passThroughProps = pick(this.props, [
       "onCardMoveAcrossLanes",
       "onLaneScroll",
       "onLaneDelete",
@@ -169,19 +170,19 @@ class BoardContainer extends Component {
       "handleDragEnd",
       "cardDragClass",
       "editLaneTitle",
-      "t"
+      "orientation"
     ]);
 
     return (
-      <components.BoardWrapper style={style} {...otherProps} draggable={false}>
+      <components.BoardWrapper style={style} orientation={orientation} {...otherProps} draggable={false}>
         <PopoverWrapper>
           <Container
-            orientation="horizontal"
+            orientation={orientation === "vertical" ? "vertical" : "horizontal"}
             onDragStart={this.onDragStart}
             dragClass={laneDragClass}
             dropClass={laneDropClass}
             onDrop={this.onLaneDrop}
-            lockAxis="x"
+            lockAxis={orientation === "vertical" ? "y" : "x"}
             getChildPayload={(index) => this.getLaneDetails(index)}
             groupName={this.groupName}
           >
@@ -201,7 +202,7 @@ class BoardContainer extends Component {
                   cardStyle={this.props.cardStyle || lane.cardStyle}
                   editable={editable && !lane.disallowAddingCard}
                   {...otherProps}
-                  {...passthroughProps}
+                  {...passThroughProps}
                 />
               );
               return draggable && laneDraggable ? <Draggable key={lane.id}>{laneToRender}</Draggable> : laneToRender;
@@ -209,9 +210,9 @@ class BoardContainer extends Component {
           </Container>
         </PopoverWrapper>
         {canAddLanes && (
-          <Container orientation="horizontal">
+          <Container orientation={orientation === "vertical" ? "vertical" : "horizontal"}>
             {editable && !addLaneMode ? (
-              <components.NewLaneSection t={t} onClick={this.showEditableLane} />
+              <components.NewLaneSection onClick={this.showEditableLane} />
             ) : (
               addLaneMode && <components.NewLaneForm onCancel={this.hideEditableLane} onAdd={this.addNewLane} t={t} />
             )}
@@ -257,7 +258,9 @@ BoardContainer.propTypes = {
   cardDragClass: PropTypes.string,
   laneDragClass: PropTypes.string,
   laneDropClass: PropTypes.string,
-  onCardMoveAcrossLanes: PropTypes.func.isRequired
+  onCardMoveAcrossLanes: PropTypes.func.isRequired,
+  t: PropTypes.func,
+  orientation: PropTypes.string
 };
 
 BoardContainer.defaultProps = {
@@ -281,7 +284,8 @@ BoardContainer.defaultProps = {
   cardDraggable: true,
   cardDragClass: "react_trello_dragClass",
   laneDragClass: "react_trello_dragLaneClass",
-  laneDropClass: ""
+  laneDropClass: "",
+  orientation: "horizontal"
 };
 
 const mapStateToProps = (state) => {