You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by de...@apache.org on 2014/08/25 15:40:07 UTC

[27/48] fauxton commit: updated refs/heads/secondary-indexes to 8688d16

Adding Dropdown,
moving footer to the bottom,
fix events on select header doc,
use events for advanced options
expand and collapse
select toggle
Make pagination fixed to the bottom and update files with apache license


Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/cd7b26f2
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/cd7b26f2
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/cd7b26f2

Branch: refs/heads/secondary-indexes
Commit: cd7b26f2fca1bade33545136cec8a169d278e431
Parents: f719ed1
Author: deathbearbrown <de...@gmail.com>
Authored: Sun Aug 24 16:33:43 2014 +0200
Committer: deathbearbrown <de...@gmail.com>
Committed: Mon Aug 25 09:37:35 2014 -0400

----------------------------------------------------------------------
 app/addons/documents/assets/less/documents.less |   1 +
 app/addons/documents/resources.js               |   2 +-
 app/addons/documents/routes.js                  | 100 ++++++---
 .../documents/templates/all_docs_item.html      |   4 +-
 .../documents/templates/all_docs_list.html      |  24 +--
 .../documents/templates/header_alldocs.html     |   8 +-
 .../documents/templates/header_doc_edit.html    |  33 ---
 .../documents/templates/select-doc-menu.html    |  24 +++
 app/addons/documents/views-advancedopts.js      |   9 +-
 app/addons/documents/views-sidebar.js           |   2 +
 app/addons/documents/views.js                   | 212 +++++++++----------
 app/addons/fauxton/components.js                |  22 ++
 .../fauxton/templates/index_pagination.html     |  16 +-
 app/addons/fauxton/templates/menu_dropdown.html |   2 +
 app/addons/fauxton/templates/pagination.html    |   3 -
 app/addons/indexes/templates/header_right.html  |   2 +-
 app/addons/indexes/views.js                     |   4 +-
 app/core/api.js                                 |   7 +-
 assets/index.underscore                         |   4 -
 assets/less/fauxton.less                        |   1 +
 assets/less/headers.less                        |  12 ++
 assets/less/mixins.less                         |  28 ++-
 assets/less/pagination.less                     |  21 ++
 assets/less/templates.less                      |   8 +-
 24 files changed, 321 insertions(+), 228 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/cd7b26f2/app/addons/documents/assets/less/documents.less
----------------------------------------------------------------------
diff --git a/app/addons/documents/assets/less/documents.less b/app/addons/documents/assets/less/documents.less
index 5a39fab..26e3ffa 100644
--- a/app/addons/documents/assets/less/documents.less
+++ b/app/addons/documents/assets/less/documents.less
@@ -17,6 +17,7 @@
 @import "advancedOptions.less";
 @import "changes.less";
 @import "sidenav.less";
+@import "headers.less";
 
 tr.all-docs-item {
   border: none;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/cd7b26f2/app/addons/documents/resources.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/resources.js b/app/addons/documents/resources.js
index f95bf78..20d4378 100644
--- a/app/addons/documents/resources.js
+++ b/app/addons/documents/resources.js
@@ -359,7 +359,7 @@ function(app, FauxtonAPI, PagingCollection) {
       if (ids.errorIds.length) {
         this.trigger('error', ids.errorIds);
       }
-
+      FauxtonAPI.Events.trigger('success:bulkDelete');
       this.trigger('updated');
     },
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/cd7b26f2/app/addons/documents/routes.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/routes.js b/app/addons/documents/routes.js
index c1d61bd..994ca5c 100644
--- a/app/addons/documents/routes.js
+++ b/app/addons/documents/routes.js
@@ -22,11 +22,10 @@ define([
   "addons/documents/views-doceditor",
 
   "addons/databases/base",
-  "addons/documents/resources",
-  "addons/fauxton/components"
+  "addons/documents/resources"
 ],
 
-function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases, Resources, Components) {
+function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases, Resources) {
   /* --------------------------------------------------
     DOCUMENT EDITOR ROUTE OBJECT
   ----------------------------------------------------*/
@@ -185,13 +184,26 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases,
         }
       });
 
+      /* --------------------------------------------------
+        Set up breadcrumb header
+      ----------------------------------------------------*/
+      var crumbs = [
+        {"name": "", "className": "fonticon-left-open", "link": "/_all_dbs"},
+        {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)}
+      ];
+
+
+      this.leftheader = this.setView("#breadcrumbs", new Components.LeftHeader({
+        crumbs: crumbs,
+        dropdownMenu: this.setUpDropdown()
+      }));
 
       /* --------------------------------------------------
         Show right header for all docs that includes:
         query options, api bar, search and select
       ----------------------------------------------------*/
       this.changesHeader = true;
