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 23:27:03 UTC
ambari git commit: AMBARI-20036. Side Nav: implement the Services
Actions .(xiwang)
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 <xi...@apache.org>
Authored: Thu Feb 16 15:20:27 2017 -0800
Committer: Xi Wang <xi...@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();