You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by mi...@apache.org on 2016/06/26 06:28:11 UTC
zeppelin git commit: [ZEPPELIN-846] Fix Long Notebook Dropdown
Repository: zeppelin
Updated Branches:
refs/heads/master 0209bc3cb -> eca39e2f3
[ZEPPELIN-846] Fix Long Notebook Dropdown
### What is this PR for?
This PR is fixing the bug by implementing a new layout for the Notebook Dropdown menu.
Reason being that setting a maximum height and having a scrollbar doesn't mix with having bootstrap submenus.
In term of dropdown layout, I think we have 2 options:
* The one I implemented, a tree view similar to the one in the home page, I can probably uniform both of them later. One possible problem is the dropdown width getting bigger and bigger as we indent at each submenu.
* The second one would not have any indent, but use a background color to show elements in the same folder (A grey that goes clearer as we go in the submenus)
<img width="691" alt="screen shot 2016-06-25 at 1 42 41 am" src="https://cloud.githubusercontent.com/assets/710411/16344155/2d387af0-3a76-11e6-87ba-9626d9f17fea.png">
Reworking the whole notebook list and dropdown will probably need a lot more work later (especially in term of refactoring and code cleaning), so I'm not sure where the scope of this PR should stop, especially with the release coming. I think the layout I implemented is fine to solve the immediate problem, and it is always possible to switch to the layout of option 2 later if we think it is best.
### What type of PR is it?
Hot Fix
### Todos
* [ ] - Rebase & Double Check the filtering and Notebook ordering after #1066
### What is the Jira issue?
https://issues.apache.org/jira/browse/ZEPPELIN-846
### How should this be tested?
Just play with the folder structure and check the notebook dropdown
### Screenshots (if appropriate)
### Questions:
* Does the licenses files need update? No
* Is there breaking changes for older versions? No
* Does this needs documentation? No
Author: Damien CORNEAU <co...@gmail.com>
Closes #1081 from corneadoug/fix/longNavbarNotebookList and squashes the following commits:
223a7d3 [Damien CORNEAU] Fix Notebook dropdown css when on mobile
8170782 [Damien CORNEAU] Fix Notebook ordering in dropdown
5a0fa09 [Damien CORNEAU] fix jshint errors
a52b219 [Damien CORNEAU] Change Notebook dropdown style
Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo
Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/eca39e2f
Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/eca39e2f
Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/eca39e2f
Branch: refs/heads/master
Commit: eca39e2f3f3082bf997183879e5999b4f61faf8b
Parents: 0209bc3
Author: Damien CORNEAU <co...@gmail.com>
Authored: Sun Jun 26 11:24:09 2016 +0900
Committer: Mina Lee <mi...@apache.org>
Committed: Sat Jun 25 23:28:02 2016 -0700
----------------------------------------------------------------------
zeppelin-web/src/app/home/home.css | 47 +++++++++++++++-----
.../expandCollapse/expandCollapse.css | 17 +++++++
.../expandCollapse/expandCollapse.directive.js | 33 ++++++++++++++
.../navbar/navbar-notebookList-elem.html | 36 +++++++++++++++
zeppelin-web/src/components/navbar/navbar.html | 20 +++------
zeppelin-web/src/index.html | 2 +
6 files changed, 130 insertions(+), 25 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/eca39e2f/zeppelin-web/src/app/home/home.css
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/home/home.css b/zeppelin-web/src/app/home/home.css
index 75f2521..8b37eb8 100644
--- a/zeppelin-web/src/app/home/home.css
+++ b/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;
}
}
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/eca39e2f/zeppelin-web/src/components/expandCollapse/expandCollapse.css
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/expandCollapse/expandCollapse.css b/zeppelin-web/src/components/expandCollapse/expandCollapse.css
new file mode 100644
index 0000000..b1a60d8
--- /dev/null
+++ b/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;
+}
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/eca39e2f/zeppelin-web/src/components/expandCollapse/expandCollapse.directive.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/expandCollapse/expandCollapse.directive.js b/zeppelin-web/src/components/expandCollapse/expandCollapse.directive.js
new file mode 100644
index 0000000..ec40175
--- /dev/null
+++ b/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();
+ });
+ }
+ };
+});
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/eca39e2f/zeppelin-web/src/components/navbar/navbar-notebookList-elem.html
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/navbar/navbar-notebookList-elem.html b/zeppelin-web/src/components/navbar/navbar-notebookList-elem.html
new file mode 100644
index 0000000..590154f
--- /dev/null
+++ b/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>
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/eca39e2f/zeppelin-web/src/components/navbar/navbar.html
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/navbar/navbar.html b/zeppelin-web/src/components/navbar/navbar.html
index cfe1559..4a7ad68 100644
--- a/zeppelin-web/src/components/navbar/navbar.html
+++ b/zeppelin-web/src/components/navbar/navbar.html
@@ -10,18 +10,6 @@ See the License for the specific language governing permissions and
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 @@ limitations under the License.
<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 @@ limitations under the License.
</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>
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/eca39e2f/zeppelin-web/src/index.html
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/index.html b/zeppelin-web/src/index.html
index cad1308..7cbdde5 100644
--- a/zeppelin-web/src/index.html
+++ b/zeppelin-web/src/index.html
@@ -57,6 +57,7 @@ limitations under the License.
<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 @@ limitations under the License.
<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>