group by caption are now inlined with their groups - some general styling

assets/stylesheets/reporting.css

@@ -1,3 +1,11 @@
+#content p,
+#content label,
+#content a,
+#content div  {
+  font-size: 11px;
+  line-height: 16px;
+}
+
 .cost_types {
   padding-bottom: 3px;
 }
@@ -160,6 +168,10 @@
   margin-top: 6px;
 }
 
+#add_filter_select {
+  margin-bottom: 10px;
+}
+
 fieldset#filter-settings table tr.filter:hover {
   background: #aaa;
 }
@@ -195,6 +207,7 @@ fieldset#filter-settings table td > label {
 /* ----- group by --- */
 #group_by_area {
   font-family: Arial,Geneva,Helvetica,sans-serif;
+  margin: 5px 0 10px 0;
 }
 
 .in_row {
@@ -205,11 +218,12 @@ fieldset#filter-settings table td > label {
 }
 
 .group_by_element {
-  margin-right: -15px;
+  margin-left: -15px;
   cursor: move;
 }
 
-.group_by_label {
+/* have #content here to overwrite line-heigth of other themes through being more specific*/
+#content .group_by_label {
   margin: 0px;
   padding: 0px 5px 0 5px;
   min-width: 60px;
@@ -218,8 +232,8 @@ fieldset#filter-settings table td > label {
   font-weight: bold;
   color: #fff;
   background-color: #9A9A9A;
-  height: 18px;
-  line-height: 18px;
+  height: 22px;
+  line-height: 22px;
   cursor: move;
 }
 
@@ -230,7 +244,7 @@ fieldset#filter-settings table td > label {
 .group_by_remove {
   padding-right: 3px;
   background-color: #9A9A9A;
-  height: 18px;
+  height: 22px;
   min-width: 1.4em;
   text-align: center;
   cursor: pointer;
@@ -240,11 +254,22 @@ fieldset#filter-settings table td > label {
   background-color: #009999 !important;
 }
 
+/* have #content here to overwrite line-heigth of other themes through being more specific*/
+#content .group_by_caption {
+  color: #FFFFFF;
+  background-color: #000000;
+  font-weight: bold;
+  padding: 0 7px;
+  height: 22px;
+  line-height: 22px;
+  min-width: 45px;
+}
+
 .arrow {
   height: 0;
   width: 0;
   border-style: solid;
-  border-width: 9px 11px 9px 7px;
+  border-width: 11px 11px 11px 7px;
 }
 
 .arrow_left {
@@ -263,11 +288,14 @@ fieldset#filter-settings table td > label {
   border-color: transparent transparent transparent #009999 !important;
 }
 
+.arrow_group_by_caption {
+  border-color: transparent transparent transparent #000000;
+}
+
 .drag_container {
-  padding: 5px 0 3px 10px;
-  background-color: #ededed;
-  border: 1px dotted #CCCCCC;
-  margin-bottom: 4px;
+  padding: 7px 0;
+  /*background-color: #ededed;
+  border: 1px dotted #CCCCCC;*/
   height: 23px;
 }
 
@@ -282,7 +310,6 @@ fieldset#filter-settings table td > label {
 
 .drag_container_accept {
   background-color: #F5F5C5;
-  /*border: 1px solid #BBBBBB;*/
 }
 
 /* -- end group-by -- */
@@ -467,11 +494,3 @@ html>body #ajax-indicator { position: fixed; }
   padding-left: 26px;
   vertical-align: bottom;
 }
-
-#content p, 
-#content label, 
-#content a, 
-#content div  {
-  font-size: 11px;
-  line-height: 16px;
-}

lib/widget/group_bys.rb

@@ -12,6 +12,16 @@ class Widget::GroupBys < Widget::Base
     end.join.html_safe
   end
 
+  def render_group_caption(type)
+    content_tag :span do
+      out = content_tag :span, :class => 'in_row group_by_caption' do
+        l("label_#{type}".to_sym) # :label_rows, :label_columns
+      end
+      out += tag :span, :class => 'arrow in_row arrow_group_by_caption'
+      out.html_safe
+    end
+  end
+
   def render_group(type, initially_selected)
     initially_selected = initially_selected.map do |group_by|
       [group_by.class.underscore_name, l(group_by.class.label)]
@@ -20,7 +30,8 @@ class Widget::GroupBys < Widget::Base
         :id => "group_by_#{type}",
         :class => 'drag_target drag_container',
         :'data-initially-selected' => initially_selected.to_json.gsub('"', "'") do
-      content_tag :select, :id => "add_group_by_#{type}", :class => 'select-small' do
+      out = render_group_caption type
+      out += content_tag :select, :id => "add_group_by_#{type}", :class => 'select-small' do
         content = content_tag :option, :value => '' do
           "-- #{l(:label_group_by_add)} --"
         end
@@ -32,15 +43,14 @@ class Widget::GroupBys < Widget::Base
           end
         end.join.html_safe
         content
-      end.html_safe
+      end
+      out.html_safe
     end
   end
 
   def render
     content_tag :div, :id => 'group_by_area' do
-      out  = l(:label_columns)
-      out += render_group 'columns', @query.group_bys(:column)
-      out += l(:label_rows)
+      out =  render_group 'columns', @query.group_bys(:column)
       out += render_group 'rows', @query.group_bys(:row)
       out.html_safe
     end