Return-Path: X-Original-To: archive-asf-public-internal@cust-asf2.ponee.io Delivered-To: archive-asf-public-internal@cust-asf2.ponee.io Received: from cust-asf.ponee.io (cust-asf.ponee.io [163.172.22.183]) by cust-asf2.ponee.io (Postfix) with ESMTP id 8A57F200C31 for ; Wed, 22 Feb 2017 02:15:31 +0100 (CET) Received: by cust-asf.ponee.io (Postfix) id 88EEF160B74; Wed, 22 Feb 2017 01:15:31 +0000 (UTC) Delivered-To: archive-asf-public@cust-asf.ponee.io Received: from mail.apache.org (hermes.apache.org [140.211.11.3]) by cust-asf.ponee.io (Postfix) with SMTP id 6738B160B7E for ; Wed, 22 Feb 2017 02:15:30 +0100 (CET) Received: (qmail 18700 invoked by uid 500); 22 Feb 2017 01:15:29 -0000 Mailing-List: contact commits-help@ambari.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: ambari-dev@ambari.apache.org Delivered-To: mailing list commits@ambari.apache.org Received: (qmail 18420 invoked by uid 99); 22 Feb 2017 01:15:29 -0000 Received: from git1-us-west.apache.org (HELO git1-us-west.apache.org) (140.211.11.23) by apache.org (qpsmtpd/0.29) with ESMTP; Wed, 22 Feb 2017 01:15:29 +0000 Received: by git1-us-west.apache.org (ASF Mail Server at git1-us-west.apache.org, from userid 33) id 5190EE0082; Wed, 22 Feb 2017 01:15:29 +0000 (UTC) Content-Type: text/plain; charset="us-ascii" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit From: xiwang@apache.org To: commits@ambari.apache.org Date: Wed, 22 Feb 2017 01:15:36 -0000 Message-Id: <7b8790c65758476e8724b8dbb2c45dd2@git.apache.org> In-Reply-To: <1696b286ed934457ba0f491f17b50997@git.apache.org> References: <1696b286ed934457ba0f491f17b50997@git.apache.org> X-Mailer: ASF-Git Admin Mailer Subject: [09/14] ambari git commit: AMBARI-20036. Side Nav: implement the Services Actions .(xiwang) archived-at: Wed, 22 Feb 2017 01:15:31 -0000 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 Authored: Thu Feb 16 15:20:27 2017 -0800 Committer: Xi Wang 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"}} -
- - + + {{/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 @@ {{#if view.isServicesItem}} - + {{{unbound view.content.label}}} 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();