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

Merge pull request #3904 from Icinga/feature/flex-box-layout-reworked

Browse Source 
Rework layout with flexbox
This commit is contained in:
Johannes Meyer 2019-12-06 16:37:46 +01:00 committed by GitHub
commit f5dc25b5c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 226 additions and 395 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
application/layouts/scripts/body.phtml
View File

@ -27,6 +27,10 @@ if ($this->layout()->inlineLayout) {
<div id="announcements" class="container"> <div id="announcements" class="container">
<?= $this->widget('announcements') ?> <?= $this->widget('announcements') ?>
</div> </div>
</div>
<div id="content-wrapper">
<?php if (! $this->layout()->isIframe): ?>
<div id="sidebar">
<div id="header-logo-container"> <div id="header-logo-container">
<?= $this->qlink( <?= $this->qlink(
'', '',
@ -38,26 +42,26 @@ if ($this->layout()->inlineLayout) {
'id' => 'header-logo' 'id' => 'header-logo'
) )
); ?> ); ?>
<div id="mobile-menu-toggle">
<button type="button"><?= $this->icon('menu') ?><?= $this->icon('cancel') ?></button>
</div> </div>
</div> </div>
<?php if (! $this->layout()->isIframe): ?>
<div id="sidebar">
<?= $this->render('parts/navigation.phtml'); ?> <?= $this->render('parts/navigation.phtml'); ?>
</div> </div>
<?php endif ?> <?php endif ?>
<div id="main" role="main"> <div id="main" role="main">
<div id="col1" <div id="col1"
class="container<?= $moduleClass ?>" class="container<?= $moduleClass ?>"
<?php if ($moduleName): ?>data-icinga-module="<?= $moduleName ?>"<?php endif ?> <?php if ($moduleName): ?>
data-icinga-title="<?= ! empty($this->title) ? $this->escape($this->title) . ' :: ' : '' ?><?= $this->defaultTitle ?>" data-icinga-module="<?= $moduleName ?>"
<?php endif ?>
data-icinga-url="<?= $this->escape(Url::fromRequest()->without('renderLayout')->getAbsoluteUrl()); ?>" data-icinga-url="<?= $this->escape(Url::fromRequest()->without('renderLayout')->getAbsoluteUrl()); ?>"
<?= $refresh; ?> <?= $refresh; ?>
style="display: block"> >
<?= $this->render($inlineLayoutScript) ?> <?= $this->render($inlineLayoutScript) ?>
</div> </div>
<div id="col2" class="container"> <div id="col2" class="container"></div>
</div> <div id="col3" class="container"></div>
<div id="col3" class="container">
</div> </div>
</div> </div>
<div id="footer"> <div id="footer">

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

@ -19,7 +19,6 @@ if (! $this->auth()->isAuthenticated()) {
</li> </li>
</ul> </ul>
</div> </div>
<div id="menu-container">
<div id="menu" data-last-update="-1" data-base-target="_main" class="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"> data-icinga-url="<?= $this->href('layout/menu') ?>" data-icinga-refresh="15">
<?= $this->partial( <?= $this->partial(
@ -30,7 +29,6 @@ if (! $this->auth()->isAuthenticated()) {
) )
) ?> ) ?>
</div> </div>
</div>
<button id="toggle-sidebar" title="<?= $this->translate('Toggle Menu') ?>"> <button id="toggle-sidebar" title="<?= $this->translate('Toggle Menu') ?>">
<i id="close-sidebar" class="icon-angle-double-left"></i> <i id="close-sidebar" class="icon-angle-double-left"></i>
<i id="open-sidebar" class="icon-angle-double-right"></i> <i id="open-sidebar" class="icon-angle-double-right"></i>

1
modules/monitoring/application/views/scripts/list/hosts.phtml
View File

@ -113,7 +113,6 @@ if (! $this->compact): ?>
<?php endif ?> <?php endif ?>
</div> </div>
<?php if (! $this->compact): ?> <?php if (! $this->compact): ?>
<div class="monitoring-statusbar-ghost dont-print"></div>
<div class="monitoring-statusbar dont-print"> <div class="monitoring-statusbar dont-print">
<?= $this->render('list/components/hostssummary.phtml') ?> <?= $this->render('list/components/hostssummary.phtml') ?>
<?= $this->render('list/components/selectioninfo.phtml') ?> <?= $this->render('list/components/selectioninfo.phtml') ?>

