Add close-button to all containers

refs #6216

library/Icinga/Web/Widget/Tabs.php

@@ -23,6 +23,7 @@ class Tabs extends AbstractWidget implements Countable
 <ul class="tabs">
   {TABS}
   {DROPDOWN}
+  {CLOSE}
 </ul>
 EOT;
 
@@ -40,6 +41,18 @@ EOT;
 </li>
 EOT;
 
+    /**
+     * Template used for the close-button
+     *
+     * @var string
+     */
+    private $closeTpl = <<< 'EOT'
+<li class="dropdown" style="float: right;">
+  <a href="#" class="dropdown-toggle close-toggle">X</a>
+</li>
+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;
     }
 

public/css/icinga/tabs.less

@@ -136,3 +136,6 @@ ul.tabs img.icon {
     margin-top: -4px;
 }
 
+a.close-tab {
+  display: none;
+}

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

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

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;