From b9ecaaa73efc910d8581310ce834a9fd49771627 Mon Sep 17 00:00:00 2001
From: Aurélien Bompard <aurelien@bompard.org>
Date: Oct 19 2017 16:16:19 +0000
Subject: Use a drag handle for widgets


---

diff --git a/hubs/static/client/app/components/WidgetChrome.css b/hubs/static/client/app/components/WidgetChrome.css
index bd8a405..16c3f48 100644
--- a/hubs/static/client/app/components/WidgetChrome.css
+++ b/hubs/static/client/app/components/WidgetChrome.css
@@ -7,22 +7,8 @@
   width: 100%;
 }
 
-.widget-buttons {
-  font-size: 80%;
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: .3rem;
-}
-
-.widget .widget-buttons a {
-  margin-right: .4rem;
-  color: #373a3c;
-}
-.widget .widget-buttons a:hover {
-  text-decoration: none;
-}
-
-.widget-edit .card-header {
+.widget-edit .drag-handle {
     cursor: ns-resize;
+    margin-right: .5rem;
+    font-size: 14px;
 }
diff --git a/hubs/static/client/app/components/WidgetChrome.js b/hubs/static/client/app/components/WidgetChrome.js
index 3f04c90..485303b 100644
--- a/hubs/static/client/app/components/WidgetChrome.js
+++ b/hubs/static/client/app/components/WidgetChrome.js
@@ -1,10 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { SortableHandle } from 'react-sortable-hoc';
 import { openConfigDialog } from "../core/actions/widget";
 import "./WidgetChrome.css";
 
 
+const DragHandle = SortableHandle(() => (
+  <i className="fa fa-bars mr-2 drag-handle" aria-hidden="true"></i>
+))
+
+
 class WidgetChrome extends React.PureComponent {
 
   propTypes: {
@@ -26,28 +32,36 @@ class WidgetChrome extends React.PureComponent {
   }
 
   render() {
+    // Make sure there's always a title in edit mode
     const title = (this.props.editMode && !this.props.widget.title) ? this.props.widget.label : this.props.widget.title;
     let cssClass = `WidgetChrome card widget-${this.props.widget.name}`;
     if (this.props.widget.cssClass) {
       cssClass += " " + this.props.widget.cssClass;
     }
+    let header = null;
+    if (this.props.editMode) {
+      header = (
+        <div className="card-header">
+          <DragHandle />
+          {title}
+          <a href="#"
+            className="float-right text-dark"
+            onClick={this.handleEditButtonClicked}
+            >
+            <i className="fa fa-cog" aria-hidden="true"></i>
+          </a>
+        </div>
+      );
+    } else if (title) {
+      header = (
+        <div className="card-header">
+          {title}
+        </div>
+      );
+    }
     return (
       <div className={cssClass}>
-        <div className="widget-buttons">
-          { this.props.editMode &&
-            <a href="#"
-              onClick={this.handleEditButtonClicked}
-              >
-              <i className="fa fa-cog" aria-hidden="true"></i>
-            </a>
-          }
-        </div>
-        { title ?
-          <div className="card-header">
-            {title}
-          </div>
-          : null
-        }
+        {header}
         <div className="card-block">
           { this.props.editMode &&
             <div className="text-muted p-2">Content hidden in edit mode</div>
diff --git a/hubs/static/client/app/components/WidgetsList.js b/hubs/static/client/app/components/WidgetsList.js
index 137b120..c23de78 100644
--- a/hubs/static/client/app/components/WidgetsList.js
+++ b/hubs/static/client/app/components/WidgetsList.js
@@ -44,6 +44,7 @@ function EditableWidgetsList(props) {
       <SortableWidgetList
         lockAxis="y"
         onSortEnd={props.handleWidgetMoved}
+        useDragHandle={true}
         helperClass="widget--dragged"
         {...props}
         />
diff --git a/hubs/static/css/style.css b/hubs/static/css/style.css
index 0260884..9257a3b 100644
--- a/hubs/static/css/style.css
+++ b/hubs/static/css/style.css
@@ -294,6 +294,9 @@ font-size: 32pt;
   background-color: #17a2b8;
   color: #f8f9fa;
 }
+.card-info > .card-header > a {
+  color: #f8f9fa !important;
+}
 
 
 /*