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

css/data-explorer.css

@@ -29,24 +29,28 @@
 
 .header .recline-query-editor .text-query input {
   float: left;  
-  margin-right: 5px;
 }
 
-.header .recline-query-editor .pagination input {
+.recline-query-editor .text-query .btn-group {
-  width: 30px;
+  display: inline;
-  height: 18px;
+  float:left;
-  padding: 2px 4px;
+  margin-left:-2px;
-  margin-top: -4px;
+}
+
+.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;

src/view.js

@@ -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="prev action-pagination-update"><a href="">&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="active"><a>{{from}} &ndash; {{to}}</a></li> \
-          <li class="next action-pagination-update"><a>&raquo;</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',
+    'submit form': 'onFormSubmit'
-    'click .action-pagination-update': 'onPaginationUpdate'
+    , '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');