styles for group filters. #10

furti · Sep 14, 2014 · 4bee09e · 4bee09e
1 parent bb6ec81
commit 4bee09e
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 6 deletions.
diff --git a/ng-dashboard-0.0.1.js b/ng-dashboard-0.0.1.js
@@ -123,8 +123,10 @@
                         }
                     });
                 },
-                template: '<h3 ng-if="groupData.title">{{groupData.title}}</h3>' +
-                    '<filter filter-data="groupFilter" crossfilter="crossFilter" ng-repeat="groupFilter in groupData.filters"></filter>'
+                template: '<div class="widget-group-header">' +
+                    '<h3 ng-if="groupData.title">{{groupData.title}}</h3>' +
+                    '<filter filter-data="groupFilter" ng-class="groupFilter.type" class="group-filter" crossfilter="crossFilter" ng-repeat="groupFilter in groupData.filters"></filter>' +
+                    '</div>'
             };
         }
     ]);

diff --git a/ng-dashboard-0.0.1.min.js b/ng-dashboard-0.0.1.min.js
diff --git a/sample/script/experiments.js b/sample/script/experiments.js
@@ -11,6 +11,7 @@
         dataUrl: './sample/data/data.json',
         filters: [{
             title: 'Experiments',
+            allTitle: 'All',
             type: 'select',
             dimension: 'd.Expt'
         }],

diff --git a/script/filters/select-filter.js b/script/filters/select-filter.js
@@ -9,7 +9,7 @@
 
     var template = '<label>{{filterData.title}}</label>' +
         '<select ng-model="selected" ng-options="value for value in values" ng-change="filterChanged()">' +
-        '<option value=""></option>' +
+        '<option value="">{{filterData.allTitle}}</option>' +
         '</select>';
 
     function SelectFilter() {}

diff --git a/script/widget-group.js b/script/widget-group.js
@@ -103,8 +103,10 @@
                         }
                     });
                 },
-                template: '<h3 ng-if="groupData.title">{{groupData.title}}</h3>' +
-                    '<filter filter-data="groupFilter" crossfilter="crossFilter" ng-repeat="groupFilter in groupData.filters"></filter>'
+                template: '<div class="widget-group-header">' +
+                    '<h3 ng-if="groupData.title">{{groupData.title}}</h3>' +
+                    '<filter filter-data="groupFilter" ng-class="groupFilter.type" class="group-filter" crossfilter="crossFilter" ng-repeat="groupFilter in groupData.filters"></filter>' +
+                    '</div>'
             };
         }
     ]);

diff --git a/style/ng-dashboard.css b/style/ng-dashboard.css
@@ -2,10 +2,28 @@
     padding: 20px;
     display: block;
 }
+.widget-group-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+}
+.widget-group-header h3 {
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-right: 20px;
+}
 widget-body {
     display: block;
     overflow: auto;
 }
+/**
+ * Filters
+ */
+
+.group-filter.select label {
+    margin-right: 5px;
+    margin-bottom: 0;
+}
 /**
  * Flow Layout
  */
@@ -20,6 +38,7 @@ widget-body {
 /**
  * Grid Layout
  */
+
 @media (min-width: 768px) {
     .widget-group-grid {
         display: flex;