From c7fff35eabd99fba6f46a9394b014eaf83352ad1 Mon Sep 17 00:00:00 2001 From: Eric Lippmann Date: Fri, 17 Nov 2017 15:16:52 +0100 Subject: [PATCH] Replace our flyout menu with a pure CSS based solution --- public/css/icinga/layout.less | 9 ++ public/css/icinga/menu.less | 59 +++++------- public/js/icinga/behavior/navigation.js | 115 +----------------------- 3 files changed, 33 insertions(+), 150 deletions(-) diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less index 86f2762a1..fa08f0e06 100644 --- a/public/css/icinga/layout.less +++ b/public/css/icinga/layout.less @@ -226,3 +226,12 @@ html.no-js .controls > .tabs { background-color: @color-notification-warning; } } + +// Z-Index correction +#main { + z-index: 1; +} + +#sidebar { + z-index: 2; +} diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less index 2f52f67fd..06e5bbfd1 100644 --- a/public/css/icinga/menu.less +++ b/public/css/icinga/menu.less @@ -30,6 +30,15 @@ color: @icinga-blue; } +#menu .nav-item { + vertical-align: middle; + + > a { + overflow: hidden; + text-overflow: ellipsis; + } +} + #menu .nav-level-1 > .nav-item { border-left: 5px solid transparent; line-height: 2.167em; // 26 px @@ -73,11 +82,6 @@ } } -.no-js #menu .nav-level-2 > .nav-item { - // Expand menu if JavaScript is disabled - display: block; -} - #menu img.icon { line-height: 1; margin: 0 0.2em; @@ -104,7 +108,6 @@ } // Badge offset correction - #menu > nav > .nav-level-1 > .badge-nav-item > a > .badge { margin-top: 0.2em; } @@ -114,26 +117,24 @@ } // Hovered menu - -#menu .nav-level-1 > .nav-item.hover { - position: relative; - - &:before { - border: 0.5em solid rgba(0, 0, 0, 0); - border-right-color: @text-color; - content: ""; - position: absolute; - right: 0; - top: 30%; - } - +#menu .nav-level-1 > .nav-item:not(.active):hover { > .nav-level-2 { + &:before { + border: 0.5em solid rgba(0, 0, 0, 0); + border-right-color: @text-color; + content: ""; + width: 1em; + position: fixed; + margin-left: -1em; + margin-top: 0.5em; + } + background-color: @text-color; color: @text-color-inverted; - left: 100%; padding: @vertical-padding 0; - position: absolute; - top: 0; + position: fixed; + margin-left: 15.583em; + margin-top: -3.2em; width: 14em; > .nav-item { @@ -152,20 +153,6 @@ } } -#layout.hoveredmenu { - #main { - z-index: 2; - } - - #sidebar { - z-index: 3; - } - - #menu { - overflow: visible; - } -} - // Accessibility skip links .skip-links { position: relative; diff --git a/public/js/icinga/behavior/navigation.js b/public/js/icinga/behavior/navigation.js index bd711799c..91d4c1a54 100644 --- a/public/js/icinga/behavior/navigation.js +++ b/public/js/icinga/behavior/navigation.js @@ -10,8 +10,6 @@ Icinga.EventListener.call(this, icinga); this.on('click', '#menu a', this.linkClicked, this); this.on('click', '#menu tr[href]', this.linkClicked, this); - this.on('mouseenter', '#menu > nav > ul > li', this.menuTitleHovered, this); - this.on('mouseleave', '#sidebar', this.leaveSidebar, this); this.on('rendered', '#menu', this.onRendered, this); /** @@ -23,15 +21,6 @@ */ this.active = null; - /** - * The DOM-Path of the hovered item - * - * @see getDomPath - * - * @type {null|Array} - */ - this.hovered = null; - /** * The menu * @@ -71,7 +60,7 @@ }; /** - * Re-render the menu selection and menu hovering according to the current state + * Re-render the menu selection according to the current state */ Navigation.prototype.refresh = function() { // restore selection to current active element @@ -89,14 +78,6 @@ $el.html($el.html()); } } - - // restore hovered menu to current hovered element - if (this.hovered) { - var hovered = this.icinga.utils.getElementByDomPath(this.hovered); - if (hovered) { - this.hoverElement($(hovered)); - } - } }; /** @@ -107,26 +88,13 @@ Navigation.prototype.linkClicked = function(event) { var $a = $(this); var href = $a.attr('href'); - var $li; var _this = event.data.self; var icinga = _this.icinga; - _this.hovered = null; if (href.match(/#/)) { // ...it may be a menu section without a dedicated link. // Switch the active menu item: _this.setActive($a); - $li = $a.closest('li'); - if ($li.hasClass('hover')) { - $li.removeClass('hover'); - } - if (href === '#') { - // Allow to access dropdown menu by keyboard - if ($a.hasClass('dropdown-toggle')) { - $a.closest('li').toggleClass('hover'); - } - return; - } } else { _this.setActive($(event.target)); } @@ -267,87 +235,6 @@ return this.active; }; - Navigation.prototype.menuTitleHovered = function(event) { - if ($('#layout').hasClass('minimal-layout')) { - return; - } - - var $li = $(this), - delay = 800, - _this = event.data.self; - - _this.hovered = null; - if ($li.hasClass('active')) { - $li.siblings().removeClass('hover'); - return; - } - if ($li.children('ul').children('li').length === 0) { - return; - } - if ($('#menu').scrollTop() > 0) { - return; - } - - if ($('#layout').hasClass('hoveredmenu')) { - delay = 0; - } - - setTimeout(function () { - try { - if (!$li.is('li:hover')) { - return; - } - if ($li.hasClass('active')) { - return; - } - } catch(e) { /* Bypass because if IE8 */ } - - $li.siblings().each(function () { - var $sibling = $(this); - try { - if ($sibling.is('li:hover')) { - return; - } - } catch(e) { /* Bypass because if IE8 */ }; - if ($sibling.hasClass('hover')) { - $sibling.removeClass('hover'); - } - }); - _this.hoverElement($li); - }, delay); - }; - - Navigation.prototype.leaveSidebar = function (event) { - var $sidebar = $(this), - $li = $sidebar.find('li.hover'), - _this = event.data.self; - if (! $li.length) { - $('#layout').removeClass('hoveredmenu'); - return; - } - - setTimeout(function () { - try { - if ($li.is('li:hover') || $sidebar.is('sidebar:hover')) { - return; - } - } catch(e) { /* Bypass because if IE8 */ }; - $li.removeClass('hover'); - $('#layout').removeClass('hoveredmenu'); - }, 500); - _this.hovered = null; - }; - - Navigation.prototype.hoverElement = function ($li) { - $('#layout').addClass('hoveredmenu'); - $li.addClass('hover'); - if ($li[0]) { - this.hovered = this.icinga.utils.getDomPath($li[0]); - } else { - this.hovered = null; - } - }; - Icinga.Behaviors.Navigation = Navigation; }) (Icinga, jQuery);