From 98af0fb067173c1ff1ec7da6b1a2847bf9abc3f5 Mon Sep 17 00:00:00 2001
From: Renjith Kamath <renjith.kamath@gmail.com>
Date: Mon, 9 Nov 2015 23:54:30 +0530
Subject: [PATCH 1/2] ZEPPELIN-52 Long statements in paragraph and going
 beneath the control bar

---
 .../src/app/notebook/paragraph/paragraph.css  |  13 +-
 .../src/app/notebook/paragraph/paragraph.html | 161 +++++++++---------
 2 files changed, 86 insertions(+), 88 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.css b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
index 79725ef9251..826720c78fb 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.css
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
@@ -152,18 +152,17 @@
 }
 
 .paragraph .control {
-  background-color: rgba(255,255,255,0.85);
+  background-color: rgba(255,255,255,.85);
   float: right;
   color: #999;
-  margin-top: 1px;
   margin-right: 5px;
-  position: absolute;
-  clear: both;
   right: 15px;
-  top: 16px;
   text-align: right;
   font-size: 12px;
-  padding: 4px;
+  padding: 0px 0px 5px;
+  width: 100%;
+  border-bottom: 1px solid #efefef;
+  margin-bottom: 10px;
 }
 
 .paragraph .control li {
@@ -381,4 +380,4 @@
 
 .lightBold {
   font-weight: 500;
-}
\ No newline at end of file
+}
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.html b/zeppelin-web/src/app/notebook/paragraph/paragraph.html
index 78c240f05f3..80bba007a54 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.html
@@ -29,7 +29,87 @@
          ng-bind-html="paragraph.title || 'Untitled'">
     </div>
   </div>
+  <div id="{{paragraph.id}}_control" class="control" ng-show="!asIframe">
+
+    <span>
+      {{paragraph.status}}
+    </span>
 
+    <span ng-if="paragraph.status=='RUNNING'">
+      {{getProgress()}}%
+    </span>
+
+    <!-- Run / Cancel button -->
+    <span class="icon-control-play" style="cursor:pointer;color:#3071A9" tooltip-placement="top" tooltip="Run this paragraph (Shift+Enter)"
+          ng-click="runParagraph(getEditorValue())"
+          ng-show="paragraph.status!='RUNNING' && paragraph.status!='PENDING'"></span>
+    <span class="icon-control-pause" style="cursor:pointer;color:#CD5C5C" tooltip-placement="top" tooltip="Cancel"
+          ng-click="cancelParagraph()"
+          ng-show="paragraph.status=='RUNNING' || paragraph.status=='PENDING'"></span>
+    <span class="{{paragraph.config.editorHide ? 'icon-size-fullscreen' : 'icon-size-actual'}}" style="cursor:pointer;" tooltip-placement="top" tooltip="{{(paragraph.config.editorHide ? 'Show' : 'Hide') + ' editor'}}"
+          ng-click="toggleEditor()"></span>
+    <span class="{{paragraph.config.tableHide ? 'icon-notebook' : 'icon-book-open'}}" style="cursor:pointer;" tooltip-placement="top" tooltip="{{(paragraph.config.tableHide ? 'Show' : 'Hide') + ' output'}}"
+          ng-click="toggleOutput()"></span>
+    <span  style="cursor:pointer;"
+           ng-click="saveParagraph()"
+           ng-show="dirtyText"></span>
+    <span class="dropdown navbar-right">
+      <span class="icon-settings" style="cursor:pointer"
+            data-toggle="dropdown"
+            type="button">
+      </span>
+      <ul class="dropdown-menu" role="menu" style="width:200px;">
+        <li>
+          <a class="fa fa-arrows-h dropdown"> Width
+            <form style="display:inline; margin-left:5px;">
+              <select ng-model="paragraph.config.colWidth"
+                      class="selectpicker"
+                      ng-change="changeColWidth()"
+                      ng-options="col for col in colWidthOption"></select>
+            </form>
+          </a>
+        </li>
+        <li>
+          <a class="icon-arrow-up" style="cursor:pointer"
+             ng-click="moveUp()"> Move Up</a>
+        </li>
+        <li>
+          <a class="icon-arrow-down" style="cursor:pointer"
+             ng-click="moveDown()"> Move Down</a>
+        </li>
+        <li>
+          <a class="icon-plus" style="cursor:pointer"
+             ng-click="insertNew()"> Insert New</a>
+        </li>
+        <li>
+          <!-- paragraph handler -->
+          <a class="fa fa-font" style="cursor:pointer"
+             ng-click="hideTitle()"
+             ng-show="paragraph.config.title"> Hide title</a>
+          <a class="fa fa-font" style="cursor:pointer"
+             ng-click="showTitle()"
+             ng-show="!paragraph.config.title"> Show title</a>
+        </li>
+        <li>
+          <a class="fa fa-list-ol" style="cursor:pointer"
+             ng-click="hideLineNumbers()"
+             ng-show="paragraph.config.lineNumbers"> Hide line numbers</a>
+          <a class="fa fa-list-ol" style="cursor:pointer"
+             ng-click="showLineNumbers()"
+             ng-show="!paragraph.config.lineNumbers"> Show line numbers</a>
+        </li>
+
+        <li><a class="icon-share-alt" style="cursor:pointer"
+               ng-click="goToSingleParagraph()"> Link this paragraph</a>
+        </li>
+        <li>
+          <!-- remove paragraph -->
+          <a class="fa fa-times" style="cursor:pointer"
+             ng-click="removeParagraph()"> Remove</a>
+        </li>
+      </ul>
+    </span>
+  </div>
   <div>
     <div ng-show="!paragraph.config.editorHide && !viewOnly">
       <div id="{{paragraph.id}}_editor"
