From e42510602267b7336464a700e160a594e3a138aa Mon Sep 17 00:00:00 2001
From: Rufus Pollock <rufus.pollock@okfn.org>
Date: Sun, 3 Jun 2012 09:49:21 +0100
Subject: [PATCH] [ux,view/multiview][s]: turn view chooser menu and controls
 (filters/facets) menu into button groups and make filters/facets section
 toggle correctly.

---
 css/multiview.css           |  3 ---
 src/view.multiview.js       | 26 ++++++++++++++------------
 test/view.multiview.test.js |  4 ++--
 3 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/css/multiview.css b/css/multiview.css
index dee4edd5..7a6df9fe 100644
--- a/css/multiview.css
+++ b/css/multiview.css
@@ -4,7 +4,6 @@
 }
 
 .recline-data-explorer .header .navigation,
-.recline-data-explorer .header .navigation li,
 .recline-data-explorer .header .pagination,
 .recline-data-explorer .header .pagination form
 {
@@ -13,8 +12,6 @@
 
 .recline-data-explorer .header .navigation {
   float: left;
-  margin-left: 0;
-  padding-left: 0;
 }
 
 .recline-data-explorer .header .menu-right {
diff --git a/src/view.multiview.js b/src/view.multiview.js
index ebec0ab9..04d0b847 100644
--- a/src/view.multiview.js
+++ b/src/view.multiview.js
@@ -75,17 +75,21 @@ my.MultiView = Backbone.View.extend({
     <div class="alert-messages"></div> \
     \
     <div class="header"> \
-      <ul class="navigation"> \
+      <div class="navigation"> \
+        <div class="btn-group" data-toggle="buttons-radio"> \
         {{#views}} \
-        <li><a href="#{{id}}" data-view="{{id}}" class="btn">{{label}}</a> \
+        <a href="#{{id}}" data-view="{{id}}" class="btn">{{label}}</a> \
         {{/views}} \
-      </ul> \
+        </div> \
+      </div> \
       <div class="recline-results-info"> \
         Results found <span class="doc-count">{{docCount}}</span> \
       </div> \
       <div class="menu-right"> \
-        <a href="#" class="btn" data-action="filters">Filters</a> \
-        <a href="#" class="btn" data-action="facets">Facets</a> \
+        <div class="btn-group" data-toggle="buttons-checkbox"> \
+          <a href="#" class="btn" data-action="filters">Filters</a> \
+          <a href="#" class="btn" data-action="facets">Facets</a> \
+        </div> \
       </div> \
       <div class="query-editor-here" style="display:inline;"></div> \
       <div class="clearfix"></div> \
@@ -220,11 +224,9 @@ my.MultiView = Backbone.View.extend({
   },
 
   updateNav: function(pageName) {
-    this.el.find('.navigation li').removeClass('active');
-    this.el.find('.navigation li a').removeClass('disabled');
-    var $el = this.el.find('.navigation li a[data-view="' + pageName + '"]');
-    $el.parent().addClass('active');
-    $el.addClass('disabled');
+    this.el.find('.navigation a').removeClass('active');
+    var $el = this.el.find('.navigation a[data-view="' + pageName + '"]');
+    $el.addClass('active');
     // show the specific page
     _.each(this.pageViews, function(view, idx) {
       if (view.id === pageName) {
@@ -241,9 +243,9 @@ my.MultiView = Backbone.View.extend({
     e.preventDefault();
     var action = $(e.target).attr('data-action');
     if (action === 'filters') {
-      this.$filterEditor.show();
+      this.$filterEditor.toggle();
     } else if (action === 'facets') {
-      this.$facetViewer.show();
+      this.$facetViewer.toggle();
     }
   },
 
diff --git a/test/view.multiview.test.js b/test/view.multiview.test.js
index fc7ce53a..6f99fafa 100644
--- a/test/view.multiview.test.js
+++ b/test/view.multiview.test.js
@@ -61,9 +61,9 @@ test('initialize state', function () {
 
   // check the correct view is visible
   var css = explorer.el.find('.navigation a[data-view="graph"]').attr('class').split(' ');
-  ok(_.contains(css, 'disabled'), css);
+  ok(_.contains(css, 'active'), css);
   var css = explorer.el.find('.navigation a[data-view="grid"]').attr('class').split(' ');
-  ok(!(_.contains(css, 'disabled')), css);
+  ok(!(_.contains(css, 'active')), css);
 
   // check pass through of view config
   deepEqual(explorer.state.get('view-grid')['hiddenFields'], ['x']);