1
modules/monitoring/application/views/scripts/list/services.phtml
View File

@ -141,7 +141,6 @@ if (! $this->compact): ?>
<?php endif ?> <?php endif ?>
</div> </div>
<?php if (! $this->compact): ?> <?php if (! $this->compact): ?>
<div class="monitoring-statusbar-ghost dont-print"></div>
<div class="monitoring-statusbar dont-print"> <div class="monitoring-statusbar dont-print">
<?= $this->render('list/components/servicesummary.phtml') ?> <?= $this->render('list/components/servicesummary.phtml') ?>
<?= $this->render('list/components/selectioninfo.phtml') ?> <?= $this->render('list/components/selectioninfo.phtml') ?>

29
modules/monitoring/public/css/module.less
View File

@ -1,17 +1,10 @@
/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */ /*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
// Styles for the bottom status bar in the host and service list views
.monitoring-statusbar-ghost {
display: block;
visibility: hidden;
}
.monitoring-statusbar { .monitoring-statusbar {
position: relative;
background-color: @body-bg-color; background-color: @body-bg-color;
border-top: 1px solid @gray-lighter; border-top: 1px solid @gray-lighter;
bottom: 0;
padding: .25em @gutter; padding: .25em @gutter;
position: fixed;
line-height: 1; line-height: 1;
&:before { &:before {
@ -200,17 +193,25 @@
// Quick actions // Quick actions
.quick-actions { .quick-actions {
margin: 0 -.5em;
&:last-child {
margin-bottom: -.25em;
}
li { li {
color: @icinga-blue; color: @icinga-blue;
padding: 0 0.6em;
} }
li:first-child { a,
padding-left: 0; button {
} .rounded-corners();
padding: .25em .5em;
li:last-child { &:hover {
padding-right: 0; background-color: @gray-lighter;
text-decoration: none;
}
} }
} }

48
public/css/icinga/layout-structure.less
View File

@ -1,53 +1,45 @@
/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */ /*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
html { html {
height: 100%;
font-family: 'default-layout'; font-family: 'default-layout';
} }
body {
height: 100%;
}
#layout { #layout {
height: 100%; height: 100%;
width: 100%; display: flex;
position: fixed; flex-direction: column;
left: 0;
top: 0;
// Prevent nav-level-2 flyovers from being covered by #main // Prevent nav-level-2 flyovers from being covered by #main
z-index: 0; z-index: 0;
} }
#header { #content-wrapper {
width: 100%; flex: 1 1 auto;
padding-bottom: 3em; display: flex;
position: fixed; height: 0;
left: 0;
top: 0;
} }
#sidebar { #sidebar {
width: 12em; width: 16em;
position: fixed; display: flex;
bottom: 0; flex-direction: column;
left: 0; position: relative;
top: 4.5em;
} }
#main { #main {
position: fixed; flex: 1;
bottom: 0; display: flex;
left: 12em;
right: 0;
top: 2.25em;
} }
.iframe { .iframe {
#header, #sidebar { #header, #sidebar {
display: none; display: none;
} }
#main {
left: 0;
top: 0;
}
} }
#fileupload-frame-target { #fileupload-frame-target {
@ -103,17 +95,11 @@ html {
height: 1.5em; height: 1.5em;
font-size: 0.75em; font-size: 0.75em;
padding: 0.2em 0 0; padding: 0.2em 0 0;
background-color: @icinga-blue;
} }
.controls > ul.tabs > li > a { .controls > ul.tabs > li > a {
line-height: 1.5em; line-height: 1.5em;
} }
#main {
left: 0;
top: 0 !important;
}
} }
.controls-separated, .controls-separated,

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

@ -26,24 +26,16 @@
#header, #header,
#login, #login,
#main > .container, #content-wrapper {
#menu {
font-size: @font-size; font-size: @font-size;
line-height: @line-height; line-height: @line-height;
} }
#header {
background-color: @icinga-blue;
}
#header-logo-container { #header-logo-container {
background: inherit; background: @icinga-blue;
height: 6em; height: 6em;
padding: 1.25em; padding: 1.25em;
width: 16em; width: 16em;
position: fixed;
left: 0;
margin-top: -3em;
} }
#header-logo, #header-logo,
@ -105,22 +97,23 @@
.clearfix(); .clearfix();
& > .container { & > .container {
float: left; width: 0;
// Column width controlled by #layout
width: 100%;
// Container scrolling
height: 100%;
overflow: auto; overflow: auto;
flex: 1 1 auto;
display: flex;
flex-direction: column;
&:empty {
display: none;
}
& > .content { & > .content {
flex: 1 1 auto;
overflow: auto;
padding: @gutter; padding: @gutter;
z-index: 2;
} }
& > .controls { & > .controls {
z-index: 3;
padding-left: @gutter; padding-left: @gutter;
padding-right: @gutter; padding-right: @gutter;
@ -128,6 +121,11 @@
// Remove gutter for tabs // Remove gutter for tabs
margin-left: -1 * @gutter; margin-left: -1 * @gutter;
margin-right: -1 * @gutter; margin-right: -1 * @gutter;
height: 2.5em;
}
.tabs:first-child:not(:last-child) {
margin-bottom: .5em;
} }
} }
} }
@ -162,19 +160,9 @@
} }
.controls { .controls {
// Override default transparent background because scrolled content is positioned beneath controls and could be seen
// through otherwise
background-color: @body-bg-color;
> .tabs { > .tabs {
height: 2.6em;
margin-top: -2.6em;
overflow: hidden; overflow: hidden;
} }
> .tabs-spacer {
margin-bottom: 1em;
}
} }
// Display tabs if JS is disabled // Display tabs if JS is disabled
@ -245,15 +233,6 @@ html.no-js .controls > .tabs {
} }
} }
// Z-Index correction
#main {
z-index: 1;
}
#sidebar {
z-index: 2;
}
// Collapsed sidebar // Collapsed sidebar
#layout:not(.minimal-layout).sidebar-collapsed { #layout:not(.minimal-layout).sidebar-collapsed {
#header-logo-container { #header-logo-container {
@ -266,13 +245,8 @@ html.no-js .controls > .tabs {
background-image: url('../img/icinga-logo-compact.svg'); background-image: url('../img/icinga-logo-compact.svg');
} }
#main {
left: 3em;
}
#sidebar { #sidebar {
top: 2.25em; width: 4em;
width: 3em;
} }
#open-sidebar { #open-sidebar {

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

@ -9,20 +9,13 @@
@icon-width: 1.7em; // 1.5em width + 0.2em right margin @icon-width: 1.7em; // 1.5em width + 0.2em right margin
#menu-container {
height: 100%;
overflow: hidden;
position: relative;
}
#menu { #menu {
background-color: @menu-bg-color; background-color: @menu-bg-color;
box-shadow: inset -.5em 0 1em rgba(0, 0, 0, .3); box-shadow: inset -.5em 0 1em rgba(0, 0, 0, .3);
height: 100%;
width: 100%; width: 100%;
flex: 1;
overflow: auto;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto;
position: absolute;
} }
#layout:not(.minimal-layout) #menu { #layout:not(.minimal-layout) #menu {
@ -38,6 +31,8 @@
vertical-align: middle; vertical-align: middle;
> a { > a {
position: relative;
&:focus { &:focus {
outline: none; outline: none;
} }
@ -91,7 +86,7 @@
&.active:not(.selected) > a:focus, &.active:not(.selected) > a:focus,
&.active:not(.selected) > a:hover { &.active:not(.selected) > a:hover {
background-color: mix(#000, @menu-active-bg-color, 20); background-color: darken(@menu-active-bg-color, 20);
} }
&:not(.selected) > a:hover, &:not(.selected) > a:hover,
@ -148,9 +143,9 @@ ul:not(.nav-level-2) > .selected > a {
padding: 0.364em 0.545em 0.364em (@icon-width + .75em)/@font-size-small; padding: 0.364em 0.545em 0.364em (@icon-width + .75em)/@font-size-small;
} }
&:not(.selected):not(.active) > a:hover, &:not(.selected):not(.active) > a:not(.badge):hover,
&:not(.selected):not(.active) > a:focus { &:not(.selected):not(.active) > a:not(.badge):focus {
background-color: mix(#000, @menu-active-bg-color, 20); background-color: darken(@menu-active-bg-color, 20);
color: @menu-2ndlvl-highlight-color; color: @menu-2ndlvl-highlight-color;
} }
@ -231,7 +226,7 @@ ul:not(.nav-level-2) > .selected > a {
&:hover, &:hover,
&:focus { &:focus {
background-color: mix(#000, @menu-bg-color, 20); background-color: darken(@menu-bg-color, 20);
} }
} }
@ -256,6 +251,7 @@ ul:not(.nav-level-2) > .selected > a {
padding: @vertical-padding 0; padding: @vertical-padding 0;
width: 14em; width: 14em;
position: fixed; position: fixed;
z-index: 1;
&:after { &:after {
.transform(rotate(45deg)); .transform(rotate(45deg));
@ -329,6 +325,8 @@ ul:not(.nav-level-2) > .selected > a {
// Accessibility skip links // Accessibility skip links
.skip-links { .skip-links {
position: relative; position: relative;
font-size: 1/.75em;
ul { ul {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
@ -356,9 +354,6 @@ ul:not(.nav-level-2) > .selected > a {
} }
#sidebar.expanded { #sidebar.expanded {
bottom: 0 !important;
height: auto !important;
#mobile-menu-toggle .icon-menu { #mobile-menu-toggle .icon-menu {
display: none; display: none;
} }
@ -373,7 +368,7 @@ ul:not(.nav-level-2) > .selected > a {
} }
.search-input:focus ~ .search-reset:hover { .search-input:focus ~ .search-reset:hover {
background-color: mix(#000, @menu-active-bg-color, 20); background-color: darken(@menu-active-bg-color, 20);
} }
.search-reset { .search-reset {
@ -391,7 +386,7 @@ ul:not(.nav-level-2) > .selected > a {
&:focus, &:focus,
&:hover { &:hover {
background-color: mix(#000, @menu-bg-color, 20); background-color: darken(@menu-bg-color, 20);
outline: none; outline: none;
} }
} }
@ -437,6 +432,8 @@ input[type=text].search-input {
// Toggle sidebar button // Toggle sidebar button
#toggle-sidebar { #toggle-sidebar {
font-size: 1/.75em;
// Reset button styles // Reset button styles
background: none; background: none;
border: none; border: none;
@ -477,3 +474,48 @@ input[type=text].search-input {
width: 1.4em; width: 1.4em;
margin-right: 0; margin-right: 0;
} }
#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li,
#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item:not(.active).hover .nav-level-2 > li {
&.badge-nav-item {
display: flex;
align-items: center;
}
&.badge-nav-item a:not(.badge) {
flex: 1 1 auto;
width: 0;
}
&.badge-nav-item a.badge {
color: white;
flex: 0 1 auto;
margin-right: 1em;
padding: .25em;
width: auto;
&:hover {
opacity: .6;
}
}
}
#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li {
&.badge-nav-item:not(.selected) {
&:hover {
background-color: darken(@menu-bg-color, 20);
a {
color: white;
}
}
}
}
#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item:not(.active).hover .nav-level-2 > li {
&.badge-nav-item {
&:hover {
background-color: lighten(@icinga-blue, 80);
}
}
}

53
public/css/icinga/responsive.less
View File

@ -61,17 +61,37 @@
} }
} }
#layout.minimal-layout { #layout:not(.minimal-layout) {
#main { #mobile-menu-toggle {
left: 0; display: none;
}
} }
#layout.minimal-layout {
#sidebar { #sidebar {
top: 0 !important;
height: 32px;
padding-bottom: 2.5em;
width: 100%; width: 100%;
z-index: 3; }
#header-logo-container {
width: auto;
height: 2.5em;
padding: 0;
background: inherit;
}
#header-logo {
float: left;
width: 6em;
height: 2em;
margin: .25em;
}
#mobile-menu-toggle {
float: right;
}
#sidebar:not(.expanded) #menu {
display: none;
} }
#menu { #menu {
@ -80,6 +100,10 @@
box-shadow: none; box-shadow: none;
} }
#content-wrapper {
flex-direction: column;
}
ul > .selected > a:after, ul > .selected > a:after,
ul > .nav-item.active:after { ul > .nav-item.active:after {
display: none; display: none;
@ -174,25 +198,12 @@
// Columns // Columns
#layout #col2 {
display: none;
}
#layout.twocols #col2 { #layout.twocols #col2 {
border-left: 1px solid @gray-lighter; border-left: 1px solid @gray-lighter;
display: block;
}
#layout.twocols > #main > .container {
width: 50%;
}
#layout.twocols.wide-layout #col1 {
width: 33.33%;
} }
#layout.twocols.wide-layout #col2 { #layout.twocols.wide-layout #col2 {
width: 66.66%; flex-grow: 2;
} }
// Safe areas for iPhone X // Safe areas for iPhone X

6
public/css/icinga/setup.less
View File

@ -1,10 +1,4 @@
/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */ /*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
#layout {
overflow: auto; // TODO: Shouldn't be necessary, here, IMHO
}
#setup { #setup {
> .header { > .header {
width: 100%; width: 100%;

18
public/css/icinga/tabs.less
View File

@ -3,6 +3,7 @@
// Styles for tab navigation of containers // Styles for tab navigation of containers
.tabs { .tabs {
background-color: @icinga-blue;
letter-spacing: -0.417em; letter-spacing: -0.417em;
} }
@ -11,10 +12,7 @@
letter-spacing: normal; letter-spacing: normal;
} }
.tabs { .tabs a {
height: 2.6em;
a {
padding: 0 1em; padding: 0 1em;
line-height: 2.6em; line-height: 2.6em;
@ -22,13 +20,19 @@
outline-offset: -0.5em; outline-offset: -0.5em;
} }
} }
}
.tabs > li { .tabs > li {
&:not(:last-child) {
margin-right: 0.5em; margin-right: 0.5em;
}
> a { > a {
color: @body-bg-color; color: @body-bg-color;
&:hover {
text-decoration: none;
background: rgba(0,0,0,.1);
}
} }
&.active > a, &.active > a,
@ -36,10 +40,6 @@
background-color: @body-bg-color; background-color: @body-bg-color;
color: @text-color; color: @text-color;
} }
&:last-child {
margin-right: 0;
}
} }
.tabs > .dropdown-nav-item > a, .tabs > .dropdown-nav-item > a,

6
public/css/themes/Winter.less
View File

@ -10,7 +10,7 @@
@tr-hover-color: #c6cfe4; @tr-hover-color: #c6cfe4;
/* Snow, from http://codepen.io/NickyCDK/pen/AIonk */ /* Snow, from http://codepen.io/NickyCDK/pen/AIonk */
#header, #login { #login, #header-logo-container, #main > .container > .controls > .tabs {
background-image: url('../img/winter/snow1.png'), url('../img/winter/snow2.png'), url('../img/winter/snow3.png'); background-image: url('../img/winter/snow1.png'), url('../img/winter/snow2.png'), url('../img/winter/snow3.png');
-webkit-animation: snow 10s linear infinite; -webkit-animation: snow 10s linear infinite;
-moz-animation: snow 10s linear infinite; -moz-animation: snow 10s linear infinite;
@ -46,6 +46,10 @@
} }
#menu ul.nav-level-1 > .nav-item { #menu ul.nav-level-1 > .nav-item {
&.selected > a {
background-color: transparent;
}
&:focus, &:hover { &:focus, &:hover {
background-image: url('../img/winter/snow1.png'), url('../img/winter/snow2.png'), url('../img/winter/snow3.png'); background-image: url('../img/winter/snow1.png'), url('../img/winter/snow2.png'), url('../img/winter/snow3.png');
-webkit-animation: snow 10s linear infinite; -webkit-animation: snow 10s linear infinite;

2
public/css/themes/solarized-dark.less
View File

@ -56,7 +56,7 @@
// Form colors // Form colors
@button-primary-color: lighten(@base02, 20); @button-primary-color: lighten(@base02, 20);
#header { #header-logo-container {
background-color: @base02; background-color: @base02;
} }

