Ivan - Add icon to drag and drop [skip ci]

client/src/app-components/topic-viewer.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import _ from 'lodash';
 import classNames from 'classnames';
 import {Link} from 'react-router';
@@ -78,11 +79,33 @@ class TopicViewer extends React.Component {
     }
 
     renderArticleItem(article, index) {
+        let props = {
+            className: 'topic-viewer__list-item',
+            key: index,
+            draggable: true
+        };
+
+        if(this.props.editable) {
+            _.extend(props, {
+                onDragOver: (this.state.currentDraggedId) ? this.onItemDragOver.bind(this, article, index) : null,
+                onDrop: (this.state.currentDraggedId) ? this.onItemDrop.bind(this, article, index) : null,
+                onDragStart: () => {
+                    this.setState({currentDraggedId: article.id})
+                },
+                onDragEnd: () => {
+                    if(this.state.currentDraggedId) {
+                        this.setState({articles: this.props.articles, currentDraggedId: 0});
+                    }
+                }
+            });
+        }
+
         return (
-            <li className="topic-viewer__list-item" key={index}>
+            <li {...props}>
                 <Link {...this.getArticleLinkProps(article, index)}>
                     {article.title}
                 </Link>
+                <Icon className="topic-viewer__grab-icon" name="arrows" ref={'grab-' + index}/>
             </li>
         );
     }
@@ -126,31 +149,16 @@ class TopicViewer extends React.Component {
         );
     }
     
-    getArticleLinkProps(article, index) {
+    getArticleLinkProps(article) {
         let classes = {
             'topic-viewer__list-item-button': true,
             'topic-viewer__list-item-hidden': article.hidden
         };
-        
-        let props = {
+
+        return {
             className: classNames(classes),
             to: this.props.articlePath + article.id
         };
-
-        if(this.props.editable) {
-            _.extend(props, {
-                onDragOver: (this.state.currentDraggedId) ? this.onItemDragOver.bind(this, article, index) : null,
-                onDrop: (this.state.currentDraggedId) ? this.onItemDrop.bind(this, article, index) : null,
-                onDragStart: () => this.setState({currentDraggedId: article.id}),
-                onDragEnd: () => {
-                    if(this.state.currentDraggedId) {
-                        this.setState({articles: this.props.articles, currentDraggedId: 0});
-                    }
-                }
-            });
-        }
-
-        return props;
     }
 
     onDeleteClick() {

client/src/app-components/topic-viewer.scss

@@ -38,12 +38,22 @@
             width: 50%;
             color: $secondary-blue;
             margin-bottom: 10px;
+            user-select: none;
 
             &-hidden {
-                width: 80%;
-                display: inline-block;
                 opacity: 0;
             }
+
+            &:hover {
+                .topic-viewer__grab-icon {
+                    display: inline-block;
+                    left: 0;
+                }
+            }
+
+            &-button {
+                user-select: none;
+            }
         }
 
         &-item:before {
@@ -52,10 +62,18 @@
         }
 
         &-item-button {
+            display: inline-block;
             color: $secondary-blue;
         }
     }
 
+    &__grab-icon {
+        color: $grey;
+        cursor: move;
+        margin-left: 10px;
+        display: none;
+    }
+
     &__add-item {
         color: $dark-grey;
     }

client/src/core-components/icon.js

@@ -19,7 +19,7 @@ class Icon extends React.Component {
 
     renderFontIcon() {
         return (
-            <span className={this.getFontIconClass()} aria-hidden="true" style={{color: this.props.color}}/>
+            <span onClick={this.props.onClick} className={this.getFontIconClass()} aria-hidden="true" style={{color: this.props.color}}/>
         );
     }