Repository: ambari Updated Branches: refs/heads/side-navigation-feature-branch d8af6aba4 -> 4c08ceada
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/side-navigation-feature-branch Commit: 4c08ceadac683aedf8e7feae077b3cf91724b8a3 Parents: d8af6ab Author: Xi Wang <xiw...@apache.org> Authored: Wed Feb 15 17:45:49 2017 -0800 Committer: Xi Wang <xiw...@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' };