You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by ga...@apache.org on 2014/08/26 12:41:53 UTC

[3/8] fauxton commit: updated refs/heads/continue-secondary-index to 16049ba

buncha editor stuff
making the preview page look less butts.
Styling the view form
documents
This stuff can't be tables. Boo.
less for indexes
resize stuff
And more refactor stuff
View editor updates,
Splitting out less files
An absolute abortion happening in the resizeColumns file
style form fields and tab buttons
move around query options, init style
routes stuff
removed the breadcrumbs POC
Step one in cleaning up that gnarly save on indexes
Always show editor
fixing layout
Adding Views, testing header stuff,  fixing layout issues
Add all the indexes to the sidebar
Fix sidebar to work with different indexes
Added the apache license
changed a comment ffs.
Ripping out views into it's own addon
Setting Up Indexes addon
fix new indexes
Move Fauxton's apibar and breadcrumbs out into components
design doc ui
An insane amount of header stuff
Ripping out views into it's own addon
Add all the indexes to the sidebar
Fix sidebar to work with different indexes
Added the apache license
changed a comment ffs.
Adding Views, testing header stuff,  fixing layout issues
move around query options, init style
style form fields and tab buttons
button and search box moved to header on all docs
style query options now it is inside header
move old alldocs stuff to advancedopts
refactor query options button to header
have options properly toggle, style button
style keys well, get new checkbox inputs working
styling header and query options, add cancel button
cancel button functionality, styling
style search box
Fixes for the header
Left header is now a reusable component
Header stuff
placeholder graphic
Messed up folders
Fix design doc selector
Changes header (not styled)
Make pagination fixed to the bottom and update files with apache license
select toggle
expand and collapse


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

Branch: refs/heads/continue-secondary-index
Commit: 113615ff1ba61a024f9c3e6018a32deadcc5424a
Parents: e24a590
Author: deathbearbrown <de...@gmail.com>
Authored: Sat Aug 2 17:24:51 2014 +0200
Committer: Garren Smith <ga...@gmail.com>
Committed: Tue Aug 26 12:39:43 2014 +0200

----------------------------------------------------------------------
 .gitignore                                      |   1 +
 .../documents/assets/less/advancedOptions.less  | 136 ++++
 app/addons/documents/assets/less/changes.less   |  15 +-
 app/addons/documents/assets/less/documents.less |  17 +-
 app/addons/documents/assets/less/headers.less   |  21 +
 app/addons/documents/assets/less/sidenav.less   |  12 +
 app/addons/documents/resources.js               | 205 ------
 app/addons/documents/routes.js                  | 345 ++++-----
 .../documents/templates/advanced_options.html   | 258 +++----
 .../documents/templates/all_docs_item.html      |  32 +-
 .../documents/templates/all_docs_layout.html    |  25 -
 .../documents/templates/all_docs_list.html      |   8 +-
 app/addons/documents/templates/changes.html     |   4 +-
 .../templates/design_doc_selector.html          |  38 -
 .../documents/templates/header_alldocs.html     |  27 +
 .../documents/templates/header_doc_edit.html    |  33 +
 .../documents/templates/index_menu_item.html    |   8 +-
 .../documents/templates/index_row_docular.html  |  29 -
 .../documents/templates/index_row_tabular.html  |  25 -
 app/addons/documents/templates/view_editor.html |  91 ---
 app/addons/documents/views-advancedopts.js      |  22 +-
 app/addons/documents/views-changes.js           |  26 +-
 app/addons/documents/views-index.js             | 574 ---------------
 app/addons/documents/views-sidebar.js           |  15 +-
 app/addons/documents/views.js                   | 279 +++++---
 app/addons/fauxton/base.js                      |  80 +--
 app/addons/fauxton/components.js                | 133 +++-
 app/addons/fauxton/resizeColumns.js             |  63 +-
 app/addons/fauxton/templates/breadcrumbs.html   |   5 +-
 app/addons/fauxton/templates/header_left.html   |  17 +
 .../fauxton/templates/index_pagination.html     |  16 +-
 app/addons/fauxton/templates/menu_dropdown.html |   6 +-
 app/addons/fauxton/templates/pagination.html    |   3 -
 app/addons/indexes/assets/less/doc-item.less    |  83 +++
 app/addons/indexes/assets/less/index-form.less  |  64 ++
 app/addons/indexes/assets/less/indexes.less     |  17 +
 .../assets/less/new-index-placeholder.less      |  25 +
 app/addons/indexes/base.js                      |  74 ++
 app/addons/indexes/index-components.js          |  30 +
 app/addons/indexes/resources.js                 | 285 ++++++++
 app/addons/indexes/routes-core.js               | 129 ++++
 app/addons/indexes/routes-list.js               | 108 +++
 app/addons/indexes/routes-show.js               | 103 +++
 app/addons/indexes/routes-viewindexes.js        | 156 +++++
 app/addons/indexes/routes.js                    |  24 +
 .../indexes/templates/design_doc_selector.html  |  36 +
 app/addons/indexes/templates/header_right.html  |  22 +
 .../indexes/templates/index_row_docular.html    |  35 +
 app/addons/indexes/templates/list_editor.html   |  18 +
 .../indexes/templates/preview_screen.html       |  18 +
 app/addons/indexes/templates/show_editor.html   |  41 ++
 app/addons/indexes/templates/view_editor.html   |  80 +++
 app/addons/indexes/views.js                     | 701 +++++++++++++++++++
 app/templates/layouts/two_pane.html             |  18 +-
 app/templates/layouts/with_sidebar.html         |   8 +-
 app/templates/layouts/with_tabs.html            |   9 +-
 app/templates/layouts/with_tabs_sidebar.html    |  11 +-
 assets/img/couchWatermark.png                   | Bin 0 -> 7053 bytes
 assets/index.underscore                         |   4 -
 assets/less/fauxton.less                        | 692 +-----------------
 assets/less/formstyles.less                     | 247 +++++++
 assets/less/headers.less                        | 128 ++++
 assets/less/mixins.less                         |  28 +-
 assets/less/pagination.less                     |  21 +
 assets/less/templates.less                      | 490 +++++++++++++
 settings.json.default                           |   1 +
 66 files changed, 3966 insertions(+), 2309 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/.gitignore
----------------------------------------------------------------------
diff --git a/.gitignore b/.gitignore
index 1baaaf1..4d2ca75 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,6 +12,7 @@ app/addons/*
 !app/addons/replication
 !app/addons/contribute
 !app/addons/auth
+!app/addons/indexes
 !app/addons/exampleAuth
 !app/addons/permissions
 !app/addons/verifyinstall

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/documents/assets/less/advancedOptions.less
----------------------------------------------------------------------
diff --git a/app/addons/documents/assets/less/advancedOptions.less b/app/addons/documents/assets/less/advancedOptions.less
index 2e29d38..83b1655 100644
--- a/app/addons/documents/assets/less/advancedOptions.less
+++ b/app/addons/documents/assets/less/advancedOptions.less
@@ -1 +1,137 @@
+// 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.
+/*ALL DOCS TABLE*/
+
 /*for advanced options css*/
