Repository: incubator-zeppelin Updated Branches: refs/heads/master 9b461ad24 -> 51da6584c
Add filter to quickly search the notebook from the list ### What is this PR for? Allows the user to instantly find the notebook from the list shown on the home page and in the Notebook main menu ### What type of PR is it? Improvement ### How should this be tested? Enter the search term in the filter input box ### Screenshots <img width="255" alt="screen shot 2016-01-20 at 3 22 32 pm" src="https://cloud.githubusercontent.com/assets/2031306/12445389/04f9cb46-bf8a-11e5-8e99-d04b122f7ce2.png";> <br> <img width="299" alt="screen shot 2016-01-20 at 3 22 26 pm" src="https://cloud.githubusercontent.com/assets/2031306/12445391/04ff3216-bf8a-11e5-8fc0-19bdfaa991e3.png";> <br> <img width="314" alt="screen shot 2016-01-20 at 3 21 58 pm" src="https://cloud.githubusercontent.com/assets/2031306/12445392/05004d86-bf8a-11e5-839f-ae9a8b4881b7.png";> <br> <img width="316" alt="screen shot 2016-01-20 at 3 22 11 pm" src="https://cloud.githubusercontent.com/assets/2031306/12445390/04faf6ba-bf8a-11e5-9ae9-fec1a201591a.png";> Author: Renjith Kamath <[email protected]> Closes #660 from r-kamath/NotenameFilter and squashes the following commits: 2298eb8 [Renjith Kamath] fix filter input width issue ed41d41 [Renjith Kamath] review update: fix search box padding to 6px 904518c [Renjith Kamath] fix ng-include path bade370 [Renjith Kamath] refactor filter code and use ng-include 325d71e [Renjith Kamath] add filter to the list of notebook names on homepage and under notebook menu Project: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/commit/51da6584 Tree: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/tree/51da6584 Diff: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/diff/51da6584 Branch: refs/heads/master Commit: 51da6584cf795cefe781b825b4058e5828f956c0 Parents: 9b461ad Author: Renjith Kamath <[email protected]> Authored: Fri Feb 5 16:45:08 2016 +0530 Committer: Mina Lee <[email protected]> Committed: Mon Feb 8 14:37:43 2016 -0800 ---------------------------------------------------------------------- zeppelin-web/src/app/home/home.css | 25 ++++++++++++++++++++ zeppelin-web/src/app/home/home.html | 7 +++--- .../filterNoteNames/filter-note-names.html | 14 +++++++++++ zeppelin-web/src/components/navbar/navbar.html | 5 ++-- 4 files changed, 46 insertions(+), 5 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/51da6584/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 dada898..281ffb4 100644 --- a/zeppelin-web/src/app/home/home.css +++ b/zeppelin-web/src/app/home/home.css @@ -126,6 +126,31 @@ a.navbar-brand:hover { outline: 0; } +#notebook-list > .filter-names { + margin: 5px; + padding: 0px 10px; +} + +#notebook-list .note-name-query { + width: 100%; +} + +#notebook-names { + list-style: none; +} + +#notebook-names > .filter-names { + margin: 5px 0; +} + +.note-name-query { + padding: 6px; + color: #000; + height: 28px; + width: 200px; + font: normal normal normal 14px/1 FontAwesome; +} + @media (max-width: 767px) { .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: #D3D3D3; http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/51da6584/zeppelin-web/src/app/home/home.html ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/home/home.html b/zeppelin-web/src/app/home/home.html index 62bc9e4..8818edc 100644 --- a/zeppelin-web/src/app/home/home.html +++ b/zeppelin-web/src/app/home/home.html @@ -26,7 +26,7 @@ limitations under the License. <div class="row"> <div class="col-md-4"> - <h4>Notebook + <h4>Notebook <i ng-class="isReloadingNotes ? 'fa fa-refresh fa-spin' : 'fa fa-refresh'" ng-style="!isReloadingNotes && {'cursor': 'pointer'}" style="font-size: 13px;" ng-click="reloadNotebookList();"> @@ -38,8 +38,9 @@ limitations under the License. <i style="font-size: 15px;" class="fa fa-upload"></i> Import note</a></h5> <h5><a href="" data-toggle="modal" data-target="#noteNameModal" style="text-decoration: none;"> <i style="font-size: 15px;" class="icon-notebook"></i> Create new note</a></h5> - <ul style="list-style-type: none;"> - <li ng-repeat="note in home.notes.list | orderBy:home.arrayOrderingSrv.notebookListOrdering track by $index"> + <ul id="notebook-names"> + <li class="filter-names" ng-include="'components/filterNoteNames/filter-note-names.html'"></li> + <li ng-repeat="note in home.notes.list | filter:query | orderBy:home.arrayOrderingSrv.notebookListOrdering track by $index"> <i style="font-size: 10px;" class="icon-doc"></i> <a style="text-decoration: none;" href="#/notebook/{{note.id}}">{{note.name || 'Note ' + note.id}}</a> </li> http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/51da6584/zeppelin-web/src/components/filterNoteNames/filter-note-names.html ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/components/filterNoteNames/filter-note-names.html b/zeppelin-web/src/components/filterNoteNames/filter-note-names.html new file mode 100644 index 0000000..a354cda --- /dev/null +++ b/zeppelin-web/src/components/filterNoteNames/filter-note-names.html @@ -0,0 +1,14 @@ +<!-- +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. +--> +<input type="text" class="note-name-query form-control" ng-click="$event.stopPropagation()" placeholder=" Filter" ng-model="$parent.query.name" /> http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/51da6584/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 ca1c5fe..a795870 100644 --- a/zeppelin-web/src/components/navbar/navbar.html +++ b/zeppelin-web/src/components/navbar/navbar.html @@ -20,7 +20,7 @@ limitations under the License. <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#/"> - <img style="margin-top: -7px;s" src="assets/images/zepLogoW.png" width="50" alt="I'm zeppelin"> Zeppelin + <img style="margin-top: -7px;" src="assets/images/zepLogoW.png" width="50" alt="I'm zeppelin"> Zeppelin </a> </div> @@ -32,7 +32,8 @@ limitations under the License. <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 ng-repeat="note in navbar.notes.list | orderBy:navbar.arrayOrderingSrv.notebookListOrdering track by $index" + <li class="filter-names" ng-include="'components/filterNoteNames/filter-note-names.html'"></li> + <li ng-repeat="note in navbar.notes.list | filter:query | orderBy:navbar.arrayOrderingSrv.notebookListOrdering track by $index" ng-class="{'active' : navbar.isActive(note.id)}"> <a href="#/notebook/{{note.id}}">{{note.name || 'Note ' + note.id}} </a> </li>
![https://cloud.githubusercontent.com/assets/2031306/12445389/04f9cb46-bf8a-11e5-8e99-d04b122f7ce2.png"](https://cloud.githubusercontent.com/assets/2031306/12445389/04f9cb46-bf8a-11e5-8e99-d04b122f7ce2.png"){kind=link}
![https://cloud.githubusercontent.com/assets/2031306/12445391/04ff3216-bf8a-11e5-8fc0-19bdfaa991e3.png"](https://cloud.githubusercontent.com/assets/2031306/12445391/04ff3216-bf8a-11e5-8fc0-19bdfaa991e3.png"){kind=link}
![https://cloud.githubusercontent.com/assets/2031306/12445392/05004d86-bf8a-11e5-839f-ae9a8b4881b7.png"](https://cloud.githubusercontent.com/assets/2031306/12445392/05004d86-bf8a-11e5-839f-ae9a8b4881b7.png"){kind=link}
![https://cloud.githubusercontent.com/assets/2031306/12445390/04faf6ba-bf8a-11e5-9ae9-fec1a201591a.png"](https://cloud.githubusercontent.com/assets/2031306/12445390/04faf6ba-bf8a-11e5-9ae9-fec1a201591a.png"){kind=link}