From 0c0bf6ec686eddd82ac445c7155e8f8fcde029cf Mon Sep 17 00:00:00 2001
From: Ran Byron <ranbena@getredash.com>
Date: Wed, 31 Jul 2019 08:09:37 +0300
Subject: [PATCH] Styling changes (#4019)

---
 client/app/components/Parameters.jsx  | 20 +++++++++++++----
 client/app/components/Parameters.less | 32 ++++++++++++++++++++++-----
 2 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/client/app/components/Parameters.jsx b/client/app/components/Parameters.jsx
index b0b6545808..1dc9a92fef 100644
--- a/client/app/components/Parameters.jsx
+++ b/client/app/components/Parameters.jsx
@@ -52,7 +52,7 @@ export class Parameters extends React.Component {
   constructor(props) {
     super(props);
     const { parameters } = props;
-    this.state = { parameters };
+    this.state = { parameters, dragging: false };
     if (!props.disableUrlUpdate) {
       updateUrl(parameters);
     }
@@ -99,6 +99,11 @@ export class Parameters extends React.Component {
         return { parameters };
       });
     }
+    this.setState({ dragging: false });
+  };
+
+  onBeforeSortStart = () => {
+    this.setState({ dragging: true });
   };
 
   applyChanges = () => {
@@ -161,12 +166,19 @@ export class Parameters extends React.Component {
   }
 
   render() {
-    const { parameters } = this.state;
+    const { parameters, dragging } = this.state;
     const { editable } = this.props;
     const dirtyParamCount = size(filter(parameters, 'hasPendingValue'));
     return (
-      <SortableContainer axis="xy" onSortEnd={this.moveParameter} lockToContainerEdges useDragHandle>
-        <div className="parameter-container" onKeyDown={this.handleKeyDown}>
+      <SortableContainer
+        axis="xy"
+        useDragHandle
+        lockToContainerEdges
+        helperClass="parameter-dragged"
+        updateBeforeSortStart={this.onBeforeSortStart}
+        onSortEnd={this.moveParameter}
+      >
+        <div className="parameter-container" onKeyDown={this.handleKeyDown} data-draggable={editable || null} data-dragging={dragging || null}>
           {parameters.map((param, index) => (
             <SortableItem className="parameter-block" key={param.name} index={index} parameterName={param.name} disabled={!editable}>
               {this.renderParameter(param, index)}
diff --git a/client/app/components/Parameters.less b/client/app/components/Parameters.less
index 0260b01dd1..9af02643e8 100644
--- a/client/app/components/Parameters.less
+++ b/client/app/components/Parameters.less
@@ -7,29 +7,49 @@
   background-size: 2px 2px;
   display: inline-block;
   width: 6px;
-  height: 34px;
+  height: 36px;
   vertical-align: bottom;
   margin-right: 5px;
-  margin-bottom: 2px;
   cursor: move;
 }
 
 .parameter-block {
   display: inline-block;
   background: white;
-  padding: 6px;
+  padding: 3px 6px 6px;
+
+  .parameter-container[data-draggable] & {
+    margin: 4px 0 0 4px;
+  }
+
+  &.parameter-dragged {
+    box-shadow:  0 4px 9px -3px rgba(102, 136, 153, 0.15);
+  }
 }
 
 .parameter-heading {
   display: flex;
   align-items: center;
+  padding-bottom: 4px;
+
+  label {
+    margin-bottom: 1px;
+  }
 }
 
 .parameter-container {
   position: relative;
-  background-color: #f6f8f9;
-  display: inline;
-  padding: 35px 0 11px;
+
+  &[data-draggable] {
+    padding: 0 4px 4px 0;
+    transition: background-color 200ms ease-out;
+    transition-delay: 300ms; // short pause before returning to original bgcolor
+  }
+
+  &[data-dragging] {
+    transition-delay: 0s;
+    background-color: #f6f8f9;
+  }
 
   .parameter-apply-button {
     display: none; // default for mobile