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
{TABS}
{DROPDOWN}
+ {CLOSE}
EOT;
@@ -40,6 +41,18 @@ EOT;
EOT;
+ /**
+ * Template used for the close-button
+ *
+ * @var string
+ */
+ private $closeTpl = <<< 'EOT'
+
+ X
+
+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;