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
Show Stats 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 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 {

26
src/view.multiview.js
View File

@ -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();
}
},

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

@ -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']);