You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by ja...@apache.org on 2017/10/11 23:04:12 UTC
[45/50] [abbrv] ambari git commit: AMBARI-22186 Navigation style
changes. (atkach)
AMBARI-22186 Navigation style changes. (atkach)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/2d23e123
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/2d23e123
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/2d23e123
Branch: refs/heads/branch-feature-AMBARI-14714-ui
Commit: 2d23e123fd9b514b8c21d973cb0237e8c3dd6b42
Parents: 5768294
Author: Andrii Tkach <at...@apache.org>
Authored: Tue Oct 10 16:44:35 2017 +0300
Committer: Andrii Tkach <at...@apache.org>
Committed: Tue Oct 10 18:00:24 2017 +0300
----------------------------------------------------------------------
ambari-web/app/styles/common.less | 1 +
.../app/styles/theme/bootstrap-ambari.css | 64 ++++++++++++++------
ambari-web/app/styles/top-nav.less | 22 +++++++
ambari-web/app/templates/application.hbs | 39 ++++++++----
ambari-web/app/templates/main/service/item.hbs | 2 +-
5 files changed, 96 insertions(+), 32 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/ambari/blob/2d23e123/ambari-web/app/styles/common.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/common.less b/ambari-web/app/styles/common.less
index ddd4f3a..7753a59 100644
--- a/ambari-web/app/styles/common.less
+++ b/ambari-web/app/styles/common.less
@@ -71,6 +71,7 @@
@top-nav-menu-dropdown-border-color: #c3c3c3;
@top-nav-menu-dropdown-bg-color: #fff;
@top-nav-menu-dropdown-text-color: #333;
+@top-nav-menu-views-menu-color: #1491c1;
@-webkit-keyframes orangePulse {
from { background-color: @restart-indicator-color; }
http://git-wip-us.apache.org/repos/asf/ambari/blob/2d23e123/ambari-web/app/styles/theme/bootstrap-ambari.css
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/theme/bootstrap-ambari.css b/ambari-web/app/styles/theme/bootstrap-ambari.css
index a223949..70579e7 100644
--- a/ambari-web/app/styles/theme/bootstrap-ambari.css
+++ b/ambari-web/app/styles/theme/bootstrap-ambari.css
@@ -464,7 +464,7 @@ h2.table-title {
.nav.nav-tabs li a {
border-width: 0;
border-radius: 0;
- border-bottom: 2px solid transparent;
+ border-bottom: 3px solid transparent;
color: #6B6C6C;
text-transform: uppercase;
}
@@ -488,7 +488,7 @@ h2.table-title {
.nav-tabs-left li,
.nav-tabs-right li {
float: none;
- margin-bottom: 2px;
+ margin-bottom: 3px;
}
.nav-tabs-left li a,
.nav-tabs-right li a {
@@ -498,25 +498,25 @@ h2.table-title {
margin-right: -1px;
}
.nav-tabs-left li a {
- border: 2px solid transparent !important;
+ border: 3px solid transparent !important;
}
.nav-tabs-left li.active a,
.nav-tabs-left li.active a:hover,
.nav-tabs-left li.active a:active,
.nav-tabs-left li.active a:focus {
- border-right: 2px solid #3FAE2A !important;
+ border-right: 3px solid #3FAE2A !important;
}
.nav-tabs-right li {
margin-left: -1px;
}
.nav-tabs-right li a {
- border: 2px solid transparent !important;
+ border: 3px solid transparent !important;
}
.nav-tabs-right li.active a,
.nav-tabs-right li.active a:hover,
.nav-tabs-right li.active a:active,
.nav-tabs-right li.active a:focus {
- border-left: 2px solid #3FAE2A !important;
+ border-left: 3px solid #3FAE2A !important;
}
.wizard {
border: 2px solid #ebecf1;
@@ -797,8 +797,7 @@ input.radio:checked + label:after {
cursor: pointer;
margin-top: 3px;
}
-.navigation-bar-container ul.nav.side-nav-header li.navigation-header .btn-group:hover span.ambari-header,
-.navigation-bar-container ul.nav.side-nav-header li.navigation-header .btn-group:hover span.toggle-icon {
+.navigation-bar-container ul.nav.side-nav-header li.navigation-header .btn-group:hover span.ambari-header {
color: #fff;
}
.navigation-bar-container ul.nav.side-nav-header li.navigation-header .btn-group span.ambari-header {
@@ -890,7 +889,7 @@ input.radio:checked + label:after {
.navigation-bar-container ul.nav.side-nav-menu li.mainmenu-li > a .navigation-icon,
.navigation-bar-container ul.nav.side-nav-footer li.mainmenu-li > a .navigation-icon {
line-height: 18px;
- font-size: 14px;
+ font-size: 16px;
color: #b8bec4;
}
.navigation-bar-container ul.nav.side-nav-menu li.navigation-footer > a .toggle-icon,
@@ -904,12 +903,14 @@ input.radio:checked + label:after {
color: #b8bec4;
padding: 3px 5px 3px 10px;
}
-.navigation-bar-container ul.nav.side-nav-menu li.navigation-footer > a,
-.navigation-bar-container ul.nav.side-nav-footer li.navigation-footer > a,
.navigation-bar-container ul.nav.side-nav-menu li.mainmenu-li > a,
.navigation-bar-container ul.nav.side-nav-footer li.mainmenu-li > a {
padding: 10px 5px 10px 20px;
}
+.navigation-bar-container ul.nav.side-nav-menu li.navigation-footer > a,
+.navigation-bar-container ul.nav.side-nav-footer li.navigation-footer > a {
+ padding: 14px 5px 14px 20px;
+}
.navigation-bar-container ul.nav.side-nav-menu li.submenu-li > a,
.navigation-bar-container ul.nav.side-nav-footer li.submenu-li > a {
padding: 10px 5px 10px 25px;
@@ -922,7 +923,7 @@ input.radio:checked + label:after {
.navigation-bar-container ul.nav.side-nav-menu li.navigation-footer a .navigation-icon,
.navigation-bar-container ul.nav.side-nav-footer li.navigation-footer a .navigation-icon {
color: #3fae2a;
- font-size: 20px;
+ font-size: 19px;
position: relative;
padding: 0 15px;
left: calc(30%);
@@ -1021,7 +1022,7 @@ input.radio:checked + label:after {
position: absolute;
pointer-events: none;
border-color: transparent;
- border-left-color: #31823a;
+ border-left-color: #3fae2a;
margin-top: -12px;
}
.navigation-bar-container ul.nav.side-nav-menu .more-actions,
@@ -1097,6 +1098,10 @@ input.radio:checked + label:after {
.navigation-bar-container.collapsed ul.nav.side-nav-footer li a .toggle-icon {
display: none;
}
+.navigation-bar-container.collapsed ul.nav.side-nav-menu li a .navigation-icon,
+.navigation-bar-container.collapsed ul.nav.side-nav-footer li a .navigation-icon {
+ font-size: 19px;
+}
.navigation-bar-container.collapsed ul.nav.side-nav-menu li.navigation-footer a .navigation-icon,
.navigation-bar-container.collapsed ul.nav.side-nav-footer li.navigation-footer a .navigation-icon {
padding: 0 5px;
@@ -1147,7 +1152,7 @@ input.radio:checked + label:after {
position: absolute;
pointer-events: none;
border-color: transparent;
- border-left-color: #31823a;
+ border-left-color: #3fae2a;
margin-top: -12px;
}
.navigation-bar-container.collapsed ul.nav.side-nav-menu .more-actions,
@@ -1189,8 +1194,10 @@ input.radio:checked + label:after {
position: relative;
top: 1px;
}
+.notifications-dropdown,
#notifications-dropdown.dropdown-menu {
- width: 400px;
+ min-width: 400px;
+ max-width: 400px;
min-height: 150px;
padding: 0px;
z-index: 1000;
@@ -1202,6 +1209,7 @@ input.radio:checked + label:after {
-moz-box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.29);
box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.29);
}
+.notifications-dropdown .popup-arrow-up,
#notifications-dropdown.dropdown-menu .popup-arrow-up {
position: absolute;
right: 37px;
@@ -1210,6 +1218,7 @@ input.radio:checked + label:after {
height: 40px;
overflow: hidden;
}
+.notifications-dropdown .popup-arrow-up:after,
#notifications-dropdown.dropdown-menu .popup-arrow-up:after {
content: "";
position: absolute;
@@ -1221,10 +1230,12 @@ input.radio:checked + label:after {
left: 10px;
box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
}
+.notifications-dropdown .notifications-header,
#notifications-dropdown.dropdown-menu .notifications-header {
border-bottom: 1px solid #eee;
padding: 15px 20px;
}
+.notifications-dropdown .notifications-header .notifications-title,
#notifications-dropdown.dropdown-menu .notifications-header .notifications-title {
font-family: 'Roboto', sans-serif;
font-weight: normal;
@@ -1233,19 +1244,23 @@ input.radio:checked + label:after {
color: #333;
font-size: 16px;
}
+.notifications-dropdown .notifications-body,
#notifications-dropdown.dropdown-menu .notifications-body {
padding: 0px 15px;
overflow: auto;
max-height: 500px;
}
+.notifications-dropdown .notifications-body .no-alert-text,
#notifications-dropdown.dropdown-menu .notifications-body .no-alert-text {
padding: 15px 5px;
}
+.notifications-dropdown .notifications-body .table-controls,
#notifications-dropdown.dropdown-menu .notifications-body .table-controls {
padding: 10px 0px;
margin: 0px;
border-bottom: 1px solid #eee;
}
+.notifications-dropdown .notifications-body .table-controls .state-filter,
#notifications-dropdown.dropdown-menu .notifications-body .table-controls .state-filter {
padding: 0px;
font-family: 'Roboto', sans-serif;
@@ -1257,36 +1272,45 @@ input.radio:checked + label:after {
color: #666;
position: relative;
}
+.notifications-dropdown .notifications-body .table-controls .state-filter .form-control.filter-select,
#notifications-dropdown.dropdown-menu .notifications-body .table-controls .state-filter .form-control.filter-select {
font-size: 12px;
color: #666;
height: 25px;
}
+.notifications-dropdown .notifications-body .table.alerts-table,
#notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table {
margin-top: 0px;
}
+.notifications-dropdown .notifications-body .table.alerts-table tbody tr,
#notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody tr {
cursor: pointer;
}
+.notifications-dropdown .notifications-body .table.alerts-table tbody tr.no-alert-tr:hover,
#notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody tr.no-alert-tr:hover {
cursor: default;
border-color: transparent;
border-bottom-color: #eee;
}
+.notifications-dropdown .notifications-body .table.alerts-table tbody tr.no-alert-tr:hover > td,
#notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody tr.no-alert-tr:hover > td {
border-color: transparent;
background-color: white;
}
+.notifications-dropdown .notifications-body .table.alerts-table tbody td.status,
#notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody td.status {
width: 9%;
padding: 15px 3px;
}
+.notifications-dropdown .notifications-body .table.alerts-table tbody td.status .alert-state-CRITICAL,
#notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody td.status .alert-state-CRITICAL {
color: #EF6162;
}
+.notifications-dropdown .notifications-body .table.alerts-table tbody td.status .alert-state-WARNING,
#notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody td.status .alert-state-WARNING {
color: #E98A40;
}
+.notifications-dropdown .notifications-body .table.alerts-table tbody td.content,
#notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody td.content {
width: 90%;
padding: 15px 3px 10px 3px;
@@ -1297,12 +1321,14 @@ input.radio:checked + label:after {
color: #333;
line-height: 1.3;
}
+.notifications-dropdown .notifications-body .table.alerts-table tbody td.content .name,
#notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody td.content .name {
font-weight: bold;
font-size: 14px;
color: #333;
margin-bottom: 5px;
}
+.notifications-dropdown .notifications-body .table.alerts-table tbody td.content .description,
#notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody td.content .description {
font-size: 12px;
color: #666;
@@ -1327,11 +1353,13 @@ input.radio:checked + label:after {
-webkit-hyphens: auto;
hyphens: auto;
}
+.notifications-dropdown .notifications-body .table.alerts-table tbody td.content .timestamp,
#notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody td.content .timestamp {
text-align: right;
font-size: 11px;
color: #999;
}
+.notifications-dropdown .notifications-footer,
#notifications-dropdown.dropdown-menu .notifications-footer {
border-top: 1px solid #eee;
padding: 15px;
@@ -1372,13 +1400,13 @@ input.radio:checked + label:after {
}
.accordion .panel-group,
.wizard .wizard-body .wizard-content .accordion .panel-group {
- margin-bottom: 0px;
+ margin-bottom: 0;
}
.accordion .panel-group .panel,
.wizard .wizard-body .wizard-content .accordion .panel-group .panel {
- border-radius: 0px;
+ border-radius: 0;
border: none;
- margin-top: 0px;
+ margin-top: 0;
padding: 0 10px;
}
.accordion .panel-group .panel .panel-heading,
http://git-wip-us.apache.org/repos/asf/ambari/blob/2d23e123/ambari-web/app/styles/top-nav.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/top-nav.less b/ambari-web/app/styles/top-nav.less
index 0644e52..a75d08a 100644
--- a/ambari-web/app/styles/top-nav.less
+++ b/ambari-web/app/styles/top-nav.less
@@ -109,6 +109,28 @@
.top-nav-user {
margin-top: 2px;
}
+ .ambari-views {
+ margin-top: 17px;
+ padding: 0 20px 0 10px;
+ .notifications-dropdown.dropdown-menu {
+ right: -28px;
+ min-width: 200px;
+ max-width: 300px;
+ min-height: 100px;
+ li {
+ padding: 2px 5px;
+ a {
+ font-size: 12px;
+ color: @top-nav-menu-views-menu-color;
+ }
+ }
+ }
+ i {
+ font-size: 20px;
+ color: @top-nav-menu-views-menu-color;
+ cursor: pointer;
+ }
+ }
}
#notifications-dropdown.dropdown-menu {
http://git-wip-us.apache.org/repos/asf/ambari/blob/2d23e123/ambari-web/app/templates/application.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/application.hbs b/ambari-web/app/templates/application.hbs
index 03c47db..5c47406 100644
--- a/ambari-web/app/templates/application.hbs
+++ b/ambari-web/app/templates/application.hbs
@@ -35,19 +35,7 @@
</a>
{{/if}}
<div class="btn-group">
- <div class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- <span class="ambari-header" title="Apache Ambari" {{QAAttr "ambari-title"}}>{{t app.name}}</span>
- <span class="toggle-icon glyphicon glyphicon-triangle-bottom"></span>
- </div>
- <ul class="dropdown-menu">
- {{#if view.views.length}}
- {{#each item in view.views}}
- <li><a class="" href="#" {{action "setView" item target="App.router.mainViewsController"}}>{{item.label}}</a></li>
- {{/each}}
- {{else}}
- <li class="disabled"><a href="javascript:void(null);">{{t menu.item.views.noViews}}</a></li>
- {{/if}}
- </ul>
+ <span class="ambari-header" title="Apache Ambari" {{QAAttr "ambari-title"}}>{{t app.name}}</span>
</div>
</li>
</ul>
@@ -121,6 +109,31 @@
{{/if}}
{{! user dropdown end }}
+ {{! views menu}}
+ <div class="navbar-nav navbar-right ambari-views notifications-group">
+ {{#if enableLinks}}
+ <i class="icon-th dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
+ <ul class="notifications-dropdown row dropdown-menu">
+ <div class="popup-arrow-up"></div>
+ <div class="notifications-header col-sm-12">
+ <div class="notifications-title">{{t common.views}}</div>
+ </div>
+ <div class="notifications-body col-sm-12">
+ {{#if view.views.length}}
+ {{#each item in view.views}}
+ <li>
+ <a href="#" {{action "setView" item target="App.router.mainViewsController"}}>{{item.label}}</a>
+ </li>
+ {{/each}}
+ {{else}}
+ <li class="disabled"><a href="javascript:void(null);">{{t menu.item.views.noViews}}</a></li>
+ {{/if}}
+ </div>
+ </ul>
+ {{/if}}
+ </div>
+ {{!views menu end}}
+
<div class="navbar-nav navbar-right cluster-notifications">
{{#if enableLinks}}
{{! bg label }}
http://git-wip-us.apache.org/repos/asf/ambari/blob/2d23e123/ambari-web/app/templates/main/service/item.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/item.hbs b/ambari-web/app/templates/main/service/item.hbs
index df26a9d..9abcaf3 100644
--- a/ambari-web/app/templates/main/service/item.hbs
+++ b/ambari-web/app/templates/main/service/item.hbs
@@ -25,7 +25,7 @@
<div class="service-button">
{{#if view.isMaintenanceActive}}
<div class="btn-group display-inline-block">
- <button class="btn btn-default dropdown-toggle" id="service-actions-dropdown-btn" data-toggle="dropdown" href="#">
+ <button class="btn btn-success dropdown-toggle" id="service-actions-dropdown-btn" data-toggle="dropdown" href="#">
{{t common.actions}}
<span class="caret"></span>
</button>