-      this.setAllDocsHeader();
+      this.resetAllDocsHeader();
 
       /* --------------------------------------------------
         Show the sidebar
@@ -203,7 +215,55 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases,
       }));
     },
 
-    setAllDocsHeader: function(){
+    setUpDropdown: function(){
+      var defaultMenuLinks = [{
+        links: [{
+          title: 'Replicate Database',
+          icon: 'fonticon-replicate',
+          url: '#/replication/'+this.databaseName
+        },{
+          title: 'Delete',
+          icon: 'fonticon-trash',
+          trigger: 'database:delete'
+        }]
+      }];
+
+      defaultMenuLinks.push({
+        title: 'Add new',
+        links: this.getExtensionLinks()
+      });
+
+      return defaultMenuLinks;
+    },
+
+    getExtensionLinks: function () {
+      var database = this.data.database,
+          newurlPrefix = "#" + database.url('app');
+
+      var menuLinks = [{
+          title: 'New Doc',
+          url: newurlPrefix + '/new',
+          icon: 'fonticon-plus-circled'
+        },{
+          title: 'New Design Doc',
+          url: newurlPrefix + '/new_view',
+          icon: 'fonticon-plus-circled'
+      }];
+
+      return _.reduce(FauxtonAPI.getExtensions('sidebar:links'), function (menuLinks, link) {
+
+        menuLinks.push({
+          title: link.title,
+          url: newurlPrefix + "/" + link.url,
+          icon: 'fonticon-plus-circled'
+        });
+
+        return menuLinks;
+     }, menuLinks);
+
+    },
+
+    resetAllDocsHeader: function(){
       if (this.changesHeader){
         this.headerRight = this.setView("#api-navbar", new Documents.Views.RightAllDocsHeader({
           database: this.data.database
@@ -264,33 +324,11 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases,
       }
 
 
-      /* --------------------------------------------------
-        Set up breadcrumb header
-      ----------------------------------------------------*/
-      var crumbs = [
-        {"name": "", "className": "fonticon-left-open", "link": "/_all_dbs"},
-        {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)}
-      ];
-
-      var dropdown = [{
-        links: [{
-          title: 'Duplicate Index',
-          icon: 'fonticon-documents'
-        },{
-          title: 'Delete',
-          icon: 'fonticon-trash'
-        }]
-      }];
-
-      this.leftheader = this.setView("#breadcrumbs", new Components.LeftHeader({
-        crumbs: crumbs,
-        dropdownMenu: dropdown
-      }));
 
       /*--------------------------------------------------
       reset header if you have to
       ----------------------------------------------------*/
