From 1fde409ae42930b96e4ee49419fa0bae2e87e438 Mon Sep 17 00:00:00 2001
From: Damien CORNEAU <corneadoug@gmail.com>
Date: Thu, 12 Nov 2015 17:14:38 +0900
Subject: [PATCH 1/5] Make settings as fixed position and reduce some space

---
 zeppelin-web/src/app/notebook/notebook.css | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/notebook.css b/zeppelin-web/src/app/notebook/notebook.css
index 699a29632a8..24dcc2d7bc3 100644
--- a/zeppelin-web/src/app/notebook/notebook.css
+++ b/zeppelin-web/src/app/notebook/notebook.css
@@ -112,12 +112,18 @@
 
 .setting {
   background-color: white;
-  padding: 10px 15px 15px 15px;
-  margin-left: -10px;
-  margin-right: -10px;
+  padding: 4px 15px 15px 15px;
+  margin: 8px -10px 0px -10px;
   font-family: 'Roboto', sans-serif;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
   border-bottom: 1px solid #E5E5E5;
+  position: fixed;
+  width: 100%;
+  z-index: 3;
+}
+
+.setting hr {
+  margin: 10px 0px 10px 0px;
 }
 
 .setting .interpreterSettings {

From 9e8e46aa88d5ccb12f4b94b7b096357432539948 Mon Sep 17 00:00:00 2001
From: Damien CORNEAU <corneadoug@gmail.com>
Date: Thu, 12 Nov 2015 17:55:58 +0900
Subject: [PATCH 2/5] Add scrollbar to settings if screen too small

---
 zeppelin-web/src/app/notebook/notebook.css  | 19 +++++++-
 zeppelin-web/src/app/notebook/notebook.html | 51 +++++++++++----------
 2 files changed, 44 insertions(+), 26 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/notebook.css b/zeppelin-web/src/app/notebook/notebook.css
index 24dcc2d7bc3..ee572de2136 100644
--- a/zeppelin-web/src/app/notebook/notebook.css
+++ b/zeppelin-web/src/app/notebook/notebook.css
@@ -112,14 +112,29 @@
 
 .setting {
   background-color: white;
-  padding: 4px 15px 15px 15px;
-  margin: 8px -10px 0px -10px;
+  padding: 0px 0px 15px 0px;
+  margin: 44px -10px 0px -10px;
   font-family: 'Roboto', sans-serif;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
   border-bottom: 1px solid #E5E5E5;
   position: fixed;
   width: 100%;
   z-index: 3;
+  max-height: calc(100% - 54px - 49px);
+  overflow: auto;
+}
+
+.setting .settings-header {
+  position: fixed;
+  background-color: white;
+  width: 100%;
+}
+.setting .settings-body {
+  margin-top: 55px;
+}
+
+.settings-content-padding {
+  padding: 0px 15px 0px 15px;
 }
 
 .setting hr {
diff --git a/zeppelin-web/src/app/notebook/notebook.html b/zeppelin-web/src/app/notebook/notebook.html
index 9c5440d886b..17cb0f0a056 100644
--- a/zeppelin-web/src/app/notebook/notebook.html
+++ b/zeppelin-web/src/app/notebook/notebook.html
@@ -135,38 +135,41 @@ <h3>
   </h3>
 </div>
 
-<div style="padding-top: 36px;">
-  <!-- settings -->
-  <div ng-if="showSetting" class="setting">
+<!-- settings -->
+<div ng-if="showSetting" class="setting">
+  <div class="settings-header settings-content-padding">
     <div>
       <h4>Settings</h4>
     </div>
     <hr />
-    <div>
-      <h5>Interpreter binding</h5>
-      <p>
-        Bind interpreter for this note.
-        Click to Bind/Unbind interpreter.
-        Drag and drop to reorder interpreters. <br />
-        The first interpreter on the list becomes default. To create/remove interpreters, go to <a href="/#/interpreter">Interpreter</a> menu.
-      </p>
+  </div>
+  <div class="settings-body settings-content-padding">
+    <h5>Interpreter binding</h5>
+    <p>
+      Bind interpreter for this note.
+      Click to Bind/Unbind interpreter.
+      Drag and drop to reorder interpreters. <br />
+      The first interpreter on the list becomes default. To create/remove interpreters, go to <a href="/#/interpreter">Interpreter</a> menu.
+    </p>
 
-      <div class="interpreterSettings"
-           as-sortable="interpreterSelectionListeners" data-ng-model="interpreterBindings">
-        <div data-ng-repeat="item in interpreterBindings" as-sortable-item>
-          <div as-sortable-item-handle
-               ng-click="item.selected = !item.selected"
-               class="btn"
-               ng-class="{'btn-info': item.selected, 'btn-default': !item.selected}"><font style="font-size:16px">{{item.name}}</font> <small><span ng-repeat="intp in item.interpreters"><span ng-show="!$first">, </span>%{{intp.name}}</span></small></div>
-        </div>
+    <div class="interpreterSettings"
+         as-sortable="interpreterSelectionListeners" data-ng-model="interpreterBindings">
+      <div data-ng-repeat="item in interpreterBindings" as-sortable-item>
+        <div as-sortable-item-handle
+             ng-click="item.selected = !item.selected"
+             class="btn"
+             ng-class="{'btn-info': item.selected, 'btn-default': !item.selected}"><font style="font-size:16px">{{item.name}}</font> <small><span ng-repeat="intp in item.interpreters"><span ng-show="!$first">, </span>%{{intp.name}}</span></small></div>
       </div>
     </div>
-    <br />
-    <div>
-      <button class="btn btn-primary" ng-click="saveSetting()">Save</button>
-      <button class="btn btn-default" ng-click="closeSetting()">Cancel</button>
-    </div>
   </div>
+  <br />
+  <div class="settings-content-padding">
+    <button class="btn btn-primary" ng-click="saveSetting()">Save</button>
+    <button class="btn btn-default" ng-click="closeSetting()">Cancel</button>
+  </div>
+</div>
+
+<div style="padding-top: 36px;">
 
   <div class="note-jump"></div>
 

From 3dad90575baa6824d2efd1cccded2d0b5a2757a7 Mon Sep 17 00:00:00 2001
From: Damien CORNEAU <corneadoug@gmail.com>
Date: Thu, 12 Nov 2015 18:07:15 +0900
Subject: [PATCH 3/5] Fix zindex for actionbar tooltips

---
 zeppelin-web/src/app/notebook/notebook.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/zeppelin-web/src/app/notebook/notebook.css b/zeppelin-web/src/app/notebook/notebook.css
index ee572de2136..2adaafd7fac 100644
--- a/zeppelin-web/src/app/notebook/notebook.css
+++ b/zeppelin-web/src/app/notebook/notebook.css
@@ -55,7 +55,7 @@
   top: 50px;
   width: 100%;
   height: 54px;
-  z-index: 3;
+  z-index: 4;
 }
 
 .noteAction h3 {

From a5766c8e058075768e8bb6afe4e3bf7efbfadcf1 Mon Sep 17 00:00:00 2001
From: Damien CORNEAU <corneadoug@gmail.com>
Date: Fri, 13 Nov 2015 11:05:09 +0900
Subject: [PATCH 4/5] Add padding to always see a part of the paragraph

---
 zeppelin-web/src/app/notebook/notebook.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/zeppelin-web/src/app/notebook/notebook.css b/zeppelin-web/src/app/notebook/notebook.css
index 2adaafd7fac..ca71ce91cad 100644
--- a/zeppelin-web/src/app/notebook/notebook.css
+++ b/zeppelin-web/src/app/notebook/notebook.css
@@ -120,7 +120,8 @@
   position: fixed;
   width: 100%;
   z-index: 3;
-  max-height: calc(100% - 54px - 49px);
+  /* max-height = page - (Navbar 54px + ActionBar 49px + Style Margin 30px) */
+  max-height: calc(100% - 133px);
   overflow: auto;
 }
 

From f424421b353724ccef870584d94561b4887328a7 Mon Sep 17 00:00:00 2001
From: Damien CORNEAU <corneadoug@gmail.com>
Date: Fri, 13 Nov 2015 11:19:10 +0900
Subject: [PATCH 5/5] Remove actionbar box shadow when settings are shown

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

diff --git a/zeppelin-web/src/app/notebook/notebook.css b/zeppelin-web/src/app/notebook/notebook.css
index ca71ce91cad..b1e549c5e99 100644
--- a/zeppelin-web/src/app/notebook/notebook.css
+++ b/zeppelin-web/src/app/notebook/notebook.css
@@ -58,6 +58,10 @@
   z-index: 4;
 }
 
+.noBoxShadow {
+  box-shadow: none !important;
+}
+
 .noteAction h3 {
   margin-top: 0px;
   margin-bottom: 0px;
diff --git a/zeppelin-web/src/app/notebook/notebook.html b/zeppelin-web/src/app/notebook/notebook.html
index 17cb0f0a056..c40c12f852d 100644
--- a/zeppelin-web/src/app/notebook/notebook.html
+++ b/zeppelin-web/src/app/notebook/notebook.html
@@ -12,7 +12,7 @@
 limitations under the License.
 -->
 <!-- Here the controller <NotebookCtrl> is not needed because explicitly set in the app.js (route) -->
-<div class="noteAction" ng-show="note.id && !paragraphUrl">
+<div class="noteAction" ng-class="{'noBoxShadow':showSetting}" ng-show="note.id && !paragraphUrl">
   <h3>
     <input type="text" class="form-control2" placeholder="{{note.name || 'Note ' + note.id}}" style="width:200px;"
            ng-show="showEditor" ng-model="note.name" ng-enter="sendNewName()" ng-escape="showEditor = false" autofocus/>