diff --git a/library/Icinga/Web/Widget/Tabs.php b/library/Icinga/Web/Widget/Tabs.php index 716d5a959..d79453a01 100644 --- a/library/Icinga/Web/Widget/Tabs.php +++ b/library/Icinga/Web/Widget/Tabs.php @@ -23,6 +23,7 @@ class Tabs extends AbstractWidget implements Countable EOT; @@ -40,6 +41,18 @@ EOT; EOT; + /** + * Template used for the close-button + * + * @var string + */ + private $closeTpl = <<< 'EOT' + +EOT; + + /** * This is where single tabs added to this container will be stored * @@ -61,6 +74,21 @@ EOT; */ private $dropdownTabs = array(); + /** + * Whether the tabs should contain a close-button + * + * @var bool + */ + private $closeTab = true; + + /** + * Set whether the current tab is closable + */ + public function hideCloseButton() + { + $this->closeTab = false; + } + /** * Activate the tab with the given name * @@ -235,6 +263,11 @@ EOT; return $tabs; } + private function renderCloseTab() + { + return $this->closeTpl; + } + /** * Render to HTML * @@ -249,6 +282,7 @@ EOT; $html = $this->baseTpl; $html = str_replace('{TABS}', $this->renderTabs(), $html); $html = str_replace('{DROPDOWN}', $this->renderDropdownTabs(), $html); + $html = str_replace('{CLOSE}', $this->closeTab ? $this->renderCloseTab() : '', $html); return $html; } diff --git a/public/css/icinga/tabs.less b/public/css/icinga/tabs.less index ed846fc9d..74e3e0b72 100644 --- a/public/css/icinga/tabs.less +++ b/public/css/icinga/tabs.less @@ -136,3 +136,6 @@ ul.tabs img.icon { margin-top: -4px; } +a.close-tab { + display: none; +} \ No newline at end of file diff --git a/public/js/icinga/events.js b/public/js/icinga/events.js index 9c889dfa8..5f62a8c8a 100644 --- a/public/js/icinga/events.js +++ b/public/js/icinga/events.js @@ -83,6 +83,12 @@ if (searchField.length && searchField.val().length) { self.searchValue = searchField.val(); } + + if (icinga.ui.isOneColLayout()) { + icinga.ui.disableCloseButtons(); + } else { + icinga.ui.enableCloseButtons(); + } }, /** @@ -371,6 +377,18 @@ // If link has hash tag... if (href.match(/#/)) { if (href === '#') { + if ($a.hasClass('close-toggle')) { + if (! icinga.ui.isOneColLayout()) { + var $cont = $a.closest('.container').first(); + if ($cont.attr('id') === 'col1') { + icinga.ui.moveToLeft(); + icinga.ui.layout1col(); + } else { + icinga.ui.layout1col(); + } + icinga.history.pushCurrentState(); + } + } return false; } $target = self.getLinkTargetFor($a); diff --git a/public/js/icinga/history.js b/public/js/icinga/history.js index a3fcf5deb..9f05def2d 100644 --- a/public/js/icinga/history.js +++ b/public/js/icinga/history.js @@ -90,6 +90,7 @@ } }); + // TODO: update navigation // Did we find any URL? Then push it! if (url !== '') { window.history.pushState({icinga: true}, null, this.cleanupUrl(url)); diff --git a/public/js/icinga/ui.js b/public/js/icinga/ui.js index 28ce353e1..7f2507bdc 100644 --- a/public/js/icinga/ui.js +++ b/public/js/icinga/ui.js @@ -199,6 +199,11 @@ self.refreshDebug(); }, + /** + * Returns whether the layout is too small for more than one column + * + * @returns {boolean} True when more than one column is available + */ hasOnlyOneColumn: function () { return this.currentLayout === 'poor' || this.currentLayout === 'minimal'; }, @@ -229,11 +234,21 @@ return false; }, + /** + * Returns whether only one column is displayed + * + * @returns {boolean} True when only one column is displayed + */ + isOneColLayout: function () { + return ! $('#layout').hasClass('twocols'); + }, + layout1col: function () { - if (! $('#layout').hasClass('twocols')) { return; } + if (this.isOneColLayout()) { return; } this.icinga.logger.debug('Switching to single col'); $('#layout').removeClass('twocols'); this.closeContainer($('#col2')); + this.disableCloseButtons(); }, closeContainer: function($c) { @@ -247,10 +262,11 @@ }, layout2col: function () { - if ($('#layout').hasClass('twocols')) { return; } + if (! this.isOneColLayout()) { return; } this.icinga.logger.debug('Switching to double col'); $('#layout').addClass('twocols'); this.fixControls(); + this.enableCloseButtons(); }, getAvailableColumnSpace: function () { @@ -698,6 +714,14 @@ this.fixControls(parent); }, + disableCloseButtons: function () { + $('a.close-toggle').hide(); + }, + + enableCloseButtons: function () { + $('a.close-toggle').show(); + }, + fixControls: function ($parent) { var self = this;