Merge pull request #3155 from Icinga/fix/issues-with-new-menu

Fix issues with new menu

application/layouts/scripts/parts/navigation.phtml

@@ -19,13 +19,19 @@ if (! $this->auth()->isAuthenticated()) {
         </li>
     </ul>
 </div>
-<div  id="menu" data-last-update="-1" data-base-target="_main" class="container"
+<div id="menu-container">
-      data-icinga-url="<?= $this->href('layout/menu') ?>"  data-icinga-refresh="15">
+    <div  id="menu" data-last-update="-1" data-base-target="_main" class="container"
-    <?= $this->partial(
+          data-icinga-url="<?= $this->href('layout/menu') ?>"  data-icinga-refresh="15">
-        'layout/menu.phtml',
+        <?= $this->partial(
-        'default',
+            'layout/menu.phtml',
-        array(
+            'default',
-            'menuRenderer' => Icinga::app()->getMenu()->getRenderer()->setUseStandardItemRenderer()
+            array(
-        )
+                'menuRenderer' => Icinga::app()->getMenu()->getRenderer()->setUseStandardItemRenderer()
-    ) ?>
+            )
+        ) ?>
+    </div>
 </div>
+<button id="toggle-sidebar" title="<?= $this->translate('Toggle Menu') ?>">
+    <i id="close-sidebar" class="icon-angle-double-left"></i>
+    <i id="open-sidebar" class="icon-angle-double-right"></i>
+</button>

application/views/scripts/layout/menu.phtml

@@ -14,7 +14,3 @@ if ($searchDashboard->search('dummy')->getPane('search')->hasDashlets()): ?>
     </form>
 <?php endif; ?>
 <?= $menuRenderer->setCssClass('primary-nav')->setElementTag('nav')->setHeading(t('Navigation')); ?>
-<button id="toggle-sidebar" title="<?= $this->translate('Toggle Menu') ?>">
-    <i id="close-sidebar" class="icon-angle-double-left"></i>
-    <i id="open-sidebar" class="icon-angle-double-right"></i>
-</button>

public/css/icinga/layout.less

@@ -308,12 +308,15 @@ html.no-js .controls > .tabs {
     }
   }
 
+  #search {
+    padding-left: 3.75em;
+  }
+
   #search:focus {
     background-color: @menu-bg-color;
     border-radius: 0 .25em .25em 0;
     box-shadow: 0 0 .25em 0 rgba(0, 0, 0, .2);
     color: @menu-color;
-    padding-left: 3.75em;
     width: 20em;
     position: fixed;
     z-index: 1;

public/css/icinga/menu.less

@@ -9,16 +9,34 @@
 
 @icon-width: 1.7em; // 1.5em width + 0.2em right margin
 
+#menu-container {
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
 #menu {
   background-color: @menu-bg-color;
   box-shadow: inset -.5em 0 1em rgba(0, 0, 0, .3);
   height: 100%;
-  overflow: auto;
+  width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: absolute;
+}
+
+#layout.sidebar-collapsed #menu {
+  min-width: 6em;
+  width: auto;
 }
 
 #layout:not(.minimal-layout) #menu {
   // Space for the #toggle-sidebar button
-  padding-bottom: 2.25em;
+  &:after {
+    content: "";
+    display: block;
+    padding-bottom: 2.25em;
+  }
 }
 
 #menu .nav-item {
@@ -189,22 +207,9 @@
 }
 
 // Hovered menu
-#layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item:hover,
+#layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item.hover,
-#layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active):hover {
+#layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active).hover {
   > .nav-level-2 {
-    &:before {
-      background-color: @menu-flyout-bg-color;
-      border-bottom: 1px solid @gray-light;
-      border-left:   1px solid @gray-light;
-      content: "";
-      height: 1em;
-      margin-left: -.5em;
-      margin-top: 0.625em;
-      transform: rotate(45deg);
-      width: 1em;
-      position: absolute;
-    }
-
     background-color: @menu-flyout-bg-color;
     border: 1px solid @gray-light;
     border-radius: .25em;
@@ -252,7 +257,7 @@
   }
 }
 
-#layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active):hover {
+#layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active).hover {
   > .nav-level-2 {
     // Position relative to parent
     margin-left: 16em;
@@ -260,7 +265,7 @@
   }
 }
 