+.advanced-options.well {
+  display: inline-block;
+  background: none;
+  border: none;
+  box-shadow: none;
+}
+#query-options-tray {
+  display: none;
+  .border-radius(5px);
+  width: 490px;
+  position: absolute;
+  z-index: 11;
+  background-color: #333;
+  color: #fff;
+  padding: 0;
+  margin: 0;
+  .add-on {
+    padding-bottom: 10px;
+  }
+  .query-group {
+    padding: 20px;
+    border-bottom: 1px solid #555;
+  }
+  .query-group:last-child {
+    border-bottom: none;
+  }
+  .controls-group {
+    margin: 0;
+  }
+  .controls-group:last-child {
+    margin: 0;
+  }
+  form {
+    margin-bottom: 0;
+    .dropdown.inline {
+      display: inline-block;
+    }
+    input[type="text"],
+    textarea {
+      .border-radius(5px);
+      background-color: #666;
+      padding: 8px;
+      border: none;
+      color: #eee;
+      font-size: 13px;
+    }
+    .input-small {
+      width: 70px;
+      margin-left: 5px;
+    }
+    .checkbox {
+      padding: 0;
+      margin: 0;
+    }
+    .btn-success {
+      .border-radius(5px);
+    }
+    .btn-cancel, .btn-cancel:active {
+      background: none;
+      border: none;
+      box-shadow: none;
+      color: @red;
+    }
+  }
+  .toggle-btns {
+    .btn {
+      padding: 5px 5px 3px;
+      background: #727A82;
+      color: #fff;
+      font-size: 12px;
+      border: none;
+    }
+    .btn.active {
+      background: #fff;
+      color: #E33F3B;
+      box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.25) inset, 2px 2px 2px rgba(0, 0, 0, 0.15);
+    }
+    label:first-child {
+      .border-radius(5px 0 0 5px);
+    }
+    label:last-child {
+      .border-radius(0 5px 5px 0);
+      margin-left: 1px;
+    }
+  }
+  label {
+    margin-right: 0;
+    font-size: 13px;
+  }
+  div.controls-group.well{
+    height: 180px;
+    background: none;
+    border: none;
+    padding: 10px 0;
+  }
+  .row-fluid.fieldsets {
+    margin-bottom: 10px;
+    .inline {
+      width: 32%;
+    }
+    .inline:nth-child(3) {
+      text-align: right;
+      width: 34%;
+    }
+  }
+  .row-fluid.fieldsets:last-child {
+    margin-bottom: 0;
+  }
+  #skipRows {
+    margin-left: 5px;
+  }
+}
+#query-options-tray:before {
+  content: '';
+  position: absolute;
+  top: -25px;
+  left: 30px;
+  border-color: transparent transparent #333 transparent;
+  border-style: solid;
+  border-width: 15px;
+  width: 0;
+  height: 0;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/documents/assets/less/changes.less
----------------------------------------------------------------------
diff --git a/app/addons/documents/assets/less/changes.less b/app/addons/documents/assets/less/changes.less
index 96e6d19..4bd86b7 100644
--- a/app/addons/documents/assets/less/changes.less
+++ b/app/addons/documents/assets/less/changes.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.
+
 /** used in changes.html **/
 .change-box {
   margin: 0 20px 20px 20px;
@@ -7,9 +19,6 @@
   right: 15px;
 }
 