-      this.setAllDocsHeader();
+      this.resetAllDocsHeader();
 
       /* --------------------------------------------------
         Build all docs
@@ -374,6 +412,7 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases,
 
       this.documentsView.setCollection(collection);
       this.documentsView.setParams(docParams, urlParams);
+      this.leftheader.forceRender();
       this.documentsView.forceRender();
 
       this.headerRight.updateApiUrl([collection.urlRef("apiurl", urlParams), "docs"]);
@@ -383,6 +422,7 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases,
       // We need to restore the collection parameters to the defaults (1st page)
       // and update the page size
       this.perPage = perPage;
+      this.leftheader.forceRender();
       this.documentsView.forceRender();
       this.documentsView.collection.pageSizeReset(perPage, {fetch: false});
       this.setDocPerPageLimit(perPage);
@@ -390,7 +430,7 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases,
 
     paginate: function (options) {
       var collection = this.documentsView.collection;
-
+      this.leftheader.forceRender();
       this.documentsView.forceRender();
       collection.paging.pageSize = options.perPage;
       var promise = collection[options.direction]({fetch: false});
@@ -485,7 +525,7 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases,
     removeFilter: function (filter) {
       this.changesView.filters.splice(this.changesView.filters.indexOf(filter), 1);
       this.changesView.render();
-    },
+    }
 
   });
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/cd7b26f2/app/addons/documents/templates/all_docs_item.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/all_docs_item.html b/app/addons/documents/templates/all_docs_item.html
index 4526df2..783e4f5 100644
--- a/app/addons/documents/templates/all_docs_item.html
+++ b/app/addons/documents/templates/all_docs_item.html
@@ -12,8 +12,8 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
-<div class="select"><input <%- checked ? 'checked="checked"' : '' %> type="checkbox" class="js-row-select"></div>
-<div class="doc-item">
+<div class="select" <% if (!showSelect){ %>style="display:none"<%}%> ><input <%- checked ? 'checked="checked"' : '' %> type="checkbox" class="js-row-select"></div>
+<div class="doc-item  ">
 
   <header>
     _id <span class="header-id-number">"<%=docID%>"</span>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/cd7b26f2/app/addons/documents/templates/all_docs_list.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/all_docs_list.html b/app/addons/documents/templates/all_docs_list.html
index d132eb2..3eaca80 100644
--- a/app/addons/documents/templates/all_docs_list.html
+++ b/app/addons/documents/templates/all_docs_list.html
@@ -13,25 +13,8 @@ the License.
 -->
 
 <div class="view">
-  <% if (!viewList) { %>
-    <div class="row">
-      <div class="btn-toolbar span6">
-        <button type="button" class="btn btn-small all" data-toggle="button">✓ All</button>
-        <button class="btn btn-small disabled js-bulk-delete"><i class="icon-trash"></i></button>
-        <% if (expandDocs) { %>
-        <button id="collapse" class="btn btn-small"><i class="icon-minus"></i> Collapse</button>
-        <% } else { %>
-        <button id="collapse" class="btn btn-small"><i class="icon-plus"></i> Expand</button>
-        <% } %>
-      </div>
-    </div>
-  <% } %>
-  <p>
-
-  <div id="item-numbers"> </div>
-  <div id="doc-list">
 
-  </div>
+  <div id="doc-list"></div>
 
   <% if (endOfResults) { %>
   <div class="text-center well">
@@ -40,5 +23,8 @@ the License.
     </p>
     </div>
   <% } %>
-  <div id="documents-pagination"></div>
 </div>
+<footer class="pagination-footer" class="window-resizeable">
+<div id="item-numbers"> </div>
+<div id="documents-pagination"></div>
+</footer>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/cd7b26f2/app/addons/documents/templates/header_alldocs.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/header_alldocs.html b/app/addons/documents/templates/header_alldocs.html
index d83cb08..6e8f97f 100644
--- a/app/addons/documents/templates/header_alldocs.html
+++ b/app/addons/documents/templates/header_alldocs.html
@@ -12,8 +12,12 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
-  <!-- Select all -->
+  <!-- Select toggle -->
+  <div id="header-select-all">
+    <span class="toggle-select-menu icon fonticon-ok-circled">Select</span>
+  </div>
 
+  <div id="header-select-menu"></div>
   <!-- search (jump to doc)-->
   <div id="header-search" class="js-search searchbox-container"></div>
 
@@ -21,5 +25,5 @@ the License.
   <div class="header-query-options">
     <!-- Insert the query options here :) -->
     <div id="query-options"></div>
-    <div id="header-api-bar"></div>
   </div>
+  <div id="header-api-bar"></div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/cd7b26f2/app/addons/documents/templates/header_doc_edit.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/header_doc_edit.html b/app/addons/documents/templates/header_doc_edit.html
deleted file mode 100644
index fbc213f..0000000
--- a/app/addons/documents/templates/header_doc_edit.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!--
-Licensed under the Apache License, Version 2.0 (the "License"); you may not
-use this file except in compliance with the License. You may obtain a copy of
-the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-License for the specific language governing permissions and limitations under
-the License.
--->
-
-<div class="header-left">
-<!--back arrow-->
-
-<!--title with dropdown DB search-->
-
-<!-- Menu gear-->
-</div>
-
-
-<div class="header-right">
-<!-- Select button-->
-<!-- ? button-->
-<!-- ? button-->
-<!-- ? button-->
-<!-- ? button-->
-<!-- json button-->
-<!-- trash button-->
-<!-- cancel button-->
-</div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/cd7b26f2/app/addons/documents/templates/select-doc-menu.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/select-doc-menu.html b/app/addons/documents/templates/select-doc-menu.html
new file mode 100644
index 0000000..bad70a7
--- /dev/null
+++ b/app/addons/documents/templates/select-doc-menu.html
@@ -0,0 +1,24 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+-->
+<div class="row">
+  <div class="btn-toolbar span6">
+    <button type="button" class="btn btn-small all" data-toggle="button">✓ All</button>
+    <button class="btn btn-small disabled js-bulk-delete"><i class="icon-trash"></i></button>
+    <% if (expandDocs) { %>
+    <button id="collapse" class="btn btn-small"><i class="icon-minus"></i> Collapse</button>
+    <% } else { %>
+    <button id="collapse" class="btn btn-small"><i class="icon-plus"></i> Expand</button>
+    <% } %>
+  </div>
+</div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/cd7b26f2/app/addons/documents/views-advancedopts.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views-advancedopts.js b/app/addons/documents/views-advancedopts.js
index 9a00c63..6500b50 100644
--- a/app/addons/documents/views-advancedopts.js
+++ b/app/addons/documents/views-advancedopts.js
@@ -29,8 +29,6 @@ function(app, FauxtonAPI, resizeColumns ) {
       this.database = options.database;
       this.ddocName = options.ddocName;
       this.viewName = options.viewName;
-      this.updateViewFn = options.updateViewFn;
-      this.previewFn = options.previewFn;
       this.showStale = _.isUndefined(options.showStale) ? false : options.showStale;
       this.hasReduce = _.isUndefined(options.hasReduce) ? true : options.hasReduce;
     },
@@ -66,14 +64,14 @@ function(app, FauxtonAPI, resizeColumns ) {
     toggleQuery: function(event) {
       $('#dashboard-content').scrollTop(0);
       this.$('#query-options-tray').toggle();
-    }, 
+    },
 
     resetForm: function() {
       $('input, textarea').each(function(){
         $(this).val('');
       });
       $('input:checkbox').attr('checked', false);
-      $("select").each(function(){ 
+      $("select").each(function(){
         this.selectedIndex = 0;
       });
     },
@@ -190,7 +188,8 @@ function(app, FauxtonAPI, resizeColumns ) {
       event.preventDefault();
       var params = this.queryParams();
       if (!params) { return;}
-      this.updateViewFn(event, params);
+      FauxtonAPI.Events.trigger('advancedOptions:updateView', event, params);
+      //this.updateViewFn(event, params);
     },
 
     updateFilters: function(event) {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/cd7b26f2/app/addons/documents/views-sidebar.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views-sidebar.js b/app/addons/documents/views-sidebar.js
index 8592dc1..ab6012c 100644
--- a/app/addons/documents/views-sidebar.js
+++ b/app/addons/documents/views-sidebar.js
@@ -32,11 +32,13 @@ function(app, FauxtonAPI, Components, Documents, Databases) {
     },
 
     initialize: function(options) {
+      _.bindAll(this);
       this.database = options.database;
       if (options.ddocInfo) {
         this.ddocID = options.ddocInfo.id;
         this.currView = options.ddocInfo.currView;
       }
+      FauxtonAPI.Events.on('database:delete', this.showDeleteDatabaseModal)
     },
     showDeleteDatabaseModal: function(event){
       this.deleteDBModal.showModal();

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/cd7b26f2/app/addons/documents/views.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views.js b/app/addons/documents/views.js
index 62073d5..3cfc229 100644
--- a/app/addons/documents/views.js
+++ b/app/addons/documents/views.js
@@ -1,4 +1,3 @@
-
 // Licensed under the Apache License, Version 2.0 (the "License"); you may not
 // use this file except in compliance with the License. You may obtain a copy of
 // the License at
@@ -44,37 +43,57 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
     className: "header-right",
     template: "addons/documents/templates/header_alldocs",
     events: {
-      'select .selectAllDocs': 'selectAllDocs'
+      'click .toggle-select-menu': 'selectAllMenu'
     },
+
     initialize: function(options){
       //adding the database to the object
       this.database = options.database;
+      _.bindAll(this);
+      this.selectVisible = false;
+      FauxtonAPI.Events.on('advancedOptions:updateView', this.updateAllDocs);
+      FauxtonAPI.Events.on('success:bulkDelete', this.selectAllMenu);
     },
-    selectAllDocs: function(){
+
+    selectAllMenu: function(e){
       //trigger event to select all in other view
+      this.$('.toggle-select-menu').toggleClass('active');
+
+      //trigger event to change the header
+      this.toggleSelectMenu();
+      FauxtonAPI.Events.trigger("documents:show-select-all",this.selectVisible);
+
     },
-    updateApiUrl: function(api){
-      //this will update the api bar when the route changes
-      //you can find the method that updates it in components.js Components.ApiBar()
-      this.apiBar && this.apiBar.update(api);
+
+    toggleSelectMenu: function(){
+      if (this.selectVisible){
+        this.selectVisible = false;
+        this.selectMenu.remove();
+        this.addAllDocsMenu();
+      } else {
+        this.removeAllDocsMenu();
+        this.addSelectMenu();
+      }
     },
-    serialize: function() {
-      //basically if you want something in a template, You can define it here
-      return {
-        database: this.database.get('id')
-      };
+
+    addSelectMenu: function(){
+      this.selectVisible = true;
+      this.selectMenu =  this.insertView('#header-select-menu', new Views.SelectMenu({}));
+      this.selectMenu.render();
     },
-    beforeRender:function(){
-      //insert DB search dropdown
 
-      //insert top create level dropdown with gear icon
+    removeAllDocsMenu: function(){
+      this.headerSearch.remove();
+      this.queryOptions.remove();
+      this.apiBar.remove();
+    },
 
+    addAllDocsMenu: function(){
       //search docs
-      this.setView("#header-search", new Views.JumpToDoc({
+      this.headerSearch = this.insertView("#header-search", new Views.JumpToDoc({
         database: this.database,
         collection: this.database.allDocs
       }));
-
       //insert queryoptions
       //that file is included in require() above and the argument is QueryOptions
       // and it wants all these params:
@@ -95,9 +114,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
         this.viewName = options.viewName;
         this.ddocName = options.ddocName;
       */
