tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-24 22:34:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Fix issues with new menu
This commit is contained in:
lippserd 2017-11-27 13:43:02 +01:00 committed by GitHub
commit d523e89cfa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 126 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
application/layouts/scripts/parts/navigation.phtml
View File

@ -19,13 +19,19 @@ if (! $this->auth()->isAuthenticated()) {
</li>
</ul>
</div>
<div id="menu" data-last-update="-1" data-base-target="_main" class="container"
data-icinga-url="<?= $this->href('layout/menu') ?>" data-icinga-refresh="15">
<?= $this->partial(
'layout/menu.phtml',
'default',
array(
'menuRenderer' => Icinga::app()->getMenu()->getRenderer()->setUseStandardItemRenderer()
)
) ?>
<div id="menu-container">
<div id="menu" data-last-update="-1" data-base-target="_main" class="container"
data-icinga-url="<?= $this->href('layout/menu') ?>" data-icinga-refresh="15">
<?= $this->partial(
'layout/menu.phtml',
'default',
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>

4
application/views/scripts/layout/menu.phtml
View File

@ -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>

5
public/css/icinga/layout.less
View File

@ -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;

45
public/css/icinga/menu.less
View File

@ -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) #menu .nav-level-1 > .nav-item:not(.active):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 {
> .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;
}

84
public/js/icinga/behavior/navigation.js
View File

@ -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);
};
/**

8
public/js/icinga/ui.js
View File

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