finish drag and drop system

UI/src/components/role/Role.sass

@@ -3,7 +3,6 @@
   border-radius: 32px
   box-sizing: border-box
   height: 32px
-  margin: 0 6px 6px 0
   padding: 4px
   display: inline-flex
   font-weight: 600
@@ -13,8 +12,11 @@
   vertical-align: baseline
   transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out
   transform: translateZ(0)
+  margin: 0 6px 6px 0
+  position: relative
 
   &.role__button
+
     .role__option
       &:hover
         cursor: inherit
@@ -67,13 +69,34 @@
 
   &.role__drag
     box-shadow: none
-    &:hover
+    &:hover, &.is-dragging
       transform: translateZ(0) translateY(-1px)
       box-shadow: 0 1px 2px rgba(0,0,0,0.3)
       background-color: rgba(#ccc,0.03)
       cursor: grab
     &:active
       cursor: grabbing
+    
+    &::after
+      position: absolute
+      top: -1px
+      bottom: -1px
+      left: -1px
+      right: -1px
+      border-radius: 32px
+      background-color: var(--c-3)
+      border: 2px dashed var(--c-7)
+      content: ""
+      opacity: 0
+      transition: opacity 0.15s ease-in-out
+      box-sizing: border-box
+
+    &.is-dragging
+      transition: border-color 0s ease-out 0.15s
+      border-color: transparent
+      &::after
+        opacity: 1
+
 
 .role__option:active, .role:active .role__option:not(:active)
   transform: translateY(0) translateZ(0px) !important  

UI/src/components/role/draggable.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+import { DragSource } from 'react-dnd'
+
+import Role from './index'
+
+@DragSource(Symbol.for('dnd: role'), {
+  beginDrag ({ role, categoryId }) {
+    return { role, category: categoryId }
+  }
+},
+(connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  isDragging: monitor.isDragging()
+}))
+export default class DraggableRole extends Component {
+  render () {
+    return <Role {...this.props} type='drag' />
+  }
+}

UI/src/components/role/index.js

@@ -15,9 +15,11 @@ class Role extends Component {
   }
 
   render () {
-    let { role, selected, disabled, type, provided } = this.props
+    let { role, selected, disabled, type, isDragging } = this.props
     type = type || 'button'
 
+    // console.log(this.props)
+
     let color = Color(role.get('color'))
 
     if (color.rgbNumber() === 0) {
@@ -27,14 +29,14 @@ class Role extends Component {
     const c = color
     let hc = color.lighten(0.1)
 
-    return <div
+    const out = <div
       onClick={() => {
         if (!disabled && this.props.onToggle != null) {
           this.props.onToggle(!selected, selected) }
         }
       }
       {...((disabled) ? { 'uk-tooltip': '', title: "I don't have permissions to grant this." } : {})}
-      className={`role font-sans-serif ${(disabled) ? 'disabled' : ''} role__${type}`}
+      className={`role font-sans-serif ${(disabled) ? 'disabled' : ''} ${(isDragging) ? 'is-dragging' : ''} role__${type}`}
       style={{
         '--role-color-hex': c.string(),
         '--role-color-hover': hc.string(),
@@ -45,6 +47,12 @@ class Role extends Component {
         {role.get('name')}
       </div>
     </div>
+
+    if (type === 'drag' && this.props.connectDragSource != null) {
+      return this.props.connectDragSource(out)
+    }
+
+    return out
   }
 }