ambari-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From xiw...@apache.org
Subject [09/14] ambari git commit: AMBARI-20036. Side Nav: implement the Services Actions .(xiwang)
Date Wed, 22 Feb 2017 01:15:36 GMT
AMBARI-20036. Side Nav: implement the 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/a12c3efa
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/a12c3efa
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/a12c3efa

Branch: refs/heads/trunk
Commit: a12c3efa95792b97ee85545e08b09f9e7c215baa
Parents: 52093d1
Author: Xi Wang <xiwang@apache.org>
Authored: Thu Feb 16 15:20:27 2017 -0800
Committer: Xi Wang <xiwang@apache.org>
Committed: Thu Feb 16 15:21:33 2017 -0800

----------------------------------------------------------------------
 .../app/styles/theme/bootstrap-ambari.css       | 20 ++---
 .../main/service/all_services_actions.hbs       | 94 ++++++++++----------
 .../app/templates/main/side-menu-item.hbs       |  2 +-
 .../views/main/service/all_services_actions.js  |  2 +
 .../vendor/scripts/theme/bootstrap-ambari.js    | 40 ++++++---
 5 files changed, 86 insertions(+), 72 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/ambari/blob/a12c3efa/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 700ed1d..8fd301d 100644
--- a/ambari-web/app/styles/theme/bootstrap-ambari.css
+++ b/ambari-web/app/styles/theme/bootstrap-ambari.css
@@ -967,8 +967,8 @@ input.radio:checked + label:after {
 .navigation-bar-container ul.nav.side-nav-footer li.active:not(.has-sub-menu) > 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 {
+.navigation-bar-container ul.nav.side-nav-menu .more-actions,
+.navigation-bar-container ul.nav.side-nav-footer .more-actions {
   display: none;
   position: absolute;
   top: 20px;
@@ -979,16 +979,16 @@ input.radio:checked + label:after {
   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 {
+.navigation-bar-container ul.nav.side-nav-menu .more-actions .dropdown-menu > li >
a,
+.navigation-bar-container ul.nav.side-nav-footer .more-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 {
+.navigation-bar-container ul.nav.side-nav-menu .more-actions .dropdown-menu > li >
a i,
+.navigation-bar-container ul.nav.side-nav-footer .more-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 {
+.navigation-bar-container ul.nav.side-nav-menu .more-actions .dropdown-menu > li >
a:hover,
+.navigation-bar-container ul.nav.side-nav-footer .more-actions .dropdown-menu > li >
a:hover {
   background: #f5f5f5;
 }
 .navigation-bar-container .nav-pills > li.active > a,
@@ -1075,8 +1075,8 @@ 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 {
+.navigation-bar-container.collapsed ul.nav.side-nav-menu .more-actions,
+.navigation-bar-container.collapsed ul.nav.side-nav-footer .more-actions {
   display: none;
 }
 .navigation-bar-fit-height {

http://git-wip-us.apache.org/repos/asf/ambari/blob/a12c3efa/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 192400a..3e87cb2 100644
--- a/ambari-web/app/templates/main/service/all_services_actions.hbs
+++ b/ambari-web/app/templates/main/service/all_services_actions.hbs
@@ -17,53 +17,51 @@
 }}
 
 {{#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 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>
 {{/isAuthorized}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/a12c3efa/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 0303331..ebe4689 100644
--- a/ambari-web/app/templates/main/side-menu-item.hbs
+++ b/ambari-web/app/templates/main/side-menu-item.hbs
@@ -18,7 +18,7 @@
 
 <!--dropdown menu for the items had dropdowns-->
 {{#if view.isServicesItem}}
-  <a {{bindAttr href="view.content.href" class="view.content.isView:views-button-container
:side-nav-services-menu-item"}} data-toggle="collapse-sub-menu">
+  <a {{bindAttr href="view.content.href" 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 pull-right"></span>

http://git-wip-us.apache.org/repos/asf/ambari/blob/a12c3efa/ambari-web/app/views/main/service/all_services_actions.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/main/service/all_services_actions.js b/ambari-web/app/views/main/service/all_services_actions.js
index b0aa99c..b09813b 100644
--- a/ambari-web/app/views/main/service/all_services_actions.js
+++ b/ambari-web/app/views/main/service/all_services_actions.js
@@ -21,6 +21,8 @@ var App = require('app');
 App.AllServicesActionView = Em.View.extend({
   templateName: require('templates/main/service/all_services_actions'),
 
+  classNames: ['more-actions'],
+
   serviceController: function () {
     return App.get('router.mainServiceController');
   }.property('App.router.mainServiceController')

http://git-wip-us.apache.org/repos/asf/ambari/blob/a12c3efa/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 9ba14ad..b8111b9 100644
--- a/ambari-web/vendor/scripts/theme/bootstrap-ambari.js
+++ b/ambari-web/vendor/scripts/theme/bootstrap-ambari.js
@@ -25,8 +25,7 @@
       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');
+      var $moreActions = $(this).find('.more-actions');
 
       $subMenuToggler.each(function (index, toggler) {
         return $(toggler).parent().addClass('has-sub-menu');
@@ -34,9 +33,6 @@
 
       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() {
@@ -99,19 +95,36 @@
       });
 
       /**
-       * hover effects for all services actions icon
+       * Hovering effects for "more actions icon": "..."
        */
-      $servicesMenuItem.hover(function () {
-        if (!$navigationContainer.hasClass('collapsed')) {
-          $allServicesAction.css('display', 'inline-block');
+      $(this).find('.mainmenu-li>a').hover(function () {
+        var $moreIcon = $(this).siblings('.more-actions');
+        if ($moreIcon.length && !$navigationContainer.hasClass('collapsed')) {
+          $moreIcon.css('display', 'inline-block');
         }
       }, function () {
-        if (!$navigationContainer.hasClass('collapsed')) {
-          $allServicesAction.css('display', 'none');
+        var $moreIcon = $(this).siblings('.more-actions');
+        if ($moreIcon.length && !$navigationContainer.hasClass('collapsed')) {
+          $moreIcon.hide();
         }
       });
-      $allServicesAction.hover(function () {
-        $allServicesAction.css('display', 'inline-block');
+      $moreActions.hover(function () {
+        $(this).css('display', 'inline-block');
+      });
+      $moreActions.on('click', function () {
+        if (settings.fitHeight) {
+          var $moreIcon = $(this);
+          $moreIcon.children('.dropdown-menu').css('position', 'fixed');
+          var offset = $(this).offset();
+          $moreIcon.children('.dropdown-menu').css('top', offset.top + 20 + 'px');
+          $moreIcon.children('.dropdown-menu').css('left', offset.left);
+        }
+      });
+      $moreActions.children('.dropdown-menu').mouseleave(function () {
+        $(this).parent().removeClass('open');
+      });
+      $navigationContainer.children('.side-nav-menu').scroll(function() {
+        $moreActions.removeClass('open');
       });
 
       /**
@@ -126,6 +139,7 @@
           if ($navigationContainer.hasClass('collapsed')) {
             // set sub menu invisible when collapsed
             $subMenus.hide();
+            $moreActions.hide();
             // set the hover effect when collapsed, should show sub-menu on hovering
             $subMenuItems.hover(function () {
               $(this).find(subMenuSelector).show();


Mime
View raw message