-      this.setView("#query-options", new QueryOptions.AdvancedOptions({
-        updateViewFn: this.updateAllDocs,
-        previewFn: this.previewView,
+
+      this.queryOptions = this.insertView("#query-options", new QueryOptions.AdvancedOptions({
         database: this.database,
         hasReduce: false,
         showPreview: false,
@@ -106,7 +124,28 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
       //Moved the apibar view into the components file so you can include it in your views
       this.apiBar = this.insertView("#header-api-bar", new Components.ApiBar({}));
 
+      this.apiBar.render();
+      this.queryOptions.render();
+      this.headerSearch.render();
     },
+
+    updateApiUrl: function(api){
+      //this will update the api bar when the route changes
+      //you can find the method that updates it in components.js Components.ApiBar()
+      this.apiBar && this.apiBar.update(api);
+    },
+
+    serialize: function() {
+      //basically if you want something in a template, You can define it here
+      return {
+        database: this.database.get('id')
+      };
+    },
+
+    beforeRender:function(){
+      this.addAllDocsMenu();
+    },
+
     //moved from alldocs layout
     updateAllDocs: function (event, paramInfo) {
       event.preventDefault();
@@ -145,54 +184,30 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
 
       FauxtonAPI.navigate(fragment, {trigger: false});
       FauxtonAPI.triggerRouteEvent('updateAllDocs', {allDocs: true});
-    },
-    previewView: function (event) {
-      event.preventDefault();
     }
   });
 
-
-  //header that shows up when a doc is selected
-  // when a Doc is selected, trigger a routeEvent to render this
-  // the routeEvent will determine which header to show (??)
-  Views.DocEditHeader = FauxtonAPI.View.extend({
-    template: "addons/documents/templates/header_doc_edit",
+  // select docs header
+  Views.SelectMenu = FauxtonAPI.View.extend({
+    template:"addons/documents/templates/select-doc-menu",
     events: {
-      'select .selectAllDocs': 'selectAllDocs'
-    },
-    initialize: function(options){
-
-    },
-    selectAllDocs: function(){
-      //trigger event to select all in other view
+      "click button.all": "selectAll",
+      "click button.js-bulk-delete": "bulkDelete",
+      "click #collapse": "collapse"
     },
-    afterRender:function(){
-      //insert DB search dropdown
-
-      //insert top create level dropdown with gear icon
-    }
-  });
-
-  Views.DocsHeader = FauxtonAPI.View.extend({
-    template: "addons/documents/templates/header_selecteddoc",
-    events: {
-      'select .selectAllDocs': 'selectAllDocs'
+    bulkDelete: function(){
+      FauxtonAPI.Events.trigger("documents:bulkDelete");
     },
-    initialize: function(options){
+    selectAll: function(evt){
+      this.$(evt.target).toggleClass('active');
 
+      FauxtonAPI.Events.trigger("documents:selectAll", this.$(evt.target).hasClass('active'));
     },
-    selectAllDocs: function(){
-      //trigger event to select all in other view
-    },
-    afterRender:function(){
-      //insert DB search dropdown
-
-      //insert top create level dropdown with gear icon
-
-      //search docs
-
-      //insert queryoptions
-
+    collapse: function(evt){
+      var icon = this.$(evt.target).find('i');
+      icon.toggleClass('icon-minus');
+      icon.toggleClass('icon-plus');
+      FauxtonAPI.Events.trigger("documents:collapse");
     }
   });
 
@@ -244,6 +259,26 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
     className: "all-docs-item doc-row",
     initialize: function (options) {
       this.checked = options.checked;
+      this.expanded = options.expanded;
+      this.showSelect = false;
+      _.bindAll(this);
+      FauxtonAPI.Events.on("documents:show-select-all", this.showSelectBox);
+      FauxtonAPI.Events.on("documents:collapse", this.collapse);
+      FauxtonAPI.Events.on("documents:selectAll", this.selectAll);
+    },
+
+    showSelectBox: function(bool){
+      this.showSelect = bool;
+      this.$('.select').toggle(this.showSelect);
+    },
+
+    selectAll: function(checked){
+      this.$("input:checkbox").prop('checked', checked).trigger('click');
+    },
+
+    collapse: function(bool){
+      this.collapse = bool;
+      this.$('.doc-data').toggle(this.collapse);
     },
 
     events: {
@@ -259,6 +294,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
 
     serialize: function() {
       return {
+        showSelect: this.showSelect,
+        expanded: this.expanded,
         docID: this.model.get('_id'),
         doc: this.model,
         checked: this.checked
@@ -373,14 +410,12 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
   Views.AllDocsList = FauxtonAPI.View.extend({
     template: "addons/documents/templates/all_docs_list",
     events: {
-      "click button.all": "selectAll",
-      "click button.js-bulk-delete": "bulkDelete",
-      "click #collapse": "collapse",
       "click .all-docs-item": "toggleDocument",
       "click #js-end-results": "scrollToQuery"
     },
 
     initialize: function (options) {
+      _.bindAll(this);
       this.nestedView = options.nestedView || Views.Document;
       this.rows = {};
       this.viewList = !!options.viewList;
@@ -399,6 +434,9 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
       if (!this.viewList) {
         this.bulkDeleteDocsCollection = options.bulkDeleteDocsCollection;
       }
+
+      FauxtonAPI.Events.on("documents:bulkDelete", this.bulkDelete);
+      FauxtonAPI.Events.on("documents:selectAll", this.toggleTrash);
     },
 
     removeDocuments: function (ids) {
@@ -484,36 +522,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
       });
     },
 
-    selectAll: function (evt) {
-      var $allDocs = this.$('.all-docs'),
-          $rows = $allDocs.find('tr'),
-          $checkboxes = $allDocs.find('input:checkbox'),
-          modelsAffected,
-          docs;
-
-      $checkboxes.prop('checked', !$(evt.target).hasClass('active')).trigger('change');
-
-      if ($(evt.target).hasClass('active')) {
-        modelsAffected = _.reduce($rows, function (acc, el) {
-          var docId = $(el).attr('data-id');
-          acc.push(docId);
-          return acc;
-        }, []);
-        this.bulkDeleteDocsCollection.remove(modelsAffected);
-      } else {
-        modelsAffected = _.reduce($rows, function (acc, el) {
-          var docId = $(el).attr('data-id'),
-              rev = this.collection.get(docId).get('_rev');
-
-          acc.push({_id: docId, _rev: rev, _deleted: true});
-          return acc;
-        }, [], this);
-        this.bulkDeleteDocsCollection.add(modelsAffected);
-      }
-
-      this.toggleTrash();
-    },
-
     serialize: function() {
       return {
         viewList: this.viewList,
@@ -522,18 +530,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
       };
     },
 
-    collapse: function (event) {
-      event.preventDefault();
-
-      if (this.expandDocs) {
-        this.expandDocs = false;
-      } else {
-        this.expandDocs = true;
-      }
-
-      this.render();
-    },
-
     bulkDelete: function() {
       var that = this,
           documentsLength = this.bulkDeleteDocsCollection.length,
@@ -591,6 +587,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
         }
         this.rows[doc.id] = this.insertView("#doc-list", new this.nestedView({
           model: doc,
+          expanded: this.expandDocs,
           checked: isChecked
         }));
       }, this);
@@ -623,8 +620,11 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
       }
 
       this.toggleTrash();
+      this.setPaginationWidth();
+    },
+    setPaginationWidth: function(){
+      this.$('#documents-pagination').css('width', this.$el.outerWidth());
     },
-
     perPage: function () {
       return this.allDocsNumber.perPage();
     }

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/cd7b26f2/app/addons/fauxton/components.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/components.js b/app/addons/fauxton/components.js
index 18ea5b8..60d0c26 100644
--- a/app/addons/fauxton/components.js
+++ b/app/addons/fauxton/components.js
@@ -40,6 +40,7 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
     className: "header-left",
     template: "addons/fauxton/templates/header_left",
     initialize:function(options){
+      this.dropdownEvents = options.dropdownEvents;
       this.dropdownMenuLinks = options.dropdownMenu;
       this.crumbs = options.crumbs || [];
     },
@@ -63,6 +64,7 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
         this.dropdown = this.insertView("#header-dropdown-menu", new Components.MenuDropDown({
           icon: 'fonticon-cog',
           links: this.dropdownMenuLinks,
+          events: this.dropdownEvents
         }));
       }
     }
@@ -151,6 +153,7 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
 
 
   Components.Pagination = FauxtonAPI.View.extend({
+    className: "pagination pagination-centered",
     template: "addons/fauxton/templates/pagination",
 
     initialize: function(options) {
@@ -173,6 +176,7 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
   });
 
   Components.IndexPagination = FauxtonAPI.View.extend({
+    className: "pagination pagination-centered",
     template: "addons/fauxton/templates/index_pagination",
     events: {
       "click a": 'scrollTo',
@@ -741,6 +745,24 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
     initialize: function(options){
       this.links = options.links;
       this.icon = options.icon || "fonticon-plus-circled2";
+      _.bindAll(this);
+      this.setUpEvents();
+    },
+    setUpEvents: function(){
+      this.events = {};
+      var parentLinkObj = this.links;
+      for (var i=0; i< parentLinkObj.length; i++){
+        for (var x=0; x< parentLinkObj[i].links.length; x++){
+          if(parentLinkObj[i].links[x].trigger){
+            this.events['click .'+parentLinkObj[i].links[x].icon] = "triggerEvent";
+          }
+        }
+      }
+    },
+    triggerEvent: function(e){
+      e.preventDefault();
+      var eventTrigger = $(e.currentTarget).attr('triggerEvent');
+      FauxtonAPI.Events.trigger(eventTrigger);
     },
     update: function(links){
       this.links = links;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/cd7b26f2/app/addons/fauxton/templates/index_pagination.html
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/templates/index_pagination.html b/app/addons/fauxton/templates/index_pagination.html
index f445377..594f6fc 100644
--- a/app/addons/fauxton/templates/index_pagination.html
+++ b/app/addons/fauxton/templates/index_pagination.html
@@ -12,13 +12,11 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
-<div class="pagination pagination-centered">
-  <ul>
-    <li <% if (!canShowPreviousfn()) {%> class="disabled" <% } %>>
-       <a id="previous" href="#"> Previous </a>
-     </li>
-     <li <% if (!canShowNextfn()) {%> class="disabled" <% } %>>
-       <a id="next" href="#"> Next </a></li>
-  </ul>
-</div>
+<ul>
+  <li <% if (!canShowPreviousfn()) {%> class="disabled" <% } %>>
+     <a id="previous" href="#"> Previous </a>
+   </li>
+   <li <% if (!canShowNextfn()) {%> class="disabled" <% } %>>
+     <a id="next" href="#"> Next </a></li>
+</ul>
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/cd7b26f2/app/addons/fauxton/templates/menu_dropdown.html
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/templates/menu_dropdown.html b/app/addons/fauxton/templates/menu_dropdown.html
index d1e96af..01c4ed9 100644
--- a/app/addons/fauxton/templates/menu_dropdown.html
+++ b/app/addons/fauxton/templates/menu_dropdown.html
@@ -21,11 +21,13 @@ the License.
     <% _.each(linkSection.links, function (link) { %>
       <li>
         <a
+          <% if (link.trigger){ %> data-bypass="true" triggerEvent="<%-link.trigger%>" <%}%>
           <% if (link.icon) { %>
           class="icon <%- link.icon %>"
           <% } %>
           href="<%- link.url %>">
           <%- link.title %>
+
         </a>
       <li>
     <%});%>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/cd7b26f2/app/addons/fauxton/templates/pagination.html
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/templates/pagination.html b/app/addons/fauxton/templates/pagination.html
index 0674c22..614fd06 100644
--- a/app/addons/fauxton/templates/pagination.html
+++ b/app/addons/fauxton/templates/pagination.html
@@ -11,8 +11,6 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 License for the specific language governing permissions and limitations under
 the License.
 -->
-
-<div class="pagination pagination-centered">
   <ul>
     <% if (page > 1) { %>
     <li> <a href="<%- urlFun(page-1) %>">&laquo;</a></li>
@@ -28,4 +26,3 @@ the License.
       <li class="disabled"> <a href="<%- urlFun(page) %>">&raquo;</a></li>
     <% } %>
   </ul>
-</div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/cd7b26f2/app/addons/indexes/templates/header_right.html
----------------------------------------------------------------------
diff --git a/app/addons/indexes/templates/header_right.html b/app/addons/indexes/templates/header_right.html
index 8279bf6..38634b5 100644
--- a/app/addons/indexes/templates/header_right.html
+++ b/app/addons/indexes/templates/header_right.html
@@ -11,7 +11,7 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 License for the specific language governing permissions and limitations under
 the License.
 -->
-  <!-- Query Options-->
+  <!-- Select toggle-->
   <div id="header-select-all">
     <span class="toggle-select-menu icon fonticon-ok-circled">Select</span>
   </div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/cd7b26f2/app/addons/indexes/views.js
----------------------------------------------------------------------
diff --git a/app/addons/indexes/views.js b/app/addons/indexes/views.js
index bfe209e..9d0546e 100644
--- a/app/addons/indexes/views.js
+++ b/app/addons/indexes/views.js
@@ -40,12 +40,14 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
     className: "header-right",
     template: "addons/indexes/templates/header_right",
     initialize:function(options){
+      _.bindAll(this);
       this.database = options.database;
       this.title = options.title;
       this.api = options.api;
       this.endpoint = options.endpoint;
       this.documentation = options.documentation;
       this.eventer = _.extend({}, Backbone.Events);
+      FauxtonAPI.Events.on('advancedOptions:updateView', this.updateView);
     },
     updateApiUrl: function(api){
       //this will update the api bar when the route changes
@@ -60,8 +62,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
       }));
 
       this.advancedOptions = this.insertView('#header-query-options', new QueryOptions.AdvancedOptions({
-        updateViewFn: this.updateView,
-        previewFn: this.previewView,
         database: this.database,
         viewName: this.viewName,
         ddocName: this.model.id,

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/cd7b26f2/app/core/api.js
----------------------------------------------------------------------
diff --git a/app/core/api.js b/app/core/api.js
index 1b21dca..50a8b12 100644
--- a/app/core/api.js
+++ b/app/core/api.js
@@ -26,6 +26,11 @@ function(FauxtonAPI, Layout, Router, RouteObject, utils) {
     utils: utils
   });
 
+  //global app events
+  FauxtonAPI.Events = {};
+  _.extend(FauxtonAPI.Events, Backbone.Events);
+
+
   FauxtonAPI.navigate = function(url, _opts) {
     var options = _.extend({trigger: true}, _opts );
     FauxtonAPI.router.navigate(url,options);
@@ -47,7 +52,7 @@ function(FauxtonAPI, Layout, Router, RouteObject, utils) {
     FauxtonAPI.router.triggerRouteEvent("route:"+routeEvent, args);
   };
 
-  
+
   return FauxtonAPI;
 });
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/cd7b26f2/assets/index.underscore
----------------------------------------------------------------------
diff --git a/assets/index.underscore b/assets/index.underscore
index 396cce3..6a887b5 100644
--- a/assets/index.underscore
+++ b/assets/index.underscore
@@ -35,10 +35,6 @@
   <div role="main" id="main">
     <div id="global-notifications" class="container errors-container"></div>
     <div id="app-container"></div>
-
-    <footer>
-      <div id="footer-content"></div>
-    </footer>
   </div>
 
   <!-- Application source. -->

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/cd7b26f2/assets/less/fauxton.less
----------------------------------------------------------------------
diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less
index 6467923..29ef04f 100644
--- a/assets/less/fauxton.less
+++ b/assets/less/fauxton.less
@@ -25,6 +25,7 @@
 @import "templates.less";
 @import "headers.less";
 @import "formstyles.less";
+@import "pagination.less";
 /**
  * HTML-wide overrides
  **/

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/cd7b26f2/assets/less/headers.less
----------------------------------------------------------------------
diff --git a/assets/less/headers.less b/assets/less/headers.less
index c80a88f..e073ad7 100644
--- a/assets/less/headers.less
+++ b/assets/less/headers.less
@@ -1,3 +1,15 @@
+/*  Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ *  use this file except in compliance with the License. You may obtain a copy of
+ *  the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ *  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ *  License for the specific language governing permissions and limitations under
+ *  the License.
+ */
 .fixed-header{
   height: 60px;
   background-color: @breadcrumbBG;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/cd7b26f2/assets/less/mixins.less
----------------------------------------------------------------------
diff --git a/assets/less/mixins.less b/assets/less/mixins.less
index 63eda35..9c47456 100644
--- a/assets/less/mixins.less
+++ b/assets/less/mixins.less
@@ -1,3 +1,15 @@
+/*  Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ *  use this file except in compliance with the License. You may obtain a copy of
+ *  the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ *  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ *  License for the specific language governing permissions and limitations under
+ *  the License.
+ */
 .translate-origin(@x, @y) {
   -webkit-transform-origin: @x @y;
      -moz-transform-origin: @x @y;
@@ -7,15 +19,15 @@
 }
 
 .customTransition(@prop, @delay, @a, @b, @c, @d){
--webkit-transition: @prop, @delay cubic-bezier(@a, @b, @c, @d); 
-   -moz-transition: @prop, @delay cubic-bezier(@a, @b, @c, @d); 
-    -ms-transition: @prop, @delay cubic-bezier(@a, @b, @c, @d); 
-     -o-transition: @prop, @delay cubic-bezier(@a, @b, @c, @d); 
+-webkit-transition: @prop, @delay cubic-bezier(@a, @b, @c, @d);
+   -moz-transition: @prop, @delay cubic-bezier(@a, @b, @c, @d);
+    -ms-transition: @prop, @delay cubic-bezier(@a, @b, @c, @d);
+     -o-transition: @prop, @delay cubic-bezier(@a, @b, @c, @d);
         transition: @prop, @delay cubic-bezier(@a, @b, @c, @d); /* custom */
 
--webkit-transition-timing-function: cubic-bezier(@a, @b, @c, @d); 
-   -moz-transition-timing-function: cubic-bezier(@a, @b, @c, @d); 
-    -ms-transition-timing-function: cubic-bezier(@a, @b, @c, @d); 
-     -o-transition-timing-function: cubic-bezier(@a, @b, @c, @d); 
+-webkit-transition-timing-function: cubic-bezier(@a, @b, @c, @d);
+   -moz-transition-timing-function: cubic-bezier(@a, @b, @c, @d);
+    -ms-transition-timing-function: cubic-bezier(@a, @b, @c, @d);
+     -o-transition-timing-function: cubic-bezier(@a, @b, @c, @d);
         transition-timing-function: cubic-bezier(@a, @b, @c, @d); /* custom */
 }

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/cd7b26f2/assets/less/pagination.less
----------------------------------------------------------------------
diff --git a/assets/less/pagination.less b/assets/less/pagination.less
new file mode 100644
index 0000000..0137699
--- /dev/null
+++ b/assets/less/pagination.less
@@ -0,0 +1,21 @@
+/*  Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ *  use this file except in compliance with the License. You may obtain a copy of
+ *  the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ *  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ *  License for the specific language governing permissions and limitations under
+ *  the License.
+ */
+footer.pagination-footer {
+  position:fixed;
+  background-color:#fff;
+  bottom:0;
+  border-top:1px solid #ccc;
+  .pagination{
+    margin: 15px 0 10px;
+  }
+}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/cd7b26f2/assets/less/templates.less
----------------------------------------------------------------------
diff --git a/assets/less/templates.less b/assets/less/templates.less
index 5c877b4..062cd32 100644
--- a/assets/less/templates.less
+++ b/assets/less/templates.less
@@ -336,8 +336,10 @@
 }
 
 #dashboard-lower-content{
-  padding: 20px;
   background-color: #F1F1F1;
+  .view {
+    padding: 20px;
+  }
 }
 
 #dashboard-upper-content{
@@ -467,7 +469,9 @@
 }
 #right-content{
   .two-pane &{
-    padding: 0 20px;
+    .view {
+      padding: 0 20px;
+    }
     border-left: 1px solid #999;
     .box-shadow(-6px 0 rgba(0, 0, 0, 0.1));
   }