From a52b2195aab22315d37e807337264ba34d297ab1 Mon Sep 17 00:00:00 2001 From: Damien CORNEAU Date: Sat, 25 Jun 2016 01:19:41 +0900 Subject: [PATCH 1/4] Change Notebook dropdown style --- zeppelin-web/src/app/home/home.css | 34 +++++++++++++++---- .../expandCollapse/expandCollapse.css | 17 ++++++++++ .../expandCollapse.directive.js | 32 +++++++++++++++++ .../navbar/navbar-notebookList-elem.html | 29 ++++++++++++++++ .../src/components/navbar/navbar.html | 17 ++-------- zeppelin-web/src/index.html | 2 ++ 6 files changed, 110 insertions(+), 21 deletions(-) create mode 100644 zeppelin-web/src/components/expandCollapse/expandCollapse.css create mode 100644 zeppelin-web/src/components/expandCollapse/expandCollapse.directive.js create mode 100644 zeppelin-web/src/components/navbar/navbar-notebookList-elem.html diff --git a/zeppelin-web/src/app/home/home.css b/zeppelin-web/src/app/home/home.css index 75f25216834..6f2825cfb19 100644 --- a/zeppelin-web/src/app/home/home.css +++ b/zeppelin-web/src/app/home/home.css @@ -99,10 +99,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 +136,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; @@ -263,8 +282,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; } } diff --git a/zeppelin-web/src/components/expandCollapse/expandCollapse.css b/zeppelin-web/src/components/expandCollapse/expandCollapse.css new file mode 100644 index 00000000000..b1a60d848fd --- /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; +} 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 00000000000..922840023b2 --- /dev/null +++ b/zeppelin-web/src/components/expandCollapse/expandCollapse.directive.js @@ -0,0 +1,32 @@ +/* + * 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. + */ + +angular.module('zeppelinWebApp').directive('expandCollapse', function() { + return { + restrict: 'EA', + link: function(scope, element, attrs){ + $(element).click( function(event) { + if($(element).find(".expandable:visible").length > 1) { + $(element).find(".expandable:visible").slideUp('slow'); + $(element).find("i.icon-folder-alt").toggleClass('icon-folder icon-folder-alt'); + } else { + $(element).find(".expandable").first().slideToggle('200',function() { + $(element).find("i").first().toggleClass('icon-folder icon-folder-alt'); + }); + } + event.stopPropagation(); + }); + } + } +}); 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 00000000000..6df9a290a8a --- /dev/null +++ b/zeppelin-web/src/components/navbar/navbar-notebookList-elem.html @@ -0,0 +1,29 @@ + + +{{noteName(note)}} +
  • + +
    + + {{noteName(note)}} + +
    + +     +
    • diff --git a/zeppelin-web/src/components/navbar/navbar.html b/zeppelin-web/src/components/navbar/navbar.html index cfe1559c6a3..6301b86905f 100644 --- a/zeppelin-web/src/components/navbar/navbar.html +++ b/zeppelin-web/src/components/navbar/navbar.html @@ -10,18 +10,6 @@ limitations under the License. --> - -