Merge pull request #71 from sprintly/drop-target

Drop target styling

app/lib/status-map.js

@@ -0,0 +1,10 @@
+const STATUSES = {
+  'someday': 'Someday',
+  'backlog': 'Backlog',
+  'in-progress': 'Current',
+  'completed': 'Complete',
+  'accepted': 'Accepted'
+};
+
+export default STATUSES;
+

app/stores/product-store.js

@@ -9,13 +9,8 @@ import AppDispatcher from '../dispatchers/app-dispatcher';
 import ProductConstants from '../constants/product-constants';
 import FilterActions from '../actions/filter-actions';
 
-const ITEM_STATUSES = [
-  'someday',
-  'backlog',
-  'in-progress',
-  'completed',
-  'accepted'
-];
+import STATUSES from '../lib/status-map';
+const ITEM_STATUSES = _.keys(STATUSES);
 
 let productVelocity = {};
 let columnCollections = {};

app/views/components/item-card/details.js

@@ -10,13 +10,7 @@ import SubItems from './subitems'
 import {TagEditor, Tags} from 'sprintly-ui';
 import {DropdownButton, MenuItem, OverlayTrigger, Tooltip, Button, Input} from 'react-bootstrap';
 
-const STATUSES = {
-  'someday': 'Someday',
-  'backlog': 'Backlog',
-  'in-progress': 'Current',
-  'completed': 'Complete',
-  'accepted': 'Accepted'
-};
+import STATUSES from '../../../lib/status-map';
 
 var ItemCardDetails = React.createClass({
 

app/views/components/item-card/index.js

@@ -21,8 +21,7 @@ const cardSpec = {
   },
 
   isDragging(props, monitor) {
-    console.log('is dragging');
-    return true;
+    return monitor.getItem().number === props.item.number;
   }
 };
 
@@ -148,6 +147,7 @@ let ItemCard = React.createClass({
     let connectDragSource = this.props.connectDragSource;
     let classes = {
       'item-card': true,
+      'is-dragging': this.props.isDragging,
       'active': this.props.active || this.state.showDetails,
       [this.props.item.type]: true,
       'parent': this.props.item.sub_items && this.props.item.sub_items.length > 0

app/views/components/item-column/index.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import React, { PropTypes } from 'react/addons';
-import ScoreMap from '../../../lib/score-map';
+import classNames from 'classnames';
+import STATUS_MAP from '../../../lib/status-map';
 // Components
 import ItemCard from '../item-card';
 import PlaceholderCards from './placeholder-cards';
@@ -58,7 +59,9 @@ let ItemColumn = React.createClass({
     limit: PropTypes.number.isRequired,
     items: PropTypes.array.isRequired,
     // DnD
-    connectDropTarget: PropTypes.func.isRequired
+    connectDropTarget: PropTypes.func.isRequired,
+    isOver: PropTypes.bool.isRequired,
+    canDrop: PropTypes.bool.isRequired
   },
 
   getInitialState() {
@@ -197,8 +200,14 @@ let ItemColumn = React.createClass({
       this.setSortCriteria(this.props.sortField, direction);
     };
 
+    let classes = classNames({
+      column: true,
+      [this.props.status]: true,
+      'dropzone-active': this.props.canDrop && this.props.isOverCurrent
+    });
+
     return this.props.connectDropTarget(
-      <div style={this.props.colWidth} className={`column ${this.props.status}`} {...this.props}>
+      <div style={this.props.colWidth} className={classes} {...this.props}>
         <ColumnHeader {...this.props}
           reverse={reverseSort}
           setSortCriteria={this.setSortCriteria}
@@ -207,6 +216,9 @@ let ItemColumn = React.createClass({
         />
         {this.columnContent()}
         {this.renderLoadMore()}
+        <div className="column__dropzone">
+          <h3>Move to {STATUS_MAP[this.props.status]}</h3>
+        </div>
       </div>
     );
   }

app/views/pages/items.js

@@ -15,14 +15,7 @@ import ProductActions from '../../actions/product-actions';
 import VelocityActions from '../../actions/velocity-actions';
 
 import helpers from './helpers';
-
-const ITEM_STATUSES = {
-  someday: 'Someday',
-  backlog: 'Backlog',
-  'in-progress': 'Current',
-  completed: 'Done',
-  accepted: 'Accepted'
-};
+import ITEM_STATUSES from '../../lib/status-map';
 
 let ItemsViewController = React.createClass({
 

public/less/components/columns.less

@@ -55,6 +55,29 @@
   max-width: 500px;
 }
 
+.column__dropzone {
+  display: none;
+  background: rgba(0,0,0,0.5);
+  border: 3px dashed #333;
+  position: absolute;
+  float: left;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+
+  h3 {
+    color: #ececec;
+    text-align: center;
+    margin-top: 50%;
+  }
+
+}
+
+.column.dropzone-active .column__dropzone {
+  display: block;
+}
+
 .column__nav {
   margin-top: 93px;
 

public/less/components/item-card.less

@@ -102,6 +102,10 @@
     .opacity(100);
   }
 
+  &.is-dragging {
+    .opacity(0.5);
+  }
+
   .item-card__controls > a:hover {
     color: @darker-grey;
   }