[icinga-checkins] icinga.org: icingaweb2/bugfix/js-close-container-8590: Implement js close container behavior

git at icinga.org git at icinga.org
Wed Feb 17 16:44:19 CET 2016


Module: icingaweb2
Branch: bugfix/js-close-container-8590
Commit: cade080aa576fb1d5cb3f3759e561006dae538b0
URL:    https://git.icinga.org/?p=icingaweb2.git;a=commit;h=cade080aa576fb1d5cb3f3759e561006dae538b0

Author: Florian Strohmaier <hello at florianstrohmaier.com>
Date:   Wed Feb 17 16:43:37 2016 +0100

Implement js close container behavior

refs #8590

---

 library/Icinga/Web/JavaScript.php              |    3 +-
 public/css/icinga/tabs.less                    |   37 ++++++++++++--
 public/js/icinga/behavior/container-toggles.js |   62 ++++++++++++++++++++++++
 3 files changed, 96 insertions(+), 6 deletions(-)

diff --git a/library/Icinga/Web/JavaScript.php b/library/Icinga/Web/JavaScript.php
index e6278c7..f8c2ec7 100644
--- a/library/Icinga/Web/JavaScript.php
+++ b/library/Icinga/Web/JavaScript.php
@@ -31,7 +31,8 @@ class JavaScript
         'js/icinga/behavior/navigation.js',
         'js/icinga/behavior/form.js',
         'js/icinga/behavior/actiontable.js',
-        'js/icinga/behavior/selectable.js'
+        'js/icinga/behavior/selectable.js',
+        'js/icinga/behavior/container-toggles.js'
     );
 
     protected static $vendorFiles = array(
diff --git a/public/css/icinga/tabs.less b/public/css/icinga/tabs.less
index 104ed7f..0d8e1c7 100644
--- a/public/css/icinga/tabs.less
+++ b/public/css/icinga/tabs.less
@@ -47,23 +47,50 @@
 }
 
 .tabs > .dropdown-nav-item > a,
-.tabs > li > .close-container-control,
-.tabs > li > .refresh-container-control {
+.tabs > li > .close-container-control {
   text-align: center;
   width: 3em;
 }
 
+#main > .container > .controls > .close-container-control {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin-top: -2.6em;
+  color: white;
+  padding: 0 1em;
+  height: 1.938em;
+  line-height: 2.6em;
+  width: 3em;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
 .tabs > .dropdown-nav-item:hover > a,
 .tabs > .dropdown-nav-item > a:focus,
 .tabs > li > .close-container-control:focus,
-.tabs > li > .close-container-control:hover,
-.tabs > li > .refresh-container-control:focus,
-.tabs > li > .refresh-container-control:hover {
+.tabs > li > .close-container-control:hover {
   background-color: @body-bg-color;
   color: @text-color;
   text-decoration: none;
 }
 
+.refresh-container-control {
+    width: 2.6em;
+    padding-left: 1px!important;
+    padding-right: 0!important;
+    text-align: center;
+    border-radius: 50%;
+    .transition (.3s ease background);
+    .transition (.3s ease background);
+}
+
+.tabs > li > .refresh-container-control:focus,
+.tabs > li > .refresh-container-control:hover {
+    background: white;
+    color: @icinga-blue;
+}
+
 .tabs > .dropdown-nav-item > ul {
   .box-shadow();
   .rounded-corners(0 0 0.3em 0.3em);
diff --git a/public/js/icinga/behavior/container-toggles.js b/public/js/icinga/behavior/container-toggles.js
new file mode 100644
index 0000000..eb23789
--- /dev/null
+++ b/public/js/icinga/behavior/container-toggles.js
@@ -0,0 +1,62 @@
+/*! Icinga Web 2 | (c) 2015 Icinga Development Team | GPLv2+ */
+
+;(function(Icinga, $) {
+
+    "use strict";
+
+    /**
+     * Add a close button to #col1 and #col2, if layout has two columns
+     *
+     * @param {object} e Event
+     */
+    function onRendered(e) {
+        if ( $("#layout").hasClass("twocols") ) {
+            if ($("#col1 .controls > .close-container-control").length < 1) {
+                var $b = $("#close-container-control-ghost");
+                $("#col1 .controls").append( $b.clone().removeAttr("id").css({ display: "block" }));
+            }
+            if ($("#col2 .controls > .close-container-control").length < 1) {
+                var $b = $("#close-container-control-ghost");
+                $("#col2 .controls").append( $b.clone().removeAttr("id").css({ display: "block" }));
+            }
+            $(this).find(".dropdown").remove();
+        }
+    }
+
+    /**
+     * Remove close buttons from #col1 and #col2
+     *
+     * @param {object} e Event
+     */
+    function onClosecolumn (e) {
+        $("#col1 .controls > .close-container-control").remove();
+        $("#col2 .controls > .close-container-control").remove();
+    }
+
+    Icinga.Behaviors = Icinga.Behaviors || {};
+
+    /**
+     * Behavior for adding and removing close buttons to columns
+     *
+     * The ContainerToggles behavior listenst for render and close-column events for adding and removing
+     * the close buttons
+     *
+     * @param {Icinga} icinga
+     *
+     * @constructor
+     */
+    var ContainerToggles = function (icinga) {
+        
+        Icinga.EventListener.call(this, icinga);
+        
+        this.on('rendered', '#col1, #col2', onRendered, this);
+        
+        this.on("close-column", '#col1, #col2', onClosecolumn, this);
+        
+    };
+
+    ContainerToggles.prototype = new Icinga.EventListener();
+
+    Icinga.Behaviors.ContainerToggles = ContainerToggles;
+
+})(Icinga, jQuery);



More information about the icinga-checkins mailing list