filter panel styling

src/app/panels/filtering/module.html

@@ -3,13 +3,18 @@
     .filtering-container {
       float: left;
     }
+    .filtering-container label {
+      float: left;
+      font-size: inherit;
+    }
+    .filtering-container input[type=checkbox] {
+      margin: 0;
+    }
     .filter-panel-filter {
       display:inline-block;
       vertical-align: top;
       padding: 3px 10px 0px 10px;
-      margin: 0px 5px;
-      border-left: 1px solid #111;
-      border-right: 1px solid #111;
+      border-right: 1px solid #202020;
     }
     .filter-panel-filter ul {
       margin-bottom: 3px;
@@ -25,6 +30,7 @@
       margin-top: 4px;
     }
     .add-filter-action {
+      padding: 3px 10px 0px 10px;
       position: relative;
       top: 4px;
     }
@@ -38,9 +44,7 @@
   </style>
 
   <div class='filtering-container'>
-    <span ng-show="filterSrv.list.length == 0">
-      <h5>No filters available</h5>
-    </span>
+
     <div ng-repeat="filter in filterSrv.list" class="small filter-panel-filter">
       <div>
         <i class="filter-action pointer icon-remove" bs-tooltip="'Remove'" ng-click="remove(filter)"></i>
@@ -74,7 +78,8 @@
             <input type='text' ng-model="filter.query">
           </li>
           <li>
-            <strong>Include All</strong> : <input type='checkbox' ng-model="filter.includeAll">
+            <label for="includeAll">Include all</label>:
+            <input id="includeAll" type='checkbox' ng-model="filter.includeAll">
           </li>
         </ul>
         <div>

src/app/panels/filtering/module.js

@@ -44,7 +44,8 @@ function (angular, app, _) {
           if (filter.includeAll) {
             filter.options.unshift({text: 'All', value: '*'});
           }
-          filter.current = filter.options[0];
+
+          filterSrv.filterOptionSelected(filter, filter.options[0]);
         });
     };
 

src/app/services/filterSrv.js

@@ -49,6 +49,10 @@ define([
       if (!self.filterTemplateData) {
         self.filterTemplateData = {};
         _.each(self.list, function(filter) {
+          if (!filter.current || !filter.current.value) {
+            return;
+          }
+
           self.filterTemplateData[filter.name] = filter.current.value;
         });
       }

src/vendor/bootstrap/less/grafana.less

@@ -5,6 +5,10 @@
 @grayDark:              #303030;
 @grayLighter:           #BBBFC2;
 
+.navbar-static-top {
+  border-bottom: 1px solid black;
+}
+
 .grafana-dashboard-hide-controls {
   padding: 0;
   .extra, .grafana-row {
@@ -21,7 +25,7 @@
   }
 
   .selected td, tr.selected:nth-child(odd)>td {
-    background: darken(@blue, 20%);
+    background: @blue;
     color: white;
     text-shadow: -1px -1px 1px rgba(0,0,0,0.3);
     a {
@@ -31,9 +35,15 @@
 }
 
 .filter-pulldown {
-  background: #444;
-  border-top: 1px solid #111;
-  border-bottom: 1px solid #111;
+  background: rgba(31, 31, 31, 0.42);
+  border-top: 1px solid #444;
+  border-left: 1px solid @grayDarker;
+  border-right: 1px solid @grayDarker;
+  border-bottom: 1px solid @grayDarker;
+}
+
+.top-row-close {
+  border-right: 1px solid #202020;
 }
 
 .top-row-open {