-#layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item:hover {
+#layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item.hover {
   > .nav-level-2 {
     // Position relative to parent
     margin-left: 4em;
@@ -386,7 +391,7 @@ input[type=text].search-input {
   i {
     background-color: @body-bg-color;
     border-radius: .25em 0 0 .25em;
-    font-size: 1.5em;
+    font-size: 1.125em;
     width: 2em;
   }
 

public/js/icinga/behavior/navigation.js

@@ -11,7 +11,8 @@
         this.on('click', '#menu a', this.linkClicked, this);
         this.on('click', '#menu tr[href]', this.linkClicked, this);
         this.on('rendered', '#menu', this.onRendered, this);
-        this.on('mouseenter', '#menu .nav-level-1 > .nav-item', this.fixFlyoutPosition, this);
+        this.on('mouseenter', '#menu .nav-level-1 > .nav-item', this.showFlyoutMenu, this);
+        this.on('mouseleave', '#menu-container', this.hideFlyoutMenu, this);
         this.on('click', '#toggle-sidebar', this.toggleSidebar, this);
 
         /**
@@ -116,19 +117,24 @@
      * @param url   {String}    The url to match
      */
     Navigation.prototype.setActiveByUrl = function(url) {
+        var $menu = $('#menu');
+
+        if (! $menu.length) {
+            return;
+        }
 
         // try to active the first item that has an exact URL match
-        this.setActive(this.$menu.find('[href="' + url + '"]'));
+        this.setActive($menu.find('[href="' + url + '"]'));
 
         // the url may point to the search field, which must be activated too
         if (! this.active) {
-            this.setActive(this.$menu.find('form[action="' + this.icinga.utils.parseUrl(url).path + '"]'));
+            this.setActive($menu.find('form[action="' + this.icinga.utils.parseUrl(url).path + '"]'));
         }
 
         // some urls may have custom filters which won't match any menu item, in that case search
         // for a menu item that points to the base action without any filters
         if (! this.active) {
-            this.setActive(this.$menu.find('[href="' + this.icinga.utils.parseUrl(url).path + '"]').first());
+            this.setActive($menu.find('[href="' + this.icinga.utils.parseUrl(url).path + '"]').first());
         }
     };
 
@@ -205,19 +211,83 @@
     };
 
     /**
-     * Fix top position of the flyout menu
+     * Show the fly-out menu
      *
      * @param e
      */
-    Navigation.prototype.fixFlyoutPosition = function(e) {
+    Navigation.prototype.showFlyoutMenu = function(e) {
+        var $layout = $('#layout');
+
+        if ($layout.hasClass('minimal-layout')) {
+            return;
+        }
+
         var $target = $(this);
         var $flyout = $target.find('.nav-level-2');
 
-        if ($flyout.length) {
+        if (! $flyout.length) {
+            $layout.removeClass('menu-hovered');
+            $target.siblings().not($target).removeClass('hover');
+            return;
+        }
+
+        var delay = 600;
+
+        if ($layout.hasClass('menu-hovered')) {
+            delay = 0;
+        }
+
+        setTimeout(function() {
+            try {
+                if (! $target.is(':hover')) {
+                    return;
+                }
+            } catch(e) { /* Bypass because if IE8 */ }
+
+            $layout.addClass('menu-hovered');
+            $target.siblings().not($target).removeClass('hover');
+            $target.addClass('hover');
+
             $flyout.css({
+                bottom: 'auto',
                 top: $target.offset().top + $target.outerHeight()
             });
+
+            var rect = $flyout[0].getBoundingClientRect();
+
+            if (rect.y + rect.height > window.innerHeight) {
+                $flyout.css({
+                    bottom: 0,
+                    top: 'auto'
+                });
+            }
+        }, delay);
+    };
+
+    /**
+     * Hide the fly-out menu
+     *
+     * @param e
+     */
+    Navigation.prototype.hideFlyoutMenu = function(e) {
+        var $layout = $('#layout');
+        var $hovered = $('#menu').find('.nav-level-1 > .nav-item.hover');
+
+        if (! $hovered.length) {
+            $layout.removeClass('menu-hovered');
+
+            return;
         }
+
+        setTimeout(function() {
+            try {
+                if ($hovered.is(':hover') || $('#menu-container').is(':hover')) {
+                    return;
+                }
+            } catch(e) { /* Bypass because if IE8 */ };
+            $hovered.removeClass('hover');
+            $layout.removeClass('menu-hovered');
+        }, 600);
     };
 
     /**

public/js/icinga/ui.js

@@ -616,9 +616,11 @@
                     $main.css({
                         top: $header.css('height')
                     });
-                    $sidebar.css({
+                    if (! $headerLogo.length) {
-                        top: $headerLogo.offset().top + $headerLogo.outerHeight()
+                        $sidebar.css({
-                    });
+                            top: $headerLogo.offset().top + $headerLogo.outerHeight()
+                        });
+                    }
 
                     if (this.mobileMenu) {
                         $header.css({