8
public/js/icinga/behavior/application-state.js
View File

@ -10,7 +10,6 @@
var ApplicationState = function (icinga) { var ApplicationState = function (icinga) {
Icinga.EventListener.call(this, icinga); Icinga.EventListener.call(this, icinga);
this.on('rendered', this.onRendered, this); this.on('rendered', this.onRendered, this);
this.on('rendered', '#application-state-summary', this.onSummaryRendered, this);
this.icinga = icinga; this.icinga = icinga;
}; };
@ -32,13 +31,6 @@
} }
}; };
ApplicationState.prototype.onSummaryRendered = function(e) {
var height = $(this).height();
$('#sidebar').css('bottom', height);
$('#main').css('bottom', height);
};
Icinga.Behaviors.ApplicationState = ApplicationState; Icinga.Behaviors.ApplicationState = ApplicationState;
})(Icinga, jQuery); })(Icinga, jQuery);

2
public/js/icinga/behavior/filtereditor.js
View File

@ -56,8 +56,6 @@
$li.toggleClass('collapsed'); $li.toggleClass('collapsed');
} }
}); });
icinga.ui.fixControls($container);
} }
} }
}; };

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

@ -12,7 +12,7 @@
this.on('click', '#menu tr[href]', this.linkClicked, this); this.on('click', '#menu tr[href]', this.linkClicked, this);
this.on('rendered', '#menu', this.onRendered, this); this.on('rendered', '#menu', this.onRendered, this);
this.on('mouseenter', '#menu .nav-level-1 > .nav-item', this.showFlyoutMenu, this); this.on('mouseenter', '#menu .nav-level-1 > .nav-item', this.showFlyoutMenu, this);
this.on('mouseleave', '#menu-container', this.hideFlyoutMenu, this); this.on('mouseleave', '#menu', this.hideFlyoutMenu, this);
this.on('click', '#toggle-sidebar', this.toggleSidebar, this); this.on('click', '#toggle-sidebar', this.toggleSidebar, this);
/** /**
@ -277,17 +277,12 @@
var $flyout = $target.find('.nav-level-2'); var $flyout = $target.find('.nav-level-2');
if (! $flyout.length) { if (! $flyout.length) {
$layout.removeClass('menu-hovered');
$target.siblings().not($target).removeClass('hover'); $target.siblings().not($target).removeClass('hover');
return; return;
} }
var delay = 300; var delay = 300;
if ($layout.hasClass('menu-hovered')) {
delay = 0;
}
setTimeout(function() { setTimeout(function() {
try { try {
if (! $target.is(':hover')) { if (! $target.is(':hover')) {
@ -295,7 +290,6 @@
} }
} catch(e) { /* Bypass because if IE8 */ } } catch(e) { /* Bypass because if IE8 */ }
$layout.addClass('menu-hovered');
$target.siblings().not($target).removeClass('hover'); $target.siblings().not($target).removeClass('hover');
$target.addClass('hover'); $target.addClass('hover');
@ -325,19 +319,16 @@
var $hovered = $('#menu').find('.nav-level-1 > .nav-item.hover'); var $hovered = $('#menu').find('.nav-level-1 > .nav-item.hover');
if (! $hovered.length) { if (! $hovered.length) {
$layout.removeClass('menu-hovered');
return; return;
} }
setTimeout(function() { setTimeout(function() {
try { try {
if ($hovered.is(':hover') || $('#menu-container').is(':hover')) { if ($hovered.is(':hover') || $('#menu').is(':hover')) {
return; return;
} }
} catch(e) { /* Bypass because if IE8 */ }; } catch(e) { /* Bypass because if IE8 */ };
$hovered.removeClass('hover'); $hovered.removeClass('hover');
$layout.removeClass('menu-hovered');
}, 600); }, 600);
}; };

