From 2ca302818104a1cdd7f230a3c39e690270309f26 Mon Sep 17 00:00:00 2001
From: Damien CORNEAU <corneadoug@gmail.com>
Date: Wed, 8 Jun 2016 16:19:25 +0900
Subject: [PATCH] Move download data button outside the paragraph settings

---
 .../paragraph/paragraph-chart-selector.html   | 73 ++++++++++---------
 .../notebook/paragraph/paragraph-control.html |  3 -
 2 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
index b7ebbedc2d0..26ffe5ccb09 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
@@ -12,38 +12,45 @@
 limitations under the License.
 -->
 
-<div id="{{paragraph.id}}_switch"
-     ng-if="paragraph.result.type == 'TABLE' && !asIframe && !viewOnly"
-     class="btn-group"
+<div ng-if="paragraph.result.type == 'TABLE' && !asIframe && !viewOnly"
      style='margin-bottom: 10px;'>
-  <button type="button" class="btn btn-default btn-sm"
-          ng-class="{'active': isGraphMode('table')}"
-          ng-click="setGraphMode('table', true)" ><i class="fa fa-table"></i>
-  </button>
-  <button type="button" class="btn btn-default btn-sm"
-          ng-class="{'active': isGraphMode('multiBarChart')}"
-          ng-click="setGraphMode('multiBarChart', true)"><i class="fa fa-bar-chart"></i>
-  </button>
-  <button type="button" class="btn btn-default btn-sm"
-          ng-class="{'active': isGraphMode('pieChart')}"
-          ng-click="setGraphMode('pieChart', true)"><i class="fa fa-pie-chart"></i>
-  </button>
-  <button type="button" class="btn btn-default btn-sm"
-          ng-class="{'active': isGraphMode('stackedAreaChart')}"
-          ng-click="setGraphMode('stackedAreaChart', true)"><i class="fa fa-area-chart"></i>
-  </button>
-  <button type="button" class="btn btn-default btn-sm"
-          ng-class="{'active': isGraphMode('lineChart') || isGraphMode('lineWithFocusChart')}"
-          ng-click="paragraph.config.graph.lineWithFocus ? setGraphMode('lineWithFocusChart', true) : setGraphMode('lineChart', true)"><i class="fa fa-line-chart"></i>
-  </button>
-  <button type="button" class="btn btn-default btn-sm"
-          ng-class="{'active': isGraphMode('scatterChart')}"
-          ng-click="setGraphMode('scatterChart', true)"><i class="cf cf-scatter-chart"></i>
-  </button>
+  <div id="{{paragraph.id}}_switch"
+       class="btn-group">
+    <button type="button" class="btn btn-default btn-sm"
+            ng-class="{'active': isGraphMode('table')}"
+            ng-click="setGraphMode('table', true)" ><i class="fa fa-table"></i>
+    </button>
+    <button type="button" class="btn btn-default btn-sm"
+            ng-class="{'active': isGraphMode('multiBarChart')}"
+            ng-click="setGraphMode('multiBarChart', true)"><i class="fa fa-bar-chart"></i>
+    </button>
+    <button type="button" class="btn btn-default btn-sm"
+            ng-class="{'active': isGraphMode('pieChart')}"
+            ng-click="setGraphMode('pieChart', true)"><i class="fa fa-pie-chart"></i>
+    </button>
+    <button type="button" class="btn btn-default btn-sm"
+            ng-class="{'active': isGraphMode('stackedAreaChart')}"
+            ng-click="setGraphMode('stackedAreaChart', true)"><i class="fa fa-area-chart"></i>
+    </button>
+    <button type="button" class="btn btn-default btn-sm"
+            ng-class="{'active': isGraphMode('lineChart') || isGraphMode('lineWithFocusChart')}"
+            ng-click="paragraph.config.graph.lineWithFocus ? setGraphMode('lineWithFocusChart', true) : setGraphMode('lineChart', true)"><i class="fa fa-line-chart"></i>
+    </button>
+    <button type="button" class="btn btn-default btn-sm"
+            ng-class="{'active': isGraphMode('scatterChart')}"
+            ng-click="setGraphMode('scatterChart', true)"><i class="cf cf-scatter-chart"></i>
+    </button>
+  </div>
+  <span>
+    <button type="button" class="btn btn-default btn-sm" style="margin-left:10px"
+            tooltip="Download Data as TSV" tooltip-placement="bottom"
+            ng-click="exportToTSV()"><i class="fa fa-download"></i>
+    </button>
+  </span>
+  <span ng-if="getGraphMode()!='table'"
+        style="margin-left:5px; cursor:pointer; display: inline-block; vertical-align:top; position: relative; line-height:30px;">
+    <a class="btnText" ng-click="toggleGraphOption()">
+      settings <span ng-class="paragraph.config.graph.optionOpen ? 'fa fa-caret-up' : 'fa fa-caret-down'"></span>
+    </a>
+  </span>
 </div>
-<span ng-if="getResultType()=='TABLE' && getGraphMode()!='table' && !asIframe && !viewOnly"
-      style="margin-left:10px; cursor:pointer; display: inline-block; vertical-align:top; position: relative; line-height:30px;">
-  <a class="btnText" ng-click="toggleGraphOption()">
-    settings <span ng-class="paragraph.config.graph.optionOpen ? 'fa fa-caret-up' : 'fa fa-caret-down'"></span>
-  </a>
-</span>
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
index 7c51f3ad6f3..c35c4e5ade3 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
@@ -82,9 +82,6 @@
       <li>
         <a ng-click="goToSingleParagraph()"><span class="icon-share-alt"></span> Link this paragraph</a>
       </li>
-      <li>
-        <a ng-click="exportToTSV()"><span class="icon-share-alt"></span> Export to TSV</a>
-      </li>
       <li>
         <a ng-click="clearParagraphOutput()"><span class="fa fa-eraser"></span> Clear output</a>
       </li>