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

[view/query][s]: refactor query view to have from / size changes in new dropdown query menu rather than in pagination.

Browse Source
This commit is contained in:
Rufus Pollock 2012-03-14 21:14:56 +00:00
parent 6d69ef64d9
commit f9f5be6540
2 changed files with 42 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
css/data-explorer.css
View File

@ -29,24 +29,28 @@
.header .recline-query-editor .text-query input {
float: left;
margin-right: 5px;
}
.header .recline-query-editor .pagination input {
width: 30px;
height: 18px;
padding: 2px 4px;
margin-top: -4px;
.recline-query-editor .text-query .btn-group {
display: inline;
float:left;
margin-left:-2px;
}
.recline-query-editor .text-query .btn-group .dropdown-toggle {
-moz-border-radius:0px 3px 3px 0px;
-webkit-border-radius:0px 3px 3px 0px;
border-radius:0px 3px 3px 0px;
}
.recline-query-editor .text-query .btn-group ul {
margin-left:-110px;
}
.header .recline-query-editor .pagination a {
line-height: 26px;
}
.header .recline-query-editor form .btn {
vertical-align: top;
}
.data-view-container {
display: block;
clear: both;

37
src/view.js
View File

@ -207,21 +207,28 @@ my.QueryEditor = Backbone.View.extend({
<div class="input-prepend text-query"> \
<span class="add-on"><i class="icon-search"></i></span> \
<input type="text" name="q" value="{{q}}" class="span2" placeholder="Search data ..." class="search-query" /> \
<div class="btn-group menu"> \
<a class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i><span class="caret"></span></a> \
<ul class="dropdown-menu"> \
<li><a data-action="size" href="">Number of items to show ({{size}})</a></li> \
<li><a data-action="from" href="">Show from ({{from}})</a></li> \
</ul> \
</div> \
</div> \
<div class="pagination"> \
<ul> \
<li class="prev action-pagination-update"><a>&laquo;</a></li> \
<li class="active"><a><input name="from" type="text" value="{{from}}" /> &ndash; <input name="to" type="text" value="{{to}}" /> </a></li> \
<li class="next action-pagination-update"><a>&raquo;</a></li> \
<li class="prev action-pagination-update"><a href="">&laquo;</a></li> \
<li class="active"><a>{{from}} &ndash; {{to}}</a></li> \
<li class="next action-pagination-update"><a href="">&raquo;</a></li> \
</ul> \
</div> \
<button type="submit" class="btn" style="">Update &raquo;</button> \
</form> \
',
events: {
'submit form': 'onFormSubmit',
'click .action-pagination-update': 'onPaginationUpdate'
'submit form': 'onFormSubmit'
, 'click .action-pagination-update': 'onPaginationUpdate'
, 'click .menu li a': 'onMenuItemClick'
},
initialize: function() {
@ -232,10 +239,8 @@ my.QueryEditor = Backbone.View.extend({
},
onFormSubmit: function(e) {
e.preventDefault();
var newFrom = parseInt(this.el.find('input[name="from"]').val());
var newSize = parseInt(this.el.find('input[name="to"]').val()) - newFrom;
var query = this.el.find('.text-query input').val();
this.model.set({size: newSize, from: newFrom, q: query});
this.model.set({q: query});
},
onPaginationUpdate: function(e) {
e.preventDefault();
@ -247,6 +252,20 @@ my.QueryEditor = Backbone.View.extend({
}
this.model.set({from: newFrom});
},
onMenuItemClick: function(e) {
e.preventDefault();
var attrName = $(e.target).attr('data-action');
var msg = _.template('New value (<%= value %>)',
{value: this.model.get(attrName)}
);
var newValue = prompt(msg);
if (newValue) {
newValue = parseInt(newValue);
var update = {};
update[attrName] = newValue;
this.model.set(update);
}
},
render: function() {
var tmplData = this.model.toJSON();
tmplData.to = this.model.get('from') + this.model.get('size');