5
public/js/icinga/events.js
View File

@ -23,9 +23,6 @@
*/ */
initialize: function () { initialize: function () {
this.applyGlobalDefaults(); this.applyGlobalDefaults();
$('.container').each(function(idx, el) {
icinga.ui.initializeControls($(el));
});
}, },
/** /**
@ -101,8 +98,6 @@
} else { } else {
$parent.addClass('collapsed'); $parent.addClass('collapsed');
} }
icinga.ui.fixControls($parent.closest('.container'));
}, },
onInit: function (event) { onInit: function (event) {

9
public/js/icinga/loader.js
View File

@ -938,8 +938,6 @@
+ '.', + '.',
true true
); );
this.icinga.ui.fixControls();
} }
this.icinga.logger.error( this.icinga.logger.error(
@ -964,8 +962,6 @@
'<li class="' + c + '">' + this.icinga.utils.escape(message) + '</li>' '<li class="' + c + '">' + this.icinga.utils.escape(message) + '</li>'
).appendTo($('#notifications')); ).appendTo($('#notifications'));
this.icinga.ui.fixControls();
if (!persist) { if (!persist) {
this.icinga.ui.fadeNotificationsAway(); this.icinga.ui.fadeNotificationsAway();
} }
@ -1145,11 +1141,6 @@
}, 0); }, 0);
} }
var icinga = this.icinga;
//icinga.events.applyHandlers($container);
icinga.ui.initializeControls($container);
icinga.ui.fixControls();
if (scrollPos !== false) { if (scrollPos !== false) {
$container.scrollTop(scrollPos); $container.scrollTop(scrollPos);

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

@ -21,13 +21,6 @@
this.timeCounterTimer = null; this.timeCounterTimer = null;
/**
* Whether the mobile menu is shown
*
* @type {bool}
*/
this.mobileMenu = false;
// detect currentLayout // detect currentLayout
var classList = $('#layout').attr('class').split(/\s+/); var classList = $('#layout').attr('class').split(/\s+/);
var _this = this; var _this = this;
@ -51,6 +44,11 @@
this.enableTimeCounters(); this.enableTimeCounters();
this.triggerWindowResize(); this.triggerWindowResize();
this.fadeNotificationsAway(); this.fadeNotificationsAway();
$(document).on('click', '#mobile-menu-toggle', this.toggleMobileMenu);
$(document).on('keypress', '#search',{ self: this, type: 'key' }, this.closeMobileMenu);
$(document).on('mouseleave', '#sidebar', { self: this, type: 'leave' }, this.closeMobileMenu);
$(document).on('click', '#sidebar a', { self: this, type: 'navigate' }, this.closeMobileMenu);
}, },
fadeNotificationsAway: function() { fadeNotificationsAway: function() {
@ -62,10 +60,8 @@
.delay(7000) .delay(7000)
.fadeOut('slow', .fadeOut('slow',
function() { function() {
icinga.ui.fixControls();
$(this).remove(); $(this).remove();
}); });
}, },
toggleDebug: function() { toggleDebug: function() {
@ -124,9 +120,9 @@
'href', 'href',
base + '/' + url.replace(/^\//, '') base + '/' + url.replace(/^\//, '')
).on('load', function() { ).on('load', function() {
icinga.ui.fixControls();
$oldLink.remove(); $oldLink.remove();
}); });
$newLink.appendTo($('head')); $newLink.appendTo($('head'));
} }
}); });
@ -195,7 +191,6 @@
var col2 = this.cutContainer($('#col2')); var col2 = this.cutContainer($('#col2'));
var kill = this.cutContainer($('#col1')); var kill = this.cutContainer($('#col1'));
this.pasteContainer($('#col1'), col2); this.pasteContainer($('#col1'), col2);
this.fixControls();
this.icinga.behaviors.navigation.trySetActiveAndSelectedByUrl($('#col1').data('icingaUrl')); this.icinga.behaviors.navigation.trySetActiveAndSelectedByUrl($('#col1').data('icingaUrl'));
}, },
@ -250,7 +245,7 @@
_this.currentLayout _this.currentLayout
); );
} }
_this.fixControls();
_this.refreshDebug(); _this.refreshDebug();
}, },
@ -321,14 +316,12 @@
this.icinga.loader.stopPendingRequestsFor($c); this.icinga.loader.stopPendingRequestsFor($c);
$c.trigger('close-column'); $c.trigger('close-column');
$c.html(''); $c.html('');
this.fixControls();
}, },
layout2col: function () { layout2col: function () {
if (! this.isOneColLayout()) { return; } if (! this.isOneColLayout()) { return; }
this.icinga.logger.debug('Switching to double col'); this.icinga.logger.debug('Switching to double col');
$('#layout').addClass('twocols'); $('#layout').addClass('twocols');
this.fixControls();
$('#layout').trigger('layout-change'); $('#layout').trigger('layout-change');
}, },
@ -501,172 +494,31 @@
* @param {object} e Event * @param {object} e Event
*/ */
toggleMobileMenu: function(e) { toggleMobileMenu: function(e) {
var $sidebar = $('#sidebar'); $('#sidebar').toggleClass('expanded');
var $target = $(e.target);
var href = $target.attr('href');
if (href) {
if (href !== '#') {
$sidebar.removeClass('expanded');
}
} else if (! $target.is('input')) {
$sidebar.toggleClass('expanded');
}
}, },
/** /**
* Close mobile menu when the enter key was pressed * Close mobile menu when the enter key is pressed during search or the user leaves the sidebar
* *
* @param {object} e Event * @param {object} e Event
*/ */
closeMobileMenu: function(e) { closeMobileMenu: function(e) {
var $search = $('#search'); if (e.data.self.currentLayout !== 'minimal') {
if (e.which === 13 && $search.is(':focus')) { return;
}
if (e.data.type === 'key') {
if (e.which === 13) {
$('#sidebar').removeClass('expanded'); $('#sidebar').removeClass('expanded');
$search[0].blur(); $(e.target)[0].blur();
}
},
initializeControls: function(container) {
var $container = $(container);
if ($container.parent('.dashboard').length || $('#layout').hasClass('fullscreen-layout')) {
return;
}
$container.find('.controls').each(function() {
var $controls = $(this);
if (! $controls.prev('.fake-controls').length) {
var $tabs = $controls.find('.tabs', $controls);
if ($tabs.length && $controls.children().length > 1 && ! $tabs.next('.tabs-spacer').length) {
$tabs.after($('<div class="tabs-spacer"></div>'));
}
var $fakeControls = $('<div class="fake-controls"></div>');
$fakeControls.height($controls.height()).css({
// That's only temporary. It's reset in fixControls, which is called at the end of this
// function. Its purpose is to prevent the content from jumping up upon auto-refreshes.
// It works by making the fake-controls appear at the same vertical level as the controls
// and the height of the content then doesn't change when taking the controls out of the flow.
float: 'right'
});
$controls.before($fakeControls).css({
position: 'fixed'
});
}
});
this.fixControls($container);
},
fixControls: function($container) {
var $layout = $('#layout');
if ($layout.hasClass('fullscreen-layout')) {
return;
}
if (typeof $container === 'undefined') {
var $header = $('#header');
var $headerLogo = $('#header-logo-container');
var $main = $('#main');
var $search = $('#search');
var $sidebar = $('#sidebar');
$header.css({ height: 'auto'});
if ($layout.hasClass('minimal-layout')) {
if (! this.mobileMenu && $sidebar.length) {
$header.css({
top: $sidebar.outerHeight() + 'px'
});
$headerLogo.css({
display: 'none'
});
$main.css({
top: $header.outerHeight() + $sidebar.outerHeight()
});
$sidebar
.on(
'click',
this.toggleMobileMenu
)
.prepend(
$('<div id="mobile-menu-toggle"><button><i class="icon-menu"></i><i class="icon-cancel"></i></button></div>')
);
$('#header-logo').clone().attr('id', 'mobile-menu-logo')
.appendTo('#mobile-menu-toggle');
$(window).on('keypress', this.closeMobileMenu);
this.mobileMenu = true;
} }
} else { } else {
$headerLogo.css({ $('#sidebar').removeClass('expanded');
top: $header.css('height')
});
$main.css({
top: $header.css('height')
});
if (!! $headerLogo.length) {
$sidebar.css({
top: $headerLogo.offset().top + $headerLogo.outerHeight()
});
}
if (this.mobileMenu) {
$header.css({
top: 0
});
$headerLogo.css({
display: 'block'
});
$sidebar.removeClass('expanded').off('click', this.toggleMobileMenu);
$search.off('keypress', this.closeMobileMenu);
$('#mobile-menu-toggle').remove();
this.mobileMenu = false;
}
}
var _this = this;
$('.container').each(function () {
_this.fixControls($(this));
});
return;
}
if ($container.parent('.dashboard').length) {
return;
}
// Enable this only in case you want to track down UI problems
//this.icinga.logger.debug('Fixing controls for ', $container);
$container.find('.controls').each(function() {
var $controls = $(this);
var $fakeControls = $controls.prev('.fake-controls');
$fakeControls.css({
float: '', // Set by initializeControls
height: $controls.height()
});
$controls.css({
top: $container.offsetParent().position().top,
width: $fakeControls.outerWidth()
});
});
var $statusBar = $container.children('.monitoring-statusbar');
if ($statusBar.length) {
$statusBar.css({
left: $container.offset().left,
width: $container.width()
});
$statusBar.prev('.monitoring-statusbar-ghost').height($statusBar.outerHeight(true));
} }
}, },
toggleFullscreen: function () { toggleFullscreen: function () {
$('#layout').toggleClass('fullscreen-layout'); $('#layout').toggleClass('fullscreen-layout');
this.fixControls();
}, },
getUniqueContainerId: function ($cont) { getUniqueContainerId: function ($cont) {