tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix issues w/ scrollbars in the menu

This commit is contained in:
Eric Lippmann 2017-11-27 13:01:43 +01:00
parent 5aa83ea0d9
commit 544e92ac4a
5 changed files with 113 additions and 38 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;
}

73
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);
/**
@ -205,19 +206,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);
};
/**