@@ -396,85 +476,4 @@
       <div ng-if="!asIframe" id="{{paragraph.id}}_executionTime" class="executionTime" ng-bind-html="getExecutionTime()"></div>
     </div>
   </div>
-  <div id="{{paragraph.id}}_control" class="control" ng-show="!asIframe">
-
-    <span>
-      {{paragraph.status}}
-    </span>
-
-    <span ng-if="paragraph.status=='RUNNING'">
-      {{getProgress()}}%
-    </span>
-
-    <!-- Run / Cancel button -->
-    <span class="icon-control-play" style="cursor:pointer;color:#3071A9" tooltip-placement="top" tooltip="Run this paragraph (Shift+Enter)"
-          ng-click="runParagraph(getEditorValue())"
-          ng-show="paragraph.status!='RUNNING' && paragraph.status!='PENDING'"></span>
-    <span class="icon-control-pause" style="cursor:pointer;color:#CD5C5C" tooltip-placement="top" tooltip="Cancel"
-          ng-click="cancelParagraph()"
-          ng-show="paragraph.status=='RUNNING' || paragraph.status=='PENDING'"></span>
-    <span class="{{paragraph.config.editorHide ? 'icon-size-fullscreen' : 'icon-size-actual'}}" style="cursor:pointer;" tooltip-placement="top" tooltip="{{(paragraph.config.editorHide ? 'Show' : 'Hide') + ' editor'}}"
-          ng-click="toggleEditor()"></span>
-    <span class="{{paragraph.config.tableHide ? 'icon-notebook' : 'icon-book-open'}}" style="cursor:pointer;" tooltip-placement="top" tooltip="{{(paragraph.config.tableHide ? 'Show' : 'Hide') + ' output'}}"
-          ng-click="toggleOutput()"></span>
-    <span  style="cursor:pointer;"
-          ng-click="saveParagraph()"
-          ng-show="dirtyText"></span>
-    <span class="dropdown navbar-right">
-      <span class="icon-settings" style="cursor:pointer"
-            data-toggle="dropdown"
-            type="button">
-      </span>
-      <ul class="dropdown-menu" role="menu" style="width:200px;">
-        <li>
-          <a class="fa fa-arrows-h dropdown"> Width
-          <form style="display:inline; margin-left:5px;">
-            <select ng-model="paragraph.config.colWidth"
-                    class="selectpicker"
-                    ng-change="changeColWidth()"
-                    ng-options="col for col in colWidthOption"></select>
-          </form>
-          </a>
-        </li>
-        <li>
-          <a class="icon-arrow-up" style="cursor:pointer"
-             ng-click="moveUp()"> Move Up</a>
-        </li>
-        <li>
-          <a class="icon-arrow-down" style="cursor:pointer"
-             ng-click="moveDown()"> Move Down</a>
-        </li>
-        <li>
-          <a class="icon-plus" style="cursor:pointer"
-             ng-click="insertNew()"> Insert New</a>
-        </li>
-        <li>
-          <!-- paragraph handler -->
-          <a class="fa fa-font" style="cursor:pointer"
-             ng-click="hideTitle()"
-             ng-show="paragraph.config.title"> Hide title</a>
-          <a class="fa fa-font" style="cursor:pointer"
-             ng-click="showTitle()"
-             ng-show="!paragraph.config.title"> Show title</a>
-        </li>
-        <li>
-          <a class="fa fa-list-ol" style="cursor:pointer"
-             ng-click="hideLineNumbers()"
-             ng-show="paragraph.config.lineNumbers"> Hide line numbers</a>
-          <a class="fa fa-list-ol" style="cursor:pointer"
-             ng-click="showLineNumbers()"
-             ng-show="!paragraph.config.lineNumbers"> Show line numbers</a>
-        </li>
-
-        <li><a class="icon-share-alt" style="cursor:pointer"
-               ng-click="goToSingleParagraph()"> Link this paragraph</a>
-        </li>
-        <li>
-          <!-- remove paragraph -->
-          <a class="fa fa-times" style="cursor:pointer"
-             ng-click="removeParagraph()"> Remove</a>
-        </li>
-      </ul>
-    </span>
-  </div>
 </div>

From 257dfa499b8a149378dc50aaf7f8c7f633170502 Mon Sep 17 00:00:00 2001
From: Renjith Kamath <renjith.kamath@gmail.com>
Date: Tue, 10 Nov 2015 12:44:35 +0530
Subject: [PATCH 2/2] ZEPPELIN-52 fix layout for Firefox

---
 zeppelin-web/src/app/notebook/paragraph/paragraph.css  | 4 ++++
 zeppelin-web/src/app/notebook/paragraph/paragraph.html | 4 +---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.css b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
index 826720c78fb..237884734d6 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.css
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
@@ -224,6 +224,10 @@
   Ace Text Editor CSS
 */
 
+.paragraph .editor-container {
+  clear: both;
+}
+
 .paragraph .editor {
   width: 100%;
   border-left: 4px solid #DDDDDD;
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.html b/zeppelin-web/src/app/notebook/paragraph/paragraph.html
index 80bba007a54..e949c008c57 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.html
@@ -110,8 +110,7 @@
       </ul>
     </span>
   </div>
-  <div>
-    <div ng-show="!paragraph.config.editorHide && !viewOnly">
+    <div ng-show="!paragraph.config.editorHide && !viewOnly" class="editor-container">
       <div id="{{paragraph.id}}_editor"
            style="opacity: 1;"
            class="editor"
@@ -475,5 +474,4 @@
 
       <div ng-if="!asIframe" id="{{paragraph.id}}_executionTime" class="executionTime" ng-bind-html="getExecutionTime()"></div>
     </div>
-  </div>
 </div>