AMBARI-20039. navigation bar interactiveness: clicking on an element should make it active (onechiporenko)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/36a01d4b Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/36a01d4b Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/36a01d4b Branch: refs/heads/trunk Commit: 36a01d4b92ba0e8ecf4a24b55d533650d13fd97f Parents: ab7a671 Author: Oleg Nechiporenko <onechipore...@apache.org> Authored: Mon Feb 20 13:24:48 2017 +0200 Committer: Oleg Nechiporenko <onechipore...@apache.org> Committed: Mon Feb 20 13:24:48 2017 +0200 ---------------------------------------------------------------------- .../app/styles/theme/bootstrap-ambari.css | 79 +++++++++++++------- .../vendor/scripts/theme/bootstrap-ambari.js | 12 ++- 2 files changed, 63 insertions(+), 28 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/36a01d4b/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 2459808..5297c77 100644 --- a/ambari-web/app/styles/theme/bootstrap-ambari.css +++ b/ambari-web/app/styles/theme/bootstrap-ambari.css @@ -1,20 +1,3 @@ -/** - * Licensed to the Apache Software Foundation (ASF) under one - * or more contributor license agreements. See the NOTICE file - * distributed with this work for additional information - * regarding copyright ownership. The ASF licenses this file - * to you under the Apache License, Version 2.0 (the - * "License"); you may not use this file except in compliance - * with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ @font-face { font-family: 'Roboto'; font-weight: normal; @@ -334,15 +317,15 @@ input.form-control:focus { } .has-warning input.form-control { color: #666; - border: 1px solid #E98A41; + border: 1px solid #E98A40; } .has-warning input.form-control:focus { - border-color: #E98A41; + border-color: #E98A40; box-shadow: none; } .has-warning .help-block.validation-block::before { content: '\e101'; - color: #E98A41; + color: #E98A40; } .form-control[disabled], .form-control[readonly], @@ -948,26 +931,40 @@ input.radio:checked + label:after { color: #fff; } .navigation-bar-container ul.nav.side-nav-menu li.active:not(.has-sub-menu), -.navigation-bar-container ul.nav.side-nav-footer li.active:not(.has-sub-menu) { +.navigation-bar-container ul.nav.side-nav-footer li.active:not(.has-sub-menu), +.navigation-bar-container ul.nav.side-nav-menu li.active.collapsed, +.navigation-bar-container ul.nav.side-nav-footer li.active.collapsed { background: #404351; cursor: pointer; } .navigation-bar-container ul.nav.side-nav-menu li.active:not(.has-sub-menu) > a, -.navigation-bar-container ul.nav.side-nav-footer li.active:not(.has-sub-menu) > a { +.navigation-bar-container ul.nav.side-nav-footer li.active:not(.has-sub-menu) > a, +.navigation-bar-container ul.nav.side-nav-menu li.active.collapsed > a, +.navigation-bar-container ul.nav.side-nav-footer li.active.collapsed > a { color: #fff; } .navigation-bar-container ul.nav.side-nav-menu li.active:not(.has-sub-menu) > a .navigation-menu-item, .navigation-bar-container ul.nav.side-nav-footer li.active:not(.has-sub-menu) > a .navigation-menu-item, +.navigation-bar-container ul.nav.side-nav-menu li.active.collapsed > a .navigation-menu-item, +.navigation-bar-container ul.nav.side-nav-footer li.active.collapsed > a .navigation-menu-item, .navigation-bar-container ul.nav.side-nav-menu li.active:not(.has-sub-menu) > a .submenu-item, .navigation-bar-container ul.nav.side-nav-footer li.active:not(.has-sub-menu) > a .submenu-item, +.navigation-bar-container ul.nav.side-nav-menu li.active.collapsed > a .submenu-item, +.navigation-bar-container ul.nav.side-nav-footer li.active.collapsed > a .submenu-item, .navigation-bar-container ul.nav.side-nav-menu li.active:not(.has-sub-menu) > a .navigation-icon, .navigation-bar-container ul.nav.side-nav-footer li.active:not(.has-sub-menu) > a .navigation-icon, +.navigation-bar-container ul.nav.side-nav-menu li.active.collapsed > a .navigation-icon, +.navigation-bar-container ul.nav.side-nav-footer li.active.collapsed > a .navigation-icon, .navigation-bar-container ul.nav.side-nav-menu li.active:not(.has-sub-menu) > a .toggle-icon, -.navigation-bar-container ul.nav.side-nav-footer li.active:not(.has-sub-menu) > a .toggle-icon { +.navigation-bar-container ul.nav.side-nav-footer li.active:not(.has-sub-menu) > a .toggle-icon, +.navigation-bar-container ul.nav.side-nav-menu li.active.collapsed > a .toggle-icon, +.navigation-bar-container ul.nav.side-nav-footer li.active.collapsed > a .toggle-icon { color: #fff; } .navigation-bar-container ul.nav.side-nav-menu li.active:not(.has-sub-menu) > a:after, -.navigation-bar-container ul.nav.side-nav-footer li.active:not(.has-sub-menu) > a:after { +.navigation-bar-container ul.nav.side-nav-footer li.active:not(.has-sub-menu) > a:after, +.navigation-bar-container ul.nav.side-nav-menu li.active.collapsed > a:after, +.navigation-bar-container ul.nav.side-nav-footer li.active.collapsed > a:after { left: 0; top: 50%; border: solid transparent; @@ -1235,7 +1232,7 @@ input.radio:checked + label:after { color: #EF6162; } #notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody td.status .alert-state-WARNING { - color: #E98A41; + color: #E98A40; } #notifications-dropdown.dropdown-menu .notifications-body .table.alerts-table tbody td.content { width: 90%; @@ -1284,6 +1281,38 @@ input.radio:checked + label:after { border-top: 1px solid #eee; padding: 15px; } +.modal-backdrop { + background-color: #808080; +} +.modal .modal-content { + border-radius: 2px; +} +.modal .modal-content .modal-header, +.modal .modal-content .modal-body, +.modal .modal-content .modal-footer { + padding-left: 20px; + padding-right: 20px; +} +.modal .modal-content .modal-header { + border-bottom: none; + padding-top: 20px; +} +.modal .modal-content .modal-header h4 { + margin: 0; + color: #666; + font-size: 20px; +} +.modal .modal-content .modal-body { + color: #666; + font-size: 12px; +} +.modal .modal-content .modal-footer { + border-top: none; + padding-bottom: 20px; +} +.modal .modal-content .modal-footer .btn ~ .btn { + margin-left: 10px; +} h1, h2, h3, http://git-wip-us.apache.org/repos/asf/ambari/blob/36a01d4b/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 20e2097..eea87c4 100644 --- a/ambari-web/vendor/scripts/theme/bootstrap-ambari.js +++ b/ambari-web/vendor/scripts/theme/bootstrap-ambari.js @@ -88,7 +88,11 @@ return false; } var $this = $(this); - $this.siblings('.sub-menu').slideToggle(600); + $this.siblings('.sub-menu').slideToggle(600, function () { + var $topMenuItem = $this.parent(); + var $subMenu = $topMenuItem.find('ul'); + return $subMenu.is(':visible') ? $topMenuItem.removeClass('collapsed') : $topMenuItem.addClass('collapsed'); + }); $this.children('.toggle-icon').toggleClass(settings.menuLeftClass + ' ' + settings.menuDownClass); event.stopPropagation(); return false; @@ -123,7 +127,7 @@ $moreActions.children('.dropdown-menu').mouseleave(function () { $(this).parent().removeClass('open'); }); - $navigationContainer.children('.side-nav-menu').scroll(function() { + $navigationContainer.children('.side-nav-menu').scroll(function () { $moreActions.removeClass('open'); }); @@ -148,7 +152,9 @@ }); } else { // keep showing all sub menu - $subMenus.show(); + $subMenus.show().each(function (index, item) { + return $(item).parent().removeClass('collapsed'); + }); $subMenuItems.unbind('mouseenter mouseleave'); $navigationContainer.find('.toggle-icon').removeClass(settings.menuLeftClass).addClass(settings.menuDownClass); }
