You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by mo...@apache.org on 2017/05/28 00:30:41 UTC
zeppelin git commit: [ZEPPELIN-2573] Improve navbar style
Repository: zeppelin
Updated Branches:
refs/heads/master 21e702c65 -> c70f29b2c
[ZEPPELIN-2573] Improve navbar style
### What is this PR for?
Improved navbar style. Refer the screenshots for detail.
### What type of PR is it?
[Improvement]
### Todos
* [x] - Fix nav brand text font-size
* [x] - Fix nav menu text font-weight
* [x] - Removed icon for search input
* [x] - Fix bug in notebook menu (focus state remains after it's closed)
### What is the Jira issue?
[ZEPPELIN-2573](https://issues.apache.org/jira/browse/ZEPPELIN-2573)
### How should this be tested?
1. Build Zeppelin: ` mvn clean package -DskipTests; ./bin/zeppelin-daemon.sh restart`
2. Open the main page
### Screenshots (if appropriate)
#### Before: Navbar Style
#### After: Navbar Style
### Questions:
* Does the licenses files need update? - NO
* Is there breaking changes for older versions? - NO
* Does this needs documentation? - NO
Author: 1ambda <1a...@gmail.com>
Closes #2355 from 1ambda/ZEPPELIN-2573/improve-navbar and squashes the following commits:
a470b94 [1ambda] fix: Set proper css for navbar in small browser
75f9980 [1ambda] fix: Add username comment in navbar.css
a880268 [1ambda] fix: DON'T use :focus for notebook menu
4ae922a [1ambda] fix: Move username related css into navbar
05f63f3 [1ambda] fix: Update search input in navbar
1e574f0 [1ambda] feat: Set font style in navbar
f563d9e [1ambda] fix: Move navbar related style to navbar.css
Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo
Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/c70f29b2
Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/c70f29b2
Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/c70f29b2
Branch: refs/heads/master
Commit: c70f29b2c065bcc8b818840e80e40d3c979c6877
Parents: 21e702c
Author: 1ambda <1a...@gmail.com>
Authored: Thu May 25 18:24:38 2017 +0900
Committer: Lee moon soo <mo...@apache.org>
Committed: Sun May 28 09:30:36 2017 +0900
----------------------------------------------------------------------
zeppelin-web/src/app/home/home.css | 107 +-------------
zeppelin-web/src/components/navbar/navbar.css | 154 +++++++++++++++++++-
zeppelin-web/src/components/navbar/navbar.html | 63 ++++----
3 files changed, 184 insertions(+), 140 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/c70f29b2/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 6c82253..03ae4c1 100644
--- a/zeppelin-web/src/app/home/home.css
+++ b/zeppelin-web/src/app/home/home.css
@@ -32,14 +32,14 @@ body {
background: white;
}
-.displayNavBar {
- display: inline !important;
-}
-
body.asIframe {
padding-top: 0;
}
+.displayNavBar {
+ display: inline !important;
+}
+
body .navbar {
margin-bottom: 0;
}
@@ -59,58 +59,6 @@ body .navbar {
text-decoration: none;
}
-.navbar-inverse {
- background: #3071a9;
- color: #fff;
- border-color: #3071a9;
- font-size: 18px;
-}
-
-.navbar-inverse .navbar-nav > .open > a,
-.navbar-inverse .navbar-nav > .open > a:hover,
-.navbar-inverse .navbar-nav > .open > a:focus {
- color: #fff;
- background: #3071a9;
-}
-
-.navbar-inverse .navbar-toggle:hover,
-.navbar-inverse .navbar-toggle:focus {
- background: #3071a9;
-}
-
-.navbar-inverse .navbar-nav > li > a:hover,
-.navbar-inverse .navbar-nav > li > a:focus {
- color: #fff;
- background: rgba(0, 0, 0, 0.2);
-
-}
-
-.navbar-inverse .navbar-toggle {
- border-color: #FFFFFF;
-}
-
-.navbar-inverse .navbar-nav > .active > a,
-.navbar-inverse .navbar-nav > .active > a:hover,
-.navbar-inverse .navbar-nav > .active > a:focus {
- color: #fff;
- background: #080808;
-}
-
-.navbar-inverse .navbar-nav > li > a {
- color: #FFFFFF;
-}
-
-.navbar-inverse .navbar-brand {
- color: #fff;
- text-decoration: none;
- font-family: 'Patua One', cursive;
- font-size: 32px;
-}
-
-a.navbar-brand:hover {
- color: #fff !important;
-}
-
/* Css for the Notebook Dropdown */
.expandable ul {
@@ -248,45 +196,6 @@ a.navbar-brand:hover {
border-radius:6px 0 6px 6px;
}
-@media (max-width: 767px) {
- .navbar-inverse .navbar-nav .open .dropdown-menu > li > a,
- #notebook-list li a {
- color: #D3D3D3;
- }
-
- .navbar-nav .open .dropdown-menu > .scrollbar-container > li > a,
- #notebook-list li a {
- padding: 5px 15px 5px 25px;
- line-height: 20px;
- }
-
- .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > li > a {
- color: #D3D3D3;
- }
-
- .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > li > a:hover,
- .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > li > a:focus,
- #notebook-list li a:hover {
- color: #fff;
- background: transparent;
- }
-
- .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > .active > a,
- .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > .active > a:hover,
- .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > .active > a:focus {
- color: #fff;
- background: #080808;
- }
-
- .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
- background: #3071A9;
- }
-
- .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
- border-color: #3071A9;
- }
-}
-
#main {
padding: 10px;
height: 100%;
@@ -335,14 +244,6 @@ a.navbar-brand:hover {
border-color: #357ebd;
}
-.username {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- max-width: 120px;
- display: inline-block;
-}
-
.server-connected {
padding-top: 12px;
color: #00CC00;
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/c70f29b2/zeppelin-web/src/components/navbar/navbar.css
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/navbar/navbar.css b/zeppelin-web/src/components/navbar/navbar.css
index ebd813c..d825c67 100644
--- a/zeppelin-web/src/components/navbar/navbar.css
+++ b/zeppelin-web/src/components/navbar/navbar.css
@@ -12,22 +12,60 @@
* limitations under the License.
*/
-#searchTermId {
- min-width: 200px;
+/* ------------------------------------------- */
+/* Navbar
+/* ------------------------------------------- */
+
+.navbar-title {
+ font-family: 'Patua One', cursive;
+ font-size: 25px;
+ color: white;
+ margin-top: 7px;
+ margin-right: 20px;
+ display: inline-block;
+}
+
+.navbar-menu {
+ font-weight: 300;
+ font-size: 16px;
+}
+
+.navbar-inverse .navbar-nav > li > a.navbar-menu-notebook:focus {
+ background-color: transparent;
+}
+
+.navbar-inverse .navbar-nav > li > a.navbar-menu-notebook:hover{
+ background-color: rgba(0, 0, 0, 0.2);
+}
+
+.navbar-inverse .navbar-nav > li > a {
+ padding-top: 16px;
+}
+
+.navbar-logo {
+ padding-right: 10px;
+}
+
+.navbar-search {
+ font-size: 14px;
+ font-family: 'FontAwesome', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
+#navbar-search {
+ min-width: 170px;
+}
@media (min-width: 795px) and (max-width: 830px) {
- input#searchTermId {
- width: 170px;
- min-width: 170px;
+ #navbar-search {
+ width: 150px;
+ min-width: 150px;
}
}
@media (min-width: 768px) and (max-width: 794px) {
- input#searchTermId {
- width: 140px;
- min-width: 140px;
+ #navbar-search {
+ width: 130px;
+ min-width: 130px;
}
}
@@ -42,6 +80,106 @@
.navbar-fixed-top.headroom--unpinned { top: -100px; }
.navbar-fixed-top.headroom--pinned { top: 0; /** `navbar` top */ }
+.navbar-inverse {
+ background: #3071a9;
+ color: #fff;
+ border-color: #3071a9;
+ font-size: 18px;
+}
+
+.navbar-inverse .navbar-nav > .open > a,
+.navbar-inverse .navbar-nav > .open > a:hover,
+.navbar-inverse .navbar-nav > .open > a:focus {
+ color: #fff;
+ background: #3071a9;
+}
+
+.navbar-inverse .navbar-toggle:hover,
+.navbar-inverse .navbar-toggle:focus {
+ background: #3071a9;
+}
+
+.navbar-inverse .navbar-nav > li > a:hover,
+.navbar-inverse .navbar-nav > li > a:focus {
+ color: #fff;
+ background: rgba(0, 0, 0, 0.2);
+}
+
+.navbar-inverse .navbar-toggle {
+ border-color: transparent;
+}
+
+.navbar-inverse .navbar-nav > .active > a,
+.navbar-inverse .navbar-nav > .active > a:hover,
+.navbar-inverse .navbar-nav > .active > a:focus {
+ color: #fff;
+ background: #080808;
+}
+
+.navbar-inverse .navbar-nav > li > a {
+ color: #FFFFFF;
+}
+
+.navbar-inverse .navbar-brand {
+ color: #fff;
+ text-decoration: none;
+ font-family: 'Patua One', cursive;
+ font-size: 32px;
+}
+
+a.navbar-brand:hover {
+ color: #fff !important;
+}
+
+@media (max-width: 767px) {
+ .navbar-inverse .navbar-nav .open .dropdown-menu > li > a,
+ #notebook-list li a {
+ color: #ecf0f1;
+ }
+
+ .navbar-nav .open .dropdown-menu > .scrollbar-container > li > a,
+ #notebook-list li a {
+ padding: 5px 15px 5px 25px;
+ line-height: 20px;
+ }
+
+ .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > li > a {
+ color: #D3D3D3;
+ }
+
+ .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > li > a:hover,
+ .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > li > a:focus,
+ #notebook-list li a:hover {
+ color: #fff;
+ background: transparent;
+ }
+
+ .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > .active > a,
+ .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > .active > a:hover,
+ .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > .active > a:focus {
+ color: #fff;
+ background: #080808;
+ }
+
+ .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
+ background: #3071A9;
+ }
+
+ .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
+ border-color: #3071A9;
+ }
+}
+
+.username {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 120px;
+ display: inline-block;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+
/* About Dialog */
.modal-header-about {
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/c70f29b2/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 a766ea9..cbff368 100644
--- a/zeppelin-web/src/components/navbar/navbar.html
+++ b/zeppelin-web/src/components/navbar/navbar.html
@@ -20,18 +20,31 @@ limitations under the License.
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
- <a class="navbar-brand" href="#/">
- <img style="margin-top: -7px;" src="assets/images/zepLogoW.png" width="50" alt="I'm zeppelin" /> Zeppelin
+ <!-- title -->
+ <a class="navbar-brand navbar-logo" href="#/">
+ <img style="margin-top: -7px;" src="assets/images/zepLogoW.png" width="50" alt="Zeppelin" />
+ </a>
+ <a class="" href="#/">
+ <span class="navbar-title">Zeppelin</span>
</a>
</div>
<div class="collapse navbar-collapse" ng-controller="NavCtrl as navbar">
<ul class="nav navbar-nav" ng-if="ticket">
+ <!-- menu: Notebook -->
<li class="dropdown notebook-list-dropdown" uib-dropdown>
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" uib-dropdown-toggle>Notebook <span class="caret"></span></a>
+ <a href="#" class="navbar-menu navbar-menu-notebook dropdown-toggle"
+ data-toggle="dropdown" uib-dropdown-toggle>
+ <span>Notebook</span>
+ <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
- <li ng-controller="NotenameCtrl as notenamectrl"><a href="" data-toggle="modal" data-target="#noteNameModal" ng-click="notenamectrl.getInterpreterSettings()"><i class="fa fa-plus"></i> Create new note</a></li>
- <li class="divider"></li>
+ <li ng-controller="NotenameCtrl as notenamectrl">
+ <a href="" data-toggle="modal" data-target="#noteNameModal" ng-click="notenamectrl.getInterpreterSettings()">
+ <i class="fa fa-plus"></i>
+ Create new note
+ </a>
+ </li>
+ <li class="divider hidden-xs"></li>
<div id="notebook-list" class="scrollbar-container" ng-if="isDrawNavbarNoteList">
<li class="filter-names" ng-include="'components/filterNoteNames/filter-note-names.html'"></li>
<div ng-if="!query.q || query.q === ''">
@@ -47,36 +60,28 @@ limitations under the License.
</div>
</ul>
</li>
- <li><a href="#/jobmanager">Job</a></li>
+ <!-- menu: Job -->
+ <li>
+ <a class="navbar-menu navbar-menu-job" href="#/jobmanager">
+ <span>Job</span>
+ </a>
+ </li>
</ul>
<ul class="nav navbar-nav navbar-right" style="margin-right:5px;">
<li class="nav-component" ng-if="ticket">
- <!--TODO(bzz): move to Typeahead https://angular-ui.github.io/bootstrap -->
<form role="search" data-ng-model="navbar.searchForm"
- style="display: inline-block; margin: 0px"
- class="navbar-form"
- ng-submit="navbar.search(navbar.searchForm.searchTerm)">
- <div class="input-group">
- <input
- type="text"
- ng-model="navbar.searchForm.searchTerm"
- id="searchTermId"
- ng-disabled="!navbar.connected"
- class="form-control"
- placeholder="Search your Notes"
- />
- <span class="input-group-btn">
- <button
- type="submit"
- class="btn btn-default"
- ng-disabled="!navbar.connected || !navbar.searchForm.searchTerm"
- >
- <i class="glyphicon glyphicon-search"></i>
- </button>
- </span>
- </div>
+ style="display: inline-block; margin: 0px"
+ class="navbar-form"
+ ng-submit="navbar.search(navbar.searchForm.searchTerm)">
+ <input
+ type="text"
+ ng-model="navbar.searchForm.searchTerm"
+ ng-disabled="!navbar.connected"
+ id="navbar-search"
+ class="form-control navbar-search"
+ placeholder=" Search" />
</form>
</li>
<li style="margin-left: 10px;">