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 <[email protected]> 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 <[email protected]> Authored: Sun Jun 26 11:24:09 2016 +0900 Committer: Mina Lee <[email protected]> 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>
![https://cloud.githubusercontent.com/assets/710411/16344155/2d387af0-3a76-11e6-87ba-9626d9f17fea.png"](https://cloud.githubusercontent.com/assets/710411/16344155/2d387af0-3a76-11e6-87ba-9626d9f17fea.png"){kind=link}
