You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by xi...@apache.org on 2017/02/16 02:31:47 UTC
ambari git commit: AMBARI-20036. UX: design new Services Actions
.(xiwang)
Repository: ambari
Updated Branches:
refs/heads/side-navigation-feature-branch d8af6aba4 -> 4c08ceada
AMBARI-20036. UX: design new Services Actions .(xiwang)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/4c08cead
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/4c08cead
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/4c08cead
Branch: refs/heads/side-navigation-feature-branch
Commit: 4c08ceadac683aedf8e7feae077b3cf91724b8a3
Parents: d8af6ab
Author: Xi Wang <xi...@apache.org>
Authored: Wed Feb 15 17:45:49 2017 -0800
Committer: Xi Wang <xi...@apache.org>
Committed: Wed Feb 15 18:30:39 2017 -0800
----------------------------------------------------------------------
.../app/styles/theme/bootstrap-ambari.css | 116 +++++++++++++------
ambari-web/app/templates/application.hbs | 4 +-
ambari-web/app/templates/main/dashboard.hbs | 26 ++---
ambari-web/app/templates/main/service.hbs | 6 +-
.../main/service/all_services_actions.hbs | 104 ++++++++---------
.../app/templates/main/side-menu-item.hbs | 7 +-
.../vendor/scripts/theme/bootstrap-ambari.js | 71 +++++++++++-
7 files changed, 217 insertions(+), 117 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/ambari/blob/4c08cead/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 36a63a3..d981fde 100644
--- a/ambari-web/app/styles/theme/bootstrap-ambari.css
+++ b/ambari-web/app/styles/theme/bootstrap-ambari.css
@@ -750,7 +750,6 @@ input.radio:checked + label:after {
width: 190px;
background-color: #323544;
padding: 0;
- overflow: hidden;
}
.navigation-bar-container ul.nav.side-nav-header {
width: 190px;
@@ -835,8 +834,12 @@ input.radio:checked + label:after {
padding: 0;
margin: 0;
}
-.navigation-bar-container ul.nav.side-nav-menu li a,
-.navigation-bar-container ul.nav.side-nav-footer li a {
+.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.submenu-li > a,
+.navigation-bar-container ul.nav.side-nav-footer li.submenu-li > 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: 15px 5px 15px 25px;
display: table-cell;
vertical-align: middle;
@@ -845,8 +848,12 @@ input.radio:checked + label:after {
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
-.navigation-bar-container ul.nav.side-nav-menu li a .navigation-menu-item,
-.navigation-bar-container ul.nav.side-nav-footer li a .navigation-menu-item {
+.navigation-bar-container ul.nav.side-nav-menu li.navigation-footer > a .navigation-menu-item,
+.navigation-bar-container ul.nav.side-nav-footer li.navigation-footer > a .navigation-menu-item,
+.navigation-bar-container ul.nav.side-nav-menu li.submenu-li > a .navigation-menu-item,
+.navigation-bar-container ul.nav.side-nav-footer li.submenu-li > a .navigation-menu-item,
+.navigation-bar-container ul.nav.side-nav-menu li.mainmenu-li > a .navigation-menu-item,
+.navigation-bar-container ul.nav.side-nav-footer li.mainmenu-li > a .navigation-menu-item {
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-style: normal;
@@ -856,14 +863,22 @@ input.radio:checked + label:after {
color: #b8bec4;
padding-left: 8px;
}
-.navigation-bar-container ul.nav.side-nav-menu li a .navigation-icon,
-.navigation-bar-container ul.nav.side-nav-footer li a .navigation-icon {
+.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,
+.navigation-bar-container ul.nav.side-nav-menu li.submenu-li > a .navigation-icon,
+.navigation-bar-container ul.nav.side-nav-footer li.submenu-li > a .navigation-icon,
+.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: 18px;
color: #b8bec4;
}
-.navigation-bar-container ul.nav.side-nav-menu li a .toggle-icon,
-.navigation-bar-container ul.nav.side-nav-footer li a .toggle-icon {
+.navigation-bar-container ul.nav.side-nav-menu li.navigation-footer > a .toggle-icon,
+.navigation-bar-container ul.nav.side-nav-footer li.navigation-footer > a .toggle-icon,
+.navigation-bar-container ul.nav.side-nav-menu li.submenu-li > a .toggle-icon,
+.navigation-bar-container ul.nav.side-nav-footer li.submenu-li > a .toggle-icon,
+.navigation-bar-container ul.nav.side-nav-menu li.mainmenu-li > a .toggle-icon,
+.navigation-bar-container ul.nav.side-nav-footer li.mainmenu-li > a .toggle-icon {
line-height: 14px;
font-size: 14px;
color: #b8bec4;
@@ -886,12 +901,12 @@ input.radio:checked + label:after {
.navigation-bar-container ul.nav.side-nav-footer li.navigation-footer a .navigation-icon:hover {
color: #fff;
}
-.navigation-bar-container ul.nav.side-nav-menu li.submenu-li,
-.navigation-bar-container ul.nav.side-nav-footer li.submenu-li {
+.navigation-bar-container ul.nav.side-nav-menu li > ul > li,
+.navigation-bar-container ul.nav.side-nav-footer li > ul > li {
background-color: #323544;
}
-.navigation-bar-container ul.nav.side-nav-menu li.submenu-li a,
-.navigation-bar-container ul.nav.side-nav-footer li.submenu-li a {
+.navigation-bar-container ul.nav.side-nav-menu li > ul > li a,
+.navigation-bar-container ul.nav.side-nav-footer li > ul > li a {
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-style: normal;
@@ -900,35 +915,35 @@ input.radio:checked + label:after {
font-size: 13px;
color: #999;
}
-.navigation-bar-container ul.nav.side-nav-menu li.submenu-li a .submenu-icon,
-.navigation-bar-container ul.nav.side-nav-footer li.submenu-li a .submenu-icon {
+.navigation-bar-container ul.nav.side-nav-menu li > ul > li a .submenu-icon,
+.navigation-bar-container ul.nav.side-nav-footer li > ul > li a .submenu-icon {
line-height: 14px;
font-size: 14px;
}
-.navigation-bar-container ul.nav.side-nav-menu li.mainmenu-li > a:hover,
-.navigation-bar-container ul.nav.side-nav-footer li.mainmenu-li > a:hover,
-.navigation-bar-container ul.nav.side-nav-menu li.submenu-li > a:hover,
-.navigation-bar-container ul.nav.side-nav-footer li.submenu-li > a:hover {
+.navigation-bar-container ul.nav.side-nav-menu li > ul > li > a:hover,
+.navigation-bar-container ul.nav.side-nav-footer li > ul > li > a:hover,
+.navigation-bar-container ul.nav.side-nav-menu li > a:hover,
+.navigation-bar-container ul.nav.side-nav-footer li > a:hover {
background: #404351;
cursor: pointer;
color: #fff;
}
-.navigation-bar-container ul.nav.side-nav-menu li.mainmenu-li > a:hover .navigation-menu-item,
-.navigation-bar-container ul.nav.side-nav-footer li.mainmenu-li > a:hover .navigation-menu-item,
-.navigation-bar-container ul.nav.side-nav-menu li.submenu-li > a:hover .navigation-menu-item,
-.navigation-bar-container ul.nav.side-nav-footer li.submenu-li > a:hover .navigation-menu-item,
-.navigation-bar-container ul.nav.side-nav-menu li.mainmenu-li > a:hover .navigation-icon,
-.navigation-bar-container ul.nav.side-nav-footer li.mainmenu-li > a:hover .navigation-icon,
-.navigation-bar-container ul.nav.side-nav-menu li.submenu-li > a:hover .navigation-icon,
-.navigation-bar-container ul.nav.side-nav-footer li.submenu-li > a:hover .navigation-icon,
-.navigation-bar-container ul.nav.side-nav-menu li.mainmenu-li > a:hover .toggle-icon,
-.navigation-bar-container ul.nav.side-nav-footer li.mainmenu-li > a:hover .toggle-icon,
-.navigation-bar-container ul.nav.side-nav-menu li.submenu-li > a:hover .toggle-icon,
-.navigation-bar-container ul.nav.side-nav-footer li.submenu-li > a:hover .toggle-icon,
-.navigation-bar-container ul.nav.side-nav-menu li.mainmenu-li > a:hover .submenu-item,
-.navigation-bar-container ul.nav.side-nav-footer li.mainmenu-li > a:hover .submenu-item,
-.navigation-bar-container ul.nav.side-nav-menu li.submenu-li > a:hover .submenu-item,
-.navigation-bar-container ul.nav.side-nav-footer li.submenu-li > a:hover .submenu-item {
+.navigation-bar-container ul.nav.side-nav-menu li > ul > li > a:hover .navigation-menu-item,
+.navigation-bar-container ul.nav.side-nav-footer li > ul > li > a:hover .navigation-menu-item,
+.navigation-bar-container ul.nav.side-nav-menu li > a:hover .navigation-menu-item,
+.navigation-bar-container ul.nav.side-nav-footer li > a:hover .navigation-menu-item,
+.navigation-bar-container ul.nav.side-nav-menu li > ul > li > a:hover .navigation-icon,
+.navigation-bar-container ul.nav.side-nav-footer li > ul > li > a:hover .navigation-icon,
+.navigation-bar-container ul.nav.side-nav-menu li > a:hover .navigation-icon,
+.navigation-bar-container ul.nav.side-nav-footer li > a:hover .navigation-icon,
+.navigation-bar-container ul.nav.side-nav-menu li > ul > li > a:hover .toggle-icon,
+.navigation-bar-container ul.nav.side-nav-footer li > ul > li > a:hover .toggle-icon,
+.navigation-bar-container ul.nav.side-nav-menu li > a:hover .toggle-icon,
+.navigation-bar-container ul.nav.side-nav-footer li > a:hover .toggle-icon,
+.navigation-bar-container ul.nav.side-nav-menu li > ul > li > a:hover .submenu-item,
+.navigation-bar-container ul.nav.side-nav-footer li > ul > li > a:hover .submenu-item,
+.navigation-bar-container ul.nav.side-nav-menu li > a:hover .submenu-item,
+.navigation-bar-container ul.nav.side-nav-footer li > a:hover .submenu-item {
color: #fff;
}
.navigation-bar-container ul.nav.side-nav-menu li.active:not(.no-active-effect),
@@ -952,6 +967,30 @@ input.radio:checked + label:after {
.navigation-bar-container ul.nav.side-nav-footer li.active:not(.no-active-effect) > a .toggle-icon {
color: #fff;
}
+.navigation-bar-container ul.nav.side-nav-menu .all-services-actions,
+.navigation-bar-container ul.nav.side-nav-footer .all-services-actions {
+ display: none;
+ position: absolute;
+ top: 20px;
+ right: 35px;
+ line-height: 14px;
+ font-size: 14px;
+ cursor: pointer;
+ vertical-align: middle;
+ color: #fff;
+}
+.navigation-bar-container ul.nav.side-nav-menu .all-services-actions .dropdown-menu > li > a,
+.navigation-bar-container ul.nav.side-nav-footer .all-services-actions .dropdown-menu > li > a {
+ color: #666;
+}
+.navigation-bar-container ul.nav.side-nav-menu .all-services-actions .dropdown-menu > li > a i,
+.navigation-bar-container ul.nav.side-nav-footer .all-services-actions .dropdown-menu > li > a i {
+ color: #666;
+}
+.navigation-bar-container ul.nav.side-nav-menu .all-services-actions .dropdown-menu > li > a:hover,
+.navigation-bar-container ul.nav.side-nav-footer .all-services-actions .dropdown-menu > li > a:hover {
+ background: #f5f5f5;
+}
.navigation-bar-container .nav-pills > li.active > a,
.navigation-bar-container .nav-pills > li.active > a:focus,
.navigation-bar-container .nav-pills > li.active > a:hover,
@@ -961,7 +1000,6 @@ input.radio:checked + label:after {
}
.navigation-bar-container.collapsed {
width: 50px;
- overflow: visible;
}
.navigation-bar-container.collapsed ul.nav.side-nav-header {
width: 50px;
@@ -1037,7 +1075,10 @@ input.radio:checked + label:after {
.navigation-bar-container.collapsed ul.nav.side-nav-footer li.submenu-li.active > a {
padding-left: 19px;
}
-
+.navigation-bar-container.collapsed ul.nav.side-nav-menu .all-services-actions,
+.navigation-bar-container.collapsed ul.nav.side-nav-footer .all-services-actions {
+ display: none;
+}
.navigation-bar-fit-height {
position: fixed;
top: 0;
@@ -1060,7 +1101,6 @@ input.radio:checked + label:after {
.navigation-bar-fit-height .navigation-bar-container:not(.collapsed) .side-nav-menu {
overflow-y: auto;
}
-
.notifications-group {
position: relative;
top: 1px;
http://git-wip-us.apache.org/repos/asf/ambari/blob/4c08cead/ambari-web/app/templates/application.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/application.hbs b/ambari-web/app/templates/application.hbs
index 94d8337..ce0e4e4 100644
--- a/ambari-web/app/templates/application.hbs
+++ b/ambari-web/app/templates/application.hbs
@@ -54,8 +54,8 @@
{{view App.MainSideMenuView}}
<ul class="side-nav-footer nav nav-pills nav-stacked">
<li class="navigation-footer">
- <a>
- <span class="navigation-icon icon-double-angle-left" data-toggle="collapse-side-nav"></span>
+ <a data-toggle="collapse-side-nav">
+ <span class="navigation-icon icon-double-angle-left"></span>
</a>
</li>
</ul>
http://git-wip-us.apache.org/repos/asf/ambari/blob/4c08cead/ambari-web/app/templates/main/dashboard.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/dashboard.hbs b/ambari-web/app/templates/main/dashboard.hbs
index 41170fd..4b174cc 100644
--- a/ambari-web/app/templates/main/dashboard.hbs
+++ b/ambari-web/app/templates/main/dashboard.hbs
@@ -17,20 +17,16 @@
}}
<div class="row">
- <div class="services-menu well col-md-2 side-menu-well">
- {{view App.MainServiceMenuView}}
- {{view App.AllServicesActionView}}
- </div>
- <div class="summary-width col-md-10" id="dashboard-widgets-container">
- <ul class="nav nav-tabs background-text">
- {{#each category in view.categories}}
- {{#view view.NavItemView itemBinding="category.name" }}
- <a href="#" {{action "goToDashboardView" category.url}} >{{category.label}}</a>
- {{/view}}
- {{/each}}
- </ul>
+ <div class="summary-width col-md-12" id="dashboard-widgets-container">
+ <ul class="nav nav-tabs background-text">
+ {{#each category in view.categories}}
+ {{#view view.NavItemView itemBinding="category.name" }}
+ <a href="#" {{action "goToDashboardView" category.url}} >{{category.label}}</a>
+ {{/view}}
+ {{/each}}
+ </ul>
- <!--show widgets, heatmaps or configs in the content-->
- {{outlet}}
- </div>
+ <!--show widgets, heatmaps or configs in the content-->
+ {{outlet}}
+ </div>
</div>
http://git-wip-us.apache.org/repos/asf/ambari/blob/4c08cead/ambari-web/app/templates/main/service.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service.hbs b/ambari-web/app/templates/main/service.hbs
index 30ead45..afe0f32 100644
--- a/ambari-web/app/templates/main/service.hbs
+++ b/ambari-web/app/templates/main/service.hbs
@@ -17,11 +17,7 @@
}}
<div class="row">
- <div class="services-menu well col-md-2 side-menu-well">
- {{view App.MainServiceMenuView}}
- {{view App.AllServicesActionView}}
- </div>
- <div class="col-md-10 summary-width">
+ <div class="col-md-12 summary-width">
{{outlet}}
</div>
</div>
http://git-wip-us.apache.org/repos/asf/ambari/blob/4c08cead/ambari-web/app/templates/main/service/all_services_actions.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/all_services_actions.hbs b/ambari-web/app/templates/main/service/all_services_actions.hbs
index 9756f01..192400a 100644
--- a/ambari-web/app/templates/main/service/all_services_actions.hbs
+++ b/ambari-web/app/templates/main/service/all_services_actions.hbs
@@ -16,56 +16,54 @@
* limitations under the License.
}}
-<div class="row">
- {{#isAuthorized "SERVICE.START_STOP, SERVICE.ADD_DELETE_SERVICES"}}
- <div class="dropdown services-menu-actions">
- <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{t common.actions}}
- <span class="caret"></span>
- </button>
- <ul class="dropdown-menu">
- {{#isAuthorized "SERVICE.ADD_DELETE_SERVICES"}}
- <li {{bindAttr class="view.serviceController.isAllServicesInstalled:disabled :add-service-button"}}>
- <a href="#"
- {{bindAttr class="view.serviceController.isAllServicesInstalled:disabled"}}
- {{action gotoAddService target="view.serviceController"}}>
- <i class="glyphicon glyphicon-plus glyphicon-white"></i> {{t services.service.add}}</a>
- </li>
- {{/isAuthorized}}
- {{#isAuthorized "SERVICE.START_STOP"}}
- <li class="divider"></li>
- <li {{bindAttr class="view.serviceController.isStartAllDisabled:disabled"}}>
- <a href="#" data-toggle="modal"
- {{bindAttr class="view.serviceController.isStartAllDisabled:disabled"}}
- {{action "startAllService" target="view.serviceController"}}>
- <i {{bindAttr class=":glyphicon :glyphicon-play view.serviceController.isStartAllDisabled:disabled:enabled"}}></i>
- {{t services.service.startAll}}
- </a>
- </li>
- <li {{bindAttr class="view.serviceController.isStopAllDisabled:disabled"}}>
- <a href="#" data-toggle="modal"
- {{bindAttr class="view.serviceController.isStopAllDisabled:disabled"}}
- {{action "stopAllService" target="view.serviceController"}}>
- <i {{bindAttr class=":glyphicon :glyphicon-stop view.serviceController.isStopAllDisabled:disabled:enabled"}}></i>
- {{t services.service.stopAll}}
- </a>
- </li>
- <li {{bindAttr class="view.serviceController.isRestartAllRequiredDisabled:disabled"}}>
- <a href="#" data-toggle="modal"
- {{bindAttr class="view.serviceController.isRestartAllRequiredDisabled:disabled"}}
- {{action "restartAllRequired" target="view.serviceController"}}>
- <i {{bindAttr class=":glyphicon :glyphicon-repeat view.serviceController.isRestartAllRequiredDisabled:disabled:enabled"}}></i>
- {{t services.service.restartAllRequired}}
- </a>
- </li>
- {{/isAuthorized}}
- <li>
- <a href="#" id="all-clients-of-cluster-link"
- {{action "downloadAllClientConfigs" target="view.serviceController"}}>
- <i {{bindAttr class=":glyphicon :glyphicon-download-alt"}}></i>
- {{t services.service.downloadAllClientConfigs}}
- </a>
- </li>
- </ul>
- </div>
- {{/isAuthorized}}
-</div>
\ No newline at end of file
+{{#isAuthorized "SERVICE.START_STOP, SERVICE.ADD_DELETE_SERVICES"}}
+ <div class="all-services-actions">
+ <div class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="glyphicon glyphicon-option-horizontal"></span>
+ </div>
+ <ul class="dropdown-menu">
+ {{#isAuthorized "SERVICE.ADD_DELETE_SERVICES"}}
+ <li {{bindAttr class="view.serviceController.isAllServicesInstalled:disabled"}}>
+ <a href="#"
+ {{bindAttr class="view.serviceController.isAllServicesInstalled:disabled"}}
+ {{action gotoAddService target="view.serviceController"}}>
+ <i class="glyphicon glyphicon-plus"></i> {{t services.service.add}}</a>
+ </li>
+ {{/isAuthorized}}
+ {{#isAuthorized "SERVICE.START_STOP"}}
+ <li class="divider"></li>
+ <li {{bindAttr class="view.serviceController.isStartAllDisabled:disabled"}}>
+ <a href="#" data-toggle="modal"
+ {{bindAttr class="view.serviceController.isStartAllDisabled:disabled"}}
+ {{action "startAllService" target="view.serviceController"}}>
+ <i {{bindAttr class=":glyphicon :glyphicon-play view.serviceController.isStartAllDisabled:disabled:enabled"}}></i>
+ {{t services.service.startAll}}
+ </a>
+ </li>
+ <li {{bindAttr class="view.serviceController.isStopAllDisabled:disabled"}}>
+ <a href="#" data-toggle="modal"
+ {{bindAttr class="view.serviceController.isStopAllDisabled:disabled"}}
+ {{action "stopAllService" target="view.serviceController"}}>
+ <i {{bindAttr class=":glyphicon :glyphicon-stop view.serviceController.isStopAllDisabled:disabled:enabled"}}></i>
+ {{t services.service.stopAll}}
+ </a>
+ </li>
+ <li {{bindAttr class="view.serviceController.isRestartAllRequiredDisabled:disabled"}}>
+ <a href="#" data-toggle="modal"
+ {{bindAttr class="view.serviceController.isRestartAllRequiredDisabled:disabled"}}
+ {{action "restartAllRequired" target="view.serviceController"}}>
+ <i {{bindAttr class=":glyphicon :glyphicon-repeat view.serviceController.isRestartAllRequiredDisabled:disabled:enabled"}}></i>
+ {{t services.service.restartAllRequired}}
+ </a>
+ </li>
+ {{/isAuthorized}}
+ <li>
+ <a href="#" id="all-clients-of-cluster-link"
+ {{action "downloadAllClientConfigs" target="view.serviceController"}}>
+ <i {{bindAttr class=":glyphicon :glyphicon-download-alt"}}></i>
+ {{t services.service.downloadAllClientConfigs}}
+ </a>
+ </li>
+ </ul>
+ </div>
+{{/isAuthorized}}
http://git-wip-us.apache.org/repos/asf/ambari/blob/4c08cead/ambari-web/app/templates/main/side-menu-item.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/side-menu-item.hbs b/ambari-web/app/templates/main/side-menu-item.hbs
index f32ce02..fe7f68f 100644
--- a/ambari-web/app/templates/main/side-menu-item.hbs
+++ b/ambari-web/app/templates/main/side-menu-item.hbs
@@ -18,18 +18,19 @@
<!--dropdown menu for the items had dropdowns-->
{{#if view.isServicesItem}}
- <a {{bindAttr class="view.content.isView:views-button-container"}} data-toggle="collapse-sub-menu">
+ <a {{bindAttr class="view.content.isView:views-button-container :side-nav-services-menu-item"}} data-toggle="collapse-sub-menu">
<span {{bindAttr class=":navigation-icon view.content.iconClass"}}></span>
<span class="navigation-menu-item">{{{unbound view.content.label}}}</span>
- <span class="toggle-icon glyphicon glyphicon-menu-down"></span>
+ <span class="toggle-icon glyphicon glyphicon-menu-down pull-right"></span>
</a>
+ {{view App.AllServicesActionView}}
{{view App.SideNavServiceMenuView}}
{{else}}
{{#if view.isAdminItem}}
<a {{bindAttr class="view.content.isView:views-button-container"}} data-toggle="collapse-sub-menu">
<span {{bindAttr class=":navigation-icon view.content.iconClass"}}></span>
<span class="navigation-menu-item">{{{unbound view.content.label}}}</span>
- <span class="toggle-icon glyphicon glyphicon-menu-down"></span>
+ <span class="toggle-icon glyphicon glyphicon-menu-down pull-right"></span>
</a>
<ul class="admin-submenu sub-menu nav nav-pills nav-stacked">
{{#each category in view.dropdownCategories}}
http://git-wip-us.apache.org/repos/asf/ambari/blob/4c08cead/ambari-web/vendor/scripts/theme/bootstrap-ambari.js
----------------------------------------------------------------------
diff --git a/ambari-web/vendor/scripts/theme/bootstrap-ambari.js b/ambari-web/vendor/scripts/theme/bootstrap-ambari.js
index 2c97dd6..28eabb7 100644
--- a/ambari-web/vendor/scripts/theme/bootstrap-ambari.js
+++ b/ambari-web/vendor/scripts/theme/bootstrap-ambari.js
@@ -23,12 +23,63 @@
var $navigationContainer = $(this).find(containerSelector);
var $sideNavToggler = $(this).find('[data-toggle=' + settings.navBarToggleDataAttr + ']');
var $subMenuToggler = $(this).find('[data-toggle=' + settings.subMenuNavToggleDataAttr + ']');
+ var firstLvlMenuItemsSelector = '.side-nav-menu>li';
+ var secondLvlMenuItemsSelector = '.side-nav-menu>li>ul>li';
+ var $servicesMenuItem = $(this).find('.side-nav-services-menu-item');
+ var $allServicesAction = $(this).find('.all-services-actions');
if (settings.fitHeight) {
$(this).addClass('navigation-bar-fit-height');
+ $allServicesAction.children('.dropdown-menu').css('position', 'fixed');
+ $allServicesAction.children('.dropdown-menu').css('top', '140px');
+ $allServicesAction.children('.dropdown-menu').css('left', '130px');
+ }
+
+ function popStateHandler() {
+ var path = window.location.pathname + window.location.hash;
+ $navigationContainer.find('li a').each(function (index, link) {
+ var $link = $(link);
+ var href = $link.attr('data-href') || $link.attr('href');
+ if (path.indexOf(href) !== -1 && !['', '#'].includes(href)) {
+ $link.parent().addClass('active');
+ } else {
+ $link.parent().removeClass('active');
+ }
+ });
+ }
+
+ if (settings.handlePopState) {
+ popStateHandler();
+ $(window).bind('popstate', popStateHandler);
+ }
+
+ function clickHandler(el) {
+ var $li = $(el).parent();
+ var activeClass = settings.activeClass;
+
+ var activeMenuItems = firstLvlMenuItemsSelector + '.' + activeClass;
+ var activeSubMenuItems = secondLvlMenuItemsSelector + '.' + activeClass;
+ $navigationContainer.find(activeMenuItems).removeClass(activeClass);
+ $navigationContainer.find(activeSubMenuItems).removeClass(activeClass);
+ $li.addClass(activeClass);
}
/**
+ * Click on menu item
+ */
+ $(firstLvlMenuItemsSelector + '>a').on('click', function () {
+ clickHandler(this);
+ });
+
+ /**
+ * Click on sub menu item
+ */
+ $(secondLvlMenuItemsSelector + '>a').on('click', function () {
+ clickHandler(this);
+ $(this).parent().parent().parent().addClass(settings.activeClass);
+ });
+
+ /**
* Slider for sub menu
*/
$subMenuToggler.off('click').on('click', function (event) {
@@ -44,6 +95,22 @@
});
/**
+ * hover effects for all services actions icon
+ */
+ $servicesMenuItem.hover(function () {
+ if (!$navigationContainer.hasClass('collapsed')) {
+ $allServicesAction.css('display', 'inline-block');
+ }
+ }, function () {
+ if (!$navigationContainer.hasClass('collapsed')) {
+ $allServicesAction.css('display', 'none');
+ }
+ });
+ $allServicesAction.hover(function () {
+ $allServicesAction.css('display', 'inline-block');
+ });
+
+ /**
* Expand/collapse navigation bar
*/
$sideNavToggler.click(function () {
@@ -76,7 +143,7 @@
if (settings.moveLeftFooter) {
$(settings.footer).css('margin-left', containerWidth);
}
- $sideNavToggler.toggleClass(settings.collapseNavBarClass + ' ' + settings.expandNavBarClass);
+ $sideNavToggler.find('span').toggleClass(settings.collapseNavBarClass + ' ' + settings.expandNavBarClass);
});
return false;
});
@@ -84,6 +151,7 @@
};
$.fn.navigationBar.defaults = {
+ handlePopState: true,
fitHeight: false,
content: '#main',
footer: 'footer',
@@ -93,6 +161,7 @@
menuDownClass: 'glyphicon-menu-down',
collapseNavBarClass: 'fa-angle-double-left',
expandNavBarClass: 'fa-angle-double-right',
+ activeClass: 'active',
navBarToggleDataAttr: 'collapse-side-nav',
subMenuNavToggleDataAttr: 'collapse-sub-menu'
};