ambari-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From xiw...@apache.org
Subject [2/2] ambari git commit: AMBARI-20610. Unable to scroll down collapsed navigation bar if it's higher that viewport.(xiwang)
Date Thu, 30 Mar 2017 01:14:31 GMT
AMBARI-20610. Unable to scroll down collapsed navigation bar if it's higher that viewport.(xiwang)


Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/8d075c6a
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/8d075c6a
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/8d075c6a

Branch: refs/heads/trunk
Commit: 8d075c6a1ae8c6b1d2c8e64b717dac464496f415
Parents: 77dd10c
Author: Xi Wang <xiwang@apache.org>
Authored: Tue Mar 28 11:30:01 2017 -0700
Committer: Xi Wang <xiwang@apache.org>
Committed: Wed Mar 29 18:11:39 2017 -0700

----------------------------------------------------------------------
 .../app/styles/theme/bootstrap-ambari.css       |  6 +---
 .../vendor/scripts/theme/bootstrap-ambari.js    | 29 +++++++++++++++++---
 2 files changed, 26 insertions(+), 9 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/ambari/blob/8d075c6a/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 b289517..b063fcf 100644
--- a/ambari-web/app/styles/theme/bootstrap-ambari.css
+++ b/ambari-web/app/styles/theme/bootstrap-ambari.css
@@ -1092,10 +1092,6 @@ input.radio:checked + label:after {
   top: 0;
   left: 50px;
 }
-.navigation-bar-container.collapsed ul.nav.side-nav-menu li:hover ul.sub-menu,
-.navigation-bar-container.collapsed ul.nav.side-nav-footer li:hover ul.sub-menu {
-  display: block;
-}
 .navigation-bar-container.collapsed ul.nav.side-nav-menu li.submenu-li > a,
 .navigation-bar-container.collapsed ul.nav.side-nav-footer li.submenu-li > a {
   padding: 10px 5px 10px 25px;
@@ -1166,7 +1162,7 @@ input.radio:checked + label:after {
 .navigation-bar-fit-height .navigation-bar-container {
   height: 100%;
 }
-.navigation-bar-fit-height .navigation-bar-container:not(.collapsed) .side-nav-menu {
+.navigation-bar-fit-height .navigation-bar-container .side-nav-menu {
   overflow-y: auto;
 }
 .notifications-group {

http://git-wip-us.apache.org/repos/asf/ambari/blob/8d075c6a/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 5cdbb55..d7ffdd1 100644
--- a/ambari-web/vendor/scripts/theme/bootstrap-ambari.js
+++ b/ambari-web/vendor/scripts/theme/bootstrap-ambari.js
@@ -30,6 +30,7 @@ $(document).ready(function () {
     var settings = $.extend({}, $.fn.navigationBar.defaults, options);
 
     return this.each(function () {
+      var _this = this;
 
       var containerSelector = '.navigation-bar-container';
       var $navigationContainer = $(this).find(containerSelector);
@@ -48,10 +49,10 @@ $(document).ready(function () {
         $(this).addClass('navigation-bar-fit-height');
 
         // make scrolling effect on side nav ONLY, i.e. not effected on ambari main contents
-        $(this).find('.side-nav-menu').on('DOMMouseScroll mousewheel', function(ev) {
+        $(this).find('.side-nav-menu').on('DOMMouseScroll mousewheel', function (ev) {
           var $this = $(this),
-            scrollTop = (this).scrollTop,
-            scrollHeight = (this).scrollHeight,
+            scrollTop = this.scrollTop,
+            scrollHeight = this.scrollHeight,
             height = $this.innerHeight(),
             delta = ev.originalEvent.wheelDelta,
             up = delta > 0;
@@ -177,7 +178,9 @@ $(document).ready(function () {
       $dropdownMenu.on('click', function () {
         // some action was triggered, should hide this icon
         var moreIcon = $(this).parent();
-        setTimeout(function(){ moreIcon.hide(); }, 1000);
+        setTimeout(function () {
+          moreIcon.hide();
+        }, 1000);
       });
       $navigationContainer.children('.side-nav-menu').scroll(function () {
         $moreActions.removeClass('open');
@@ -199,6 +202,16 @@ $(document).ready(function () {
             // set the hover effect when collapsed, should show sub-menu on hovering
             $subMenuItems.hover(function () {
               $(this).find(subMenuSelector).show();
+              // set sub-menu position
+              var $parent = $(this);
+              var $header = $('.side-nav-header');
+              if (settings.fitHeight) {
+                $(this).find(subMenuSelector).css({
+                  position: 'fixed',
+                  top: $parent.offset().top - $header.offset().top + 'px',
+                  left: 50 + 'px'
+                });
+              }
             }, function () {
               $(this).find(subMenuSelector).hide();
             });
@@ -209,6 +222,14 @@ $(document).ready(function () {
             });
             $subMenuItems.unbind('mouseenter mouseleave');
             $navigationContainer.find('.toggle-icon').removeClass(settings.menuLeftClass).addClass(settings.menuDownClass);
+            // set sub-menu position
+            if (settings.fitHeight) {
+              $(_this).find(subMenuSelector).css({
+                position: 'relative',
+                top: 0,
+                left: 0
+              });
+            }
           }
 
           //set main content left margin based on the width of side-nav


Mime
View raw message