-.changes-view {
-  padding-top: 70px;
-}
 
 .change-wrapper {
   margin-top: 20px;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/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 2b29744..5a39fab 100644
--- a/app/addons/documents/assets/less/documents.less
+++ b/app/addons/documents/assets/less/documents.less
@@ -9,7 +9,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.
-/*ALL DOCS TABLE*/
+
 
 @import "../../../../../assets/less/variables.less";
 @import "../../../../../assets/less/bootstrap/variables.less";
@@ -21,11 +21,6 @@
 tr.all-docs-item {
   border: none;
   background: transparent;
-    .btn-group {
-        position: absolute;
-        right: 0;
-        top: 6px;
-    }
 }
 button.beautify {
   margin-top: 20px;
@@ -47,18 +42,13 @@ button.beautify {
 }
 
 
-#query div.controls-group.well{
-    height: 180px;
-    margin-right: 17px;
-}
-
 /** used in all_docs_list.html **/
 .view {
     table td div {
         position: relative;
     }
 
-    table td div div {
+    table td div div.btn-group {
         display: none;
         line-height: 1;
         position: absolute;
@@ -169,6 +159,3 @@ button.string-edit[disabled] {
 
 
 
-
-
-

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/documents/assets/less/headers.less
----------------------------------------------------------------------
diff --git a/app/addons/documents/assets/less/headers.less b/app/addons/documents/assets/less/headers.less
new file mode 100644
index 0000000..31faef1
--- /dev/null
+++ b/app/addons/documents/assets/less/headers.less
@@ -0,0 +1,21 @@
+.header-right {
+  .searchbox-container {
+    position: relative;
+    right: inherit;
+    height: 38px;
+    input[type="text"] {
+      .border-radius(5px);
+      font-size: 13px;
+      padding: 8px 35px 8px 10px;
+    }
+    .btn-primary {
+      background: none repeat scroll 0% 0% transparent;
+      border: none;
+      position: absolute;
+      right: 0;
+      padding-top: 7px;
+      z-index: 2;
+      color: #999;
+    }
+  }
+}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/documents/assets/less/sidenav.less
----------------------------------------------------------------------
diff --git a/app/addons/documents/assets/less/sidenav.less b/app/addons/documents/assets/less/sidenav.less
index 477af7a..fa65a23 100644
--- a/app/addons/documents/assets/less/sidenav.less
+++ b/app/addons/documents/assets/less/sidenav.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.
+
 
 .sidenav{
   .nav-list > .active > a{

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/documents/resources.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/resources.js b/app/addons/documents/resources.js
index e1df569..f95bf78 100644
--- a/app/addons/documents/resources.js
+++ b/app/addons/documents/resources.js
@@ -494,211 +494,6 @@ function(app, FauxtonAPI, PagingCollection) {
     }
   });
 
-  Documents.IndexCollection = PagingCollection.extend({
-    model: Documents.ViewRow,
-    documentation: function(){
-      return "docs";
-    },
-    initialize: function(_models, options) {
-      this.database = options.database;
-      this.params = _.extend({limit: 20, reduce: false}, options.params);
-
-      this.idxType = "_view";
-      this.view = options.view;
-      this.design = options.design.replace('_design/','');
-      this.perPageLimit = options.perPageLimit || 20;
-
-      if (!this.params.limit) {
-        this.params.limit = this.perPageLimit;
-      }
-    },
-
-    urlRef: function(context, params) {
-      var query = "";
-      
-      if (params) {
-        if (!_.isEmpty(params)) {
-          query = "?" + $.param(params);
-        } else {
-          query = '';
-        }
-      } else if (this.params) {
-        var parsedParam = Documents.QueryParams.stringify(this.params);
-        query = "?" + $.param(parsedParam);
-      }
-
-      var startOfUrl = app.host;
-      if (context === 'app') {
-        startOfUrl = 'database';
-      } else if (context === "apiurl"){
-        startOfUrl = window.location.origin;
-      }
-      var design = app.utils.safeURLName(this.design),
-          view = app.utils.safeURLName(this.view);
-
-      var url = [startOfUrl, this.database.safeID(), "_design", design, this.idxType, view];
-      return url.join("/") + query;
-    },
-
-    url: function () {
-      return this.urlRef.apply(this, arguments);
-    },
-
-    totalRows: function() {
-      if (this.params.reduce) { return "unknown_reduce";}
-
-      return this.viewMeta.total_rows || "unknown";
-    },
-
-    updateSeq: function() {
-      return this.viewMeta.update_seq || false;
-    },
-
-    simple: function () {
-      var docs = this.map(function (item) {
-        return {
-          _id: item.id,
-          key: item.get('key'),
-          value: item.get('value')
-        };
-      });
-
-      return new Documents.IndexCollection(docs, {
-        database: this.database,
-        params: this.params,
-        view: this.view,
-        design: this.design
-      });
-    },
-
-    parse: function(resp) {
-      var rows = resp.rows;
-      this.endTime = new Date().getTime();
-      this.requestDuration = (this.endTime - this.startTime);
-
-      return PagingCollection.prototype.parse.apply(this, arguments);
-    },
-
-    buildAllDocs: function(){
-      this.fetch();
-    },
-
-    // We implement our own fetch to store the starttime so we that
-    // we can get the request duration
-    fetch: function () {
-      this.startTime = new Date().getTime();
-      return PagingCollection.prototype.fetch.call(this);
-    },
-
-    allDocs: function(){
-      return this.models;
-    },
-
-    // This is taken from futon.browse.js $.timeString
-    requestDurationInString: function () {
-      var ms, sec, min, h, timeString, milliseconds = this.requestDuration;
-
-      sec = Math.floor(milliseconds / 1000.0);
-      min = Math.floor(sec / 60.0);
-      sec = (sec % 60.0).toString();
-      if (sec.length < 2) {
-         sec = "0" + sec;
-      }
-
-      h = (Math.floor(min / 60.0)).toString();
-      if (h.length < 2) {
-        h = "0" + h;
-      }
-
-      min = (min % 60.0).toString();
-      if (min.length < 2) {
-        min = "0" + min;
-      }
-
-      timeString = h + ":" + min + ":" + sec;
-
-      ms = (milliseconds % 1000.0).toString();
-      while (ms.length < 3) {
-        ms = "0" + ms;
-      }
-      timeString += "." + ms;
-
-      return timeString;
-    }
-
-  });
-
-
-  Documents.PouchIndexCollection = PagingCollection.extend({
-    model: Documents.ViewRow,
-    documentation: function(){
-      return "docs";
-    },
-    initialize: function(_models, options) {
-      this.database = options.database;
-      this.rows = options.rows;
-      this.view = options.view;
-      this.design = options.design.replace('_design/','');
-      this.params = _.extend({limit: 20, reduce: false}, options.params);
-
-      this.idxType = "_view";
-    },
-
-    url: function () {
-      return '';
-    },
-
-    simple: function () {
-      var docs = this.map(function (item) {
-        return {
-          _id: item.id,
-          key: item.get('key'),
-          value: item.get('value')
-        };
-      });
-
-      return new Documents.PouchIndexCollection(docs, {
-        database: this.database,
-        params: this.params,
-        view: this.view,
-        design: this.design,
-        rows: this.rows
-      });
-
-    },
-
-    fetch: function() {
-      var deferred = FauxtonAPI.Deferred();
-      this.reset(this.rows, {silent: true});
-
-      this.viewMeta = {
-        total_rows: this.rows.length,
-        offset: 0,
-        update_seq: false
-      };
-
-      deferred.resolve();
-      return deferred;
-    },
-
-    totalRows: function() {
-      return this.viewMeta.total_rows || "unknown";
-    },
-
-    updateSeq: function() {
-      return this.viewMeta.update_seq || false;
-    },
-
-    buildAllDocs: function(){
-      this.fetch();
-    },
-
-    allDocs: function(){
-      return this.models;
-    }
-  });
-
-
 
   return Documents;
 });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/documents/routes.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/routes.js b/app/addons/documents/routes.js
index 8eca7f6..fbdcbad 100644
--- a/app/addons/documents/routes.js
+++ b/app/addons/documents/routes.js
@@ -14,21 +14,21 @@ define([
   "app",
 
   "api",
-
+ "addons/fauxton/components",
   // Modules
   //views
   "addons/documents/views",
   "addons/documents/views-changes",
-  "addons/documents/views-index",
   "addons/documents/views-doceditor",
 
   "addons/databases/base",
-  "addons/documents/resources",
-  "addons/fauxton/components"
+  "addons/documents/resources"
 ],
 
-function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resources, Components) {
-
+function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases, Resources) {
+  /* --------------------------------------------------
+    DOCUMENT EDITOR ROUTE OBJECT
+  ----------------------------------------------------*/
   var DocEditorRouteObject = FauxtonAPI.RouteObject.extend({
     layout: "one_pane",
     disableLoader: true,
@@ -57,6 +57,7 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou
 
     crumbs: function() {
       return [
+        {"name": "", "className": "fonticon-left-open", "link": "/_all_dbs"},
         {"name": this.database.id, "link": Databases.databaseUrl(this.database)},
         {"name": this.docID, "link": "#"}
       ];
@@ -102,6 +103,10 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou
     }
   });
 
+  /* --------------------------------------------------
+    NEW DOCUMENT EDITOR ROUTE OBJECT (for new documents)
+  ----------------------------------------------------*/
+
   var NewDocEditorRouteObject = DocEditorRouteObject.extend({
     initialize: function (route, masterLayout, options) {
       var databaseName = options[0];
@@ -114,6 +119,7 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou
     },
     crumbs: function() {
       return [
+        {"name": "", "className": "fonticon-left-open", "link": "/_all_dbs"},
         {"name": this.database.id, "link": Databases.databaseUrl(this.database)},
         {"name": "New", "link": "#"}
       ];
@@ -125,6 +131,10 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou
 
   });
 
+
+  /* --------------------------------------------------
+    ALL DOCS, METADATA AND CHANGES ROUTE OBJECT
+  ----------------------------------------------------*/
   var DocumentsRouteObject = FauxtonAPI.RouteObject.extend({
     layout: "with_tabs_sidebar",
     selectedHeader: "Databases",
@@ -134,34 +144,16 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou
         route: "allDocs",
         roles: ["_reader","_writer","_admin"]
       },
-      "database/:database/_design/:ddoc/_views/:view": {
-        route: "viewFn",
-        roles: ['_admin']
-      },
-      "database/:database/_design/:ddoc/_lists/:fn": {
-        route: "tempFn",
-        roles: ['_admin']
-      },
-      "database/:database/_design/:ddoc/_filters/:fn": {
-        route: "tempFn",
-        roles: ['_admin']
-      },
-      "database/:database/_design/:ddoc/_show/:fn": {
-        route: "tempFn",
-        roles: ['_admin']
-      },
       "database/:database/_design/:ddoc/metadata": {
         route: "designDocMetadata",
         roles: ['_admin']
       },
-      "database/:database/new_view": "newViewEditor",
-      "database/:database/new_view/:designDoc": "newViewEditor",
       "database/:database/_changes(:params)": "changes"
     },
 
     events: {
       "route:updateAllDocs": "updateAllDocsFromView",
-      "route:updatePreviewDocs": "updateAllDocsFromPreview",
+      // "route:updatePreviewDocs": "updateAllDocsFromPreview",
       "route:reloadDesignDocs": "reloadDesignDocs",
       "route:paginate": "paginate",
       "route:perPageChange": "perPageChange",
@@ -171,11 +163,14 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou
 
     initialize: function (route, masterLayout, options) {
       this.databaseName = options[0];
-
+      /* --------------------------------------------------
+        Set up Resources for the current database
+          &
+        get all design docs
+      ----------------------------------------------------*/
       this.data = {
         database: new Databases.Model({id:this.databaseName})
       };
-
       this.data.designDocs = new Documents.AllDocs(null, {
         database: this.data.database,
         paging: {
@@ -189,40 +184,74 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou
         }
       });
 
+      /* --------------------------------------------------
+        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
+      }));
+
+      /* --------------------------------------------------
+        Show right header for all docs that includes:
+        query options, api bar, search and select
+      ----------------------------------------------------*/
+      this.changesHeader = true;
+      this.resetAllDocsHeader();
+
+      /* --------------------------------------------------
+        Show the sidebar
+      ----------------------------------------------------*/
+
       this.sidebar = this.setView("#sidebar-content", new Documents.Views.Sidebar({
         collection: this.data.designDocs,
         database: this.data.database
       }));
     },
-    designDocMetadata:  function(database, ddoc){
-      this.toolsView && this.toolsView.remove();
-      this.viewEditor && this.viewEditor.remove();
 
+    resetAllDocsHeader: function(){
+      if (this.changesHeader){
+        this.headerRight = this.setView("#api-navbar", new Documents.Views.RightAllDocsHeader({
+          database: this.data.database
+        }));
+        this.changesHeader = false;
+      }
+    },
+
+    designDocMetadata:  function(database, ddoc){
       var designDocInfo = new Resources.DdocInfo({_id: "_design/"+ddoc},{database: this.data.database });
 
+      /* --------------------------------------------------
+        Show design doc metadata
+      ----------------------------------------------------*/
       this.setView("#dashboard-lower-content", new Documents.Views.DdocInfo({
         ddocName: ddoc,
         model: designDocInfo
       }));
-
+      /* --------------------------------------------------
+        Set selected tab
+      ----------------------------------------------------*/
       this.sidebar.setSelectedTab(app.utils.removeSpecialCharacters(ddoc)+"_metadata");
 
-      this.crumbs = function () {
-        return [
-          {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)},
-        ];
-      };
-
-      this.apiUrl = [designDocInfo.url('apiurl'), designDocInfo.documentation() ];
-
-    },
-    tempFn:  function(databaseName, ddoc, fn){
-      this.setView("#dashboard-upper-content", new Documents.Views.temp({}));
-      this.crumbs = function () {
-        return [
-          {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)},
-        ];
-      };
+      /* --------------------------------------------------
+        Update the apiUrl
+      ----------------------------------------------------*/
+      this.headerRight.updateApiUrl([designDocInfo.url('apiurl'), designDocInfo.documentation()]);
 
     },
 
@@ -255,25 +284,37 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou
         return;
       }
 
+
+
+      /*--------------------------------------------------
+      reset header if you have to
+      ----------------------------------------------------*/
+      this.resetAllDocsHeader();
+
+      /* --------------------------------------------------
+        Build all docs
+      ----------------------------------------------------*/
+
       this.data.database.buildAllDocs(docParams);
 
+      /* --------------------------------------------------
+        Set sidebar highlight to all docs or design docs
+      ----------------------------------------------------*/
       if (docParams.startkey && docParams.startkey.indexOf('_design') > -1) {
         this.sidebar.setSelectedTab('design-docs');
       } else {
         this.sidebar.setSelectedTab('all-docs');
       }
 
-      this.viewEditor && this.viewEditor.remove();
+      /* --------------------------------------------------
+        Set page size
+      ----------------------------------------------------*/
 
       this.data.database.allDocs.paging.pageSize = this.getDocPerPageLimit(urlParams, parseInt(docParams.limit, 10));
 
-      this.viewEditor = this.setView("#dashboard-upper-content", new Documents.Views.AllDocsLayout({
-        database: this.data.database,
-        collection: this.data.database.allDocs,
-        params: urlParams,
-        docParams: docParams
-      }));
-
+      /* --------------------------------------------------
+        Show all docs
+      ----------------------------------------------------*/
       this.documentsView = this.setView("#dashboard-lower-content", new Documents.Views.AllDocsList({
         database: this.data.database,
         collection: this.data.database.allDocs,
@@ -282,63 +323,12 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou
         bulkDeleteDocsCollection: new Documents.BulkDeleteDocCollection([], {databaseId: this.data.database.get('id')})
       }));
 
-      this.crumbs = [
-        {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)}
-      ];
-
-      this.apiUrl = [this.data.database.allDocs.urlRef("apiurl", urlParams), this.data.database.allDocs.documentation() ];
+      /* --------------------------------------------------
+        update the api url
+      ----------------------------------------------------*/
+      this.headerRight.updateApiUrl([this.data.database.allDocs.urlRef("apiurl", urlParams), this.data.database.allDocs.documentation()]);
     },
 
-    viewFn: function (databaseName, ddoc, view) {
-      var params = this.createParams(),
-          urlParams = params.urlParams,
-          docParams = params.docParams,
-          decodeDdoc = decodeURIComponent(ddoc);
-
-      view = view.replace(/\?.*$/,'');
-
-      this.data.indexedDocs = new Documents.IndexCollection(null, {
-        database: this.data.database,
-        design: decodeDdoc,
-        view: view,
-        params: docParams,
-        paging: {
-          pageSize: this.getDocPerPageLimit(urlParams, parseInt(docParams.limit, 10))
-        }
-      });
-
-      this.viewEditor = this.setView("#dashboard-upper-content", new Index.ViewEditor({
-        model: this.data.database,
-        ddocs: this.data.designDocs,
-        viewName: view,
-        params: urlParams,
-        newView: false,
-        database: this.data.database,
-        ddocInfo: this.ddocInfo(decodeDdoc, this.data.designDocs, view)
-      }));
-
-      this.toolsView && this.toolsView.remove();
-
-      this.documentsView = this.createViewDocumentsView({
-        designDoc: decodeDdoc,
-        docParams: docParams,
-        urlParams: urlParams,
-        database: this.data.database,
-        indexedDocs: this.data.indexedDocs,
-        designDocs: this.data.designDocs,
-        view: view
-      });
-
-      this.sidebar.setSelectedTab(app.utils.removeSpecialCharacters(ddoc) + '_' + app.utils.removeSpecialCharacters(view));
-
-      this.crumbs = function () {
-        return [
-          {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)},
-        ];
-      };
-
-      this.apiUrl = [this.data.indexedDocs.urlRef("apiurl", urlParams), "docs"];
-    },
 
     ddocInfo: function (designDoc, designDocs, view) {
       return {
@@ -348,40 +338,18 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou
       };
     },
 
-    createViewDocumentsView: function (options) {
-
-      return this.setView("#dashboard-lower-content", new Documents.Views.AllDocsList({
-        database: options.database,
-        collection: options.indexedDocs,
-        nestedView: Documents.Views.Row,
-        viewList: true,
-        ddocInfo: this.ddocInfo(options.designDoc, options.designDocs, options.view),
-        docParams: options.docParams,
-        params: options.urlParams
-      }));
-    },
-
-    newViewEditor: function (database, designDoc) {
-      var params = app.getParams();
+    // createViewDocumentsView: function (options) {
 
-      this.toolsView && this.toolsView.remove();
-      this.documentsView && this.documentsView.remove();
-
-      this.viewEditor = this.setView("#dashboard-upper-content", new Index.ViewEditor({
-        currentddoc: "_design/"+designDoc || "",
-        ddocs: this.data.designDocs,
-        params: params,
-        database: this.data.database,
-        newView: true
-      }));
-
-      this.sidebar.setSelectedTab('new-view');
-      this.crumbs = function () {
-        return [
-          {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)},
-        ];
-      };
-    },
+    //   return this.setView("#dashboard-lower-content", new Documents.Views.AllDocsList({
+    //     database: options.database,
+    //     collection: options.indexedDocs,
+    //     nestedView: Documents.Views.Row,
+    //     viewList: true,
+    //     ddocInfo: this.ddocInfo(options.designDoc, options.designDocs, options.view),
+    //     docParams: options.docParams,
+    //     params: options.urlParams
+    //   }));
+    // },
 
     updateAllDocsFromView: function (event) {
       var view = event.view,
@@ -401,55 +369,13 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou
         collection = this.data.database.allDocs;
         collection.paging.pageSize = pageSize;
 
-      } else {
-        collection = this.data.indexedDocs = new Documents.IndexCollection(null, {
-          database: this.data.database,
-          design: ddoc,
-          view: view,
-          params: docParams,
-          paging: {
-            pageSize: pageSize
-          }
-        });
-
-        if (!this.documentsView) {
-          this.documentsView = this.createViewDocumentsView({
-            designDoc: ddoc,
-            docParams: docParams,
-            urlParams: urlParams,
-            database: this.data.database,
-            indexedDocs: this.indexedDocs,
-            designDocs: this.data.designDocs,
-            view: view
-          });
-        }
       }
 
       this.documentsView.setCollection(collection);
       this.documentsView.setParams(docParams, urlParams);
       this.documentsView.forceRender();
 
