ambari-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From xiw...@apache.org
Subject [07/14] ambari git commit: AMBARI-20036. UX: design new Services Actions .(xiwang)
Date Wed, 22 Feb 2017 01:15:34 GMT
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/trunk
Commit: 4c08ceadac683aedf8e7feae077b3cf91724b8a3
Parents: d8af6ab
Author: Xi Wang <xiwang@apache.org>
Authored: Wed Feb 15 17:45:49 2017 -0800
Committer: Xi Wang <xiwang@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'
   };


Mime
View raw message