knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[ux,view/multiview][s]: turn view chooser menu and controls (filters/facets) menu into button groups and make filters/facets section toggle correctly.

Browse Source
This commit is contained in:
Rufus Pollock
2012-06-03 09:49:21 +01:00
parent 00052bba0f
commit e425106022
3 changed files with 16 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
css/multiview.css
View File

@@ -4,7 +4,6 @@
} }
.recline-data-explorer .header .navigation, .recline-data-explorer .header .navigation,
.recline-data-explorer .header .navigation li,
.recline-data-explorer .header .pagination, .recline-data-explorer .header .pagination,
.recline-data-explorer .header .pagination form .recline-data-explorer .header .pagination form
{ {
@@ -13,8 +12,6 @@
.recline-data-explorer .header .navigation { .recline-data-explorer .header .navigation {
float: left; float: left;
margin-left: 0;
padding-left: 0;
} }
.recline-data-explorer .header .menu-right { .recline-data-explorer .header .menu-right {

26
src/view.multiview.js
View File

@@ -75,17 +75,21 @@ my.MultiView = Backbone.View.extend({
<div class="alert-messages"></div> \ <div class="alert-messages"></div> \
\ \
<div class="header"> \ <div class="header"> \
<ul class="navigation"> \ <div class="navigation"> \
<div class="btn-group" data-toggle="buttons-radio"> \
{{#views}} \ {{#views}} \
<li><a href="#{{id}}" data-view="{{id}}" class="btn">{{label}}</a> \ <a href="#{{id}}" data-view="{{id}}" class="btn">{{label}}</a> \
{{/views}} \ {{/views}} \
</ul> \ </div> \
</div> \
<div class="recline-results-info"> \ <div class="recline-results-info"> \
Results found <span class="doc-count">{{docCount}}</span> \ Results found <span class="doc-count">{{docCount}}</span> \
</div> \ </div> \
<div class="menu-right"> \ <div class="menu-right"> \
<a href="#" class="btn" data-action="filters">Filters</a> \ <div class="btn-group" data-toggle="buttons-checkbox"> \
<a href="#" class="btn" data-action="facets">Facets</a> \ <a href="#" class="btn" data-action="filters">Filters</a> \
<a href="#" class="btn" data-action="facets">Facets</a> \
</div> \
</div> \ </div> \
<div class="query-editor-here" style="display:inline;"></div> \ <div class="query-editor-here" style="display:inline;"></div> \
<div class="clearfix"></div> \ <div class="clearfix"></div> \
@@ -220,11 +224,9 @@ my.MultiView = Backbone.View.extend({
}, },
updateNav: function(pageName) { updateNav: function(pageName) {
this.el.find('.navigation li').removeClass('active'); this.el.find('.navigation a').removeClass('active');
this.el.find('.navigation li a').removeClass('disabled'); var $el = this.el.find('.navigation a[data-view="' + pageName + '"]');
var $el = this.el.find('.navigation li a[data-view="' + pageName + '"]'); $el.addClass('active');
$el.parent().addClass('active');
$el.addClass('disabled');
// show the specific page // show the specific page
_.each(this.pageViews, function(view, idx) { _.each(this.pageViews, function(view, idx) {
if (view.id === pageName) { if (view.id === pageName) {
@@ -241,9 +243,9 @@ my.MultiView = Backbone.View.extend({
e.preventDefault(); e.preventDefault();
var action = $(e.target).attr('data-action'); var action = $(e.target).attr('data-action');
if (action === 'filters') { if (action === 'filters') {
this.$filterEditor.show(); this.$filterEditor.toggle();
} else if (action === 'facets') { } else if (action === 'facets') {
this.$facetViewer.show(); this.$facetViewer.toggle();
} }
}, },

4
test/view.multiview.test.js
View File

@@ -61,9 +61,9 @@ test('initialize state', function () {
// check the correct view is visible // check the correct view is visible
var css = explorer.el.find('.navigation a[data-view="graph"]').attr('class').split(' '); 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(' '); 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 // check pass through of view config
deepEqual(explorer.state.get('view-grid')['hiddenFields'], ['x']); deepEqual(explorer.state.get('view-grid')['hiddenFields'], ['x']);