[ZEPPELIN-846] Fix Long Notebook Dropdown

zeppelin-web/src/app/home/home.css

@@ -23,6 +23,10 @@ body {
   -ms-overflow-style: scrollbar;
 }
 
+.home {
+  margin-bottom: 0px !important;
+}
+
 .bodyAsIframe {
   background: white;
 }
@@ -99,10 +103,29 @@ a.navbar-brand:hover {
   color: #fff !important;
 }
 
+/* Css for the Notebook Dropdown */
+
+.expandable ul {
+  padding-left: 10px !important;
+}
+
+.expandable li {
+  list-style-type: none;
+}
+
+.dropdown-menu .notebook-list-item {
+  text-decoration: none;
+}
+
+.dropdown-menu .notebook-list-item:hover {
+  background: #f5f5f5;
+}
+
 /* bootstrap customization for scrollable dropdown menu */
-.dropdown-menu > .scrollbar-container > li > a {
+.dropdown-menu > .scrollbar-container > li > a,
+.dropdown-menu .notebook-list-item {
   display: block;
-  padding: 3px 20px;
+  padding: 1px 10px;
   clear: both;
   font-weight: normal;
   line-height: 1.42857143;
@@ -117,9 +140,9 @@ a.navbar-brand:hover {
   background: #f5f5f5;
 }
 
-.dropdown-menu > .scrollbar-container > .active > a,
-.dropdown-menu > .scrollbar-container > .active > a:hover,
-.dropdown-menu > .scrollbar-container > .active > a:focus {
+#notebook-list li.active > a,
+#notebook-list li.active > a:hover,
+#notebook-list li.active > a:focus {
   color: #fff;
   text-decoration: none;
   background: #428bca;
@@ -216,11 +239,13 @@ a.navbar-brand:hover {
 }
 
 @media (max-width: 767px) {
-  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
+  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a,
+  #notebook-list li a {
     color: #D3D3D3;
   }
 
-  .navbar-nav .open .dropdown-menu > .scrollbar-container > li > a {
+  .navbar-nav .open .dropdown-menu > .scrollbar-container > li > a,
+  #notebook-list li a {
     padding: 5px 15px 5px 25px;
     line-height: 20px;
   }
@@ -230,7 +255,8 @@ a.navbar-brand:hover {
   }
 
   .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > li > a:hover,
-  .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > li > a:focus {
+  .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > li > a:focus,
+  #notebook-list li a:hover {
     color: #fff;
     background: transparent;
   }
@@ -263,8 +289,9 @@ a.navbar-brand:hover {
 }
 
 @media (min-width: 768px) {
-  #notebook-list {
-    max-height: 500px;
+  .dropdown-menu.navbar-dropdown-maxHeight {
+    max-height: calc(100vh - 60px);
+    overflow: auto;
   }
 }
 

zeppelin-web/src/components/expandCollapse/expandCollapse.css

@@ -0,0 +1,17 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ .expandable {
+  display: none;
+}

zeppelin-web/src/components/expandCollapse/expandCollapse.directive.js

@@ -0,0 +1,33 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+'use strict';
+
+angular.module('zeppelinWebApp').directive('expandCollapse', function() {
+  return {
+          restrict: 'EA',
+          link: function(scope, element, attrs){
+            angular.element(element).click( function(event) {
+              if(angular.element(element).find('.expandable:visible').length > 1) {
+                angular.element(element).find('.expandable:visible').slideUp('slow');
+                angular.element(element).find('i.icon-folder-alt').toggleClass('icon-folder icon-folder-alt');
+            	} else {
+                angular.element(element).find('.expandable').first().slideToggle('200',function() {
+                  angular.element(element).find('i').first().toggleClass('icon-folder icon-folder-alt');
+                });
+              }
+              event.stopPropagation();
+       		  });
+          }
+        };
+});

zeppelin-web/src/components/navbar/navbar-notebookList-elem.html

@@ -0,0 +1,36 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<a class="notebook-list-item" ng-if="note.id" href="#/notebook/{{note.id}}">
+  <i style="font-size: 10px; margin-right: 5px;" class="icon-doc"></i>
+  <span>{{noteName(note)}}</span>
+</a>
+<li ng-if="!note.id" ng-click="$event.stopPropagation()">
+  <expand-collapse>
+      <div>
+        <a class="notebook-list-item" href="javascript:void(0)">
+          <i style="font-size: 10px; margin-right: 5px;" class="icon-folder"></i>
+          <span>{{noteName(note)}}</span>
+        </a>
+      </div>
+      <div class="expandable" style="color: black;">
+        <ul>
+          <li ng-repeat="note in note.children | orderBy:navbar.arrayOrderingSrv.notebookListOrdering track by $index"
+              ng-class="{'active' : navbar.isActive(note.id)}"
+              ng-include="'components/navbar/navbar-notebookList-elem.html'">
+          </li>
+        </ul>
+      </div>
+  </expand-collapse>
+</li>

zeppelin-web/src/components/navbar/navbar.html

@@ -10,18 +10,6 @@
 limitations under the License.
 -->
 
-<script type="text/ng-template" id="notebook_list_renderer.html">
-  <a ng-if="note.id" href="#/notebook/{{note.id}}">{{noteName(note)}} </a>
-  <li ng-if="!note.id"
-      class="dropdown-submenu">
-    <a tabindex="-1" href="javascript: void(0)">{{noteName(note)}}</a>
-    <ul class="dropdown-menu">
-      <li ng-repeat="note in note.children track by $index" ng-class="{'active' : navbar.isActive(note.id)}" ng-include="'notebook_list_renderer.html'">
-      </li>
-    </ul>
-  </li>
-</script>
-
 <div class="navbar navbar-inverse navbar-fixed-top" style="display: none;" role="navigation" ng-class="{'displayNavBar': !asIframe}">
   <div class="container">
     <div class="navbar-header">
@@ -39,12 +27,14 @@
       <ul class="nav navbar-nav" ng-if="ticket">
         <li class="dropdown" dropdown>
           <a href="#" class="dropdown-toggle" dropdown-toggle>Notebook <span class="caret"></span></a>
-          <ul class="dropdown-menu" role="menu">
+          <ul class="dropdown-menu navbar-dropdown-maxHeight" role="menu">
             <li><a href="" data-toggle="modal" data-target="#noteNameModal"><i class="fa fa-plus"></i> Create new note</a></li>
             <li class="divider"></li>
             <div id="notebook-list" class="scrollbar-container">
               <li class="filter-names" ng-include="'components/filterNoteNames/filter-note-names.html'"></li>
-              <li ng-repeat="note in navbar.notes.root.children | filter:query | orderBy:home.arrayOrderingSrv.notebookListOrdering track by $index" ng-class="{'active' : navbar.isActive(note.id)}" ng-include="'notebook_list_renderer.html'"></li>
+              <li ng-repeat="note in navbar.notes.root.children | filter:query | orderBy:navbar.arrayOrderingSrv.notebookListOrdering track by $index"
+                  ng-class="{'active' : navbar.isActive(note.id)}" ng-include="'components/navbar/navbar-notebookList-elem.html'">
+              </li>
             </div>
           </ul>
         </li>
@@ -93,7 +83,7 @@
             </button>
             <span ng-if="!ticket" style="margin: 5px;"></span>
             <ul class="dropdown-menu">
-              <li><a href="" data-toggle="modal" data-target="#aboutModal">About Zeppelin</a>
+              <li><a href="" data-toggle="modal" data-target="#aboutModal">About Zeppelin</a></li>
               <li role="separator" style="margin: 5px 0;" class="divider"></li>
               <li><a href="#/interpreter">Interpreter</a></li>
               <li><a href="#/credential">Credential</a></li>

zeppelin-web/src/index.html

@@ -57,6 +57,7 @@
     <link rel="stylesheet" href="app/interpreter/interpreter.css">
     <link rel="stylesheet" href="app/credential/credential.css">
     <link rel="stylesheet" href="app/configuration/configuration.css">
+    <link rel="stylesheet" href="components/expandCollapse/expandCollapse.css">
     <link rel="stylesheet" href="fonts/font-awesome.min.css">
     <link rel="stylesheet" href="fonts/simple-line-icons.css">
     <link rel="stylesheet" href="fonts/custom-font.css">
@@ -153,6 +154,7 @@
     <script src="components/arrayOrderingSrv/arrayOrdering.service.js"></script>
     <script src="components/navbar/navbar.controller.js"></script>
     <script src="components/ngescape/ngescape.directive.js"></script>
+    <script src="components/expandCollapse/expandCollapse.directive.js"></script>
     <script src="components/noteName-create/notename.controller.js"></script>
     <script src="components/noteName-import/notenameImport.controller.js"></script>
     <script src="components/popover-html-unsafe/popover-html-unsafe.directive.js"></script>