Repository: ambari Updated Branches: refs/heads/side-navigation-feature-branch 52093d151 -> a12c3efa9
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/side-navigation-feature-branch Commit: a12c3efa95792b97ee85545e08b09f9e7c215baa Parents: 52093d1 Author: Xi Wang <[email protected]> Authored: Thu Feb 16 15:20:27 2017 -0800 Committer: Xi Wang <[email protected]> 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();
