From 20191bf9fad2179899a8a53607d2a8da969a693c Mon Sep 17 00:00:00 2001
From: Rufus Pollock <rufus.pollock@okfn.org>
Date: Thu, 7 Jun 2012 19:52:20 +0100
Subject: [PATCH] [#145,widget/fields][s]: ux on fields including heading,
 expand all and collapse all support, bugfix for weird collapsed but content
 not collapsed issue.

---
 css/multiview.css    | 12 +++++++++++-
 src/widget.fields.js | 24 +++++++++++++++++++++---
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/css/multiview.css b/css/multiview.css
index 96afa99f..4d0795f4 100644
--- a/css/multiview.css
+++ b/css/multiview.css
@@ -119,13 +119,23 @@
   padding: 0;
 }
 
+.recline-fields-view .fields-list .accordion-heading,
+.recline-fields-view .fields-list h3
+{
+  margin: 3px 0 3px 5px;
+}
+
 .recline-fields-view .fields-list .accordion-heading a,
 .recline-fields-view .fields-list .accordion-heading h4 {
   display: inline;
 }
 
+.recline-fields-view .fields-list .accordion-heading a {
+  padding: 0;
+}
+
 .recline-fields-view .fields-list .accordion-heading h4 {
-  margin-left: 10px;
+  word-wrap: break-word
 }
 
 .recline-fields-view .clear {
diff --git a/src/widget.fields.js b/src/widget.fields.js
index 598d4cf3..645ba055 100644
--- a/src/widget.fields.js
+++ b/src/widget.fields.js
@@ -25,15 +25,16 @@ my.Fields = Backbone.View.extend({
   className: 'recline-fields-view', 
   template: ' \
     <div class="accordion fields-list well"> \
+    <h3>Fields <a href="#" class="js-show-hide">+</a></h3> \
     {{#fields}} \
       <div class="accordion-group field"> \
         <div class="accordion-heading"> \
+          <i class="icon-file"></i> \
           <h4> \
             {{label}} \
             <small> \
-              <i class="icon-file" title="Field type"></i> {{type}} \
-              <a class="accordion-toggle" data-toggle="collapse" href="#collapse{{id}}"> &raquo; \
-              </a> \
+              {{type}} \
+              <a class="accordion-toggle" data-toggle="collapse" href="#collapse{{id}}"> &raquo; </a> \
             </small> \
           </h4> \
         </div> \
@@ -57,6 +58,7 @@ my.Fields = Backbone.View.extend({
   ',
 
   events: {
+    'click .js-show-hide': 'onShowHide'
   },
   initialize: function(model) {
     var self = this;
@@ -90,6 +92,22 @@ my.Fields = Backbone.View.extend({
     var templated = Mustache.render(this.template, tmplData);
     this.el.html(templated);
     this.el.find('.collapse').collapse('hide');
+  },
+  onShowHide: function(e) {
+    e.preventDefault();
+    var $target  = $(e.target);
+    // weird collapse class seems to have been removed (can watch this happen
+    // if you watch dom) but could not work why. Absence of collapse then meant
+    // we could not toggle.
+    // This seems to fix the problem.
+    this.el.find('.accordion-body').addClass('collapse');;
+    if ($target.text() === '+') {
+      this.el.find('.collapse').collapse('show');
+      $target.text('-');
+    } else {
+      this.el.find('.collapse').collapse('hide');
+      $target.text('+');
+    }
   }
 });