Dashlets: hightlight active one, add depth

public/css/module.less

@@ -548,50 +548,76 @@ ul.main-actions {
     vertical-align: top;
 
     a {
-        i {
-            height: 1.6em;
-            font-size: 3em;
-            display: block;
-            height: 100%;
-            float: left;
-            line-height: 1em;
-            margin-right: 0.3em;
-        }
-
-        &.state-critical i {
-            color: @color-critical;
-        }
-
-        &.state-warning i {
-            color: @color-warning;
-        }
-
-        &.state-ok i {
-            color: @color-ok;
-        }
-
-        &.state-unknown i {
-            color: @color-unknown;
-        }
-
-        &.state-pending i {
-            color: @color-pending;
-        }
-
-        padding: 1em;
-        color: #666;
-        font-weight: bold;
+      i {
+        height: 1.6em;
+        font-size: 3em;
         display: block;
+        height: 100%;
+        float: left;
+        line-height: 1em;
+        margin-right: 0.3em;
+      }
+
+      &.state-critical i {
+        color: @color-critical;
+      }
+
+      &.state-warning i {
+        color: @color-warning;
+      }
+
+      &.state-ok i {
+        color: @color-ok;
+      }
+
+      &.state-unknown i {
+        color: @color-unknown;
+      }
+
+      &.state-pending i {
+        color: @color-pending;
+      }
+
+      border: 1px solid transparent;
+      padding: 1em;
+      color: #666;
+      font-weight: bold;
+      display: block;
+      text-decoration: none;
+      height: 12em;
+
+      overflow: hidden;
+
+      &.active {
+        color: inherit;
+        background-color: @gray-lightest;
+        -webkit-box-shadow: inset 1px 1px 2px 1px rgba(0,0,0,0.25);
+        -moz-box-shadow: inset 1px 1px 2px 1px rgba(0,0,0,0.25);
+        box-shadow: inset 1px 1px 2px 1px rgba(0,0,0,0.25);
+      }
+
+      &:hover {
+        background-color: #666;
+        color: white;
         text-decoration: none;
-        height: 12em;
+        -webkit-box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.35);
+        -moz-box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.35);
+        box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.35);
+        &.active {
+          color: inherit;
+          background-color: @gray-lightest;
 
-        overflow: hidden;
-
-        &:hover {
-            background-color: #666;
-            color: white;
-            text-decoration: none;
         }
+      }
+
+      &:active, &:focus {
+        background-color: inherit;
+        color: inherit;
+        -webkit-box-shadow: inset 1px 1px 2px 1px rgba(0,0,0,0.25);
+        -moz-box-shadow: inset 1px 1px 2px 1px rgba(0,0,0,0.25);
+        box-shadow: inset 1px 1px 2px 1px rgba(0,0,0,0.25);
+        outline: none;
+      }
     }
 
     p {

public/js/module.js

@@ -647,12 +647,12 @@
             this.highlightFormErrors($container);
             this.scrollHighlightIntoView($container);
             this.scrollActiveRowIntoView($container);
+            this.highlightActiveDashlet($container);
             this.hideInactiveFormDescriptions($container);
             if (iid = $container.data('activeExtensibleEntry')) {
                 $('#' + iid).focus();
                 $container.removeData('activeExtensibleEntry');
             }
-
             // Disabled for now
             // this.alignDetailLinks();
             if (! this.containerIsAutorefreshed($container) && ! this.containerIsAutoSubmitted($container)) {
@@ -660,6 +660,32 @@
             }
         },
 
+        highlightActiveDashlet: function($container)
+        {
+            if (this.module.icinga.ui.isOneColLayout()) {
+                return;
+            }
+
+            var url, $actions, $match;
+            var id = $container.attr('id');
+            if (id === 'col1') {
+                url = $('#col2').data('icingaUrl');
+                $actions = $('.main-actions', $container);
+            } else if (id === 'col2') {
+                url = $container.data('icingaUrl');
+                $actions = $('.main-actions', $('#col1'));
+            }
+            if (! $actions.length) {
+                return;
+            }
+
+            $match = $('li a[href*="' + url + '"]', $actions);
+            if ($match.length) {
+                $('li a.active', $actions).removeClass('active');
+                $match.first().addClass('active');
+            }
+        },
+
         restoreContainerFieldsets: function($container)
         {
             var self = this;