Merge pull request #30 from chrislaskey/drop-preview

Show target when dragging cards
bigardone · May 25, 2016 · ecc9986 · ecc9986
2 parents a98431e + 2906787
commit ecc9986
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 11 deletions.
diff --git a/web/static/css/modules/_boards.sass b/web/static/css/modules/_boards.sass
@@ -240,16 +240,34 @@
 
       .card:not(.form)
         +transition
-        background: #fff
         margin-bottom: $base-spacing/3
-        padding: $base-spacing/3
-        border-radius: $base-border-radius
-        border-bottom: 1px solid $gray
         cursor: pointer
         animation-duration: .3s
         animation-name: fadeIn
         white-space: normal
 
+        &.is-over
+          padding-top: 50px
+          position: relative
+
+          :before
+            background: rgba($dark-gray, .1)
+            border-radius: $base-border-radius
+            content: ""
+            display: block
+            height: 40px
+            width: 100%
+            position: absolute
+            top: 0
+            left: 0
+            margin-bottom: $base-spacing/3
+
+        .card-content
+          background: #fff
+          padding: $base-spacing/3
+          border-radius: $base-border-radius
+          border-bottom: 1px solid $gray
+
         .tags-wrapper
           +clearfix
 

diff --git a/web/static/js/components/cards/card.js b/web/static/js/components/cards/card.js
@@ -2,6 +2,7 @@ import React, {PropTypes}       from 'react';
 import {DragSource, DropTarget} from 'react-dnd';
 import { push }                 from 'react-router-redux';
 import ReactGravatar            from 'react-gravatar';
+import classnames               from 'classnames';
 
 import ItemTypes                from '../../constants/item_types';
 import Actions                  from '../../actions/current_board';
@@ -44,8 +45,9 @@ const cardTarget = {
   isDragging: monitor.isDragging()
 }))
 
-@DropTarget(ItemTypes.CARD, cardTarget, (connect) => ({
-  connectDropTarget: connect.dropTarget()
+@DropTarget(ItemTypes.CARD, cardTarget, (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver()
 }))
 
 export default class Card extends React.Component {
@@ -94,18 +96,25 @@ export default class Card extends React.Component {
   }
 
   render() {
-    const { id, connectDragSource, connectDropTarget, isDragging, name } = this.props;
+    const { id, connectDragSource, connectDropTarget, isDragging, isOver, name } = this.props;
 
     const styles = {
       display: isDragging ? 'none' : 'block',
     };
 
+    const classes = classnames({
+      'card': true,
+      'is-over': isOver
+    });
+
     return connectDragSource(
       connectDropTarget(
-        <div id={`card_${id}`} className="card" style={styles} onClick={::this._handleClick}>
-          {::this._renderTags()}
-          {name}
-          {::this._renderFooter()}
+        <div id={`card_${id}`} className={classes} style={styles} onClick={::this._handleClick}>
+          <div className="card-content">
+            {::this._renderTags()}
+            {name}
+            {::this._renderFooter()}
+          </div>
         </div>
       )
     );