[icinga-checkins] icinga.org: icingaweb2/feature/collapsible-container-9566: CollapsibleContainer: Restructure markup

git at icinga.org git at icinga.org
Mon Jun 13 18:00:33 CEST 2016


Module: icingaweb2
Branch: feature/collapsible-container-9566
Commit: 3d7eafd9c078432bc5d618843ebb41025ad43c79
URL:    https://git.icinga.org/?p=icingaweb2.git;a=commit;h=3d7eafd9c078432bc5d618843ebb41025ad43c79

Author: Florian Strohmaier <florian.strohmaier at netways.de>
Date:   Mon Jun 13 18:00:27 2016 +0200

CollapsibleContainer: Restructure markup

---

 application/layouts/scripts/layout.phtml           |    2 +-
 public/css/icinga/main.less                        |   57 ++++++--------------
 public/js/icinga/behavior/collapsible-container.js |   11 +++-
 3 files changed, 25 insertions(+), 45 deletions(-)

diff --git a/application/layouts/scripts/layout.phtml b/application/layouts/scripts/layout.phtml
index 5a51d34..5ea271b 100644
--- a/application/layouts/scripts/layout.phtml
+++ b/application/layouts/scripts/layout.phtml
@@ -54,7 +54,7 @@ $innerLayoutScript = $this->layout()->innerLayout . '.phtml';
 <?= $this->render($innerLayoutScript); ?>
 </div>
 <iframe id="fileupload-frame-target" name="fileupload-frame-target"></iframe>
-<button id="collapsible-control-ghost" title="<?= $this->translate('Collapse') ?>" aria-label="<?= t('Collapse') ?>" data-label-expand="<?= t('Expand') ?>" class="collapsible-control"></button>
+<button id="collapsible-control-ghost" title="<?= $this->translate('Collapse') ?>" aria-label="<?= t('Collapse') ?>" data-label-expand="<?= t('Expand') ?>" class="collapsible-control"><i class="icon-down-dir"></i></button>
 <!--[if IE 8]>
 <script type="text/javascript" src="<?= $this->href($ie8jsfile) ?>"></script>
 <![endif]-->
diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less
index 3b71ba9..2b68301 100644
--- a/public/css/icinga/main.less
+++ b/public/css/icinga/main.less
@@ -230,16 +230,17 @@ a:hover > .icon-cancel {
 
     &:after {
       content: "";
-      height: 48px;
+      display: block;
+      height: 24px;
       width: 100%;
       position: absolute;
-      bottom: 0;
+      bottom: 22px;
       left: 0;
       background-color: white;
-      background: -webkit-linear-gradient(bottom,       white 17px, rgba(255,255,255,0) 100%);
-      background:    -moz-linear-gradient(bottom,       white 17px, rgba(255,255,255,0) 100%);
-      background:     -ms-linear-gradient(bottom,       white 17px, rgba(255,255,255,0) 100%);
-      background:         linear-gradient(to top,       white 17px, rgba(255,255,255,0) 100%);
+      background: -webkit-linear-gradient(bottom, white 0, rgba(255,255,255,0) 100%);
+      background:    -moz-linear-gradient(bottom, white 0, rgba(255,255,255,0) 100%);
+      background:     -ms-linear-gradient(bottom, white 0, rgba(255,255,255,0) 100%);
+      background:         linear-gradient(to top, white 0, rgba(255,255,255,0) 100%);
     }
   }
 
@@ -249,16 +250,12 @@ a:hover > .icon-cancel {
     left: 0;
     right: 0;
     width: 100%;
-    z-index: 100;
-    background: none;
+    z-index: 2;
+    background: white;
     color: @icinga-blue;
     border: none;
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px;
-/*
-    font-size: 2em;
-    line-height: 0.5em;
-*/
+    border-top: 1px solid @gray-light;
+    color: @gray;
     -webkit-appearance: none;
        -moz-appearance: none;
         -ms-appearance: none;
@@ -266,41 +263,17 @@ a:hover > .icon-cancel {
     padding-right: 0;
   }
 
-  .collapsible-control {
-    background: white;
-    border: none;
-    padding: 1px 0 0 0;
-
-    &:before {
-      content: "\e81e"; // .icon-up-dir
-      font-family: "ifont";
-      display: block;
-      color: @gray;
-      text-align: right;
-      border-top: 1px solid @gray-light;
-      text-align: center;
-      width: 100%;
-    }
-  }
-
   // Reset styles for ie8
   .collapsible-control:focus {
-      border: none;
-      outline: none;
+    border: none;
+    border-top: 1px solid @gray-light;
+    outline: none;
   }
 
-  .collapsible-control:hover:before {
+  .collapsible-control:hover {
     color: @icinga-blue;
     border-color: @icinga-blue;
   }
-
-  &.collapsed .collapsible-control  {
-    &:before {
-      content: '\e81d'; // .icon-down-dir
-      font-family: "ifont";
-      display: block;
-    }
-  }
 }
 
 #collapsible-control-ghost {
diff --git a/public/js/icinga/behavior/collapsible-container.js b/public/js/icinga/behavior/collapsible-container.js
index 184939b..fa0c699 100644
--- a/public/js/icinga/behavior/collapsible-container.js
+++ b/public/js/icinga/behavior/collapsible-container.js
@@ -36,11 +36,14 @@
             if (classes.indexOf('perf-data') > -1) {
                 var $button = $container.find('.collapsible-control');
                 $container.addClass('collapsed');
-                $button.attr('title', $button.attr('data-label-expand'))
+                $button.children('i').removeClass('icon-up-dir');
+                $button.children('i').addClass('icon-down-dir');
             } else {
                 var $button = $container.find('.collapsible-control');
                 $container.removeClass('collapsed');
-                $button.attr('title', $button.attr('aria-label'))
+                $button.attr('title', $button.attr('aria-label'));
+                $button.children('i').removeClass('icon-down-dir');
+                $button.children('i').addClass('icon-up-dir');
             }
         }
         if ($container.hasClass('custom-vars')) {
@@ -48,10 +51,14 @@
                 var $button = $container.find('.collapsible-control');
                 $container.addClass('collapsed');
                 $button.attr('title', $button.attr('data-label-expand'))
+                $button.children('i').removeClass('icon-up-dir');
+                $button.children('i').addClass('icon-down-dir');
             } else {
                 var $button = $container.find('.collapsible-control');
                 $container.removeClass('collapsed');
                 $button.attr('title', $button.attr('aria-label'))
+                $button.children('i').removeClass('icon-down-dir');
+                $button.children('i').addClass('icon-up-dir');
             }
         }
     }



More information about the icinga-checkins mailing list