-      this.apiUrl = [collection.urlRef("apiurl", urlParams), "docs"];
-    },
-
-    updateAllDocsFromPreview: function (event) {
-      var view = event.view,
-      rows = event.rows,
-      ddoc = event.ddoc;
-
-      this.data.indexedDocs = new Documents.PouchIndexCollection(null, {
-        database: this.data.database,
-        design: ddoc,
-        view: view,
-        rows: rows
-      });
-
-      this.documentsView = this.setView("#dashboard-lower-content", new Documents.Views.AllDocsList({
-        database: this.data.database,
-        collection: this.data.indexedDocs,
-        nestedView: Documents.Views.Row,
-        viewList: true
-      }));
+      this.headerRight.updateApiUrl([collection.urlRef("apiurl", urlParams), "docs"]);
     },
 
     perPageChange: function (perPage) {
@@ -463,7 +389,7 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou
 
     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});
@@ -506,33 +432,48 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou
     changes: function () {
       var docParams = app.getParams();
       this.data.database.buildChanges(docParams);
+      /* --------------------------------------------------
+        Set changes view
+      ----------------------------------------------------*/
 
       this.changesView = this.setView("#dashboard-lower-content", new Changes.Changes({
         model: this.data.database
       }));
 
+      /* --------------------------------------------------
+        Set up right header
+      ----------------------------------------------------*/
+
       this.filterView = new Components.FilterView({
         eventNamespace: "changes"
       });
-      this.headerView = this.setView("#dashboard-upper-content", new Changes.ChangesHeader({
-        filterView: this.filterView
+
+      this.headerView = this.setView("#api-navbar", new Changes.ChangesHeader({
+        filterView: this.filterView,
+        endpoint: this.data.database.url("apiurl"),
+        documentation: this.data.database.documentation()
       }));
 
-      this.toolsView && this.toolsView.remove();
-      this.viewEditor && this.viewEditor.remove();
+      this.changesHeader = true;
 
-      this.sidebar.setSelectedTab('changes');
+      /* --------------------------------------------------
+        Set sidebar highlight
+      ----------------------------------------------------*/
 
-      this.crumbs = function () {
-        return [
-          {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)},
-          {"name": "_changes", "link": "/_changes"}
-        ];
-      };
+      this.sidebar.setSelectedTab('changes');
 
-      this.apiUrl = function() {
-        return [this.data.database.url("changes-apiurl"), this.data.database.documentation()];
-      };
+      /* --------------------------------------------------
+        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)},
+        {"name": "_changes", "link": "/_changes"}
+      ];
+      /* Set up breadcrumb header */
+      this.leftheader = this.setView("#breadcrumbs", new Components.LeftHeader({
+        crumbs: crumbs
+      }));
     },
 
     addFilter: function (filter) {
@@ -543,7 +484,7 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou
     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/113615ff/app/addons/documents/templates/advanced_options.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/advanced_options.html b/app/addons/documents/templates/advanced_options.html
index c986d4e..0502301 100644
--- a/app/addons/documents/templates/advanced_options.html
+++ b/app/addons/documents/templates/advanced_options.html
@@ -10,148 +10,172 @@ 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="errors-container"></div>
-<form class="js-view-query-update custom-inputs">
-
-<!-- tabs for choosing Keys or Start & end -->
-
-  <div class="btn-group toggle-btns row-fluid">
-    <label for="showKeys" class="drop-down btn span6">
-     By Key(s)
-    </label>
-    <label for="showStartEnd" class="drop-down btn span6">
-      Between Keys
-    </label>
-  </div>
-
-  <div class="controls-group well hide js-query-keys-wrapper">
-    <div class="row-fluid" id="js-showKeys">
-      <div class="controls controls-row">
-        <label for="keys-input" class="drop-down">A key, or an array of keys.</label>
-        <textarea id="keys-input" name="keys" class="input-xxlarge" rows="5" type="text" placeholder='Enter valid JSON; e.g., ["1234"] or ["1234","2345"]'></textarea>
-        <div id="keys-error" class="inline-block js-keys-error"></div>
-      </div>
-    </div>
-    <div class="row-fluid hide" id="js-showStartEnd">
-      <div class="controls controls-row">
-        <div class="span6">
-          <label for="startkey" class="drop-down">Start key</label>
-          <input name="startkey" id="startkey" type="text" placeholder='e.g., "1234"' disabled>
-        </div>
-        <div class="span6">
-          <label for="endkey" class="drop-down">End key</label>
-          <input id="endkey" name="endkey" type="text" placeholder='e.g., "1234"'>
-          <div class="controls controls-row checkbox inline">
-            <input id="check5" name="inclusive_end" type="checkbox" value="true" checked disabled>
-            <label for="check5">Include End Key in results</label>
-          </div>
-        </div>
+-->    
+<a id="toggle-query" href="#query-options-tray" data-bypass="true" data-toggle="tab">
+  <i class="fonticon fonticon-plus"></i>
+  Query Options
+</a>
 
+<div id="query-options-tray">
+  <form class="js-view-query-update custom-inputs">
+
+    <div class="query-group">
+      <div class="add-on">
+        API Options
+        <a class="help-link" href="<%-getDocUrl(documentation)%>" target="_blank">
+          <i class="icon-question-sign"></i>
+        </a>
       </div>
 
+      <div class="errors-container"></div>
+      
+        <div class="controls-group">
+          <div class="row-fluid fieldsets">
+
+              <div class="checkbox inline">
+                <input id="check1" name="include_docs" type="checkbox" value="true">
+                <label for="check1">Include Docs</label>
+              </div>
+
+              <% if (hasReduce) { %>
+                <div class="checkbox inline">
+                  <input id="check2" name="reduce" type="checkbox" value="true">
+                  <label for="check2">Reduce</label>
+                </div>
+         
+                <label id="select1" class="drop-down inline">
+                  Group Level
+                  <select id="select1" disabled name="group_level" class="input-small">
+                    <option value="0">None</option>
+                    <option value="1">1</option>
+                    <option value="2">2</option>
+                    <option value="3">3</option>
+                    <option value="4">4</option>
+                    <option value="5">5</option>
+                    <option value="6">6</option>
+                    <option value="7">7</option>
+                    <option value="8">8</option>
+                    <option value="9">9</option>
+                    <option value="999" selected="selected">Exact</option>
+                  </select>
+                </label>
+              <% } %>
+
+          </div>
+        </div>
     </div>
-  </div>
-
-<!-- Limit and Skip are conditional -->
-
-  <div class="controls-group">
-
-    <div class="row-fluid">
-      <div class="span6">
-        <label class="drop-down inline">
-          Limit:
-          <select name="limit" class="input-medium">
-            <option selected="selected">None</option>
-            <option>5</option>
-            <option>10</option>
-            <option>20</option>
-            <option>30</option>
-            <option>50</option>
-            <option>100</option>
-  		      <option>500</option>
-          </select>
-        </label>
+
+    <div class="query-group">
+      <div class="add-on">
+        Keys
       </div>
-      <div class="span6">
-        <label for="skipRows" class="inline drop-down">
-          # of rows to skip
-          <input name="skip" class="input-small" type="text" id="skipRows" placeholder="0">
+      <!-- tabs for choosing Keys or Start & end -->
+      <div class="btn-group toggle-btns row-fluid">
+        <label for="showKeys" class="drop-down btn">
+         By Key(s)
         </label>
-      </div>
-    </div>
-    <div class="row-fluid">
-      <div class="span6">
-        <label id="select2" class="drop-down inline">
-          Order:
-          <select id="select2" name="descending" class="input-medium">
-            <option value="false">Ascending</option>
-            <option value="true">Descending</option>
-          </select>
+        <label for="showStartEnd" class="drop-down btn">
+          Between Keys
         </label>
       </div>
-      <div class="span6">
-        <label id="select2" class="drop-down inline">
-          Docs:
-          <select id="select2" name="include_docs" class="input-medium">
-            <option value="false">Exclude</option>
-            <option value="true">Include</option>
-          </select>
-        </label>
+
+      <div class="controls-group well hide js-query-keys-wrapper">
+        <div class="row-fluid" id="js-showKeys">
+          <div class="controls controls-row">
+            <label for="keys-input" class="drop-down">A key, or an array of keys.</label>
+            <textarea id="keys-input" name="keys" class="input-xxlarge" rows="5" type="text" placeholder='Enter valid JSON; e.g., ["1234"] or ["1234","2345"]'></textarea>
+            <div id="keys-error" class="inline-block js-keys-error"></div>
+          </div>
+        </div>
+        <div class="row-fluid hide" id="js-showStartEnd">
+          <div class="controls controls-row">
+            <div>
+              <label for="startkey" class="drop-down">Start key</label>
+              <input name="startkey" id="startkey" type="text" placeholder='e.g., "1234"' disabled>
+            </div>
+            <div>
+              <label for="endkey" class="drop-down">End key</label>
+              <input id="endkey" name="endkey" type="text" placeholder='e.g., "1234"'>
+              <div class="controls controls-row checkbox inline">
+                <input id="check5" name="inclusive_end" type="checkbox" value="true" checked disabled>
+                <label for="check5">Include End Key in results</label>
+              </div>
+            </div>
+
+          </div>
+
+        </div>
       </div>
     </div>
-    <div class="row-fluid">
-      <% if (showStale) { %>
-        <div class="span6">
+
+    <div class="controls-group query-group">
+      <!-- Limit and Skip are conditional -->
+      <div class="add-on">
+        Additional Parameters
+      </div>
+
+      <div class="row-fluid fieldsets">
+        <% if (showStale) { %>
           <div class="checkbox inline">
             <input id="check7" name="stale" type="checkbox" value="ok">
             <label for="check7">Stale</label>
           </div>
-        </div>
-      <% } %>
-      <div class="span6 update-seq">
+        <% } %>
+
         <div class="checkbox inline">
           <input id="check6" name="update_seq" type="checkbox" value="true">
           <label for="check6">Update Sequence</label>
         </div>
+
+        <div class="dropdown inline">
+          <label class="drop-down">
+            Limit 
+            <select name="limit" class="input-small">
+              <option selected="selected">None</option>
+              <option>5</option>
+              <option>10</option>
+              <option>20</option>
+              <option>30</option>
+              <option>50</option>
+              <option>100</option>
+              <option>500</option>
+            </select>
+          </label>
+        </div>
+
       </div>
 
-    </div>
-  <% if (hasReduce) { %>
-    <div class="row-fluid">
-      <div class="span6">
+      <div class="row-fluid fieldsets">
         <div class="checkbox inline">
-          <input id="check2" name="reduce" type="checkbox" value="true">
-          <label for="check2">Reduce</label>
+          <input id="check3" name="descending" type="checkbox" value="true">
+          <label for="check3">Descending</label>
+        </div>
+
+        <div class="dropdown inline">
+          <label for="skipRows" class="drop-down">
+            Skip
+            <input name="skip" class="input-small" type="text" id="skipRows" placeholder="# of rows">
+          </label>
         </div>
-      </div>
-      <div class="span6">
-        <label id="select1" class="drop-down inline">
-          Group Level:
-          <select id="select1" disabled name="group_level" class="input-small">
-            <option value="0">None</option>
-            <option value="1">1</option>
-            <option value="2">2</option>
-            <option value="3">3</option>
-            <option value="4">4</option>
-            <option value="5">5</option>
-            <option value="6">6</option>
-            <option value="7">7</option>
-            <option value="8">8</option>
-            <option value="9">9</option>
-            <option value="999" selected="selected">Exact</option>
-          </select>
-        </label>
       </div>
     </div>
-  <% } %>
-  </div>
 
-  <div class="controls-group">
-    <div id="button-options" class="controls controls-row">
-      <button type="submit" class="btn btn-success">Query</button>
+    <div class="controls-group query-group">
+      <div class="add-on">
+        Query the DB
+      </div>
+      <div id="button-options" class="controls controls-row">
+        <button type="submit" class="btn btn-success">
+          <i class="fonticon-play icon"></i>
+          Query
+        </button>
+
+        <a class="btn btn-cancel">
+          Cancel
+        </a>
+      </div>
     </div>
-  </div>
-</form>
+
+  </form>
 </div>
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/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 a8ef20f..4078918 100644
--- a/app/addons/documents/templates/all_docs_item.html
+++ b/app/addons/documents/templates/all_docs_item.html
@@ -12,15 +12,23 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
-<td class="select"><input <%- checked ? 'checked="checked"' : '' %> type="checkbox" class="js-row-select"></td>
-<td>
-  <div>
-    <pre class="prettyprint"><%- doc.prettyJSON() %></pre>
-    <% if (doc.isEditable()) { %>
-      <div class="btn-group">
-        <a href="#<%= doc.url('web-index') %>" class="btn btn-small edits">Edit <%- doc.docType() %></a>
-        <button href="#" class="btn btn-small btn-danger delete" title="Delete this document."><i class="icon icon-trash"></i></button>
-      </div>
-    <% } %>
-  </div>
-</td>
+<div class="select"><input <%- checked ? 'checked="checked"' : '' %> type="checkbox" class="js-row-select"></div>
+<div class="doc-item  ">
+
+  <header>
+    _id <span class="header-id-number">"<%=docID%>"</span>
+
+  <% if (doc.isEditable()) { %>
+    <div class="btn-group">
+      <a href="#<%= doc.url('web-index') %>" class="btn btn-small edits">Edit <%- doc.docType() %></a>
+      <button href="#" class="btn btn-small btn-danger delete" title="Delete this document."><i class="icon icon-trash"></i></button>
+    </div>
+  <% } %>
+  </header>
+  <% if (expanded){ %>
+    <div class="doc-data">
+      <pre class="prettyprint"><%- doc.prettyJSON() %></pre>
+    </div>
+  <% } %>
+</div>
+<div class="clearfix"></div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/documents/templates/all_docs_layout.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/all_docs_layout.html b/app/addons/documents/templates/all_docs_layout.html
deleted file mode 100644
index e2c2479..0000000
--- a/app/addons/documents/templates/all_docs_layout.html
+++ /dev/null
@@ -1,25 +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="dashboard-upper-menu">
-	<ul class="nav nav-tabs window-resizeable" id="db-views-tabs-nav">
-	  <li><a id="toggle-query" href="#query" data-bypass="true" data-toggle="tab">
-	    <i class="fonticon fonticon-plus"></i> Query Options</a></li>
-	</ul>
-	<div class="js-search searchbox-container"></div>
-</div>
-
-<div class="tab-content">
-  <div class="tab-pane" id="query">
-  </div>
-</div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/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 a643427..4975f84 100644
--- a/app/addons/documents/templates/all_docs_list.html
+++ b/app/addons/documents/templates/all_docs_list.html
@@ -29,9 +29,9 @@ the License.
   <p>
 
   <div id="item-numbers"> </div>
-  <table class="all-docs table table-striped table-condensed">
-    <tbody></tbody>
-  </table>
+  <div id="doc-list">
+
+  </div>
 
   <% if (endOfResults) { %>
   <div class="text-center well">
@@ -40,5 +40,5 @@ the License.
     </p>
     </div>
   <% } %>
-  <div id="documents-pagination"></div>
 </div>
+<div id="documents-pagination" class="window-resizeable"></div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/documents/templates/changes.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/changes.html b/app/addons/documents/templates/changes.html
index a9bfbaf..15330c9 100644
--- a/app/addons/documents/templates/changes.html
+++ b/app/addons/documents/templates/changes.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.
 -->
-<div class="changes-view">
+
   <% _.each(changes, function (change) { %>
     <div class="change-wrapper">
       <div class="change-box">
@@ -66,4 +66,4 @@ the License.
       </div>
     </div>
   <% }); %>
-</div>
+

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/documents/templates/design_doc_selector.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/design_doc_selector.html b/app/addons/documents/templates/design_doc_selector.html
deleted file mode 100644
index d12cd64..0000000
--- a/app/addons/documents/templates/design_doc_selector.html
+++ /dev/null
@@ -1,38 +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="span3">
-  <label for="ddoc">Save to Design Document <a class="help-link" data-bypass="true" href="<%-getDocUrl('design_doc')%>" target="_blank"><i class="icon-question-sign"></i></a></label>
-  <select id="ddoc">
-    <optgroup label="Select a document">
-      <option value="new-doc">New document</option>
-
-      <% ddocs.each(function(ddoc) { %>
-      <%= ddoc.id %>
-      <%= ddocName %>
-      <% if (ddoc.id === ddocName) { %>
-      <option selected="selected" value="<%- ddoc.id %>"><%- ddoc.id %></option>
-      <% } else { %>
-      <option value="<%- ddoc.id %>"><%- ddoc.id %></option>
-      <% } %>
-      <% }); %>
-    </optgroup>
-  </select>
-</div>
-
-<div id="new-ddoc-section" class="span5" style="display:none">
-  <label class="control-label" for="new-ddoc"> _design/ </label>
-  <div class="controls">
-    <input type="text" id="new-ddoc" placeholder="newDesignDoc" />
-  </div>
-</div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/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
new file mode 100644
index 0000000..740d092
--- /dev/null
+++ b/app/addons/documents/templates/header_alldocs.html
@@ -0,0 +1,27 @@
+<!--
+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.
+-->
+
+  <!-- Select toggle -->
+  <div id="header-select-all">
+    <span class="toggle-select-menu icon fonticon-ok-circled">Select</span>
+  </div>
+  <!-- search (jump to doc)-->
+  <div id="header-search" class="js-search searchbox-container"></div>
+
+  <!-- Query Options-->
+  <div class="header-query-options">
+    <!-- Insert the query options here :) -->
+    <div id="query-options"></div>
+    <div id="header-api-bar"></div>
+  </div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/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
new file mode 100644
index 0000000..fbc213f
--- /dev/null
+++ b/app/addons/documents/templates/header_doc_edit.html
@@ -0,0 +1,33 @@
+<!--
+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/113615ff/app/addons/documents/templates/index_menu_item.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/index_menu_item.html b/app/addons/documents/templates/index_menu_item.html
index 434a02a..42ff833 100644
--- a/app/addons/documents/templates/index_menu_item.html
+++ b/app/addons/documents/templates/index_menu_item.html
@@ -14,12 +14,12 @@ the License.
 <a class="js-toggle-<%-ddocType%> accordion-header js-collapse-toggle" data-toggle="collapse"  data-target="#<%- removeSpecialCharacters(ddoc) + ddocType %>" id="nav-design-function-<%= removeSpecialCharacters(ddoc) + ddocType %>">
   <div class="fonticon-play"></div>
   <span class="<%- icon %> fonticon"></span>
-  <%- name %>
-  </a>
-  <ul class="accordion-body collapse" id="<%- removeSpecialCharacters(ddoc) + ddocType %>">
+  <%- ddocType %>
+</a>
+<ul class="accordion-body collapse" id="<%- removeSpecialCharacters(ddoc) + ddocType %>">
   <% _.each(collection, function (item, index) { %>
   <li>
-  <a data-ddoctype="<%- ddocType %>" id="<%- removeSpecialCharacters(ddoc) %>_<%- removeSpecialCharacters(index) %>" href="#/database/<%- safeURL(database) %>/_design/<%= safeURL(ddoc)%>/_<%-ddocType%>/<%= safeURL(index) %>" class="toggle-view">
+  <a data-ddoctype="<%- ddocType %>" id="<%- removeSpecialCharacters(ddoc) %>_<%- removeSpecialCharacters(index) %>" href="#/database/<%- safeURL(database) %>/_design/<%= safeURL(ddoc)%>/_<%=ddocType%>/<%= safeURL(index) %>" class="toggle-view">
     <%- index %>
   </a>
   </li>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/documents/templates/index_row_docular.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/index_row_docular.html b/app/addons/documents/templates/index_row_docular.html
deleted file mode 100644
index e8973ad..0000000
--- a/app/addons/documents/templates/index_row_docular.html
+++ /dev/null
@@ -1,29 +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.
--->
-<% if (doc.isEditable()) { %>
-  <td class="select"><input type="checkbox"></td>
-<% } %>
-<td>
-  <div>
-    <pre class="prettyprint"><%- doc.prettyJSON() %></pre>
-
-      <div class="btn-group">
-        <a href="#<%= url %>" class="btn btn-small edits">Edit <%= doc.docType() %></a>
-        <% if (doc.isEditable()) { %>
-          <button href="#" class="btn btn-small btn-danger delete" title="Delete this document."><i class="icon icon-trash"></i></button>
-        <% } %>
-      </div>
-
-  </div>
-</td>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/documents/templates/index_row_tabular.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/index_row_tabular.html b/app/addons/documents/templates/index_row_tabular.html
deleted file mode 100644
index f5f68fa..0000000
--- a/app/addons/documents/templates/index_row_tabular.html
+++ /dev/null
@@ -1,25 +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.
--->
-
-<td class="select"><input type="checkbox"></td>
-<td>
-  <div>
-    <pre class="prettyprint"><%- JSON.stringify(doc.get("key")) %></pre>
-  </div>
-</td>
-<td>
-  <div>
-    <pre class="prettyprint"><%- JSON.stringify(doc.get("value")) %></pre>
-  </div>
-</td>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/documents/templates/view_editor.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/view_editor.html b/app/addons/documents/templates/view_editor.html
index 769deed..e69de29 100644
--- a/app/addons/documents/templates/view_editor.html
+++ b/app/addons/documents/templates/view_editor.html
@@ -1,91 +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="dashboard-upper-menu">
-  <ul class="nav nav-tabs" id="db-views-tabs-nav">
-    <li class="active"> <a data-bypass="true" id="index-nav" data-toggle="tab" href="#index">
-      <i class="fonticon-wrench fonticon"></i>
-      <% if (newView) { %>Create Index <% } else { %>Edit Index <% } %></a></li>
-    <% if (!newView) { %>
-    <li><a data-bypass="true" id="query-nav" href="#query" data-toggle="tab">
-      <i class="fonticon-plus fonticon"></i> Query Options</a>
-    </li>
-    <% } %>
-  </ul>
-</div>
-  <div class="all-docs-list errors-container"></div>
-  <div class="tab-content">
-	 <div id="query-options-wrapper"></div>
-    <div class="tab-pane active" id="index">
-      <div id="define-view" class="ddoc-alert well">
-        <div class="errors-container"></div>
-        <form class="form-horizontal view-query-save">
-
-          <div class="control-group design-doc-group">
-          </div>
-
-          <div class="control-group">
-            <label for="index-name">Index name <a class="help-link" data-bypass="true" href="<%-getDocUrl('view_functions')%>" target="_blank"><i class="icon-question-sign"></i></a></label>
-            <input type="text" id="index-name" value="<%- viewName %>" placeholder="Index name" />
-          </div>
-
-
-          <div class="control-group">
-            <label for="map-function">Map function <a class="help-link" data-bypass="true" href="<%-getDocUrl('map_functions')%>" target="_blank"><i class="icon-question-sign"></i></a></label>
-            <% if (newView) { %>
-            <div class="js-editor" id="map-function"><%= langTemplates.map %></div>
-            <% } else { %>
-            <div class="js-editor" id="map-function"><%- ddoc.get('views')[viewName].map %></div>
-            <button class="beautify beautify_map btn btn-primary btn-large hide beautify-tooltip" type="button" data-toggle="tooltip" title="Reformat your minified code to make edits to it.">beautify this code</button>
-            <% } %>
-          </div>
-
-
-          <div class="control-group">
-            <label for="reduce-function-selector">Reduce (optional) <a class="help-link" data-bypass="true" href="<%-getDocUrl('reduce_functions')%>" target="_blank"><i class="icon-question-sign"></i></a></label>
-
-            <select id="reduce-function-selector">
-              <option value="" <%- !reduceFunStr ? 'selected="selected"' : '' %>>None</option>
-              <% _.each(["_sum", "_count", "_stats"], function(reduce) { %>
-              <option value="<%- reduce %>" <% if (reduce == reduceFunStr) { %>selected<% } %>><%= reduce %></option>
-              <% }) %>
-              <option value="CUSTOM" <% if (isCustomReduce) { %>selected<% } %>>Custom Reduce function</option>
-            </select>
-          </div>
-
-          <div class="control-group reduce-function">
-            <label for="reduce-function">Custom Reduce function</label>
-            <% if (newView) { %>
-            <div class="js-editor" id="reduce-function"><%- langTemplates.reduce %></div>
-            <% } else { %>
-            <div class="js-editor" id="reduce-function"><%- ddoc.get('views')[viewName].reduce %></div>
-            <button class="beautify beautify_reduce btn btn-primary btn-large hide beautify-tooltip" type="button" data-toggle="tooltip" title="Reformat your minified code to make edits to it.">beautify this code</button>
-            <% } %>
-          </div>
-
-          <div class="control-group">
-            <button class="btn btn-success save"><i class="icon fonticon-ok-circled"></i> Save &amp; Build Index</button>
-            <% if (!newView) { %>
-            <button class="btn btn-danger delete"><i class="icon fonticon-cancel-circled"></i> Delete</button>
-            <% } %>
-          </div>
-          <div class="clearfix"></div>
-        </form>
-      </div>
-    </div>
-    <div class="tab-pane" id="metadata">
-      <div id="ddoc-info" class="well"> </div>
-    </div>
-    <div class="tab-pane" id="query">
-    </div>
-  </div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/documents/views-advancedopts.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views-advancedopts.js b/app/addons/documents/views-advancedopts.js
index b2e1af5..9a00c63 100644
--- a/app/addons/documents/views-advancedopts.js
+++ b/app/addons/documents/views-advancedopts.js
@@ -39,10 +39,12 @@ function(app, FauxtonAPI, resizeColumns ) {
       "change form.js-view-query-update input": "updateFilters",
       "change form.js-view-query-update select": "updateFilters",
       "submit form.js-view-query-update": "updateView",
-      "click .toggle-btns > label":  "toggleQuery"
+      "click .toggle-btns > label":  "toggleQueryKeys",
+      "click #toggle-query": "toggleQuery",
+      "click .btn-cancel": "resetForm"
     },
 
-    toggleQuery: function(e){
+    toggleQueryKeys: function(e){
       e.preventDefault();
 
       if (this.$(e.currentTarget).hasClass("active")){
@@ -61,6 +63,21 @@ 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(){ 
+        this.selectedIndex = 0;
+      });
+    },
+
     showKeys: function(){
       this.$("#js-showKeys, .js-disabled-message").show();
       this.$('[name="startkey"],[name="endkey"],[name="inclusive_end"]').attr("disabled","true");
@@ -82,6 +99,7 @@ function(app, FauxtonAPI, resizeColumns ) {
           view.update(this.database, this.ddocName, this.viewName);
         }, this);
       }
+
     },
 
     renderOnUpdatehasReduce: function (hasReduce) {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/documents/views-changes.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views-changes.js b/app/addons/documents/views-changes.js
index fad88b9..d63a825 100644
--- a/app/addons/documents/views-changes.js
+++ b/app/addons/documents/views-changes.js
@@ -27,25 +27,27 @@ function(app, FauxtonAPI, resizeColumns, Components, prettify, ZeroClipboard) {
   var Views = {};
 
   Views.ChangesHeader = FauxtonAPI.View.extend({
-    template: "addons/documents/templates/changes_header",
+    template: "addons/documents/templates/header_alldocs",
+    initialize: function (options) {
+      this.filterView = options.filterView;
+      this.endpoint = options.endpoint;
+      this.documentation = options.documentation;
 
-    events: {
-      'click .js-toggle-filter': "toggleQuery"
-    },
-
-    toggleQuery: function (event) {
-      $('#dashboard-content').scrollTop(0);
-      this.$('#query').toggle('slow');
     },
-
-    initialize: function () {
-      this.setView(".js-filter", this.filterView);
+    beforeRender: function(){
+      this.setView("#header-search", this.filterView);
+
+      //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({
+        endpoint: this.endpoint,
+        documentation: this.documentation
+      }));
     }
   });
 
   Views.Changes = Components.FilteredView.extend({
+    className: "changes-view",
     template: "addons/documents/templates/changes",
-
     initialize: function () {
       this.listenTo(this.model.changes, 'sync', this.render);
       this.listenTo(this.model.changes, 'cachesync', this.render);