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:51 UTC

[1/8] 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 h

Repository: couchdb-fauxton
Updated Branches:
  refs/heads/continue-secondary-index [created] 16049ba5b


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/indexes/routes.js
----------------------------------------------------------------------
diff --git a/app/addons/indexes/routes.js b/app/addons/indexes/routes.js
new file mode 100644
index 0000000..90c9aac
--- /dev/null
+++ b/app/addons/indexes/routes.js
@@ -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.
+define([
+  "app",
+  "api",
+  "addons/indexes/views",
+  "addons/indexes/routes-viewindexes",
+  "addons/indexes/routes-show",
+  "addons/indexes/routes-list",
+],
+
+function (app, FauxtonAPI, Views, ViewIndex, Show, List) {
+  Views.RouteObjects = [ViewIndex, Show, List];
+  return Views;
+});

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/indexes/templates/design_doc_selector.html
----------------------------------------------------------------------
diff --git a/app/addons/indexes/templates/design_doc_selector.html b/app/addons/indexes/templates/design_doc_selector.html
new file mode 100644
index 0000000..7d58116
--- /dev/null
+++ b/app/addons/indexes/templates/design_doc_selector.html
@@ -0,0 +1,36 @@
+<!--
+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.
+-->
+<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>
+<div class="row-fluid new-ddoc">
+  <div class="select-wrapper span5">
+    <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>
+    <i></i>
+  </div>
+
+  <input type="text" id="new-ddoc" class="span7" style="display:none" placeholder="Enter a design doc name" />
+</div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/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
new file mode 100644
index 0000000..38634b5
--- /dev/null
+++ b/app/addons/indexes/templates/header_right.html
@@ -0,0 +1,22 @@
+<!--
+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>
+  <!-- Query Options-->
+  <div id="header-query-options"></div>
+  <!--right margin for api bar-->
+  <div id="header-api-bar"></div>
+

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/indexes/templates/index_row_docular.html
----------------------------------------------------------------------
diff --git a/app/addons/indexes/templates/index_row_docular.html b/app/addons/indexes/templates/index_row_docular.html
new file mode 100644
index 0000000..ba88d06
--- /dev/null
+++ b/app/addons/indexes/templates/index_row_docular.html
@@ -0,0 +1,35 @@
+<!--
+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()) { %>
+  <div class="select"><input type="checkbox"></div>
+<% } %>
+
+<div class="doc-item">
+  <header>
+    _id <span class="header-id-number">"<%=docID%>"</span>
+
+    <div class="doc-menu">
+      <a href="#<%= url %>" class="doc-menu-item icon fonticon-pencil"></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 id="view-doc-menu" class="doc-menu-item"></div>
+    </div>
+  </header>
+  <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/indexes/templates/list_editor.html
----------------------------------------------------------------------
diff --git a/app/addons/indexes/templates/list_editor.html b/app/addons/indexes/templates/list_editor.html
new file mode 100644
index 0000000..8644909
--- /dev/null
+++ b/app/addons/indexes/templates/list_editor.html
@@ -0,0 +1,18 @@
+<!--
+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.
+-->
+
+<form>
+  <label> A FORM</label>
+
+</form>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/indexes/templates/preview_screen.html
----------------------------------------------------------------------
diff --git a/app/addons/indexes/templates/preview_screen.html b/app/addons/indexes/templates/preview_screen.html
new file mode 100644
index 0000000..a7de45b
--- /dev/null
+++ b/app/addons/indexes/templates/preview_screen.html
@@ -0,0 +1,18 @@
+<!--
+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.
+-->
+
+<h3>No Index Created Yet!</h3>
+<!--
+<p> Run <a href="#/preview" class="btn btn-success save"> Preview</a> To query result</p>
+-->

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/indexes/templates/show_editor.html
----------------------------------------------------------------------
diff --git a/app/addons/indexes/templates/show_editor.html b/app/addons/indexes/templates/show_editor.html
new file mode 100644
index 0000000..9afa2bf
--- /dev/null
+++ b/app/addons/indexes/templates/show_editor.html
@@ -0,0 +1,41 @@
+<!--
+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="all-docs-list errors-container"></div>
+<div id="define-view" class="ddoc-alert index-form">
+  <div class="errors-container"></div>
+  <form class="form-horizontal view-query-save">
+    <div class="control-group">
+      <p>Views are the primary tool used for querying and reporting on CouchDB databases.</p>
+    </div>
+
+    <div class="control-group design-doc-group">
+    </div>
+
+
+    <div class="control-group">
+      <label for="index-name">Index name <a class="help-link" 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">
+      <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>=

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/indexes/templates/view_editor.html
----------------------------------------------------------------------
diff --git a/app/addons/indexes/templates/view_editor.html b/app/addons/indexes/templates/view_editor.html
new file mode 100644
index 0000000..f33d3f9
--- /dev/null
+++ b/app/addons/indexes/templates/view_editor.html
@@ -0,0 +1,80 @@
+<!--
+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="all-docs-list errors-container"></div>
+<div id="define-view" class="ddoc-alert index-form">
+  <div class="errors-container"></div>
+  <form class="form-horizontal view-query-save">
+    <div class="control-group">
+      <p>Views are the primary tool used for querying and reporting on CouchDB databases.</p>
+    </div>
+
+
+    <div class="control-group">
+      <label for="index-name">Database name</label>
+      <p><%- database %></p>
+    </div>
+
+
+    <div class="control-group design-doc-group">
+    </div>
+
+
+    <div class="control-group">
+      <label for="index-name">Index name <a class="help-link" 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" 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" 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>
+

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/indexes/views.js
----------------------------------------------------------------------
diff --git a/app/addons/indexes/views.js b/app/addons/indexes/views.js
new file mode 100644
index 0000000..bfe209e
--- /dev/null
+++ b/app/addons/indexes/views.js
@@ -0,0 +1,701 @@
+// 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.
+
+define([
+  "app",
+
+  "api",
+  "addons/fauxton/components",
+
+  "addons/documents/resources",
+  "addons/databases/resources",
+  "addons/pouchdb/base",
+  //views
+  "addons/documents/views-advancedopts",
+  // Libs
+  "addons/fauxton/resizeColumns",
+
+  // Plugins
+  "plugins/beautify",
+  "plugins/prettify"
+],
+
+function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
+         QueryOptions, resizeColumns, beautify, prettify) {
+
+  var Views = {};
+
+
+//right header
+  Views.RightHeader = FauxtonAPI.View.extend({
+    className: "header-right",
+    template: "addons/indexes/templates/header_right",
+    initialize:function(options){
+      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);
+    },
+    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);
+    },
+    beforeRender: function(){
+
+      this.apiBar = this.insertView("#header-api-bar", new Components.ApiBar({
+        endpoint: this.endpoint,
+        documentation: this.documentation
+      }));
+
+      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,
+        hasReduce: this.hasReduce(),
+        eventer: this.eventer,
+        showStale: true
+      }));
+    },
+    hasReduce: function(){
+
+    },
+    updateView: function(event, paramInfo) {
+       event.preventDefault();
+
+       var errorParams = paramInfo.errorParams,
+           params = paramInfo.params;
+
+       if (_.any(errorParams)) {
+         _.map(errorParams, function(param) {
+
+           // TODO: Where to add this error?
+           // bootstrap wants the error on a control-group div, but we're not using that
+           //$('form.view-query-update input[name='+param+'], form.view-query-update select[name='+param+']').addClass('error');
+           return FauxtonAPI.addNotification({
+             msg: "JSON Parse Error on field: "+param.name,
+             type: "error",
+             selector: ".advanced-options .errors-container",
+             clear: true
+           });
+         });
+         FauxtonAPI.addNotification({
+           msg: "Make sure that strings are properly quoted and any other values are valid JSON structures",
+           type: "warning",
+           selector: ".advanced-options .errors-container",
+           clear: true
+         });
+
+         return false;
+      }
+
+       var fragment = window.location.hash.replace(/\?.*$/, '');
+       if (!_.isEmpty(params)) {
+        fragment = fragment + '?' + $.param(params);
+       }
+
+       FauxtonAPI.navigate(fragment, {trigger: false});
+       FauxtonAPI.triggerRouteEvent('updateAllDocs', {ddoc: this.ddocID, view: this.viewName});
+    },
+
+
+    previewView: function(event, paramsInfo) {
+      event.preventDefault();
+      var that = this,
+      mapVal = this.mapVal(),
+      reduceVal = this.reduceVal(),
+      paramsArr = [];
+
+      if (paramsInfo && paramsInfo.params) {
+        paramsArr = paramsInfo.params;
+      }
+
+      var params = _.reduce(paramsArr, function (params, param) {
+        params[param.name] = param.value;
+        return params;
+      }, {reduce: false});
+
+      FauxtonAPI.addNotification({
+        msg: "<strong>Warning!</strong> Preview executes the Map/Reduce functions in your browser, and may behave differently from CouchDB.",
+        type: "warning",
+        selector: ".advanced-options .errors-container",
+        fade: true,
+        escape: false // beware of possible XSS when the message changes
+      });
+
+      var promise = FauxtonAPI.Deferred();
+
+      if (!this.database.allDocs || this.database.allDocs.params.include_docs !== true) {
+        this.database.buildAllDocs({limit: Databases.DocLimit.toString(), include_docs: true});
+        promise = this.database.allDocs.fetch();
+       } else {
+        promise.resolve();
+       }
+
+      promise.then(function () {
+        params.docs = that.database.allDocs.map(function (model) { return model.get('doc');});
+        var queryPromise = pouchdb.runViewQuery({map: mapVal, reduce: reduceVal}, params);
+        queryPromise.then(function (results) {
+          FauxtonAPI.triggerRouteEvent('updatePreviewDocs', {rows: results.rows, ddoc: that.getCurrentDesignDoc().id, view: that.viewName});
+        });
+      });
+    }
+  });
+
+
+
+
+  Views.PreviewScreen = FauxtonAPI.View.extend({
+    template: "addons/indexes/templates/preview_screen",
+    className: "watermark-logo"
+  });
+
+
+  Views.Row = FauxtonAPI.View.extend({
+    template: "addons/indexes/templates/index_row_docular",
+    className: "doc-row",
+    events: {
+      "click button.delete": "destroy"
+    },
+
+    destroy: function (event) {
+      event.preventDefault();
+
+      window.alert('Cannot delete a document generated from a view.');
+    },
+
+    beforeRender: function(){
+      var newLinks = [{
+        links: [{
+          title: 'Table',
+          icon: 'fonticon-table'
+        },{
+          title: 'JSON',
+          icon: 'fonticon-json'
+        }]
+      }];
+
+      this.insertView("#view-doc-menu", new Components.MenuDropDown({
+        icon: 'fonticon-drop-down-dots',
+        links: newLinks,
+      }));
+    },
+
+    serialize: function() {
+      return {
+        docID: this.model.get('id'),
+        doc: this.model,
+        url: this.model.url('app')
+      };
+    }
+  });
+
+
+/*
+
+  INDEX EDITORS____________________________________
+
+*/
+
+  //Index view CORE  extend this
+  Views.IndexCore = FauxtonAPI.View.extend({
+    initialize: function(options) {
+        this.newView = options.newView || false;
+        this.ddocs = options.ddocs;
+        this.params = options.params;
+        this.database = options.database;
+        this.currentDdoc = options.currentddoc;
+      if (this.newView) {
+        this.viewName = 'newView';
+      } else {
+        this.ddocID = options.ddocInfo ? options.ddocInfo.id : '';
+        this.viewName = options.viewName;
+        this.ddocInfo = new Documents.DdocInfo({_id: this.ddocID},{database: this.database});
+      }
+
+      this.showIndex = false;
+      _.bindAll(this);
+    },
+    establish: function () {
+      if (this.ddocInfo) {
+        return this.ddocInfo.fetch();
+      }
+    },
+    serialize: function() {
+      return {
+        database: this.database.get('id'),
+        ddocs: this.ddocs,
+        ddoc: this.model,
+        ddocName: this.model.id,
+        viewName: this.viewName,
+        newView: this.newView,
+        langTemplates: this.langTemplates.javascript
+      };
+    }
+  });
+
+  Views.ShowEditor = Views.IndexCore.extend({
+    template: "addons/indexes/templates/show_editor",
+    langTemplates: {
+      "javascript": {
+        map: "function(doc) {\n  emit(doc._id, 1);\n}",
+      }
+    },
+    defaultLang: "javascript"
+  });
+
+  Views.ListEditor = Views.IndexCore.extend({
+    template: "addons/indexes/templates/list_editor",
+    langTemplates: {
+      "javascript": {
+        map: "function(doc) {\n  emit(doc._id, 1);\n}",
+      }
+    },
+    defaultLang: "javascript"
+  });
+
+
+
+
+  Views.ViewEditor = FauxtonAPI.View.extend({
+    template: "addons/indexes/templates/view_editor",
+    builtinReduces: ['_sum', '_count', '_stats'],
+
+    events: {
+      "click button.save": "saveView",
+      "click button.delete": "deleteView",
+      "change select#reduce-function-selector": "updateReduce",
+      "click button.preview": "previewView",
+      "click #db-views-tabs-nav": 'toggleIndexNav',
+      "click .beautify_map":  "beautifyCode",
+      "click .beautify_reduce":  "beautifyCode"
+    },
+
+    langTemplates: {
+      "javascript": {
+        map: "function(doc) {\n  emit(doc._id, 1);\n}",
+        reduce: "function(keys, values, rereduce){\n  if (rereduce){\n    return sum(values);\n  } else {\n    return values.length;\n  }\n}"
+      }
+    },
+
+    defaultLang: "javascript",
+
+    initialize: function(options) {
+      this.newView = options.newView || false;
+      this.ddocs = options.ddocs;
+      this.params = options.params;
+      this.database = options.database;
+      this.currentDdoc = options.currentddoc;
+      if (this.newView) {
+        this.viewName = 'newView';
+      } else {
+        this.ddocID = options.ddocInfo.id;
+        this.viewName = options.viewName;
+        this.ddocInfo = new Documents.DdocInfo({_id: this.ddocID},{database: this.database});
+      }
+
+      this.showIndex = false;
+      _.bindAll(this);
+    },
+
+    establish: function () {
+      if (this.ddocInfo) {
+        return this.ddocInfo.fetch();
+      }
+    },
+
+    updateValues: function() {
+      var notification;
+      if (this.model.changedAttributes()) {
+        notification = FauxtonAPI.addNotification({
+          msg: "Document saved successfully.",
+          type: "success",
+          clear: true
+        });
+        this.editor.setValue(this.model.prettyJSON());
+      }
+    },
+
+    updateReduce: function(event) {
+      var $ele = $("#reduce-function-selector");
+      var $reduceContainer = $(".control-group.reduce-function");
+      if ($ele.val() == "CUSTOM") {
+        this.createReduceEditor();
+        this.reduceEditor.setValue(this.langTemplates.javascript.reduce);
+        $reduceContainer.show();
+      } else {
+        $reduceContainer.hide();
+      }
+    },
+
+    deleteView: function (event) {
+      event.preventDefault();
+
+      if (this.newView) { return alert('Cannot delete a new view.'); }
+      if (!confirm('Are you sure you want to delete this view?')) {return;}
+
+      var that = this,
+          promise,
+          viewName = this.$('#index-name').val(),
+          ddocName = this.$('#ddoc :selected').val(),
+          ddoc = this.getCurrentDesignDoc();
+
+      ddoc.removeDdocView(viewName);
+
+      if (ddoc.hasViews()) {
+        promise = ddoc.save();
+      } else {
+        promise = ddoc.destroy();
+      }
+
+      promise.then(function () {
+        FauxtonAPI.navigate('/database/' + that.database.safeID() + '/_all_docs?limit=' + Databases.DocLimit);
+        FauxtonAPI.triggerRouteEvent('reloadDesignDocs');
+      });
+    },
+
+    saveView: function(event) {
+      var json, notification,
+      that = this;
+
+      if (event) { event.preventDefault();}
+
+      $('#dashboard-content').scrollTop(0); //scroll up
+      //check if the code is valid & the inputs are filled out
+      if (this.hasValidCode() && this.$('#new-ddoc:visible').val() !=="") {
+        var mapVal = this.mapEditor.getValue(),
+        reduceVal = this.reduceVal(),
+        viewName = this.$('#index-name').val(),
+        ddoc = this.getCurrentDesignDoc(),
+        ddocName = ddoc.id;
+        this.viewNameChange = false;
+
+
+        if (this.viewName !== viewName) {
+          ddoc.removeDdocView(this.viewName);
+          this.viewName = viewName;
+          this.viewNameChange = true;
+        }
+
+        notification = FauxtonAPI.addNotification({
+          msg: "Saving document.",
+          selector: "#define-view .errors-container",
+          clear: true
+        });
+
+        ddoc.setDdocView(viewName, mapVal, reduceVal);
+
+        ddoc.save().then(function () {
+          //on success
+          that.afterSave(ddoc, viewName, ddocName);
+        },
+        function(xhr) {
+          //on failure
+          var responseText = JSON.parse(xhr.responseText).reason;
+          notification = FauxtonAPI.addNotification({
+            msg: "Save failed: " + responseText,
+            type: "error",
+            clear: true
+          });
+        });
+      } else {
+        //if nothing is filled out give an error message
+        var errormessage = (this.$('#new-ddoc:visible').val() ==="")?"Enter a design doc name":"Please fix the Javascript errors and try again.";
+        notification = FauxtonAPI.addNotification({
+          msg: errormessage,
+          type: "error",
+          selector: "#define-view .errors-container",
+          clear: true
+        });
+      }
+    },
+
+    afterSave: function(ddoc, viewName, ddocName){
+      var reduceVal = this.reduceVal();
+      //add ddoc to the collection
+      this.ddocs.add(ddoc);
+
+      //trigger the EditSaved function on the map editor & reduce editor
+      this.mapEditor.editSaved();
+      this.reduceEditor && this.reduceEditor.editSaved();
+
+
+      //show a notification
+      FauxtonAPI.addNotification({
+        msg: "View has been saved.",
+        type: "success",
+        selector: "#define-view .errors-container",
+        clear: true
+      });
+
+
+      //if it's new or the name changed (aka created a new doc)
+      if (this.newView || this.viewNameChange) {
+        var fragment = '/database/' + this.database.safeID() +'/' + ddoc.safeID() + '/_view/' + app.utils.safeURLName(viewName);
+
+        FauxtonAPI.navigate(fragment, {trigger: false});
+        this.newView = false;
+        this.ddocID = ddoc.safeID();
+        this.viewName = viewName;
+        this.ddocInfo = ddoc;
+        this.showIndex = true;
+        this.render();
+        FauxtonAPI.triggerRouteEvent('reloadDesignDocs', {
+          selectedTab: app.utils.removeSpecialCharacters(ddocName.replace(/_design\//,'')) + '_' + app.utils.removeSpecialCharacters(viewName)
+        });
+      }
+
+      // TODO:// this should change to a trigger because we shouldn't define advanced options in this view
+      if (this.reduceFunStr !== reduceVal) {
+        this.reduceFunStr = reduceVal;
+       // this.advancedOptions.renderOnUpdatehasReduce(this.hasReduce());
+      }
+
+      // Route Event will reload the right content
+      FauxtonAPI.triggerRouteEvent('updateAllDocs', {ddoc: ddocName, view: viewName});
+    },
+
+    getCurrentDesignDoc: function () {
+      return this.designDocSelector.getCurrentDesignDoc();
+    },
+
+    isCustomReduceEnabled: function() {
+      return $("#reduce-function-selector").val() == "CUSTOM";
+    },
+
+    mapVal: function () {
+      if (this.mapEditor) {
+        return this.mapEditor.getValue();
+      }
+
+      return this.$('#map-function').text();
+    },
+
+    reduceVal: function() {
+      var reduceOption = this.$('#reduce-function-selector :selected').val(),
+      reduceVal = "";
+
+      if (reduceOption === 'CUSTOM') {
+        if (!this.reduceEditor) { this.createReduceEditor(); }
+        reduceVal = this.reduceEditor.getValue();
+      } else if ( reduceOption !== 'NONE') {
+        reduceVal = reduceOption;
+      }
+
+      return reduceVal;
+    },
+
+
+    hasValidCode: function() {
+      return _.every(["mapEditor", "reduceEditor"], function(editorName) {
+        var editor = this[editorName];
+        if (editorName === "reduceEditor" && ! this.isCustomReduceEnabled()) {
+          return true;
+        }
+        return editor.hadValidCode();
+      }, this);
+    },
+
+
+    serialize: function() {
+      return {
+        database: this.database.get('id'),
+        ddocs: this.ddocs,
+        ddoc: this.model,
+        ddocName: this.model.id,
+        viewName: this.viewName,
+        reduceFunStr: this.reduceFunStr,
+        isCustomReduce: this.hasCustomReduce(),
+        newView: this.newView,
+        langTemplates: this.langTemplates.javascript
+      };
+    },
+
+    hasCustomReduce: function() {
+      return this.reduceFunStr && ! _.contains(this.builtinReduces, this.reduceFunStr);
+    },
+
+    hasReduce: function () {
+      return this.reduceFunStr || false;
+    },
+
+    createReduceEditor: function () {
+      if (this.reduceEditor) {
+        this.reduceEditor.remove();
+      }
+
+      this.reduceEditor = new Components.Editor({
+        editorId: "reduce-function",
+        mode: "javascript",
+        couchJSHINT: true
+      });
+      this.reduceEditor.render();
+
+      if (this.reduceEditor.getLines() === 1){
+        this.$('.beautify_reduce').removeClass("hide");
+        $('.beautify-tooltip').tooltip();
+      }
+    },
+    beforeRender: function () {
+
+      if (this.newView) {
+        this.reduceFunStr = '';
+        if (this.ddocs.length === 0) {
+          this.model = new Documents.Doc(null, {database: this.database});
+        } else {
+          this.model = this.ddocs.first().dDocModel();
+        }
+        this.ddocID = this.model.id;
+      } else {
+        var ddocDecode = decodeURIComponent(this.ddocID);
+        this.model = this.ddocs.get(this.ddocID).dDocModel();
+        this.reduceFunStr = this.model.viewHasReduce(this.viewName);
+      }
+
+      var viewFilters = FauxtonAPI.getExtensions('sidebar:viewFilters'),
+          filteredModels = this.ddocs.models,
+          designDocs = this.ddocs.clone();
+
+      if (!_.isEmpty(viewFilters)) {
+        _.each(viewFilters, function (filter) {
+          filteredModels = _.filter(filteredModels, filter);
+        });
+        designDocs.reset(filteredModels, {silent: true});
+      }
+
+      this.designDocSelector = this.setView('.design-doc-group', new Views.DesignDocSelector({
+        collection: designDocs,
+        ddocName: this.currentDdoc || this.model.id,
+        database: this.database
+      }));
+
+    },
+
+    afterRender: function() {
+      //TODO: have this happen on a trigger once we move advanced options to the header
+      // if (this.params && !this.newView) {
+      //   this.advancedOptions.updateFromParams(this.params);
+      // }
+
+      this.designDocSelector.updateDesignDoc();
+      this.showEditors();
+      this.showIndex = false;
+
+    },
+
+    showEditors: function () {
+      this.mapEditor = new Components.Editor({
+        editorId: "map-function",
+        mode: "javascript",
+        couchJSHINT: true
+      });
+      this.mapEditor.render();
+
+      if (this.hasCustomReduce()) {
+        this.createReduceEditor();
+      } else {
+        $(".control-group.reduce-function").hide();
+      }
+
+      if (this.newView) {
+        this.mapEditor.setValue(this.langTemplates[this.defaultLang].map);
+        //Use a built in view by default
+        //this.reduceEditor.setValue(this.langTemplates[this.defaultLang].reduce);
+      }
+
+      this.mapEditor.editSaved();
+      this.reduceEditor && this.reduceEditor.editSaved();
+
+      if (this.mapEditor.getLines() === 1){
+        this.$('.beautify_map').removeClass("hide");
+        $('.beautify-tooltip').tooltip();
+      }
+    },
+    beautifyCode: function(e){
+      e.preventDefault();
+      var targetEditor = $(e.currentTarget).hasClass('beautify_reduce')?this.reduceEditor:this.mapEditor;
+      var beautifiedCode = beautify(targetEditor.getValue());
+      targetEditor.setValue(beautifiedCode);
+    },
+    cleanup: function () {
+      this.mapEditor && this.mapEditor.remove();
+      this.reduceEditor && this.reduceEditor.remove();
+    }
+  });
+
+  Views.DesignDocSelector = FauxtonAPI.View.extend({
+    template: "addons/indexes/templates/design_doc_selector",
+
+    events: {
+      "change select#ddoc": "updateDesignDoc"
+    },
+
+    initialize: function (options) {
+      this.ddocName = options.ddocName;
+      this.database = options.database;
+      this.listenTo(this.collection, 'add', this.ddocAdded);
+      this.DocModel = options.DocModel || Documents.Doc;
+    },
+
+    ddocAdded: function (ddoc) {
+      this.ddocName = ddoc.id;
+      this.render();
+    },
+
+    serialize: function () {
+      return {
+        ddocName: this.ddocName,
+        ddocs: this.collection
+      };
+    },
+
+    updateDesignDoc: function () {
+      if (this.newDesignDoc()) {
+        this.$('#new-ddoc').show();
+      } else {
+        this.$('#new-ddoc').hide();
+      }
+    },
+
+    newDesignDoc: function () {
+
+      return this.$('#ddoc').val() === 'new-doc';
+    },
+
+    newDocValidation: function(){
+      return this.newDesignDoc() && this.$('#new-ddoc').val()==="";
+    },
+    getCurrentDesignDoc: function () {
+      if (this.newDesignDoc()) {
+        var doc = {
+          _id: '_design/' + this.$('#new-ddoc').val(),
+          views: {},
+          language: "javascript"
+        };
+        var ddoc = new this.DocModel(doc, {database: this.database});
+        //this.collection.add(ddoc);
+        return ddoc;
+      } else if ( !this.newDesignDoc() ) {
+        var ddocName = this.$('#ddoc').val();
+        return this.collection.find(function (ddoc) {
+          return ddoc.id === ddocName;
+        }).dDocModel();
+      }
+    }
+  });
+
+  return Views;
+});

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/templates/layouts/two_pane.html
----------------------------------------------------------------------
diff --git a/app/templates/layouts/two_pane.html b/app/templates/layouts/two_pane.html
index 031ad12..0174a5a 100644
--- a/app/templates/layouts/two_pane.html
+++ b/app/templates/layouts/two_pane.html
@@ -12,18 +12,16 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
-
 <div id="primary-navbar"></div>
-<div id="dashboard" class="container-fluid">
-  <div class="fixed-header">
-    <div id="breadcrumbs"></div>
-    <div id="api-navbar"></div>
-  </div>
+<div id="dashboard" class="container-fluid two-pane">
 
+  <header class="fixed-header row-fluid">
+    <div id="breadcrumbs" class="window-resizeable"></div>
+    <div id="api-navbar" class="window-resizeable"></div>
+  </header>
 
-  <div class="row-fluid content-area">
-    <div id="left-content" class="span6"></div>
-    <div id="right-content" class="span6"></div>
+  <div class="content-area two-pane">
+    <div id="left-content" class="span6 window-resizeable"></div>
+    <div id="right-content" class="span6 window-resizeable"></div>
   </div>
 </div>
-

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/templates/layouts/with_sidebar.html
----------------------------------------------------------------------
diff --git a/app/templates/layouts/with_sidebar.html b/app/templates/layouts/with_sidebar.html
index 4eba634..7fc64db 100644
--- a/app/templates/layouts/with_sidebar.html
+++ b/app/templates/layouts/with_sidebar.html
@@ -14,10 +14,10 @@ the License.
 
 
 <div id="primary-navbar"></div>
-<div id="dashboard" class="container-fluid">
-  <header class="fixed-header">
-    <div id="breadcrumbs"></div>
-    <div id="api-navbar"></div>
+<div id="dashboard" class="container-fluid with-sidebar">
+  <header class="fixed-header row-fluid">
+    <div id="breadcrumbs" class="sidebar"></div>
+    <div id="api-navbar" class="window-resizeable"></div>
   </header>
 
   <div class="with-sidebar content-area">

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/templates/layouts/with_tabs.html
----------------------------------------------------------------------
diff --git a/app/templates/layouts/with_tabs.html b/app/templates/layouts/with_tabs.html
index fc372ff..074385f 100644
--- a/app/templates/layouts/with_tabs.html
+++ b/app/templates/layouts/with_tabs.html
@@ -15,10 +15,11 @@ the License.
 <div id="primary-navbar"></div>
 <div id="dashboard" class="container-fluid">
 
-  <div class="fixed-header">
-    <div id="breadcrumbs"></div>
-    <div id="api-navbar"></div>
-  </div>
+  <header class="fixed-header row-fluid">
+    <div id="breadcrumbs" class="sidebar"></div>
+    <div id="api-navbar" class="window-resizeable"></div>
+  </header>
+
 
   <div class="row-fluid content-area">
   	<div id="tabs" class="row-fluid"></div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/templates/layouts/with_tabs_sidebar.html
----------------------------------------------------------------------
diff --git a/app/templates/layouts/with_tabs_sidebar.html b/app/templates/layouts/with_tabs_sidebar.html
index a0ed03d..de4bdee 100644
--- a/app/templates/layouts/with_tabs_sidebar.html
+++ b/app/templates/layouts/with_tabs_sidebar.html
@@ -13,17 +13,14 @@ the License.
 -->
 
 <div id="primary-navbar"></div>
-<div id="dashboard" class="container-fluid">
+<div id="dashboard" class="container-fluid with-sidebar">
 
-  <header class="fixed-header">
-    <div id="breadcrumbs"></div>
-    <div id="api-navbar"></div>
+  <header class="fixed-header row-fluid">
+    <div id="breadcrumbs" class="sidebar"></div>
+    <div id="api-navbar" class="window-resizeable"></div>
   </header>
 
   <div class="with-sidebar content-area">
-
-    <div id="tabs" class="row-fluid"></div>
-
     <aside id="sidebar-content" class="sidebar"></aside>
 
     <section id="dashboard-content" class="list pull-right window-resizeable">

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/assets/img/couchWatermark.png
----------------------------------------------------------------------
diff --git a/assets/img/couchWatermark.png b/assets/img/couchWatermark.png
new file mode 100644
index 0000000..cab9ce4
Binary files /dev/null and b/assets/img/couchWatermark.png differ

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/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/113615ff/assets/less/fauxton.less
----------------------------------------------------------------------
diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less
index 93afce6..29ef04f 100644
--- a/assets/less/fauxton.less
+++ b/assets/less/fauxton.less
@@ -22,7 +22,10 @@
 @import "bootstrap/mixins.less";
 @import "prettyprint.less";
 @import "icons.less";
-
+@import "templates.less";
+@import "headers.less";
+@import "formstyles.less";
+@import "pagination.less";
 /**
  * HTML-wide overrides
  **/
@@ -56,28 +59,7 @@ a:hover {
   color: @red;
 }
 
-input[type=text],
-input[type=password] {
-  .border-radius(0);
-  padding: 12px;
-  border: 1px solid #ccc;
-  height: auto;
-  font-size: 16px;
-  margin-top: 0;
-}
-
-input[type="checkbox"],
-input[type="radio"] {
-  box-sizing: border-box;
-  padding: 0;
-}
 
-input[type="file"],
-input[type="checkbox"],
-input[type="radio"],
-select {
-  margin: 0 0 1em 0;
-}
 
 
 /* bootstrap overrides */
@@ -166,109 +148,7 @@ tbody {
   background-color: #F7F7F7;
 }
 
-/*form elements and buttons*/
-.btn-group {
-  > .btn + .dropdown-toggle,
-  > .btn:first-child,
-  > .btn:last-child,
-  > .dropdown-toggle {
-    .border-radius(0);
-    background-image: none;
-    text-shadow: none;
-  }
-}
-
-.btn {
-  .box-shadow(none);
-  .border-radius(@baseBorderRadius);
-  background-image: none;
-  text-shadow: none;
-  background-repeat: no-repeat;
-  padding: 10px;
-  margin-top: 0px;
-  .icon {
-    margin-right: 0.2em;
-  }
-  &.btn-small {
-    padding: 5px 10px;
-    .icon {
-      margin-right: 0;
-      font-size: inherit;
-    }
-  }
-  &.btn-mini {
-    padding: 3px 8px;
-    .icon {
-      margin-right: 0;
-      font-size: inherit;
-    }
-  }
-}
-.btn-primary {
-  background: @redButton;
-}
-
-.btn-primary a:visited {
-  color: #fff;
-}
-
-.form-actions {
-  background: none;
-  border: none;
-}
-
-.input-append,
-.input-prepend {
-  .add-on {
-    font-size: 18px;
-    padding: 14px 5px 30px;
-  }
-  .btn .icon {
-    font-size: 21.5px;
-    margin-right: 0;
-  }
-}
-
-.row-fluid .input-append [class*="span"],
-.input-prepend input[class*="span"] {
-  width: auto;
-}
-
-.form-inline {
-  input[type=password],
-  input[type=text] {
-    width: auto;
-  }
-}
-.checkbox {
-  label {
-    display: inline-block;
-    padding-left:25px;
-  }
-}
-
-label {
-  margin-right: 15px;
-  padding-left:0;
-  display: block;
-  cursor: pointer;
-  position: relative;
-  font-size: 14px;
-  &.inline {
-    display: inline-block;
-  }
-}
-.help-block {
-  font-size: 12px;
-}
-
-a.help-link:hover {
-  text-decoration: none;
-}
 
-input[type=text].error {
-  border: red 1px solid;
-}
 
 /**
  * Fauxton-specific Bootstrap additions
@@ -297,462 +177,9 @@ table.databases {
   }
 }
 
-/* ajax loader */
-.loader {
-  background: url('../img/loader.gif') center center no-repeat;
-  min-height:  100px;
-}
-#app-container.loader{
-  min-height: 400px;
-  > *{
-    display: none;
-  }
-}
-
-#global-notifications {
-  position: fixed;
-  top: 0px;
-  display: block;
-  z-index: 100000;
-  left: @navWidth;
-  .closeMenu & {
-    left: @collapsedNavWidth;
-  }
-  width: 100%;
-}
-
-#app-container{
-  padding: 0;
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  > .row-fluid {
-    height: 100%;
-  }
-}
-
-/* Fixed side navigation */
-#primary-navbar {
-  height: 100%;
-  position: fixed;
-  width: @navWidth;
-  top: 0;
-  bottom: 0;
-  background-color: @primaryNav;
-  overflow-y: scroll;
-  .js-version {
-    color: #fff;
-    font-size: 10px;
-    padding-left: 10px;
-  }
-  .closeMenu & {
-    .js-version {
-      display: none;
-    }
-  }
-  #footer-links{
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-  }
-  #user-create-admin{
-    font-size: 12px
-  }
-  .navbar {
-     .burger{
-        .transition(all @transitionSpeed @transitionEaseType);
-        padding: 22px 0 0 18px;
-        position: fixed;
-        z-index: 100;
-        width: 64px;
-        top: 0;
-        background-color: @primaryNav;
-        width: @navWidth;
-        div{
-          .transition(all @transitionSpeed @transitionEaseType);
-          height: 4px;
-          width: 24px;
-          .border-radius(2);
-          background-color: @navBG;
-          margin: 2px 0px;
-        }
-        &:hover div{
-          background-color: @orange;
-        }
-      }
-      .bottom-container {
-	     height: 110px;
-	     position: fixed;
-	     bottom: 0;
-	     width: 220px;
-	     background: #3a2c2b;
-       .brand {
-         .box-sizing(content-box);
-         .hide-text;
-         .customTransition(left, 1s, 0.805, 0.005, 0.165, 0.985);
-         margin: 10px 0 0 0;
-         width: 200px;
-         height: 40px;
-         padding: 10px;
-         float: none;
-         background: #3a2c2b;
-         .icon {
-           .box-sizing(content-box);
-           background: url(../img/couchdb-site.png) no-repeat 0 0;
-           display: block;
-           height: 100%;
-           width: 100%;
-         }
-         .closeMenu & {
-           .icon {
-              background: url(../img/minilogo.png) no-repeat 0 0;
-            }
-            width: 45px;
-          }
-       }
-       #footer-nav-links {
-	     li {
-		   a {
-		     font-size: 12px;
-		     color: @red;
-		     padding: 12px;
-		     text-shadow: none;
-		   }
-		   &.active, &:hover{
-             a {
-               text-decoration: underline;
-             }
-           }
-		 }
-       }
-    }
-    nav {
-      margin-top: 64px;
-      .nav{
-        margin: 0;
-        li{
-          .transition(all @transitionSpeed @transitionEaseType);
-          padding: 0;
-          font-size: 16px;
-          letter-spacing: 1px;
-          line-height: 23px;
-          width: @navWidth;
-          font-weight: normal;
-          font-family: helvetica;
-          .box-sizing(border-box);
-          background-color: @navBG;
-          border-bottom:  1px solid @primaryNav;
-          min-height: 48px;
-          &.active, &:hover{
-            a{
-              .box-shadow(none);
-            }
-            background-color: @red;
-          }
-          &:hover .fonticon:before{
-            color: @white;
-          }
-          &.active .fonticon:before,
-          &:hover .fonticon:before,
-          {
-            text-shadow: @boxShadow;
-            color: @NavIconActive;
-          }
-          a{
-            padding: 12px 25px 12px 60px;
-            background-color: transparent;
-            color: #fff;
-            text-shadow: @textShadowOff;
-            &.closeMenu{
-              color: transparent;
-            }
-            .fonticon {
-              position: relative;
-              &:before {
-                position: absolute;
-                top: -5px;
-                left: -41px;
-                font-size: 24px;
-                color: @NavIcon;
-                text-shadow: @boxShadowOff;
-              }
-            }
-            .closeMenu &{
-              color: transparent;
-            }
-          }
-        }
-      }
-      ul#footer-nav-links{
-        li{
-          background-color: @primaryNav;
-          border-top: 1px solid @red;
-          border-bottom: none;
-          font-size: 12px;
-          padding: 12px;
-          min-height: 44px;
-          &.active, &:hover{
-            background-color: @linkRed;
-            border-top: 1px solid @red;
-            a{
-              color: white;
-            }
-          }
-          a{
-            color: @red;
-          }
-        }
-
-      }
-      ul#bottom-nav-links{
-        margin-top: 0;
-        padding-bottom: 70px;
-        li{
-          min-height: 55px;
-          background-color: @bottomNav;
-          &.active{
-            background-color:@linkRed;
-          }
-          &:hover{
-            background-color: @navBGHover;
-          }
-          a{
-            &.fonticon {
-              position: relative;
-              &:before {
-                top: -5px;
-                left: -40px;
-                font-size: 22px;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-
-#dashboard {
-  .box-shadow(-6px 0 rgba(0, 0, 0, 0.1));
-  border-left: 1px solid #999;
-  position: absolute;
-  left: @navWidth;
-  margin-left: 0;
-  padding-left: 0;
-  padding-right: 0;
-  background-color: @sidebarBG;
-  min-width: 600px;
-  height: 100%;
-  .closeMenu &{
-    left: @collapsedNavWidth;
-  }
-  &.one-pane{
-    min-width: 800px;
-    margin-top: 0;
-    overflow-x: hidden;
-  }
-}
-
-/*dashboard content can be in multiple templates*/
-
-#dashboard-content{
-  &.row-fluid,
-  &.window-resizeable{
-    /*remove gutter without rewriting variable*/
-    margin-left: 0px;
-  }
-  padding: 20px;
-  .with-sidebar &{
-    border-left: 1px solid #999;
-    border-right: 1px solid #999;
-    width: auto;
-    .box-shadow(-6px 0 rgba(0, 0, 0, 0.1));
-    padding: 0px;
-    bottom: 0px;
-    top: 60px;
-    position: fixed;
-    overflow-x: hidden;
-    overflow-y: auto;
-    left: @sidebarWidth+@navWidth;
-    right: 0;
-    .box-sizing(border-box);
-    .closeMenu & {
-      left: @sidebarWidth+@collapsedNavWidth;
-    }
-  }
-  > div.inner {
-    display: block;
-  }
-}
-
-.with-sidebar.content-area {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
-// .closeMenu .with-sidebar.content-area {
-//   left: 0;
-// }
-/*tools*/
-
-.row-fluid.content-area{
-  background-color: @background;
-}
-
-
-.fixed-header{
-  background-color: @breadcrumbBG;
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: @navWidth;
-  .closeMenu & {
-    left: @collapsedNavWidth;
-  }
-  border-bottom: 5px solid @breadcrumbBorder;
-  .box-shadow(0 4px 6px -2px #808080);
-  z-index: 100;
-  .one-pane & {
-    position: relative;
-    border: none;
-    .box-shadow(none);
-    left: auto;
-  }
-}
-
-#breadcrumbs {
-   .breadcrumb {
-    margin: 15px 20px;
-    margin-bottom: 0;
-    background-color: transparent;
-    padding: 0;
-    li {
-      .divider {
-        font-size: 12px;
-        color: @breadcrumbArrow;
-      }
-      &:first-child {
-        font-size: 30px;
-      }
-      color: @breadcrumbText;
-      font-size: 18px;
-      text-shadow: none;
-      &.active{
-        color: #333;
-      }
-      a{
-        color: @breadcrumbText;
-      }
-    }
-   }
-}
-
-
-/*SIDEBAR TEMPLATE STYLES*/
-.topmenu-defaults {
-  height: 70px;
-  padding: 12px 10px 0;
-  .box-sizing(border-box);
-}
-
-.dashboard-upper-menu{
-  right: 0;
-  left: @sidebarWidth+@navWidth;
-  position: fixed;
-  z-index: 11;
-  display: block;
-  .topmenu-defaults;
-  background-color: #CBCBCB;
-  .closeMenu & {
-    left: @sidebarWidth+@collapsedNavWidth;
-  }
-}
-
-#dashboard-lower-content{
-  padding: 20px;
-  background-color: #F1F1F1;
-}
-
-#dashboard-upper-content{
-  .tab-content {
-    padding-top: 70px;
-  }
-  .well{
-    padding: 20px;
-    .border-radius(0);
-    .box-shadow(none);
-  }
-}
-
-.sidenav {
-  padding: 0;
-  header {
-    width: @sidebarWidth;
-    border-bottom: 1px solid #d3d7db;
-  }
-  .nav-list{
-    .divider {
-      border: none;
-    }
-    > li > a:hover,
-    > li > a:focus{
-      background-color: @darkRed;
-      color: #fff;
-    }
-    li.active > a {
-      color: @darkRed;
-    }
-    > li > a{
-      color: @linkRed;
-      padding: 10px 13px 10px 24px;
-      border-bottom: 1px solid #d3d7db;
-      span{
-        margin-right: 8px;
-        width: 14px;
-        display: inline-block;
-        text-align: center;
-      }
-    }
-    a{
-      display: block;
-      padding: 10px 5px 5px 15px;
-      color: @subListGray;
-      .divider {
-        background: none;
-        color: #ccc;
-        padding: 0 2px;
-      }
-    }
-    .nav-header{
-      padding: 0px;
-      text-shadow: none;
-      color: #333333;
-      & > span:hover {
-        color: @red;
-      }
-    }
-  }
-}
 
-#sidebar-content {
-  position: absolute;
-  top: 60px;
-  width: @sidebarWidth;
-  left: 0;
-  background-color: @secondarySidebar;
-  > div.inner {
-    display: block;
-  }
-}
 
 
-/*ONE PANEL TEMPLATE ONLY STYLES  AKA _all_dbs */
 
 .result-tools{
   border-bottom: 1px solid #999999;
@@ -808,76 +235,7 @@ table.databases {
   }
 }
 
-.custom-inputs{
-
-  input[type=radio],
-  input[type=checkbox] {
-    display: none;
-  }
-
-  .checkbox label:before {
-    border-radius: 3px;
-  }
-
-  .controls > .radio:first-child, .controls > .checkbox:first-child {
-    padding-top: 15px;
-  }
-
-  .radio.inline, .checkbox.inline {
-    display: inline-block;
-    padding-top: 15px;
-    margin-bottom: 12px;
-    vertical-align: middle;
-  }
-
-  input[type=checkbox]:checked + label:before {
-    /*content: "\2713"; */
-    content: "\00d7";
-    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
-    font-size: 16px;
-    background-color: @red;
-    color: white;
-    text-align: center;
-    line-height: 15px;
-  }
-
-  label:before {
-    content: "";
-    display: inline-block;
-
-    width: 16px;
-    height: 16px;
-
-    margin-right: 10px;
-    position: absolute;
-    left: 0;
-    bottom: 1px;
-    background-color: #aaa;
-    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
-  }
-
-  .radio label:before {
-    border-radius: 8px;
-  }
-
-  input[type=radio]:checked + label:before {
-    content: "\2022";
-    color: #f3f3f3;
-    font-size: 30px;
-    text-align: center;
-    line-height: 18px;
-  }
-
-  label.drop-down{
-    &:before{
-    display: none;
-    }
-  }
-}
 
-form.view-query-update, form.view-query-save {
-  max-width: 100%;
-}
 
 /*documents and databases */
 .view.show{
@@ -890,11 +248,6 @@ div.spinner {
   top: 50%;
 }
 
-#api-navbar{
-  position: relative;
-  padding-right: 5px;
-}
-
 .api-url-btn {
   margin-top: 5px;
   margin-bottom: 5px;
@@ -990,39 +343,4 @@ div.spinner {
   }
 }
 
-div.add-dropdown {
-  position: absolute;
-  top: 2px;
-  right: 0px;
-  .dropdown-menu{
-    left: -110px;
-    padding-bottom: 0;
-    width: 148px;
-    min-width: 0;
-    top: 38px;
-    .box-shadow(@boxShadow);
-      &.arrow:before{
-        right: 4px;
-      }
-      a {
-        background-color: #202326;
-        color: rgba(255, 255, 255, 0.8);
-        &:hover{
-          background-color: @red;
-          color: white;
-        }
-      }
-    li a {
-      padding: 10px 15px 10px 12px;
-    }
-  }
-  .dropdown-toggle{
-    border-top: none !important;
-    text-decoration: none;
-  }
-  > a {
-    border-bottom: none;
-    text-decoration: none;
-    font-size: 16px;
-  }
-}
+

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/assets/less/formstyles.less
----------------------------------------------------------------------
diff --git a/assets/less/formstyles.less b/assets/less/formstyles.less
new file mode 100644
index 0000000..4645664
--- /dev/null
+++ b/assets/less/formstyles.less
@@ -0,0 +1,247 @@
+/*  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.
+ */
+@import "variables.less";
+
+input[type=text],
+input[type=password] {
+  .border-radius(0);
+  padding: 12px;
+  border: 1px solid #ccc;
+  height: auto;
+  font-size: 16px;
+  margin-top: 0;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+input[type="file"],
+input[type="checkbox"],
+input[type="radio"],
+select {
+  margin: 0 0 1em 0;
+}
+
+/*form elements and buttons*/
+.btn-group {
+  > .btn + .dropdown-toggle,
+  > .btn:first-child,
+  > .btn:last-child,
+  > .dropdown-toggle {
+    .border-radius(0);
+    background-image: none;
+    text-shadow: none;
+  }
+}
+
+.btn {
+  .box-shadow(none);
+  .border-radius(@baseBorderRadius);
+  background-image: none;
+  text-shadow: none;
+  background-repeat: no-repeat;
+  padding: 10px;
+  margin-top: 0px;
+  .icon {
+    margin-right: 0.2em;
+  }
+  &.btn-small {
+    padding: 5px 10px;
+    .icon {
+      margin-right: 0;
+      font-size: inherit;
+    }
+  }
+  &.btn-mini {
+    padding: 3px 8px;
+    .icon {
+      margin-right: 0;
+      font-size: inherit;
+    }
+  }
+}
+.btn-primary {
+  background: @redButton;
+}
+
+.btn-primary a:visited {
+  color: #fff;
+}
+
+.form-actions {
+  background: none;
+  border: none;
+}
+
+.input-append,
+.input-prepend {
+  .add-on {
+    font-size: 18px;
+    padding: 14px 5px 30px;
+  }
+  .btn .icon {
+    font-size: 21.5px;
+    margin-right: 0;
+  }
+}
+
+.row-fluid .input-append [class*="span"],
+.input-prepend input[class*="span"] {
+  width: auto;
+}
+
+.form-inline {
+  input[type=password],
+  input[type=text] {
+    width: auto;
+  }
+}
+.checkbox {
+  label {
+    display: inline-block;
+    padding-left:25px;
+  }
+}
+
+label {
+  margin-right: 15px;
+  padding-left:0;
+  display: block;
+  cursor: pointer;
+  position: relative;
+  font-size: 14px;
+  &.inline {
+    display: inline-block;
+  }
+}
+.help-block {
+  font-size: 12px;
+}
+
+a.help-link:hover {
+  text-decoration: none;
+}
+
+input[type=text].error {
+  border: red 1px solid;
+}
+
+form.view-query-update, form.view-query-save {
+  max-width: 100%;
+}
+.custom-inputs{
+
+  input[type=radio],
+  input[type=checkbox] {
+    display: none;
+  }
+
+  .checkbox label:before {
+    border-radius: 3px;
+  }
+
+  .controls > .radio:first-child, .controls > .checkbox:first-child {
+    padding-top: 15px;
+  }
+
+  .radio.inline, .checkbox.inline {
+    display: inline-block;
+    padding-top: 15px;
+    margin-bottom: 12px;
+    vertical-align: middle;
+  }
+
+  input[type=checkbox]:checked + label:before {
+    /*content: "\2713"; */
+    content: "\00d7";
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
+    font-size: 16px;
+    background-color: @red;
+    color: white;
+    text-align: center;
+    line-height: 15px;
+  }
+
+  label:before {
+    content: "";
+    display: inline-block;
+
+    width: 16px;
+    height: 16px;
+
+    margin-right: 10px;
+    position: absolute;
+    left: 0;
+    bottom: 1px;
+    background-color: #aaa;
+    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
+  }
+
+  .radio label:before {
+    border-radius: 8px;
+  }
+
+  input[type=radio]:checked + label:before {
+    content: "\2022";
+    color: #f3f3f3;
+    font-size: 30px;
+    text-align: center;
+    line-height: 18px;
+  }
+
+  label.drop-down{
+    &:before{
+    display: none;
+    }
+  }
+}
+
+div.add-dropdown {
+  position: absolute;
+  top: 2px;
+  right: 0px;
+  .dropdown-menu{
+    left: -110px;
+    padding-bottom: 0;
+    width: 148px;
+    min-width: 0;
+    top: 38px;
+    .box-shadow(@boxShadow);
+      &.arrow:before{
+        right: 4px;
+      }
+      a {
+        background-color: #202326;
+        color: rgba(255, 255, 255, 0.8);
+        &:hover{
+          background-color: @red;
+          color: white;
+        }
+      }
+    li a {
+      padding: 10px 15px 10px 12px;
+    }
+  }
+  .dropdown-toggle{
+    border-top: none !important;
+    text-decoration: none;
+  }
+  > a {
+    border-bottom: none;
+    text-decoration: none;
+    font-size: 16px;
+  }
+}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/assets/less/headers.less
----------------------------------------------------------------------
diff --git a/assets/less/headers.less b/assets/less/headers.less
new file mode 100644
index 0000000..e073ad7
--- /dev/null
+++ b/assets/less/headers.less
@@ -0,0 +1,128 @@
+/*  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;
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: @navWidth;
+  .closeMenu & {
+    left: @collapsedNavWidth;
+  }
+  z-index: 100;
+  .two-pane & {
+    border: none;
+  }
+  .two-pane &,
+  .with-sidebar & {
+    #api-navbar{
+      > div {
+        .bottom-shadow-border;
+        height: 60px;
+      }
+      .left-shadow-border;
+    }
+    #breadcrumbs{
+      .bottom-shadow-border;
+    }
+  }
+  .one-pane & {
+    #breadcrumbs{
+      width: 90%;
+    }
+    position: relative;
+    border: none;
+    .box-shadow(none);
+    left: auto;
+  }
+  /* these styles are for the new header*/
+  > div {
+    display:inline-block;
+    vertical-align: top;
+  }
+}
+
+#api-navbar{
+  height: 60px;
+  position: relative;
+  /* these styles are for the new header*/
+  .right-header{
+  }
+}
+
+#breadcrumbs {
+  height: 60px;
+  &.sidebar{
+    width: @sidebarWidth - 4;
+  }
+  /* these styles are for the new header*/
+  .header-left{
+    > div{
+      display:inline-block;
+    }
+  }
+  .breadcrumb {
+    margin-bottom: 0;
+    background-color: transparent;
+    padding: 0;
+    li {
+      padding:15px 10px;
+      height: 60px;
+      vertical-align: top;
+      &:first-child {
+        font-size: 30px;
+        .with-sidebar &,
+        .two-pane & {
+          padding:20px 10px;
+          font-size: 19px;
+          border-right: 1px solid #ccc;
+        }
+      }
+      color: @breadcrumbText;
+      font-size: 18px;
+      text-shadow: none;
+      &.active{
+        color: #333;
+      }
+      a{
+        text-decoration: none;
+        color: @breadcrumbText;
+      }
+    }
+  }
+}
+
+.header-left{
+  position: relative;
+  #header-dropdown-menu {
+    position: absolute;
+    right: 0;
+    top: 0;
+    a {
+      text-decoration: none;
+    }
+    .dropdown {
+      border-left: 1px solid #ccc;
+      padding: 20px;
+    }
+    .dropdown-menu {
+      left: -105px;
+      top: 56px;
+    }
+  }
+}
+
+
+
+

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/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/113615ff/assets/less/pagination.less
----------------------------------------------------------------------
diff --git a/assets/less/pagination.less b/assets/less/pagination.less
new file mode 100644
index 0000000..07e13b3
--- /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.
+ */
+#documents-pagination {
+  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/113615ff/assets/less/templates.less
----------------------------------------------------------------------
diff --git a/assets/less/templates.less b/assets/less/templates.less
new file mode 100644
index 0000000..062cd32
--- /dev/null
+++ b/assets/less/templates.less
@@ -0,0 +1,490 @@
+/*  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.
+ */
+ @import "variables.less";
+
+/* ajax loader */
+.loader {
+  background: url('../img/loader.gif') center center no-repeat;
+  min-height:  100px;
+}
+
+#global-notifications {
+  position: fixed;
+  top: 0px;
+  display: block;
+  z-index: 100000;
+  left: @navWidth;
+  .closeMenu & {
+    left: @collapsedNavWidth;
+  }
+  width: 100%;
+}
+
+/*container where the layout is injected*/
+#app-container{
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  > .row-fluid {
+    height: 100%;
+  }
+  &.loader{
+    min-height: 400px;
+    > *{
+      display: none;
+    }
+  }
+}
+
+/* Fixed side navigation */
+#primary-navbar {
+  /* hack for the scrollbar that shines through from the sidebar */
+  -webkit-transform: translate3d(0, 0, 0);
+  height: 100%;
+  position: fixed;
+  width: @navWidth;
+  top: 0;
+  bottom: 0;
+  background-color: @primaryNav;
+  overflow-y: scroll;
+  .version {
+    color: #fff;
+    font-size: 10px;
+    padding-left: 10px;
+  }
+  #footer-links{
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+  #user-create-admin{
+    font-size: 12px
+  }
+  .navbar {
+     .burger{
+        .transition(all @transitionSpeed @transitionEaseType);
+        padding: 22px 0 0 18px;
+        position: fixed;
+        top: 0;
+        z-index: 100;
+        background-color: @primaryNav;
+        width: @navWidth;
+        div{
+          .transition(all @transitionSpeed @transitionEaseType);
+          height: 4px;
+          width: 24px;
+          .border-radius(2);
+          background-color: @navBG;
+          margin: 2px 0px;
+        }
+        &:hover div{
+          background-color: @orange;
+        }
+      }
+      .bottom-container {
+       height: 110px;
+       position: fixed;
+       bottom: 0;
+       width: 220px;
+       background: #3a2c2b;
+       .brand {
+         .box-sizing(content-box);
+         .hide-text;
+         .customTransition(left, 1s, 0.805, 0.005, 0.165, 0.985);
+         margin: 10px 0 0 0;
+         width: 200px;
+         height: 40px;
+         padding: 10px;
+         float: none;
+         background: #3a2c2b;
+         .icon {
+           .box-sizing(content-box);
+           background: url(../img/couchdb-site.png) no-repeat 0 0;
+           display: block;
+           height: 100%;
+           width: 100%;
+         }
+         .closeMenu & {
+           .icon {
+              background: url(../img/minilogo.png) no-repeat 0 0;
+            }
+            width: 45px;
+          }
+       }
+       #footer-nav-links {
+       li {
+       a {
+         font-size: 12px;
+         color: @red;
+         padding: 12px;
+         text-shadow: none;
+       }
+       &.active, &:hover{
+             a {
+               text-decoration: underline;
+             }
+           }
+     }
+       }
+    }
+    nav {
+      margin-top: 64px;
+      .nav{
+        margin: 0;
+        li{
+          .transition(all @transitionSpeed @transitionEaseType);
+          padding: 0;
+          font-size: 16px;
+          letter-spacing: 1px;
+          line-height: 23px;
+          width: @navWidth;
+          font-weight: normal;
+          font-family: helvetica;
+          .box-sizing(border-box);
+          background-color: @navBG;
+          border-bottom:  1px solid @primaryNav;
+          min-height: 48px;
+          &.active, &:hover{
+            a{
+              .box-shadow(none);
+            }
+            background-color: @red;
+          }
+          &:hover .fonticon:before{
+            color: @white;
+          }
+          &.active .fonticon:before,
+          &:hover .fonticon:before,
+          {
+            text-shadow: @boxShadow;
+            color: @NavIconActive;
+          }
+          a{
+            padding: 12px 25px 12px 60px;
+            background-color: transparent;
+            color: #fff;
+            text-shadow: @textShadowOff;
+            &.closeMenu{
+              color: transparent;
+            }
+            .fonticon {
+              position: relative;
+              &:before {
+                position: absolute;
+                top: -5px;
+                left: -41px;
+                font-size: 24px;
+                color: @NavIcon;
+                text-shadow: @boxShadowOff;
+              }
+            }
+            .closeMenu &{
+              color: transparent;
+            }
+          }
+        }
+      }
+      ul#footer-nav-links{
+        li{
+          background-color: @primaryNav;
+          border-top: 1px solid @red;
+          border-bottom: none;
+          font-size: 12px;
+          padding: 12px;
+          min-height: 44px;
+          &.active, &:hover{
+            background-color: @linkRed;
+            border-top: 1px solid @red;
+            a{
+              color: white;
+            }
+          }
+          a{
+            color: @red;
+          }
+        }
+
+      }
+      ul#bottom-nav-links{
+        margin-top: 0;
+        padding-bottom: 70px;
+        li{
+          min-height: 55px;
+          background-color: @bottomNav;
+          &.active{
+            background-color:@linkRed;
+          }
+          &:hover{
+            background-color: @navBGHover;
+          }
+          a{
+            &.fonticon {
+              position: relative;
+              &:before {
+                top: -5px;
+                left: -40px;
+                font-size: 22px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+
+/*
+---------------------------------------------------
+  REUSEABLE SHADOW BORDER
+---------------------------------------------------
+*/
+
+.left-shadow-border{
+  border-left: 1px solid #999;
+  .box-shadow(-6px 0 rgba(0, 0, 0, 0.1));
+}
+
+.bottom-shadow-border{
+  border-bottom: 1px solid #999;
+  .box-shadow(0px 6px 0 0 rgba(0, 0, 0, 0.1));
+}
+
+/*
+
+  FIXED HEADER, DASHBOARD & BREADCRUMBS:
+
+  one_pane.html
+  two_pane.html
+  with_sidebar.html
+  with_tabs.html
+  with_tabs_sidebar.html
+*/
+#dashboard {
+  .left-shadow-border;
+  position: absolute;
+  left: @navWidth;
+  margin-left: 0;
+  padding-left: 0;
+  padding-right: 0;
+  background-color: @sidebarBG;
+  min-width: 600px;
+  height: 100%;
+  .closeMenu &{
+    left: @collapsedNavWidth;
+  }
+  &.one-pane{
+    min-width: 800px;
+    margin-top: 0;
+    overflow-x: hidden;
+  }
+  &.two-pane{
+    margin-top: 0;
+    overflow-x: hidden;
+  }
+}
+
+
+
+/* SIDEBAR-CONTENT & DASHBOARD-CONTENT LAYOUTS:
+  with_sidebar.html
+  with_tabs_sidebar.html
+*/
+
+#sidebar-content {
+  position: absolute;
+  top: 60px;
+  width: @sidebarWidth;
+  left: 0;
+  background-color: @secondarySidebar;
+  > div.inner {
+    display: block;
+  }
+}
+
+.topmenu-defaults {
+  height: 70px;
+  padding: 12px 10px 0;
+  .box-sizing(border-box);
+}
+
+/* USED IN TEMPLATE: with_tabs_sidebar.html */
+.dashboard-upper-menu{
+  right: 0;
+  left: @sidebarWidth+@navWidth;
+  position: fixed;
+  z-index: 11;
+  display: block;
+  .topmenu-defaults;
+  background-color: #CBCBCB;
+  .closeMenu & {
+    left: @sidebarWidth+@collapsedNavWidth;
+  }
+}
+
+#dashboard-lower-content{
+  background-color: #F1F1F1;
+  .view {
+    padding: 20px;
+  }
+}
+
+#dashboard-upper-content{
+  .tab-content {
+    padding-top: 70px;
+  }
+  .well{
+    padding: 20px;
+    .border-radius(0);
+    .box-shadow(none);
+  }
+}
+
+#dashboard-content{
+  &.row-fluid,
+  &.window-resizeable{
+    /*remove gutter without rewriting variable*/
+    margin-left: 0px;
+  }
+  padding: 20px;
+  .with-sidebar &{
+    .left-shadow-border;
+    border-right: 1px solid #999;
+    width: auto;
+    padding: 0px;
+    bottom: 0px;
+    top: 60px;
+    position: fixed;
+    overflow-x: hidden;
+    overflow-y: auto;
+    left: @sidebarWidth+@navWidth;
+    right: 0;
+    .box-sizing(border-box);
+    .closeMenu & {
+      left: @sidebarWidth+@collapsedNavWidth;
+    }
+  }
+  > div.inner {
+    display: block;
+  }
+}
+
+/*
+  Sidenav:
+  USED IN DOCUMENT ADDON & EXTERNAL ADDONS
+*/
+.sidenav {
+  padding: 0;
+  header {
+    width: @sidebarWidth;
+    border-bottom: 1px solid #d3d7db;
+  }
+  .nav-list{
+    .divider {
+      border: none;
+    }
+    > li > a:hover,
+    > li > a:focus{
+      background-color: @darkRed;
+      color: #fff;
+    }
+    li.active > a {
+      color: @darkRed;
+    }
+    > li > a{
+      color: @linkRed;
+      padding: 10px 13px 10px 24px;
+      border-bottom: 1px solid #d3d7db;
+      span{
+        margin-right: 8px;
+        width: 14px;
+        display: inline-block;
+        text-align: center;
+      }
+    }
+    a{
+      display: block;
+      padding: 10px 5px 5px 15px;
+      color: @subListGray;
+      .divider {
+        background: none;
+        color: #ccc;
+        padding: 0 2px;
+      }
+    }
+    .nav-header{
+      padding: 0px;
+      text-shadow: none;
+      color: #333333;
+      & > span:hover {
+        color: @red;
+      }
+    }
+  }
+}
+
+.row-fluid.content-area{
+  background-color: @background;
+}
+
+
+/*
+  #left-content & #right-content from template:
+  two_pane.html
+*/
+#left-content,
+#right-content{
+  .two-pane &{
+    padding: 0px;
+    bottom: 0px;
+    top: 60px;
+    margin-left:0;
+    position: fixed;
+    overflow-x: hidden;
+    overflow-y: auto;
+    .box-sizing(border-box);
+  }
+}
+
+#left-content{
+  .two-pane &{
+    left: @navWidth;
+    .closeMenu & {
+      left: @collapsedNavWidth;
+    }
+  }
+}
+#right-content{
+  .two-pane &{
+    .view {
+      padding: 0 20px;
+    }
+    border-left: 1px solid #999;
+    .box-shadow(-6px 0 rgba(0, 0, 0, 0.1));
+  }
+}
+
+
+.with-sidebar.content-area,
+.two-pane.content-area {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/settings.json.default
----------------------------------------------------------------------
diff --git a/settings.json.default b/settings.json.default
index bc5a617..d278368 100644
--- a/settings.json.default
+++ b/settings.json.default
@@ -3,6 +3,7 @@
   { "name": "fauxton" },
   { "name": "databases" },
   { "name": "documents" },
+  { "name": "indexes" },
   { "name": "pouchdb" },
   { "name": "activetasks" },
   { "name": "config" },


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

Posted by ga...@apache.org.
Secondary Index work:
Header stuff for all docs
Fixed the resizeColumns code that was the worst
fixing some padding issues in other addons
Commenting out the POC and placeholder stuff
css cleanup
All DBs header update
Fix replication links from all dbs page and header
Fixing rebase issue with the docs
Api button alignment on non all DBs pages
Config add new button was hidden
Verify install too cramped
search icon alignment
Fauxton events in one line
removed Preview from the indexes since it's borked
Fixed on On Save and Build Index
Add Unbinds to the global events on cleanup. This will fix that delete triggering the popup a bunch of times issue
padding to design doc meta data
Removed comment. Fixed case on event
error and comment clean up. All errors will be shown in the global section
remove index-components placeholder file
Removed Pouch for now
comment language update
remove unused eventer
removed table view from dropdown
removed that one index spec because it seemed like a place holder?  Fixed the paginate Spec to include the correct resources


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

Branch: refs/heads/continue-secondary-index
Commit: 16049ba5b4c148577811d2bf191a6f765d9ac205
Parents: 8129168
Author: deathbearbrown <de...@gmail.com>
Authored: Thu Aug 14 14:51:55 2014 -0400
Committer: Garren Smith <ga...@gmail.com>
Committed: Tue Aug 26 12:40:46 2014 +0200

----------------------------------------------------------------------
 app/addons/config/assets/less/config.less       |   2 +
 app/addons/config/views.js                      |  10 +-
 app/addons/databases/assets/less/databases.less |   3 +
 app/addons/databases/routes.js                  |  11 +-
 .../databases/templates/header_alldbs.html      |  26 ++++
 app/addons/databases/templates/jump_to_db.html  |  19 +++
 app/addons/databases/templates/list.html        |  38 +++---
 app/addons/databases/templates/newdatabase.html |   2 +-
 app/addons/databases/views.js                   | 118 +++++++++++++------
 app/addons/documents/routes.js                  |  13 --
 .../documents/templates/all_docs_list.html      |   2 +-
 .../documents/templates/select-doc-menu.html    |   5 +-
 app/addons/documents/templates/view_editor.html |   0
 app/addons/documents/tests/views-indexSpec.js   |  33 ------
 app/addons/documents/tests/viewsSpec.js.orig    |  57 +++++++++
 app/addons/documents/views-advancedopts.js      |   6 +-
 app/addons/documents/views-sidebar.js           |   4 +
 app/addons/documents/views.js                   |  31 +++--
 app/addons/fauxton/components.js                |   4 +
 app/addons/fauxton/resizeColumns.js             | 112 ++++++------------
 app/addons/fauxton/templates/header_left.html   |   2 +-
 app/addons/fauxton/tests/baseSpec.js            |   6 -
 app/addons/fauxton/tests/paginateSpec.js        |   7 +-
 .../assets/less/new-index-placeholder.less      |   1 +
 app/addons/indexes/base.js                      |  36 +++---
 app/addons/indexes/index-components.js          |  30 -----
 app/addons/indexes/resources.js                 |  69 -----------
 app/addons/indexes/routes-core.js               |  49 ++++----
 app/addons/indexes/routes-viewindexes.js        |   5 +-
 app/addons/indexes/templates/header_right.html  |   4 -
 app/addons/indexes/views.js                     |  60 +---------
 app/addons/permissions/views.js                 |   9 +-
 app/addons/replication/route.js                 |   5 +-
 app/addons/replication/views.js                 |  11 +-
 .../assets/less/verifyinstall.less              |   1 +
 app/addons/verifyinstall/views.js               |   3 +-
 app/core/api.js                                 |   4 +-
 app/templates/layouts/one_pane.html             |   4 +-
 app/templates/layouts/two_pane.html             |   8 +-
 assets/less/bootstrap/dropdowns.less            |   4 +-
 assets/less/bootstrap/variables.less            |   4 +-
 assets/less/fauxton.less                        |   8 ++
 assets/less/headers.less                        |  34 ++++--
 assets/less/pagination.less                     |   1 +
 assets/less/templates.less                      |  20 +---
 45 files changed, 412 insertions(+), 469 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/config/assets/less/config.less
----------------------------------------------------------------------
diff --git a/app/addons/config/assets/less/config.less b/app/addons/config/assets/less/config.less
index 24bbab8..f7b61f8 100644
--- a/app/addons/config/assets/less/config.less
+++ b/app/addons/config/assets/less/config.less
@@ -11,7 +11,9 @@
  *  the License.
  */
 .config-item {
+  margin-top:60px;
   height: 65px;
+  margin-bottom: 10px;
 
   .js-value-input {
     width: 80%;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/config/views.js
----------------------------------------------------------------------
diff --git a/app/addons/config/views.js b/app/addons/config/views.js
index 7952182..792af32 100644
--- a/app/addons/config/views.js
+++ b/app/addons/config/views.js
@@ -46,7 +46,7 @@ function(app, FauxtonAPI, Config, Components) {
 
     uniqueName: function(name){
       var section = _.findWhere(this.collection.toJSON(), {"section":this.model.get("section")});
-      
+
       return _.findWhere(section.options, {name: name});
     },
 
@@ -108,6 +108,8 @@ function(app, FauxtonAPI, Config, Components) {
   });
 
   Views.Table = FauxtonAPI.View.extend({
+    className: "view",
+
     template: "addons/config/templates/dashboard",
 
     events: {
@@ -158,8 +160,8 @@ function(app, FauxtonAPI, Config, Components) {
       "submit #js-add-section-form": "validate"
     },
     initialize: function(){
-      this.sourceArray = _.map(this.collection.toJSON(), function(item, key){ 
-        return item.section; 
+      this.sourceArray = _.map(this.collection.toJSON(), function(item, key){
+        return item.section;
       });
     },
     afterRender: function(){
@@ -200,7 +202,7 @@ function(app, FauxtonAPI, Config, Components) {
           name = this.$('input[name="name"]').val();
           var section = _.findWhere(collection.toJSON(), {"section":sectionName});
           var options = _.findWhere(section.options, {name: name});
-          
+
           return options;
     },
     isSection: function(){

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/databases/assets/less/databases.less
----------------------------------------------------------------------
diff --git a/app/addons/databases/assets/less/databases.less b/app/addons/databases/assets/less/databases.less
index b401e7d..963179e 100644
--- a/app/addons/databases/assets/less/databases.less
+++ b/app/addons/databases/assets/less/databases.less
@@ -32,3 +32,6 @@
         font-size: 19px;
     }
 }
+#new a {
+    text-decoration: none;
+}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/databases/routes.js
----------------------------------------------------------------------
diff --git a/app/addons/databases/routes.js b/app/addons/databases/routes.js
index 131abf9..a896d1e 100644
--- a/app/addons/databases/routes.js
+++ b/app/addons/databases/routes.js
@@ -36,15 +36,12 @@ function(app, FauxtonAPI, Databases, Views) {
       "_all_dbs(:params)": "allDatabases"
     },
 
-    apiUrl: function() {
-      return [this.databases.url("apiurl"), this.databases.documentation()];
-    },
-
     selectedHeader: "Databases",
 
     initialize: function() {
       this.databases = new Databases.List();
       this.deferred = FauxtonAPI.Deferred();
+
     },
 
     allDatabases: function() {
@@ -55,6 +52,12 @@ function(app, FauxtonAPI, Databases, Views) {
         collection: this.databases
       }));
 
+      this.rightHeader = this.setView("#api-navbar", new Views.RightAllDBsHeader({
+        collection: this.databases,
+        endpoint: this.databases.url("apiurl"),
+        documentation: this.databases.documentation()
+      }));
+
       this.databasesView.setPage(dbPage);
     },
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/databases/templates/header_alldbs.html
----------------------------------------------------------------------
diff --git a/app/addons/databases/templates/header_alldbs.html b/app/addons/databases/templates/header_alldbs.html
new file mode 100644
index 0000000..492b5bf
--- /dev/null
+++ b/app/addons/databases/templates/header_alldbs.html
@@ -0,0 +1,26 @@
+<!--
+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.
+-->
+
+  <!-- floats right -->
+
+  <div id="header-api-bar" class="button"></div>
+
+  <!-- add database-->
+  <div class="button" id="add-db-button">
+  </div>
+
+  <!-- search (jump to doc)-->
+  <div id="header-search" class="js-search searchbox-container"></div>
+
+

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/databases/templates/jump_to_db.html
----------------------------------------------------------------------
diff --git a/app/addons/databases/templates/jump_to_db.html b/app/addons/databases/templates/jump_to_db.html
new file mode 100644
index 0000000..6c0f03a
--- /dev/null
+++ b/app/addons/databases/templates/jump_to_db.html
@@ -0,0 +1,19 @@
+<!--
+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.
+-->
+<form id="jump-to-db" class="navbar-form pull-right database-search">
+  <div class="input-append">
+    <input type="text" class="search-autocomplete" name="search-query" placeholder="Database name" />
+    <button class="btn btn-primary" type="submit"><i class="icon icon-search"></i></button>
+  </div>
+</form>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/databases/templates/list.html
----------------------------------------------------------------------
diff --git a/app/addons/databases/templates/list.html b/app/addons/databases/templates/list.html
index 1503c32..874801c 100644
--- a/app/addons/databases/templates/list.html
+++ b/app/addons/databases/templates/list.html
@@ -11,27 +11,19 @@ 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="result-tools" style="">
-  <div id="newButton" class="pull-left"></div>
-  <form id="jump-to-db" class="navbar-form pull-right database-search">
-    <div class="input-append">
-      <input type="text" class="search-autocomplete" name="search-query" placeholder="Database name" />
-      <button class="btn btn-primary" type="submit"><i class="icon icon-search"></i></button>
-    </div>
-  </form>
-
-
+<div class="view">
+  <table class="databases table table-striped">
+    <thead>
+      <th>Name</th>
+      <th>Size</th>
+      <th># of Docs</th>
+      <th>Update Seq</th>
+      <th>Actions</th>
+    </thead>
+    <tbody>
+    </tbody>
+  </table>
 </div>
-<table class="databases table table-striped">
-  <thead>
-    <th>Name</th>
-    <th>Size</th>
-    <th># of Docs</th>
-    <th>Update Seq</th>
-    <th>Actions</th>
-  </thead>
-  <tbody>
-  </tbody>
-</table>
-<div id="database-pagination"></div>
+<footer class="pagination-footer window-resizeable-full">
+  <div id="database-pagination"></div>
+</footer>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/databases/templates/newdatabase.html
----------------------------------------------------------------------
diff --git a/app/addons/databases/templates/newdatabase.html b/app/addons/databases/templates/newdatabase.html
index 1376ad5..2b25aac 100644
--- a/app/addons/databases/templates/newdatabase.html
+++ b/app/addons/databases/templates/newdatabase.html
@@ -12,5 +12,5 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
-<a class="btn btn-primary new" id="new"><i class="icon fonticon-new-database"></i> Add New Database</a>
+<a id="new"><i class="icon fonticon-new-database"></i> Add New Database</a>
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/databases/views.js
----------------------------------------------------------------------
diff --git a/app/addons/databases/views.js b/app/addons/databases/views.js
index 5629cb1..a0fe6f0 100644
--- a/app/addons/databases/views.js
+++ b/app/addons/databases/views.js
@@ -21,6 +21,38 @@ define([
 function(app, Components, FauxtonAPI, Databases) {
   var Views = {};
 
+  Views.RightAllDBsHeader = FauxtonAPI.View.extend({
+    className: "header-right",
+    template: "addons/databases/templates/header_alldbs",
+    initialize: function(options){
+      //adding the database to the object
+      _.bindAll(this);
+      this.endpoint = options.endpoint;
+    },
+
+    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);
+    },
+
+    beforeRender:function(){
+      this.headerSearch = this.insertView("#header-search", new Views.JumpToDB({
+        collection: this.collection
+      }));
+
+      this.newbutton = this.insertView("#add-db-button", new Views.NewDatabaseButton({
+        collection: this.collection
+      }));
+
+
+      //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
+      }));
+    }
+  });
+
   Views.Item = FauxtonAPI.View.extend({
     template: "addons/databases/templates/item",
     tagName: "tr",
@@ -36,25 +68,16 @@ function(app, Components, FauxtonAPI, Databases) {
     }
   });
 
-  Views.List = FauxtonAPI.View.extend({
-    dbLimit: 20,
-    perPage: 20,
-    template: "addons/databases/templates/list",
+
+  Views.JumpToDB = FauxtonAPI.View.extend({
+    template: "addons/databases/templates/jump_to_db",
     events: {
-      "click button.all": "selectAll",
       "submit form#jump-to-db": "switchDatabase"
     },
-
     initialize: function(options) {
       var params = app.getParams();
       this.page = params.page ? parseInt(params.page, 10) : 1;
     },
-
-    serialize: function() {
-      return {
-        databases: this.collection
-      };
-    },
     establish: function(){
       var currentDBs = this.paginated();
       var deferred = FauxtonAPI.Deferred();
@@ -90,6 +113,55 @@ function(app, Components, FauxtonAPI, Databases) {
         });
       }
     },
+    afterRender: function() {
+      var that = this,
+          AllDBsArray = _.map(this.collection.toJSON(), function(item, key){
+            return item.name;
+          });
+
+      this.dbSearchTypeahead = new Components.Typeahead({
+        el: "input.search-autocomplete",
+        source: AllDBsArray,
+        onUpdate: function (item) {
+          that.switchDatabase(null, item);
+        }
+      });
+      this.dbSearchTypeahead.render();
+      this.$el.find(".js-db-graveyard").tooltip();
+    }
+  });
+
+  Views.List = FauxtonAPI.View.extend({
+    dbLimit: 20,
+    perPage: 20,
+    template: "addons/databases/templates/list",
+    events: {
+      "click button.all": "selectAll"
+    },
+
+    initialize: function(options) {
+      var params = app.getParams();
+      this.page = params.page ? parseInt(params.page, 10) : 1;
+    },
+
+    serialize: function() {
+      return {
+        databases: this.collection
+      };
+    },
+    establish: function(){
+      var currentDBs = this.paginated();
+      var deferred = FauxtonAPI.Deferred();
+
+      FauxtonAPI.when(currentDBs.map(function(database) {
+        return database.status.fetchOnce();
+      })).always(function(resp) {
+        //make this always so that even if a user is not allowed access to a database
+        //they will still see a list of all databases
+        deferred.resolve();
+      });
+      return [deferred];
+    },
 
     paginated: function() {
       var start = (this.page - 1) * this.perPage;
@@ -99,10 +171,6 @@ function(app, Components, FauxtonAPI, Databases) {
 
     beforeRender: function() {
 
-      this.insertView("#newButton", new Views.NewDatabaseButton({
-        collection: this.collection
-      }));
-
       _.each(this.paginated(), function(database) {
         this.insertView("table.databases tbody", new Views.Item({
           model: database
@@ -122,24 +190,6 @@ function(app, Components, FauxtonAPI, Databases) {
     setPage: function(page) {
       this.page = page || 1;
     },
-
-    afterRender: function() {
-      var that = this,
-          AllDBsArray = _.map(this.collection.toJSON(), function(item, key){
-            return item.name;
-          });
-
-      this.dbSearchTypeahead = new Components.Typeahead({
-        el: "input.search-autocomplete",
-        source: AllDBsArray,
-        onUpdate: function (item) {
-          that.switchDatabase(null, item);
-        }
-      });
-      this.dbSearchTypeahead.render();
-      this.$el.find(".js-db-graveyard").tooltip();
-    },
-
     selectAll: function(evt){
       $("input:checkbox").attr('checked', !$(evt.target).hasClass('active'));
     }

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/documents/routes.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/routes.js b/app/addons/documents/routes.js
index 46fbc51..600b215 100644
--- a/app/addons/documents/routes.js
+++ b/app/addons/documents/routes.js
@@ -392,19 +392,6 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases,
       };
     },
 
-    // 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
-    //   }));
-    // },
-
     updateAllDocsFromView: function (event) {
       var view = event.view,
           params = this.createParams(),

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/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 bf7e250..4a9482d 100644
--- a/app/addons/documents/templates/all_docs_list.html
+++ b/app/addons/documents/templates/all_docs_list.html
@@ -24,7 +24,7 @@ the License.
     </div>
   <% } %>
 </div>
-<footer class="pagination-footer window-resizeable">
+<footer class="pagination-footer window-resizeable<%=resizeLayout%>">
   <div id="item-numbers"> </div>
   <div id="documents-pagination"></div>
 </footer>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/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
index a00c851..44295c9 100644
--- a/app/addons/documents/templates/select-doc-menu.html
+++ b/app/addons/documents/templates/select-doc-menu.html
@@ -21,9 +21,6 @@ the License.
 
 <button class="button btn btn-small disabled js-bulk-delete"><i class="icon-trash"></i></button>
 
-<% if (expandDocs) { %>
+
 <button id="collapse" class="button btn btn-small"><i class="icon-minus"></i> Collapse</button>
-<% } else { %>
-<button id="collapse" class="button btn btn-small"><i class="icon-plus"></i> Expand</button>
-<% } %>
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/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
deleted file mode 100644
index e69de29..0000000

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/documents/tests/views-indexSpec.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/tests/views-indexSpec.js b/app/addons/documents/tests/views-indexSpec.js
deleted file mode 100644
index 7012a04..0000000
--- a/app/addons/documents/tests/views-indexSpec.js
+++ /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.
-define([
-        'addons/documents/views-index',
-        'testUtils'
-], function (Views, testUtils) {
-  var assert = testUtils.assert,
-      ViewSandbox = testUtils.ViewSandbox,
-      viewSandbox;
-
-  describe('Documents Indexes', function () {
-    var view;
-      beforeEach(function () {
-        viewSandbox = new ViewSandbox();
-        viewSandbox.renderView(view);
-      });
-
-      afterEach(function () {
-        viewSandbox.remove();
-      });
-  });
-});
-
-

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/documents/tests/viewsSpec.js.orig
----------------------------------------------------------------------
diff --git a/app/addons/documents/tests/viewsSpec.js.orig b/app/addons/documents/tests/viewsSpec.js.orig
new file mode 100644
index 0000000..df3abf7
--- /dev/null
+++ b/app/addons/documents/tests/viewsSpec.js.orig
@@ -0,0 +1,57 @@
+// 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.
+define([
+        'addons/documents/views',
+        'addons/documents/resources',
+        'addons/databases/base',
+        'testUtils'
+], function (Views, Resources, Databases, testUtils) {
+  var assert = testUtils.assert,
+      ViewSandbox = testUtils.ViewSandbox,
+      viewSandbox;
+
+  describe('AllDocsList', function () {
+    var database = new Databases.Model({id: 'registry'}),
+        bulkDeleteDocCollection = new Resources.BulkDeleteDocCollection([], {databaseId: 'registry'});
+
+    database.allDocs = new Resources.AllDocs({_id: "ente"}, {
+      database: database,
+      viewMeta: {update_seq: 1},
+      params: {}
+    });
+
+    var view = new Views.Views.AllDocsList({
+      viewList: false,
+      bulkDeleteDocsCollection: bulkDeleteDocCollection,
+      collection: database.allDocs
+    });
+
+    beforeEach(function (done) {
+      viewSandbox = new ViewSandbox();
+      viewSandbox.renderView(view, done);
+    });
+
+    afterEach(function () {
+      viewSandbox.remove();
+    });
+
+    it('should load', function () {
+      assert.equal(typeof Views.Views.AllDocsList, 'function');
+    });
+
+    it('pressing SelectAll should fill the delete-bulk-docs-collection', function () {
+      assert.equal(bulkDeleteDocCollection.length, 0);
+      view.$('button.all').trigger('click');
+      assert.equal(bulkDeleteDocCollection.length, 1);
+    });
+  });
+});

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/documents/views-advancedopts.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views-advancedopts.js b/app/addons/documents/views-advancedopts.js
index 993750f..75c00a9 100644
--- a/app/addons/documents/views-advancedopts.js
+++ b/app/addons/documents/views-advancedopts.js
@@ -66,7 +66,7 @@ function(app, FauxtonAPI, resizeColumns ) {
       $('#dashboard-content').scrollTop(0);
       this.$('#query-options-tray').toggle();
       FauxtonAPI.Events.trigger('APIbar:closeTray');
-    }, 
+    },
 
     closeTray: function(){
       $('#query-options-tray').hide();
@@ -278,7 +278,9 @@ function(app, FauxtonAPI, resizeColumns ) {
         }
       }, this);
     },
-
+    cleanup: function (){
+      FauxtonAPI.Events.unbind('AdvancedOptions:closeTray');
+    },
     serialize: function () {
       return {
         hasReduce: this.hasReduce,

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/documents/views-sidebar.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views-sidebar.js b/app/addons/documents/views-sidebar.js
index fa3f8d6..c392b72 100644
--- a/app/addons/documents/views-sidebar.js
+++ b/app/addons/documents/views-sidebar.js
@@ -117,6 +117,10 @@ function(app, FauxtonAPI, Components, Documents, Databases) {
       },this);
     },
 
+    cleanup: function(){
+      FauxtonAPI.Events.unbind('database:delete');
+    },
+
     afterRender: function () {
       if (this.selectedTab) {
         this.setSelectedTab(this.selectedTab);

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/documents/views.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views.js b/app/addons/documents/views.js
index eaf2c84..ac8b794 100644
--- a/app/addons/documents/views.js
+++ b/app/addons/documents/views.js
@@ -38,7 +38,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
     });
   }
 
-  //Header for alldocs with search, Query options,& api bar
   Views.RightAllDocsHeader = FauxtonAPI.View.extend({
     className: "header-right",
     template: "addons/documents/templates/header_alldocs",
@@ -55,9 +54,14 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
       FauxtonAPI.Events.on('success:bulkDelete', this.selectAllMenu);
     },
 
+    cleanup:function(){
+      FauxtonAPI.Events.unbind('advancedOptions:updateView');
+      FauxtonAPI.Events.unbind('success:bulkDelete');
+    },
+
     selectAllMenu: function(e){
       FauxtonAPI.triggerRouteEvent("toggleSelectHeader");
-      FauxtonAPI.Events.trigger("documents:show-select-all",this.selectVisible);
+      FauxtonAPI.Events.trigger("documents:showSelectAll",this.selectVisible);
     },
 
     addAllDocsMenu: function(){
@@ -127,21 +131,15 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
 
       if (_.any(errorParams)) {
         _.map(errorParams, function(param) {
-
-          // TODO: Where to add this error?
-          // bootstrap wants the error on a control-group div, but we're not using that
-          //$('form.view-query-update input[name='+param+'], form.view-query-update select[name='+param+']').addClass('error');
           return FauxtonAPI.addNotification({
             msg: "JSON Parse Error on field: "+param.name,
             type: "error",
-            selector: ".advanced-options .errors-container",
             clear:  true
           });
         });
         FauxtonAPI.addNotification({
           msg: "Make sure that strings are properly quoted and any other values are valid JSON structures",
           type: "warning",
-          selector: ".advanced-options .errors-container",
           clear:  true
         });
 
@@ -172,7 +170,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
 
     selectAllMenu: function(e){
       FauxtonAPI.triggerRouteEvent("toggleSelectHeader");
-      FauxtonAPI.Events.trigger("documents:show-select-all",this.selectVisible);
+      FauxtonAPI.Events.trigger("documents:showSelectAll",this.selectVisible);
     },
 
     bulkDelete: function(){
@@ -240,16 +238,23 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
     className: function(){
       return (this.showSelect? "showSelect":"") + " 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:showSelectAll", this.showSelectBox);
       FauxtonAPI.Events.on("documents:collapse", this.collapse);
       FauxtonAPI.Events.on("documents:selectAll", this.selectAll);
     },
 
+    cleanup: function(){
+      FauxtonAPI.Events.unbind("documents:showSelectAll");
+      FauxtonAPI.Events.unbind("documents:collapse");
+      FauxtonAPI.Events.unbind("documents:selectAll");
+    },
+
     showSelectBox: function(bool){
       this.$el.toggleClass('showSelect');
     },
@@ -536,8 +541,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
 
     serialize: function() {
       return {
-        viewList: this.viewList,
-        expandDocs: this.expandDocs,
+        resizeLayout: this.viewList?"-half":"",
         endOfResults: !this.pagination.canShowNextfn()
       };
     },
@@ -565,6 +569,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
     },
 
     cleanup: function () {
+      FauxtonAPI.Events.unbind("documents:bulkDelete");
+      FauxtonAPI.Events.unbind("documents:selectAll");
       this.pagination && this.pagination.remove();
       this.allDocsNumber && this.allDocsNumber.remove();
       _.each(this.rows, function (row) {row.remove();});
@@ -671,6 +677,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
 
 
   Views.DdocInfo = FauxtonAPI.View.extend({
+    className: "view",
     template: "addons/documents/templates/ddoc_info",
 
     initialize: function (options) {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/fauxton/components.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/components.js b/app/addons/fauxton/components.js
index e8bd559..afec0b4 100644
--- a/app/addons/fauxton/components.js
+++ b/app/addons/fauxton/components.js
@@ -140,6 +140,10 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
       this.render();
     },
 
+    cleanup: function(){
+      FauxtonAPI.Events.unbind('APIbar:closeTray');
+    },
+
     afterRender: function(){
       ZeroClipboard.config({ moviePath: "/assets/js/plugins/zeroclipboard/ZeroClipboard.swf" });
       var client = new ZeroClipboard(this.$(".copy-url"));

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/fauxton/resizeColumns.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/resizeColumns.js b/app/addons/fauxton/resizeColumns.js
index 3fd1883..f88a3aa 100644
--- a/app/addons/fauxton/resizeColumns.js
+++ b/app/addons/fauxton/resizeColumns.js
@@ -28,101 +28,67 @@ function(FauxtonAPI) {
   };
 
   Resize.prototype = {
-    getPrimaryNavWidth: function(){
-      var primaryNavWidth  = $('body').hasClass('closeMenu') ? 64 : 220;
-      return primaryNavWidth;
-    },
-
-    getSinglePanelWidth: function(){
-      var sidebarWidth = $('#sidebar-content').length > 0 ? $('#sidebar-content').outerWidth() : 0,
-          borders = parseInt($('#dashboard').css('border-left-width'), 10) +
-                    parseInt($('#dashboard-content').css('border-left-width'), 10) +
-                    parseInt($('#dashboard-content').css('border-right-width'), 10);
-
-      return (this.getPrimaryNavWidth() + sidebarWidth + borders);
-    },
-
-    getTwoPanelWidth: function(){
-      var borders = parseInt($('#dashboard').css('border-left-width'), 10) +
-          parseInt($('#right-content').css('border-left-width'), 10) +
-          parseInt($('#left-content').css('border-right-width'), 10)+
-          parseInt($('#left-content').css('border-left-width'), 10) +
-          parseInt($('#right-content').css('border-right-width'), 10);
-      return (this.getPrimaryNavWidth()+ borders);
-    },
 
     initialize: function(){
-     // $(window).off('resize');
-      var that = this;
       //add throttler :)
+      var that = this;
       this.lazyLayout = _.debounce(that.onResizeHandler, 300).bind(this);
       FauxtonAPI.utils.addWindowResize(this.lazyLayout,"animation");
       FauxtonAPI.utils.initWindowResize();
       this.onResizeHandler();
     },
 
-    updateOptions:function(options){
-      this.options = {};
-      this.options = options;
-    },
+    onResizeHandler: function (){
+      var fullWidth = this.getFullWidth(),
+          halfWidth = this.getHalfWidth(),
+          sidebarWidth = this.getSidebarContentWidth(),
+          left = $('.window-resizeable-half').length > 0? halfWidth : sidebarWidth;
 
-    turnOff:function(){
-      FauxtonAPI.utils.removeWindowResize("animation");
+      $('.window-resizeable').innerWidth(sidebarWidth);
+      $('.window-resizeable-half').innerWidth(halfWidth);
+      $('.window-resizeable-full').innerWidth(fullWidth);
+
+      //set left
+      this.setLeftPosition(left);
+      //if there is a callback, run that
+      this.options.callback && this.options.callback();
+      this.trigger('resize');
     },
 
     cleanupCallback: function(){
       this.callback = null;
     },
 
-    singlePanelResize: function(){
-      var combinedWidth = window.innerWidth - this.getSinglePanelWidth(),
-      smallWidthConstraint = ($('#sidebar-content').length > 0)? 470:800,
-      panelWidth;
-
-      if (combinedWidth > smallWidthConstraint) {
-        panelWidth = combinedWidth;
-      } else if (combinedWidth < smallWidthConstraint){
-        panelWidth = smallWidthConstraint;
-      }
-      return panelWidth;
+    getPrimaryNavWidth: function(){
+      var primaryNavWidth  = $('body').hasClass('closeMenu') ? 64 : $('#primary-navbar').outerWidth();
+      //$('body').hasClass('closeMenu') ? 64 : 220;
+      return primaryNavWidth;
     },
 
-    getPanelWidth: function(){
-      var panelWidth;
-      if ($('#dashboard').hasClass('two-pane')){
-        panelWidth = (window.innerWidth - this.getTwoPanelWidth())/2;
-      } else {
-        panelWidth = this.singlePanelResize();
-      }
-      return panelWidth;
+    getWindowWidth: function(){
+      return window.innerWidth;
     },
 
-    setPosition: function(panelWidth){
-      var primary = this.getPrimaryNavWidth();
-      $('.set-left-position').css('left',panelWidth+primary+4);
+    getFullWidth: function(){
+      return this.getWindowWidth() - this.getPrimaryNavWidth();
     },
 
-    onResizeHandler: function (){
-      //if there is an override, do that instead
-      if (this.options.onResizeHandler){
-        this.options.onResizeHandler();
-      } else {
-        /*
-          Just so we all are aware:
-          This entire file and the html of the layouts is bonkers
-          crazy. I hate what horrible things happened in this file.
-          It will change soon with a layout overhaul.
-        */
-
-        var panelWidth = this.getPanelWidth();
-        this.setPosition(panelWidth);
-        $('.window-resizeable').innerWidth(panelWidth);
-      }
-      //if there is a callback, run that
-      if(this.options.callback) {
-        this.options.callback();
-      }
-      this.trigger('resize');
+    getSidebarWidth: function(){
+      return $('#breadcrumbs').length > 0 ? $('#breadcrumbs').outerWidth() : 0;
+    },
+
+    getSidebarContentWidth: function(){
+      return this.getFullWidth() - this.getSidebarWidth() -5;
+    },
+
+    getHalfWidth: function(){
+      var fullWidth = this.getFullWidth();
+      return fullWidth/2;
+    },
+
+    setLeftPosition: function(panelWidth){
+      var primary = this.getPrimaryNavWidth();
+      $('.set-left-position').css('left',panelWidth+primary+4);
     }
   };
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/fauxton/templates/header_left.html
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/templates/header_left.html b/app/addons/fauxton/templates/header_left.html
index 13bea60..420b90b 100644
--- a/app/addons/fauxton/templates/header_left.html
+++ b/app/addons/fauxton/templates/header_left.html
@@ -14,4 +14,4 @@ the License.
 <!--back arrow-->
 <div id="header-breadcrumbs"></div>
   <!-- Menu gear-->
-<div id="header-dropdown-menu"></div>
+<div id="header-dropdown-menu" class="add-dropdown"></div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/fauxton/tests/baseSpec.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/tests/baseSpec.js b/app/addons/fauxton/tests/baseSpec.js
index b9814bc..8a41cff 100644
--- a/app/addons/fauxton/tests/baseSpec.js
+++ b/app/addons/fauxton/tests/baseSpec.js
@@ -61,12 +61,6 @@ define([
       FauxtonAPI.masterLayout = _layout;
     });
 
-    it('Should clear breadcrumbs', function () {
-      FauxtonAPI.masterLayout = mockLayout;
-      testRouteObject.renderWith('the-route', mockLayout, 'args');
-      assert.ok(mockLayout.removeView.calledWith('#breadcrumbs'), 'Clear Breadcrumbs called');
-    });
-
     it('Should set breadcrumbs when breadcrumbs exist', function () {
       FauxtonAPI.masterLayout = mockLayout;
       testRouteObject.renderWith('the-route', mockLayout, 'args');

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/fauxton/tests/paginateSpec.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/tests/paginateSpec.js b/app/addons/fauxton/tests/paginateSpec.js
index f97b255..cc03b76 100644
--- a/app/addons/fauxton/tests/paginateSpec.js
+++ b/app/addons/fauxton/tests/paginateSpec.js
@@ -13,9 +13,10 @@ define([
        'app',
        'addons/fauxton/components',
        'addons/documents/resources',
+       'addons/indexes/resources',
        'testUtils',
        'api'
-], function (app, Views, Models, testUtils, FauxtonAPI) {
+], function (app, Views, Models, IndexModels, testUtils, FauxtonAPI) {
   var assert = testUtils.assert,
   ViewSandbox = testUtils.ViewSandbox;
 
@@ -23,7 +24,7 @@ define([
   describe('IndexPaginate', function () {
     var viewSandbox, paginate, collection, navigateMock;
     beforeEach(function (done) {
-      collection = new Models.IndexCollection([{
+      collection = new IndexModels.IndexCollection([{
         id:'myId1',
         doc: 'num1'
       },
@@ -55,7 +56,7 @@ define([
         //do this so it doesn't throw an error on other unwired up components
         FauxtonAPI.triggerRouteEvent = function () {};
         //FauxtonAPI.triggerRouteEvent.restore && FauxtonAPI.triggerRouteEvent.restore();
-        //FauxtonAPI.navigate.restore && FauxtonAPI.navigate.restore(); 
+        //FauxtonAPI.navigate.restore && FauxtonAPI.navigate.restore();
       });
 
       it('Should trigger routeEvent', function () {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/indexes/assets/less/new-index-placeholder.less
----------------------------------------------------------------------
diff --git a/app/addons/indexes/assets/less/new-index-placeholder.less b/app/addons/indexes/assets/less/new-index-placeholder.less
index ade1d3a..b5ca506 100644
--- a/app/addons/indexes/assets/less/new-index-placeholder.less
+++ b/app/addons/indexes/assets/less/new-index-placeholder.less
@@ -14,6 +14,7 @@
   min-height: 400px;
   padding-top: 60%;
   text-align: center;
+  margin: 0 20%;
   h3 {
     border-bottom: 1px solid #ccc;
     padding-bottom:10px;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/indexes/base.js
----------------------------------------------------------------------
diff --git a/app/addons/indexes/base.js b/app/addons/indexes/base.js
index 6365c61..f2220fa 100644
--- a/app/addons/indexes/base.js
+++ b/app/addons/indexes/base.js
@@ -44,14 +44,16 @@ function(app, FauxtonAPI, Routes) {
       ddocType:'view',
       icon: "fonticon-sidenav-map-reduce"
     });
-    FauxtonAPI.registerExtension('sidebar:list', {
-      selector:'list',
-      icon: "fonticon-sidenav-list-function"
-    });
-    FauxtonAPI.registerExtension('sidebar:list', {
-      selector:'show',
-      icon: "fonticon-sidenav-show-function"
-    });
+
+    //Commented out since they are just POCs
+    // FauxtonAPI.registerExtension('sidebar:list', {
+    //   selector:'list',
+    //   icon: "fonticon-sidenav-list-function"
+    // });
+    // FauxtonAPI.registerExtension('sidebar:list', {
+    //   selector:'show',
+    //   icon: "fonticon-sidenav-show-function"
+    // });
 
 
     /* show in the add new menu dropdown */
@@ -59,15 +61,17 @@ function(app, FauxtonAPI, Routes) {
       title: "Secondary View",
       url: "new_view"
     });
-    FauxtonAPI.registerExtension('sidebar:links', {
-      title: "List Function",
-      url: "new_list"
-    });
 
-    FauxtonAPI.registerExtension('sidebar:links', {
-      url: 'new_show',
-      title: 'Show Index'
-    });
+    //Commented out since they are just POCs
+    // FauxtonAPI.registerExtension('sidebar:links', {
+    //   title: "List Function",
+    //   url: "new_list"
+    // });
+
+    // FauxtonAPI.registerExtension('sidebar:links', {
+    //   url: 'new_show',
+    //   title: 'Show Index'
+    // });
 
   };
   return Routes;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/indexes/index-components.js
----------------------------------------------------------------------
diff --git a/app/addons/indexes/index-components.js b/app/addons/indexes/index-components.js
deleted file mode 100644
index 1ec34e2..0000000
--- a/app/addons/indexes/index-components.js
+++ /dev/null
@@ -1,30 +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.
-
-
-/*
-  Index components includes any common, generic, and reusable code for creating secondary indexes
-  View functions, List functions, Show Functions, and Filter functions, as well as anything created by
-  couchdb affiliates.
-*/
-
-define([
-  "app",
-  "api"
-],
-
-function(app, FauxtonAPI) {
-  var Components = {};
-
-
-  return Components;
-});

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/indexes/resources.js
----------------------------------------------------------------------
diff --git a/app/addons/indexes/resources.js b/app/addons/indexes/resources.js
index 626d984..2b5fbe7 100644
--- a/app/addons/indexes/resources.js
+++ b/app/addons/indexes/resources.js
@@ -77,75 +77,6 @@ function(app, FauxtonAPI, PagingCollection) {
   });
 
 
-  Resources.PouchIndexCollection = PagingCollection.extend({
-    model: Resources.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 Resources.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;
-    }
-  });
-
 
   Resources.IndexCollection = PagingCollection.extend({
     model: Resources.ViewRow,

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/indexes/routes-core.js
----------------------------------------------------------------------
diff --git a/app/addons/indexes/routes-core.js b/app/addons/indexes/routes-core.js
index 402ae99..1277c6b 100644
--- a/app/addons/indexes/routes-core.js
+++ b/app/addons/indexes/routes-core.js
@@ -63,7 +63,6 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources) {
     },
 
     events: {
-      "route:updatePreviewDocs": "updateAllDocsFromPreview",
       "route:perPageChange": "perPageChange",
       "route:paginate": "paginate",
       "route:updateAllDocs": "updateAllDocsFromView"
@@ -125,7 +124,7 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources) {
     },
 
     /* --------------------------------------------------
-      Stored docs in preview
+      determines how many docs to display for the request
     ----------------------------------------------------*/
     getDocPerPageLimit: function (urlParams, perPage) {
       var storedPerPage = perPage;
@@ -174,6 +173,28 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources) {
         collection = this.data.database.allDocs;
         collection.paging.pageSize = pageSize;
 
+      } else {
+        collection = this.data.indexedDocs = new Resources.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);
@@ -195,30 +216,6 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources) {
         docParams: options.docParams,
         params: options.urlParams
       }));
-    },
-
-
-    /* --------------------------------------------------
-      If Preview worked....
-    ----------------------------------------------------*/
-    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("#right-content", new Documents.Views.AllDocsList({
-        database: this.data.database,
-        collection: this.data.indexedDocs,
-        nestedView: Views.Row,
-        viewList: true
-      }));
     }
   });
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/indexes/routes-viewindexes.js
----------------------------------------------------------------------
diff --git a/app/addons/indexes/routes-viewindexes.js b/app/addons/indexes/routes-viewindexes.js
index 546d72c..663e0e8 100644
--- a/app/addons/indexes/routes-viewindexes.js
+++ b/app/addons/indexes/routes-viewindexes.js
@@ -85,10 +85,7 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore, Co
       ];
 
       var dropdown = [{
-        links: [{
-          title: 'Duplicate Index',
-          icon: 'fonticon-documents'
-        },
+        links: [
         {
           title: 'Delete',
           icon: 'fonticon-trash',

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/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 0370e51..2fba038 100644
--- a/app/addons/indexes/templates/header_right.html
+++ b/app/addons/indexes/templates/header_right.html
@@ -21,7 +21,3 @@ the License.
   </div>
 
 
-  <div id="header-select-all" class="button">
-    <span class="toggle-select-menu icon fonticon-ok-circled">Select</span>
-  </div>
-

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/indexes/views.js
----------------------------------------------------------------------
diff --git a/app/addons/indexes/views.js b/app/addons/indexes/views.js
index 421495f..a0d5d0d 100644
--- a/app/addons/indexes/views.js
+++ b/app/addons/indexes/views.js
@@ -46,7 +46,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
       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){
@@ -66,10 +65,14 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
         viewName: this.viewName,
         ddocName: this.model.id,
         hasReduce: this.hasReduce(),
-        eventer: this.eventer,
         showStale: true
       }));
     },
+
+    cleanup: function(){
+      FauxtonAPI.Events.unbind('advancedOptions:updateView');
+    },
+
     hasReduce: function(){
 
     },
@@ -81,10 +84,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
 
        if (_.any(errorParams)) {
          _.map(errorParams, function(param) {
-
-           // TODO: Where to add this error?
-           // bootstrap wants the error on a control-group div, but we're not using that
-           //$('form.view-query-update input[name='+param+'], form.view-query-update select[name='+param+']').addClass('error');
            return FauxtonAPI.addNotification({
              msg: "JSON Parse Error on field: "+param.name,
              type: "error",
@@ -107,48 +106,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
 
        FauxtonAPI.navigate(fragment, {trigger: false});
        FauxtonAPI.triggerRouteEvent('updateAllDocs', {ddoc: this.ddocID, view: this.viewName});
-    },
-
-
-    previewView: function(event, paramsInfo) {
-      event.preventDefault();
-      var that = this,
-      mapVal = this.mapVal(),
-      reduceVal = this.reduceVal(),
-      paramsArr = [];
-
-      if (paramsInfo && paramsInfo.params) {
-        paramsArr = paramsInfo.params;
-      }
-
-      var params = _.reduce(paramsArr, function (params, param) {
-        params[param.name] = param.value;
-        return params;
-      }, {reduce: false});
-
-      FauxtonAPI.addNotification({
-        msg: "<strong>Warning!</strong> Preview executes the Map/Reduce functions in your browser, and may behave differently from CouchDB.",
-        type: "warning",
-        fade: true,
-        escape: false // beware of possible XSS when the message changes
-      });
-
-      var promise = FauxtonAPI.Deferred();
-
-      if (!this.database.allDocs || this.database.allDocs.params.include_docs !== true) {
-        this.database.buildAllDocs({limit: Databases.DocLimit.toString(), include_docs: true});
-        promise = this.database.allDocs.fetch();
-       } else {
-        promise.resolve();
-       }
-
-      promise.then(function () {
-        params.docs = that.database.allDocs.map(function (model) { return model.get('doc');});
-        var queryPromise = pouchdb.runViewQuery({map: mapVal, reduce: reduceVal}, params);
-        queryPromise.then(function (results) {
-          FauxtonAPI.triggerRouteEvent('updatePreviewDocs', {rows: results.rows, ddoc: that.getCurrentDesignDoc().id, view: that.viewName});
-        });
-      });
     }
   });
 
@@ -177,9 +134,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
     beforeRender: function(){
       var newLinks = [{
         links: [{
-          title: 'Table',
-          icon: 'fonticon-table'
-        },{
           title: 'JSON',
           icon: 'fonticon-json'
         }]
@@ -265,8 +219,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
   });
 
 
-
-
   Views.ViewEditor = FauxtonAPI.View.extend({
     template: "addons/indexes/templates/view_editor",
     builtinReduces: ['_sum', '_count', '_stats'],
@@ -275,7 +227,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
       "click button.save": "saveView",
       "click button.delete": "deleteView",
       "change select#reduce-function-selector": "updateReduce",
-      "click button.preview": "previewView",
       "click #db-views-tabs-nav": 'toggleIndexNav',
       "click .beautify_map":  "beautifyCode",
       "click .beautify_reduce":  "beautifyCode"
@@ -629,6 +580,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
       targetEditor.setValue(beautifiedCode);
     },
     cleanup: function () {
+      FauxtonAPI.Events.unbind('index:delete');
       this.mapEditor && this.mapEditor.remove();
       this.reduceEditor && this.reduceEditor.remove();
     }

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/permissions/views.js
----------------------------------------------------------------------
diff --git a/app/addons/permissions/views.js b/app/addons/permissions/views.js
index 43f5aab..0080da7 100644
--- a/app/addons/permissions/views.js
+++ b/app/addons/permissions/views.js
@@ -20,6 +20,7 @@ function (app, FauxtonAPI, Permissions ) {
   Permissions.events = _.extend(events, Backbone.Events);
 
   Permissions.Permissions = FauxtonAPI.View.extend({
+    className: "view",
     template: "addons/permissions/templates/permissions",
 
     initialize: function (options) {
@@ -80,7 +81,7 @@ function (app, FauxtonAPI, Permissions ) {
 
     beforeRender: function () {
       var section = this.model.get(this.section);
-      
+
       this.nameViews = [];
       this.roleViews = [];
 
@@ -107,11 +108,11 @@ function (app, FauxtonAPI, Permissions ) {
 
     discardRemovedViews: function () {
       this.nameViews = _.filter(this.nameViews, function (view) {
-        return !view.removed; 
+        return !view.removed;
       });
 
       this.roleViews = _.filter(this.roleViews, function (view) {
-        return !view.removed; 
+        return !view.removed;
       });
     },
 
@@ -178,7 +179,7 @@ function (app, FauxtonAPI, Permissions ) {
     removeItem: function (event) {
       var that = this;
       event.preventDefault();
-      
+
       this.removed = true;
       Permissions.events.trigger('itemRemoved');
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/replication/route.js
----------------------------------------------------------------------
diff --git a/app/addons/replication/route.js b/app/addons/replication/route.js
index 17368f8..d0c298a 100644
--- a/app/addons/replication/route.js
+++ b/app/addons/replication/route.js
@@ -22,6 +22,7 @@ function(app, FauxtonAPI, Replication, Views) {
     roles: ["_admin"],
     routes: {
       "replication": "defaultView",
+      "replication/new/:dbname": "defaultView",
       "replication/:dbname": "defaultView"
     },
     selectedHeader: "Replication",
@@ -29,7 +30,7 @@ function(app, FauxtonAPI, Replication, Views) {
       return [this.replication.url(), this.replication.documentation];
     },
     crumbs: [
-      {"name": "Replicate changes from: ", "link": "replication"}
+      {"name": "Replicate ", "link": "replication"}
     ],
     defaultView: function(dbname){
 			this.databases = new Replication.DBList({});
@@ -39,7 +40,7 @@ function(app, FauxtonAPI, Replication, Views) {
         selectedDB: dbname ||"",
 				collection: this.databases,
         status:  this.tasks
-			}));  
+			}));
     }
   });
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/replication/views.js
----------------------------------------------------------------------
diff --git a/app/addons/replication/views.js b/app/addons/replication/views.js
index a19e609..672022a 100644
--- a/app/addons/replication/views.js
+++ b/app/addons/replication/views.js
@@ -32,7 +32,7 @@ function(app, FauxtonAPI, Components, replication) {
   // -----------------------------------
   // afterRender: autocomplete on the target input field
   // beforeRender:  add the status table
-  // disableFields:  disable non active fields on submit 
+  // disableFields:  disable non active fields on submit
   // enableFields:  enable field when radio btns are clicked
   // establish:  get the DB list for autocomplete
   // formValidation:  make sure fields aren't empty
@@ -43,6 +43,7 @@ function(app, FauxtonAPI, Components, replication) {
   // toggleAdvancedOptions:  toggle advanced
 
   View.ReplicationForm = FauxtonAPI.View.extend({
+    className: "view",
     template: "addons/replication/templates/form",
     events:  {
       "submit #replication": "validate",
@@ -153,7 +154,7 @@ function(app, FauxtonAPI, Components, replication) {
         }
       });
       this.enableFields();
-    },		
+    },
     updateButtonText: function(wait){
       var $button = this.$('#replication button[type=submit]');
       if(wait){
@@ -163,7 +164,7 @@ function(app, FauxtonAPI, Components, replication) {
       }
     },
     submit: function(e){
-      this.disableFields(); 
+      this.disableFields();
       var formJSON = {};
       _.map(this.$(e.currentTarget).serializeArray(), function(formData){
         if(formData.value !== ''){
@@ -173,7 +174,7 @@ function(app, FauxtonAPI, Components, replication) {
 
       this.updateButtonText(true);
       this.startReplication(formJSON);
-    },	
+    },
     swapFields: function(e){
       //WALL O' VARIABLES
       var $fromSelect = this.$('#from_name'),
@@ -219,7 +220,7 @@ function(app, FauxtonAPI, Components, replication) {
     },
     beforeRender:  function(){
       this.collection.forEach(function(item) {
-        this.insertView(new View.replicationItem({ 
+        this.insertView(new View.replicationItem({
           model: item
         }));
       }, this);

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/verifyinstall/assets/less/verifyinstall.less
----------------------------------------------------------------------
diff --git a/app/addons/verifyinstall/assets/less/verifyinstall.less b/app/addons/verifyinstall/assets/less/verifyinstall.less
index e084cb3..b1b15d5 100644
--- a/app/addons/verifyinstall/assets/less/verifyinstall.less
+++ b/app/addons/verifyinstall/assets/less/verifyinstall.less
@@ -11,6 +11,7 @@
 // the License.
 
 #start {
+  margin-top: 20px;
   margin-bottom: 20px;
 }
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/addons/verifyinstall/views.js
----------------------------------------------------------------------
diff --git a/app/addons/verifyinstall/views.js b/app/addons/verifyinstall/views.js
index 1e7e6f5..524e8e0 100644
--- a/app/addons/verifyinstall/views.js
+++ b/app/addons/verifyinstall/views.js
@@ -18,6 +18,7 @@ define([
 function(app, FauxtonAPI, VerifyInstall) {
 
   VerifyInstall.Main = FauxtonAPI.View.extend({
+    className: "view",
     template: 'addons/verifyinstall/templates/main',
 
     events: {
@@ -70,7 +71,7 @@ function(app, FauxtonAPI, VerifyInstall) {
       };
     },
 
-    
+
     startTest: function () {
       this.disableButton();
       this.$('.status').text('');

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/core/api.js
----------------------------------------------------------------------
diff --git a/app/core/api.js b/app/core/api.js
index 50a8b12..6053d65 100644
--- a/app/core/api.js
+++ b/app/core/api.js
@@ -27,9 +27,7 @@ function(FauxtonAPI, Layout, Router, RouteObject, utils) {
   });
 
   //global app events
-  FauxtonAPI.Events = {};
-  _.extend(FauxtonAPI.Events, Backbone.Events);
-
+  FauxtonAPI.Events = _.extend({}, Backbone.Events);
 
   FauxtonAPI.navigate = function(url, _opts) {
     var options = _.extend({trigger: true}, _opts );

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/templates/layouts/one_pane.html
----------------------------------------------------------------------
diff --git a/app/templates/layouts/one_pane.html b/app/templates/layouts/one_pane.html
index 0bbc989..a3c770b 100644
--- a/app/templates/layouts/one_pane.html
+++ b/app/templates/layouts/one_pane.html
@@ -17,13 +17,13 @@ the License.
   <div id="global-notifications" class="container errors-container window-resizeable"></div>
   <div class="fixed-header">
     <div id="breadcrumbs"></div>
-    <div id="api-navbar"></div>
+    <div id="api-navbar" class="window-resizeable"></div>
   </div>
 
 
   <div class="row-fluid content-area">
   	<div id="tabs" class="row"></div>
-    <div id="dashboard-content" class="window-resizeable"></div>
+    <div id="dashboard-content" class="window-resizeable-full"></div>
   </div>
 </div>
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/app/templates/layouts/two_pane.html
----------------------------------------------------------------------
diff --git a/app/templates/layouts/two_pane.html b/app/templates/layouts/two_pane.html
index 053285a..aa7e30e 100644
--- a/app/templates/layouts/two_pane.html
+++ b/app/templates/layouts/two_pane.html
@@ -16,12 +16,12 @@ the License.
 <div id="dashboard" class="container-fluid two-pane">
   <div id="global-notifications" class="container errors-container window-resizeable set-left-position"></div>
   <header class="fixed-header row-fluid">
-    <div id="breadcrumbs" class="window-resizeable"></div>
-    <div id="api-navbar" class="window-resizeable"></div>
+    <div id="breadcrumbs" class="window-resizeable-half"></div>
+    <div id="api-navbar" class="window-resizeable-half"></div>
   </header>
 
   <div class="content-area two-pane">
-    <div id="left-content" class="span6 window-resizeable"></div>
-    <div id="right-content" class="span6 window-resizeable set-left-position"></div>
+    <div id="left-content" class="span6 window-resizeable-half"></div>
+    <div id="right-content" class="span6 window-resizeable-half set-left-position"></div>
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/assets/less/bootstrap/dropdowns.less
----------------------------------------------------------------------
diff --git a/assets/less/bootstrap/dropdowns.less b/assets/less/bootstrap/dropdowns.less
index f510b17..62dda0d 100644
--- a/assets/less/bootstrap/dropdowns.less
+++ b/assets/less/bootstrap/dropdowns.less
@@ -65,8 +65,8 @@
   }
   li.header-label{
     background-color: #1A1A1A;
-    color: #676767;
-    padding: 3px 20px;
+    color: #fff;
+    padding: 3px 10px;
     font-size: 13px;
   }
   &.arrow {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/assets/less/bootstrap/variables.less
----------------------------------------------------------------------
diff --git a/assets/less/bootstrap/variables.less b/assets/less/bootstrap/variables.less
index eee77a0..0539bbe 100644
--- a/assets/less/bootstrap/variables.less
+++ b/assets/less/bootstrap/variables.less
@@ -119,12 +119,12 @@
 
 // Dropdowns
 // -------------------------
-@dropdownBackground:            #2B2F33;
+@dropdownBackground:            #1A1A1A;
 @dropdownBorder:                rgba(0,0,0,.2);
 @dropdownDividerTop:            #1A1A1A;
 @dropdownDividerBottom:         #1A1A1A;
 
-@dropdownLinkColor:             #D9D9D9;
+@dropdownLinkColor:             #E33F3B;
 @dropdownLinkColorHover:        @white;
 @dropdownLinkColorActive:       @white;
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/assets/less/fauxton.less
----------------------------------------------------------------------
diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less
index 74c698a..0b3fede 100644
--- a/assets/less/fauxton.less
+++ b/assets/less/fauxton.less
@@ -248,6 +248,14 @@ div.spinner {
   top: 50%;
 }
 
+#api-navbar{
+  > div{
+    > .api-url-btn {
+      padding:10px;
+    }
+  }
+}
+
 .api-url-btn {
   .icon {
     font-size: 11px;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/assets/less/headers.less
----------------------------------------------------------------------
diff --git a/assets/less/headers.less b/assets/less/headers.less
index a110714..27feffa 100644
--- a/assets/less/headers.less
+++ b/assets/less/headers.less
@@ -49,12 +49,7 @@
     }
   }
   .one-pane & {
-    #breadcrumbs{
-      width: 90%;
-    }
-    position: relative;
-    border: none;
-    .box-shadow(none);
+    .bottom-shadow-border;
     left: auto;
   }
   /* these styles are for the new header*/
@@ -74,9 +69,7 @@
 
 #breadcrumbs {
   height: 60px;
-  &.sidebar{
-    width: @sidebarWidth - 4;
-  }
+  width: @sidebarWidth - 4;
   /* these styles are for the new header*/
   .header-left{
     > div{
@@ -97,7 +90,7 @@
       height: 60px;
       vertical-align: top;
       &:first-child {
-        font-size: 30px;
+        font-size: 24px;
         .with-sidebar &,
         .two-pane & {
           padding:20px 10px;
@@ -132,7 +125,7 @@
       color: #666666;
     }
     a {
-      padding: 10px 20px;
+      padding: 10px;
       text-decoration: none;
     }
     .dropdown {
@@ -140,7 +133,7 @@
       padding: 20px 0px;
     }
     .dropdown-menu {
-      left: -109px;
+      left: -115px;
       top: 48px;
     }
   }
@@ -216,9 +209,15 @@
       border: none;
       position: absolute;
       right: 12px;
-      top: 8px;
+      top: 0px;
+      height:60px;
       z-index: 2;
       color: #999;
+      .icon-search{
+        position: absolute;
+        top: 22px;
+        right: 15px;
+      }
     }
   }
   > div {
@@ -237,3 +236,12 @@
   right: 25px;
 }
 
+#jump-to-doc{
+  .btn-primary {
+    .icon-search{
+      position: absolute;
+      top: 18px;
+      right: 15px;
+    }
+  }
+}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/assets/less/pagination.less
----------------------------------------------------------------------
diff --git a/assets/less/pagination.less b/assets/less/pagination.less
index df0740a..3911b90 100644
--- a/assets/less/pagination.less
+++ b/assets/less/pagination.less
@@ -11,6 +11,7 @@
  *  the License.
  */
 footer.pagination-footer {
+  min-width: 600px;
   position:fixed;
   background-color:#fff;
   bottom:0;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/16049ba5/assets/less/templates.less
----------------------------------------------------------------------
diff --git a/assets/less/templates.less b/assets/less/templates.less
index abf1c4b..cf66117 100644
--- a/assets/less/templates.less
+++ b/assets/less/templates.less
@@ -342,28 +342,20 @@
   }
 }
 
-#dashboard-lower-content .view{
-  padding: 20px;
-}
 
-#dashboard-upper-content{
-  .tab-content {
-    padding-top: 70px;
-  }
-  .well{
+#dashboard-content{
+  .view {
     padding: 20px;
-    .border-radius(0);
-    .box-shadow(none);
   }
-}
-
-#dashboard-content{
   &.row-fluid,
   &.window-resizeable{
     /*remove gutter without rewriting variable*/
     margin-left: 0px;
   }
-  padding: 20px;
+  .one-pane &{
+    margin-top:60px;
+    padding-bottom:60px;
+  }
   .with-sidebar &{
     .left-shadow-border;
     border-right: 1px solid #999;


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

Posted by ga...@apache.org.
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);


[2/8] 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 h

Posted by ga...@apache.org.
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/documents/views-index.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views-index.js b/app/addons/documents/views-index.js
deleted file mode 100644
index d0ed8ed..0000000
--- a/app/addons/documents/views-index.js
+++ /dev/null
@@ -1,574 +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.
-
-define([
-  "app",
-
-  "api",
-  "addons/fauxton/components",
-
-  "addons/documents/resources",
-  "addons/databases/resources",
-  "addons/pouchdb/base",
-  //views
-  "addons/documents/views-advancedopts",
-  // Libs
-  "addons/fauxton/resizeColumns",
-
-  // Plugins
-  "plugins/beautify",
-  "plugins/prettify"
-],
-
-function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
-         QueryOptions, resizeColumns, beautify, prettify) {
-
-  var Views = {};
-
-  Views.ViewEditor = FauxtonAPI.View.extend({
-    template: "addons/documents/templates/view_editor",
-    builtinReduces: ['_sum', '_count', '_stats'],
-
-    events: {
-      "click button.save": "saveView",
-      "click button.delete": "deleteView",
-      "change select#reduce-function-selector": "updateReduce",
-      "click button.preview": "previewView",
-      "click #db-views-tabs-nav": 'toggleIndexNav',
-      "click .beautify_map":  "beautifyCode",
-      "click .beautify_reduce":  "beautifyCode",
-      "click #query-options-wrapper": 'toggleIndexNav'
-    },
-
-    langTemplates: {
-      "javascript": {
-        map: "function(doc) {\n  emit(doc._id, 1);\n}",
-        reduce: "function(keys, values, rereduce){\n  if (rereduce){\n    return sum(values);\n  } else {\n    return values.length;\n  }\n}"
-      }
-    },
-
-    defaultLang: "javascript",
-
-    initialize: function(options) {
-      this.newView = options.newView || false;
-      this.ddocs = options.ddocs;
-      this.params = options.params;
-      this.database = options.database;
-      this.currentDdoc = options.currentddoc;
-      if (this.newView) {
-        this.viewName = 'newView';
-      } else {
-        this.ddocID = options.ddocInfo.id;
-        this.viewName = options.viewName;
-        this.ddocInfo = new Documents.DdocInfo({_id: this.ddocID},{database: this.database});
-      }
-
-      this.showIndex = false;
-      _.bindAll(this);
-    },
-
-    establish: function () {
-      if (this.ddocInfo) {
-        return this.ddocInfo.fetch();
-      }
-    },
-
-    updateValues: function() {
-      var notification;
-      if (this.model.changedAttributes()) {
-        notification = FauxtonAPI.addNotification({
-          msg: "Document saved successfully.",
-          type: "success",
-          clear: true
-        });
-        this.editor.setValue(this.model.prettyJSON());
-      }
-    },
-
-    updateReduce: function(event) {
-      var $ele = $("#reduce-function-selector");
-      var $reduceContainer = $(".control-group.reduce-function");
-      if ($ele.val() == "CUSTOM") {
-        this.createReduceEditor();
-        this.reduceEditor.setValue(this.langTemplates.javascript.reduce);
-        $reduceContainer.show();
-      } else {
-        $reduceContainer.hide();
-      }
-    },
-
-    deleteView: function (event) {
-      event.preventDefault();
-
-      if (this.newView) { return alert('Cannot delete a new view.'); }
-      if (!confirm('Are you sure you want to delete this view?')) {return;}
-
-      var that = this,
-          promise,
-          viewName = this.$('#index-name').val(),
-          ddocName = this.$('#ddoc :selected').val(),
-          ddoc = this.getCurrentDesignDoc();
-
-      ddoc.removeDdocView(viewName);
-
-      if (ddoc.hasViews()) {
-        promise = ddoc.save();
-      } else {
-        promise = ddoc.destroy();
-      }
-
-      promise.then(function () {
-        FauxtonAPI.navigate('/database/' + that.database.safeID() + '/_all_docs?limit=' + Databases.DocLimit);
-        FauxtonAPI.triggerRouteEvent('reloadDesignDocs');
-      });
-    },
-
-    saveView: function(event) {
-      var json, notification,
-      that = this;
-
-      if (event) { event.preventDefault();}
-
-      $('#dashboard-content').scrollTop(0); //scroll up
-
-      if (this.hasValidCode() && this.$('#new-ddoc:visible').val() !=="") {
-        var mapVal = this.mapEditor.getValue(),
-        reduceVal = this.reduceVal(),
-        viewName = this.$('#index-name').val(),
-        ddoc = this.getCurrentDesignDoc(),
-        ddocName = ddoc.id,
-        viewNameChange = false;
-
-        if (this.viewName !== viewName) {
-          ddoc.removeDdocView(this.viewName);
-          this.viewName = viewName;
-          viewNameChange = true;
-        }
-
-        notification = FauxtonAPI.addNotification({
-          msg: "Saving document.",
-          selector: "#define-view .errors-container",
-          clear: true
-        });
-
-        ddoc.setDdocView(viewName, mapVal, reduceVal);
-
-        ddoc.save().then(function () {
-          that.ddocs.add(ddoc);
-
-          that.mapEditor.editSaved();
-          that.reduceEditor && that.reduceEditor.editSaved();
-
-
-          FauxtonAPI.addNotification({
-            msg: "View has been saved.",
-            type: "success",
-            selector: "#define-view .errors-container",
-            clear: true
-          });
-
-          if (that.newView || viewNameChange) {
-            var fragment = '/database/' + that.database.safeID() +'/' + ddoc.safeID() + '/_view/' + app.utils.safeURLName(viewName);
-
-            FauxtonAPI.navigate(fragment, {trigger: false});
-            that.newView = false;
-            that.ddocID = ddoc.safeID();
-            that.viewName = viewName;
-            that.ddocInfo = ddoc;
-            that.showIndex = true;
-            that.render();
-            FauxtonAPI.triggerRouteEvent('reloadDesignDocs', {
-              selectedTab: app.utils.removeSpecialCharacters(ddocName.replace(/_design\//,'')) + '_' + app.utils.removeSpecialCharacters(viewName)
-            });
-          }
-
-          if (that.reduceFunStr !== reduceVal) {
-            that.reduceFunStr = reduceVal;
-            that.advancedOptions.renderOnUpdatehasReduce(that.hasReduce());
-          }
-
-          FauxtonAPI.triggerRouteEvent('updateAllDocs', {ddoc: ddocName, view: viewName});
-
-        }, function(xhr) {
-          var responseText = JSON.parse(xhr.responseText).reason;
-          notification = FauxtonAPI.addNotification({
-            msg: "Save failed: " + responseText,
-            type: "error",
-            clear: true
-          });
-        });
-      } else {
-        var errormessage = (this.$('#new-ddoc:visible').val() ==="")?"Enter a design doc name":"Please fix the Javascript errors and try again.";
-        notification = FauxtonAPI.addNotification({
-          msg: errormessage,
-          type: "error",
-          selector: "#define-view .errors-container",
-          clear: true
-        });
-      }
-    },
-
-    updateView: function(event, paramInfo) {
-       event.preventDefault();
-
-       if (this.newView) { return alert('Please save this new view before querying it.'); }
-
-       var errorParams = paramInfo.errorParams,
-           params = paramInfo.params;
-
-       if (_.any(errorParams)) {
-         _.map(errorParams, function(param) {
-
-           // TODO: Where to add this error?
-           // bootstrap wants the error on a control-group div, but we're not using that
-           //$('form.view-query-update input[name='+param+'], form.view-query-update select[name='+param+']').addClass('error');
-           return FauxtonAPI.addNotification({
-             msg: "JSON Parse Error on field: "+param.name,
-             type: "error",
-             selector: ".advanced-options .errors-container",
-             clear: true
-           });
-         });
-         FauxtonAPI.addNotification({
-           msg: "Make sure that strings are properly quoted and any other values are valid JSON structures",
-           type: "warning",
-           selector: ".advanced-options .errors-container",
-           clear: true
-         });
-
-         return false;
-      }
-
-       var fragment = window.location.hash.replace(/\?.*$/, '');
-       if (!_.isEmpty(params)) {
-        fragment = fragment + '?' + $.param(params);
-       }
-
-       FauxtonAPI.navigate(fragment, {trigger: false});
-       FauxtonAPI.triggerRouteEvent('updateAllDocs', {ddoc: this.ddocID, view: this.viewName});
-    },
-
-
-    previewView: function(event, paramsInfo) {
-      event.preventDefault();
-      var that = this,
-      mapVal = this.mapVal(),
-      reduceVal = this.reduceVal(),
-      paramsArr = [];
-
-      if (paramsInfo && paramsInfo.params) {
-        paramsArr = paramsInfo.params;
-      }
-
-      var params = _.reduce(paramsArr, function (params, param) {
-        params[param.name] = param.value;
-        return params;
-      }, {reduce: false});
-
-      FauxtonAPI.addNotification({
-        msg: "<strong>Warning!</strong> Preview executes the Map/Reduce functions in your browser, and may behave differently from CouchDB.",
-        type: "warning",
-        selector: ".advanced-options .errors-container",
-        fade: true,
-        escape: false // beware of possible XSS when the message changes
-      });
-
-      var promise = FauxtonAPI.Deferred();
-
-      if (!this.database.allDocs || this.database.allDocs.params.include_docs !== true) {
-        this.database.buildAllDocs({limit: Databases.DocLimit.toString(), include_docs: true});
-        promise = this.database.allDocs.fetch();
-       } else {
-        promise.resolve();
-       }
-
-      promise.then(function () {
-        params.docs = that.database.allDocs.map(function (model) { return model.get('doc');});
-        var queryPromise = pouchdb.runViewQuery({map: mapVal, reduce: reduceVal}, params);
-        queryPromise.then(function (results) {
-          FauxtonAPI.triggerRouteEvent('updatePreviewDocs', {rows: results.rows, ddoc: that.getCurrentDesignDoc().id, view: that.viewName});
-        });
-      });
-    },
-
-    getCurrentDesignDoc: function () {
-      return this.designDocSelector.getCurrentDesignDoc();
-    },
-
-    isCustomReduceEnabled: function() {
-      return $("#reduce-function-selector").val() == "CUSTOM";
-    },
-
-    mapVal: function () {
-      if (this.mapEditor) {
-        return this.mapEditor.getValue();
-      }
-
-      return this.$('#map-function').text();
-    },
-
-    reduceVal: function() {
-      var reduceOption = this.$('#reduce-function-selector :selected').val(),
-      reduceVal = "";
-
-      if (reduceOption === 'CUSTOM') {
-        if (!this.reduceEditor) { this.createReduceEditor(); }
-        reduceVal = this.reduceEditor.getValue();
-      } else if ( reduceOption !== 'NONE') {
-        reduceVal = reduceOption;
-      }
-
-      return reduceVal;
-    },
-
-
-    hasValidCode: function() {
-      return _.every(["mapEditor", "reduceEditor"], function(editorName) {
-        var editor = this[editorName];
-        if (editorName === "reduceEditor" && ! this.isCustomReduceEnabled()) {
-          return true;
-        }
-        return editor.hadValidCode();
-      }, this);
-    },
-
-    toggleIndexNav: function (event) {
-      $('#dashboard-content').scrollTop(0); //scroll up
-
-      var $targetId = this.$(event.target).attr('id'),
-          $previousTab = this.$(this.$('li.active a').attr('href')),
-          $targetTab = this.$(this.$(event.target).attr('href'));
-
-      if ($targetTab.attr('id') !== $previousTab.attr('id')) {
-        $previousTab.removeAttr('style');
-      }
-
-      if ($targetId === 'index-nav') {
-        if (this.newView) { return; }
-        var that = this;
-        $('#dashboard-content').scrollTop(0); //scroll up
-        $targetTab.toggle('slow', function(){
-           that.showEditors();
-        });
-      } else {
-        $targetTab.toggle('slow');
-      }
-    },
-
-    serialize: function() {
-      return {
-        ddocs: this.ddocs,
-        ddoc: this.model,
-        ddocName: this.model.id,
-        viewName: this.viewName,
-        reduceFunStr: this.reduceFunStr,
-        isCustomReduce: this.hasCustomReduce(),
-        newView: this.newView,
-        langTemplates: this.langTemplates.javascript
-      };
-    },
-
-    hasCustomReduce: function() {
-      return this.reduceFunStr && ! _.contains(this.builtinReduces, this.reduceFunStr);
-    },
-
-    hasReduce: function () {
-      return this.reduceFunStr || false;
-    },
-
-    createReduceEditor: function () {
-      if (this.reduceEditor) {
-        this.reduceEditor.remove();
-      }
-
-      this.reduceEditor = new Components.Editor({
-        editorId: "reduce-function",
-        mode: "javascript",
-        couchJSHINT: true
-      });
-      this.reduceEditor.render();
-
-      if (this.reduceEditor.getLines() === 1){
-        this.$('.beautify_reduce').removeClass("hide");
-        $('.beautify-tooltip').tooltip();
-      }
-    },
-    beforeRender: function () {
-
-      if (this.newView) {
-        this.reduceFunStr = '';
-        if (this.ddocs.length === 0) {
-          this.model = new Documents.Doc(null, {database: this.database});
-        } else {
-          this.model = this.ddocs.first().dDocModel();
-        }
-        this.ddocID = this.model.id;
-      } else {
-        var ddocDecode = decodeURIComponent(this.ddocID);
-        this.model = this.ddocs.get(this.ddocID).dDocModel();
-        this.reduceFunStr = this.model.viewHasReduce(this.viewName);
-      }
-
-      var viewFilters = FauxtonAPI.getExtensions('sidebar:viewFilters'),
-          filteredModels = this.ddocs.models,
-          designDocs = this.ddocs.clone();
-
-      if (!_.isEmpty(viewFilters)) {
-        _.each(viewFilters, function (filter) {
-          filteredModels = _.filter(filteredModels, filter);
-        });
-        designDocs.reset(filteredModels, {silent: true});
-      }
-
-      this.designDocSelector = this.setView('.design-doc-group', new Views.DesignDocSelector({
-        collection: designDocs,
-        ddocName: this.currentDdoc || this.model.id,
-        database: this.database
-      }));
-
-      if (!this.newView) {
-        this.eventer = _.extend({}, Backbone.Events);
-
-        this.advancedOptions = this.insertView('#query', new QueryOptions.AdvancedOptions({
-          updateViewFn: this.updateView,
-          previewFn: this.previewView,
-          database: this.database,
-          viewName: this.viewName,
-          ddocName: this.model.id,
-          hasReduce: this.hasReduce(),
-          eventer: this.eventer,
-          showStale: true
-        }));
-      }
-
-    },
-
-    afterRender: function() {
-
-      if (this.params && !this.newView) {
-        this.advancedOptions.updateFromParams(this.params);
-      }
-
-      this.designDocSelector.updateDesignDoc();
-      if (this.newView || this.showIndex) {
-        this.showEditors();
-        this.showIndex = false;
-      } else {
-        this.$('#index').hide();
-        this.$('#index-nav').parent().removeClass('active');
-      }
-
-    },
-
-    showEditors: function () {
-      this.mapEditor = new Components.Editor({
-        editorId: "map-function",
-        mode: "javascript",
-        couchJSHINT: true
-      });
-      this.mapEditor.render();
-
-      if (this.hasCustomReduce()) {
-        this.createReduceEditor();
-      } else {
-        $(".control-group.reduce-function").hide();
-      }
-
-      if (this.newView) {
-        this.mapEditor.setValue(this.langTemplates[this.defaultLang].map);
-        //Use a built in view by default
-        //this.reduceEditor.setValue(this.langTemplates[this.defaultLang].reduce);
-      }
-
-      this.mapEditor.editSaved();
-      this.reduceEditor && this.reduceEditor.editSaved();
-
-      if (this.mapEditor.getLines() === 1){
-        this.$('.beautify_map').removeClass("hide");
-        $('.beautify-tooltip').tooltip();
-      }
-    },
-    beautifyCode: function(e){
-      e.preventDefault();
-      var targetEditor = $(e.currentTarget).hasClass('beautify_reduce')?this.reduceEditor:this.mapEditor;
-      var beautifiedCode = beautify(targetEditor.getValue());
-      targetEditor.setValue(beautifiedCode);
-    },
-    cleanup: function () {
-      this.mapEditor && this.mapEditor.remove();
-      this.reduceEditor && this.reduceEditor.remove();
-    }
-  });
-
-  Views.DesignDocSelector = FauxtonAPI.View.extend({
-    template: "addons/documents/templates/design_doc_selector",
-
-    events: {
-      "change select#ddoc": "updateDesignDoc"
-    },
-
-    initialize: function (options) {
-      this.ddocName = options.ddocName;
-      this.database = options.database;
-      this.listenTo(this.collection, 'add', this.ddocAdded);
-      this.DocModel = options.DocModel || Documents.Doc;
-    },
-
-    ddocAdded: function (ddoc) {
-      this.ddocName = ddoc.id;
-      this.render();
-    },
-
-    serialize: function () {
-      return {
-        ddocName: this.ddocName,
-        ddocs: this.collection
-      };
-    },
-
-    updateDesignDoc: function () {
-      if (this.newDesignDoc()) {
-        this.$('#new-ddoc-section').show();
-      } else {
-        this.$('#new-ddoc-section').hide();
-      }
-    },
-
-    newDesignDoc: function () {
-
-      return this.$('#ddoc').val() === 'new-doc';
-    },
-
-    newDocValidation: function(){
-      return this.newDesignDoc() && this.$('#new-ddoc').val()==="";
-    },
-    getCurrentDesignDoc: function () {
-      if (this.newDesignDoc()) {
-        var doc = {
-          _id: '_design/' + this.$('#new-ddoc').val(),
-          views: {},
-          language: "javascript"
-        };
-        var ddoc = new this.DocModel(doc, {database: this.database});
-        //this.collection.add(ddoc);
-        return ddoc;
-      } else if ( !this.newDesignDoc() ) {
-        var ddocName = this.$('#ddoc').val();
-        return this.collection.find(function (ddoc) {
-          return ddoc.id === ddocName;
-        }).dDocModel();
-      }
-    }
-  });
-
-  return Views;
-});

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/documents/views-sidebar.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views-sidebar.js b/app/addons/documents/views-sidebar.js
index 9f8c0ee..1d746ce 100644
--- a/app/addons/documents/views-sidebar.js
+++ b/app/addons/documents/views-sidebar.js
@@ -151,8 +151,13 @@ function(app, FauxtonAPI, Components, Documents, Databases) {
     toggleArrow:  function(e){
       this.$(e.currentTarget).toggleClass("down");
     },
+    buildIndexList: function(collection, selector, ddocType){
+    buildIndexList: function(collection, indexType){
     buildIndexList: function(collection, info){
       var design = this.model.id.replace(/^_design\//,"");
+      var selector = indexType.selector;
+      var ddocType = indexType.ddocType;
+      var icon = indexType.icon;
 
       this.insertView(".accordion-body", new Views.IndexItem({
         selector: info.selector,
@@ -176,14 +181,14 @@ function(app, FauxtonAPI, Components, Documents, Databases) {
 
     getSidebarLinks: function () {
       var ddocName = this.model.id.replace(/^_design\//,""),
-          docSafe = app.utils.safeURLName(ddocName), 
+          docSafe = app.utils.safeURLName(ddocName),
           database = this.collection.database;
 
       return _.reduce(FauxtonAPI.getExtensions('sidebar:links'), function (menuLinks, link) {
 
         menuLinks.push({
           title: link.title,
-          url: "#" + database.url('app') + "/" + link.url + "/" + docSafe,
+          url: "#" + database.url('app')+ "/" + link.url + "/" + docSafe,
           icon: 'fonticon-plus-circled'
         });
 
@@ -228,6 +233,7 @@ function(app, FauxtonAPI, Components, Documents, Databases) {
     }
   });
 
+  //Sidebar Index Item
   Views.IndexItem = FauxtonAPI.View.extend({
     template: "addons/documents/templates/index_menu_item",
     tagName: 'li',
@@ -248,7 +254,7 @@ function(app, FauxtonAPI, Components, Documents, Databases) {
 
     serialize: function() {
       return {
-        icon: this.icons[this.ddocType],
+        icon:  this.icons[this.ddocType],
         ddocType:  this.selector,
         name: this.name,
         index: this.index,
@@ -258,7 +264,6 @@ function(app, FauxtonAPI, Components, Documents, Databases) {
         collection: this.collection
       };
     },
-
     afterRender: function() {
       if (this.selected) {
         $(".sidenav ul.nav-list li").removeClass("active");
@@ -267,6 +272,8 @@ function(app, FauxtonAPI, Components, Documents, Databases) {
     }
   });
 
+
+
   return Views;
 });
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/documents/views.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views.js b/app/addons/documents/views.js
index 7085bd8..16a853a 100644
--- a/app/addons/documents/views.js
+++ b/app/addons/documents/views.js
@@ -38,6 +38,163 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
     });
   }
 
+  //Header for alldocs with search, Query options,& api bar
+  Views.RightAllDocsHeader = FauxtonAPI.View.extend({
+    className: "header-right",
+    template: "addons/documents/templates/header_alldocs",
+    events: {
+      'select .selectAllDocs': 'selectAllDocs'
+    },
+    initialize: function(options){
+      //adding the database to the object
+      this.database = options.database;
+    },
+    selectAllDocs: function(){
+      //trigger event to select all in other view
+    },
+    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(){
+      //insert DB search dropdown
+
+      //insert top create level dropdown with gear icon
+
+      //search docs
+      this.setView("#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:
+      /* Sooooo I searched this file for where Advanced options was originally inserted to see what the hell
+         is happening.  and it's in AllDocsLayout.  So I'm going to move some of those functions over here
+
+        These are required:
+        this.database = options.database;
+        this.updateViewFn = options.updateViewFn;
+        this.previewFn = options.previewFn;
+
+        these are booleans:
+        this.showStale = _.isUndefined(options.showStale) ? false : options.showStale;
+        this.hasReduce = _.isUndefined(options.hasReduce) ? true : options.hasReduce;
+
+        these you only need for view indexes, not all docs because they are about
+        specific views and design docs (ddocs, also views live inside a ddoc):
+        this.viewName = options.viewName;
+        this.ddocName = options.ddocName;
+      */
+      this.setView("#query-options", new QueryOptions.AdvancedOptions({
+        updateViewFn: this.updateAllDocs,
+        previewFn: this.previewView,
+        database: this.database,
+        hasReduce: false,
+        showPreview: false,
+      }));
+
+      //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({}));
+
+    },
+    //moved from alldocs layout
+    updateAllDocs: function (event, paramInfo) {
+      event.preventDefault();
+
+      var errorParams = paramInfo.errorParams,
+          params = paramInfo.params;
+
+      if (_.any(errorParams)) {
+        _.map(errorParams, function(param) {
+
+          // TODO: Where to add this error?
+          // bootstrap wants the error on a control-group div, but we're not using that
+          //$('form.view-query-update input[name='+param+'], form.view-query-update select[name='+param+']').addClass('error');
+          return FauxtonAPI.addNotification({
+            msg: "JSON Parse Error on field: "+param.name,
+            type: "error",
+            selector: ".advanced-options .errors-container",
+            clear:  true
+          });
+        });
+        FauxtonAPI.addNotification({
+          msg: "Make sure that strings are properly quoted and any other values are valid JSON structures",
+          type: "warning",
+          selector: ".advanced-options .errors-container",
+          clear:  true
+        });
+
+        return false;
+      }
+
+      var fragment = window.location.hash.replace(/\?.*$/, '');
+
+      if (!_.isEmpty(params)) {
+        fragment = fragment + '?' + $.param(params);
+      }
+
+      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",
+    events: {
+      'select .selectAllDocs': 'selectAllDocs'
+    },
+    initialize: function(options){
+
+    },
+    selectAllDocs: function(){
+      //trigger event to select all in other view
+    },
+    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'
+    },
+    initialize: function(options){
+
+    },
+    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
+
+    }
+  });
+
 
   Views.DeleteDBModal = Components.ModalView.extend({
     template: "addons/documents/templates/delete_database_modal",
@@ -83,11 +240,10 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
 
   Views.Document = FauxtonAPI.View.extend({
     template: "addons/documents/templates/all_docs_item",
-    tagName: "tr",
-    className: "all-docs-item",
-
+    className: "all-docs-item doc-row",
     initialize: function (options) {
       this.checked = options.checked;
+      this.expanded = options.expanded;
     },
 
     events: {
@@ -103,6 +259,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
 
     serialize: function() {
       return {
+        expanded: this.expanded,
+        docID: this.model.get('_id'),
         doc: this.model,
         checked: this.checked
       };
@@ -148,27 +306,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
     }
   });
 
-  Views.Row = FauxtonAPI.View.extend({
-    template: "addons/documents/templates/index_row_docular",
-    tagName: "tr",
-
-    events: {
-      "click button.delete": "destroy"
-    },
-
-    destroy: function (event) {
-      event.preventDefault();
-
-      window.alert('Cannot delete a document generated from a view.');
-    },
-
-    serialize: function() {
-      return {
-        doc: this.model,
-        url: this.model.url('app')
-      };
-    }
-  });
 
 
   Views.AllDocsNumber = FauxtonAPI.View.extend({
@@ -232,88 +369,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
 
   });
 
-  Views.AllDocsLayout = FauxtonAPI.View.extend({
-    template: "addons/documents/templates/all_docs_layout",
-
-    initialize: function (options) {
-      this.database = options.database;
-      this.params = options.params;
-    },
-
-    events: {
-      'click #toggle-query': "toggleQuery"
-    },
-
-    toggleQuery: function (event) {
-      $('#dashboard-content').scrollTop(0);
-      this.$('#query').toggle('slow');
-    },
-
-    beforeRender: function () {
-      this.advancedOptions = this.insertView('#query', new QueryOptions.AdvancedOptions({
-        updateViewFn: this.updateAllDocs,
-        previewFn: this.previewView,
-        hasReduce: false,
-        showPreview: false,
-        database: this.database,
-      }));
-
-      this.toolsView = this.setView(".js-search", new Views.JumpToDoc({
-        database: this.database,
-        collection: this.database.allDocs
-      }));
-    },
-
-    afterRender: function () {
-      if (this.params) {
-        this.advancedOptions.updateFromParams(this.params);
-      }
-    },
-
-    updateAllDocs: function (event, paramInfo) {
-      event.preventDefault();
-
-      var errorParams = paramInfo.errorParams,
-          params = paramInfo.params;
-
-      if (_.any(errorParams)) {
-        _.map(errorParams, function(param) {
-
-          // TODO: Where to add this error?
-          // bootstrap wants the error on a control-group div, but we're not using that
-          //$('form.view-query-update input[name='+param+'], form.view-query-update select[name='+param+']').addClass('error');
-          return FauxtonAPI.addNotification({
-            msg: "JSON Parse Error on field: "+param.name,
-            type: "error",
-            selector: ".advanced-options .errors-container",
-            clear:  true
-          });
-        });
-        FauxtonAPI.addNotification({
-          msg: "Make sure that strings are properly quoted and any other values are valid JSON structures",
-          type: "warning",
-          selector: ".advanced-options .errors-container",
-          clear:  true
-        });
-
-        return false;
-      }
-
-      var fragment = window.location.hash.replace(/\?.*$/, '');
-
-      if (!_.isEmpty(params)) {
-        fragment = fragment + '?' + $.param(params);
-      }
-
-      FauxtonAPI.navigate(fragment, {trigger: false});
-      FauxtonAPI.triggerRouteEvent('updateAllDocs', {allDocs: true});
-    },
-
-    previewView: function (event) {
-      event.preventDefault();
-    }
-
-  });
 
   // TODO: Rename to reflect that this is a list of rows or documents
   Views.AllDocsList = FauxtonAPI.View.extend({
@@ -378,12 +433,12 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
     },
 
     toggleDocument: function (event) {
-      var $row = this.$(event.target).closest('tr'),
+      var $row = this.$(event.target).closest('.doc-row'),
           docId = $row.attr('data-id'),
           rev = this.collection.get(docId).get('_rev'),
           data = {_id: docId, _rev: rev, _deleted: true};
 
-      if (!$row.hasClass('js-to-delete')) {
+      if (!$row.hasClass('js-to-delete')) {
         this.bulkDeleteDocsCollection.add(data);
       } else {
         this.bulkDeleteDocsCollection.remove(this.bulkDeleteDocsCollection.get(docId));
@@ -535,8 +590,9 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
         if (this.bulkDeleteDocsCollection) {
           isChecked = this.bulkDeleteDocsCollection.get(doc.id);
         }
-        this.rows[doc.id] = this.insertView("table.all-docs tbody", new this.nestedView({
+        this.rows[doc.id] = this.insertView("#doc-list", new this.nestedView({
           model: doc,
+          expanded: this.expandDocs,
           checked: isChecked
         }));
       }, this);
@@ -569,8 +625,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/113615ff/app/addons/fauxton/base.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/base.js b/app/addons/fauxton/base.js
index 8b88d36..68ee7cd 100644
--- a/app/addons/fauxton/base.js
+++ b/app/addons/fauxton/base.js
@@ -14,11 +14,10 @@ define([
   "app",
   "api",
   "addons/fauxton/resizeColumns",
-  "addons/fauxton/components",
-  "plugins/zeroclipboard/ZeroClipboard"
+  "addons/fauxton/components"
 ],
 
-function(app, FauxtonAPI, resizeColumns, Components, ZeroClipboard) {
+function(app, FauxtonAPI, resizeColumns, Components) {
 
   var Fauxton = FauxtonAPI.addon();
   FauxtonAPI.addNotification = function (options) {
@@ -51,7 +50,7 @@ function(app, FauxtonAPI, resizeColumns, Components, ZeroClipboard) {
   Fauxton.initialize = function () {
     // app.footer = new Fauxton.Footer({el: "#footer-content"}),
     app.navBar = new Fauxton.NavBar();
-    app.apiBar = new Fauxton.ApiBar();
+    app.apiBar = new Components.ApiBar();
 
     FauxtonAPI.when.apply(null, app.navBar.establish()).done(function() {
       FauxtonAPI.masterLayout.setView("#primary-navbar", app.navBar, true);
@@ -77,7 +76,7 @@ function(app, FauxtonAPI, resizeColumns, Components, ZeroClipboard) {
       var crumbs = routeObject.get('crumbs');
 
       if (crumbs.length) {
-        FauxtonAPI.masterLayout.setView('#breadcrumbs', new Fauxton.Breadcrumbs({
+        FauxtonAPI.masterLayout.setView('#breadcrumbs', new Components.Breadcrumbs({
           crumbs: crumbs
         }), true).render();
       }
@@ -93,20 +92,7 @@ function(app, FauxtonAPI, resizeColumns, Components, ZeroClipboard) {
     });
   };
 
-  Fauxton.Breadcrumbs = FauxtonAPI.View.extend({
-    template: "addons/fauxton/templates/breadcrumbs",
 
-    serialize: function() {
-      var crumbs = _.clone(this.crumbs);
-      return {
-        crumbs: crumbs
-      };
-    },
-
-    initialize: function(options) {
-      this.crumbs = options.crumbs;
-    }
-  });
 
   Fauxton.VersionInfo = Backbone.Model.extend({
     url: function () {
@@ -259,64 +245,6 @@ function(app, FauxtonAPI, resizeColumns, Components, ZeroClipboard) {
     // TODO: ADD ACTIVE CLASS
   });
 
-  Fauxton.ApiBar = FauxtonAPI.View.extend({
-    template: "addons/fauxton/templates/api_bar",
-    endpoint: '_all_docs',
-
-    documentation: 'docs',
-
-    events:  {
-      "click .api-url-btn" : "toggleAPIbar"
-    },
-
-    toggleAPIbar: function(e){
-      var $currentTarget = $(e.currentTarget).find('span');
-      if ($currentTarget.hasClass("fonticon-plus")){
-        $currentTarget.removeClass("fonticon-plus").addClass("fonticon-minus");
-      }else{
-        $currentTarget.removeClass("fonticon-minus").addClass("fonticon-plus");
-      }
-      $('.api-navbar').toggle();
-    },
-
-    serialize: function() {
-      return {
-        endpoint: this.endpoint,
-        documentation: this.documentation
-      };
-    },
-
-    hide: function(){
-      this.$el.addClass('hide');
-    },
-    show: function(){
-      this.$el.removeClass('hide');
-    },
-    update: function(endpoint) {
-      this.show();
-      this.endpoint = endpoint[0];
-      this.documentation = endpoint[1];
-      this.render();
-    },
-    afterRender: function(){
-      var client = new Components.Clipboard({
-        $el: this.$('.copy-url')
-      });
-
-      client.on("load", function(e){
-        var $apiInput = $('#api-navbar input');
-        var copyURLTimer;
-        client.on("mouseup", function(e){
-          $apiInput.css("background-color","#aaa");
-          window.clearTimeout(copyURLTimer);
-          copyURLTimer = setInterval(function () {
-            $apiInput.css("background-color","#fff");
-          }, 200);
-        });
-      });
-    }
-
-  });
 
   Fauxton.Notification = FauxtonAPI.View.extend({
     fadeTimer: 5000,

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/fauxton/components.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/components.js b/app/addons/fauxton/components.js
index c863ba7..9540252 100644
--- a/app/addons/fauxton/components.js
+++ b/app/addons/fauxton/components.js
@@ -34,7 +34,124 @@ define([
 function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
   var Components = FauxtonAPI.addon();
 
+
+  //setting up the left header with the backbutton used in Views and All docs
+  Components.LeftHeader = FauxtonAPI.View.extend({
+    className: "header-left",
+    template: "addons/fauxton/templates/header_left",
+    initialize:function(options){
+      this.dropdownMenuLinks = options.dropdownMenu;
+      this.crumbs = options.crumbs || [];
+    },
+    updateCrumbs: function(crumbs){
+      this.breadcrumbs && this.breadcrumbs.update(crumbs);
+    },
+    updateDropdown: function(menuLinks){
+      this.dropdown && this.dropdown.update(menuLinks);
+    },
+    beforeRender: function(){
+      this.setUpCrumbs();
+      this.setUpDropDownMenu();
+    },
+    setUpCrumbs: function(){
+      this.breadcrumbs = this.insertView("#header-breadcrumbs", new Components.Breadcrumbs({
+        crumbs: this.crumbs
+      }));
+    },
+    setUpDropDownMenu: function(){
+      if (this.dropdownMenuLinks){
+        this.dropdown = this.insertView("#header-dropdown-menu", new Components.MenuDropDown({
+          icon: 'fonticon-cog',
+          links: this.dropdownMenuLinks,
+        }));
+      }
+    }
+  });
+
+
+  Components.Breadcrumbs = FauxtonAPI.View.extend({
+    className: "breadcrumb pull-left",
+    tagName: "ul",
+    template: "addons/fauxton/templates/breadcrumbs",
+    serialize: function() {
+      var crumbs = _.clone(this.crumbs);
+      return {
+        crumbs: crumbs
+      };
+    },
+    update: function(crumbs) {
+      this.crumbs = crumbs;
+      this.render();
+    },
+    initialize: function(options) {
+      this.crumbs = options.crumbs;
+    }
+  });
+
+  Components.ApiBar = FauxtonAPI.View.extend({
+    template: "addons/fauxton/templates/api_bar",
+    events:  {
+      "click .api-url-btn" : "toggleAPIbar"
+    },
+
+    initialize: function(options){
+      var _options = options || {};
+      this.endpoint = _options.endpoint || '_all_docs';
+      this.documentation = _options.documentation || 'docs';
+    },
+
+    toggleAPIbar: function(e){
+      var $currentTarget = $(e.currentTarget).find('span');
+      if ($currentTarget.hasClass("fonticon-plus")){
+        $currentTarget.removeClass("fonticon-plus").addClass("fonticon-minus");
+      }else{
+        $currentTarget.removeClass("fonticon-minus").addClass("fonticon-plus");
+      }
+      $('.api-navbar').toggle();
+    },
+
+    serialize: function() {
+      return {
+        endpoint: this.endpoint,
+        documentation: this.documentation
+      };
+    },
+
+    hide: function(){
+      this.$el.addClass('hide');
+    },
+    show: function(){
+      this.$el.removeClass('hide');
+    },
+    update: function(endpoint) {
+      this.show();
+      this.endpoint = endpoint[0];
+      this.documentation = endpoint[1];
+      this.render();
+    },
+    afterRender: function(){
+      ZeroClipboard.config({ moviePath: "/assets/js/plugins/zeroclipboard/ZeroClipboard.swf" });
+      var client = new ZeroClipboard(this.$(".copy-url"));
+      client.on("load", function(e){
+        var $apiInput = $('#api-navbar input');
+        var copyURLTimer;
+        client.on("mouseup", function(e){
+          $apiInput.css("background-color","#aaa");
+          window.clearTimeout(copyURLTimer);
+          copyURLTimer = setInterval(function () {
+            $apiInput.css("background-color","#fff");
+          }, 200);
+        });
+      });
+    }
+
+  });
+
+
+
+
   Components.Pagination = FauxtonAPI.View.extend({
+    className: "pagination pagination-centered",
     template: "addons/fauxton/templates/pagination",
 
     initialize: function(options) {
@@ -57,6 +174,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',
@@ -453,7 +571,7 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
       if (this.mode != "plain") {
         this.editor.getSession().setMode("ace/mode/" + this.mode);
       }
-      
+
       this.editor.setShowPrintMargin(false);
       this.addCommands();
 
@@ -624,11 +742,16 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
     className: "dropdown",
     initialize: function(options){
       this.links = options.links;
+      this.icon = options.icon || "fonticon-plus-circled2";
+    },
+    update: function(links){
+      this.links = links;
+      this.render();
     },
     serialize: function(){
-      var sidebarItem = FauxtonAPI.getExtensions('sidebar:links');
       return {
-        links: this.links
+        links: this.links,
+        icon: this.icon
       };
     }
   });
@@ -656,7 +779,7 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
   //need to make this into a backbone view...
   var routeObjectSpinner;
   FauxtonAPI.RouteObject.on('beforeEstablish', function (routeObject) {
-    if (!routeObject.disableLoader){ 
+    if (!routeObject.disableLoader){
       var opts = {
         lines: 16, // The number of lines to draw
         length: 8, // The length of each line
@@ -702,7 +825,7 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
   FauxtonAPI.RouteObject.on('beforeRender', function (routeObject, view, selector) {
     removeRouteObjectSpinner();
 
-    if (!view.disableLoader){ 
+    if (!view.disableLoader){
       var opts = {
         lines: 16, // The number of lines to draw
         length: 8, // The length of each line

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/fauxton/resizeColumns.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/resizeColumns.js b/app/addons/fauxton/resizeColumns.js
index b3d8841..98555a9 100644
--- a/app/addons/fauxton/resizeColumns.js
+++ b/app/addons/fauxton/resizeColumns.js
@@ -32,7 +32,8 @@ function(FauxtonAPI) {
       var primaryNavWidth  = $('body').hasClass('closeMenu') ? 64 : 220;
       return primaryNavWidth;
     },
-    getPanelWidth: function(){
+
+    getSinglePanelWidth: function(){
       var sidebarWidth = $('#sidebar-content').length > 0 ? $('#sidebar-content').outerWidth() : 0,
           borders = parseInt($('#dashboard').css('border-left-width'), 10) +
                     parseInt($('#dashboard-content').css('border-left-width'), 10) +
@@ -40,6 +41,16 @@ function(FauxtonAPI) {
 
       return (this.getPrimaryNavWidth() + sidebarWidth + borders);
     },
+
+    getTwoPanelWidth: function(){
+      var borders = parseInt($('#dashboard').css('border-left-width'), 10) +
+          parseInt($('#right-content').css('border-left-width'), 10) +
+          parseInt($('#left-content').css('border-right-width'), 10)+
+          parseInt($('#left-content').css('border-left-width'), 10) +
+          parseInt($('#right-content').css('border-right-width'), 10);
+      return (this.getPrimaryNavWidth()+ borders);
+    },
+
     initialize: function(){
      // $(window).off('resize');
       var that = this;
@@ -49,33 +60,63 @@ function(FauxtonAPI) {
       FauxtonAPI.utils.initWindowResize();
       this.onResizeHandler();
     },
+
     updateOptions:function(options){
       this.options = {};
       this.options = options;
     },
+
     turnOff:function(){
       FauxtonAPI.utils.removeWindowResize("animation");
     },
+
     cleanupCallback: function(){
       this.callback = null;
     },
+
+    singlePanelResize: function(){
+      var combinedWidth = window.innerWidth - this.getSinglePanelWidth(),
+      smallWidthConstraint = ($('#sidebar-content').length > 0)? 470:800,
+      panelWidth;
+
+      if (combinedWidth > smallWidthConstraint) {
+        panelWidth = combinedWidth;
+      } else if (combinedWidth < smallWidthConstraint){
+        panelWidth = smallWidthConstraint;
+      }
+      return panelWidth;
+    },
+
+    getPanelWidth: function(){
+      var panelWidth;
+      if ($('#dashboard').hasClass('two-pane')){
+        panelWidth = (window.innerWidth - this.getTwoPanelWidth())/2;
+      } else {
+        panelWidth = this.singlePanelResize();
+      }
+      return panelWidth;
+    },
+
+    setPosition: function(panelWidth){
+      var primary = this.getPrimaryNavWidth();
+      $('#right-content').css('left',panelWidth+primary+4);
+    },
+
     onResizeHandler: function (){
       //if there is an override, do that instead
       if (this.options.onResizeHandler){
         this.options.onResizeHandler();
       } else {
-        var combinedWidth = window.innerWidth - this.getPanelWidth(),
-        smallWidthConstraint = ($('#sidebar-content').length > 0)? 470:800,
-        panelWidth;
-
-        if (combinedWidth > smallWidthConstraint) {
-          panelWidth = window.innerWidth - this.getPanelWidth();
-        } else if (combinedWidth < smallWidthConstraint){
-          panelWidth = smallWidthConstraint;
-        }
+        /*
+          Just so we all are aware:
+          This entire file and the html of the layouts is bonkers
+          crazy. I hate what horrible things happened in this file.
+          It will change soon with a layout overhaul.
+        */
 
+        var panelWidth = this.getPanelWidth();
+        this.setPosition(panelWidth);
         $('.window-resizeable').innerWidth(panelWidth);
-
       }
       //if there is a callback, run that
       if(this.options.callback) {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/fauxton/templates/breadcrumbs.html
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/templates/breadcrumbs.html b/app/addons/fauxton/templates/breadcrumbs.html
index 52ea884..ca073c3 100644
--- a/app/addons/fauxton/templates/breadcrumbs.html
+++ b/app/addons/fauxton/templates/breadcrumbs.html
@@ -12,13 +12,10 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
-<ul class="breadcrumb pull-left">
   <% _.each(_.initial(crumbs), function(crumb) { %>
     <li>
-      <a href="#<%- crumb.link %>"><%- crumb.name %></a>
-      <span class="divider fonticon fonticon-right-open"> </span>
+      <a href="#<%- crumb.link %>" class="fonticon <%- crumb.className %>"><%- crumb.name %></a>
     </li>
   <% }); %>
   <% var last = _.last(crumbs) || {name: ''} %>
   <li class="active"><%- last.name %></li>
-</ul>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/fauxton/templates/header_left.html
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/templates/header_left.html b/app/addons/fauxton/templates/header_left.html
new file mode 100644
index 0000000..13bea60
--- /dev/null
+++ b/app/addons/fauxton/templates/header_left.html
@@ -0,0 +1,17 @@
+<!--
+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.
+-->
+<!--back arrow-->
+<div id="header-breadcrumbs"></div>
+  <!-- Menu gear-->
+<div id="header-dropdown-menu"></div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/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/113615ff/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 ddef343..d1e96af 100644
--- a/app/addons/fauxton/templates/menu_dropdown.html
+++ b/app/addons/fauxton/templates/menu_dropdown.html
@@ -12,7 +12,7 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
-<a class="dropdown-toggle icon fonticon-plus-circled2" data-toggle="dropdown" href="#" data-bypass="true"></a>
+<a class="dropdown-toggle icon <%=icon%>" data-toggle="dropdown" href="#" data-bypass="true"></a>
 <ul class="dropdown-menu arrow" role="menu" aria-labelledby="dLabel">
   <% _.each(links, function (linkSection) { %>
     <% if (linkSection.title) { %>
@@ -20,9 +20,9 @@ the License.
     <% } %>
     <% _.each(linkSection.links, function (link) { %>
       <li>
-        <a 
+        <a
           <% if (link.icon) { %>
-          class="icon <%- link.icon %>" 
+          class="icon <%- link.icon %>"
           <% } %>
           href="<%- link.url %>">
           <%- link.title %>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/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/113615ff/app/addons/indexes/assets/less/doc-item.less
----------------------------------------------------------------------
diff --git a/app/addons/indexes/assets/less/doc-item.less b/app/addons/indexes/assets/less/doc-item.less
new file mode 100644
index 0000000..a04883a
--- /dev/null
+++ b/app/addons/indexes/assets/less/doc-item.less
@@ -0,0 +1,83 @@
+// 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.
+.view table td div.doc-menu-item div.dropdown{
+  display: block;
+}
+
+#doc-list{
+  margin-top: 30px;
+  div.doc-row {
+    margin-bottom:20px;
+    div.select {
+      width: 10%;
+      float: left;
+      vertical-align: top;
+    }
+    .doc-item {
+      float:left;
+      width:90%;
+      vertical-align: top;
+      position: relative;
+      .border-radius(5px 5px 5px 5px);
+      .box-shadow(3px 4px 0 rgba(0, 0, 0, 0.3));
+      border: 1px solid #000;
+      header {
+        font-weight: bold;
+        position: relative;
+        padding: 20px;
+        background-color: #777;
+        color: #3a2c2b;
+        border-bottom: 1px solid #000;
+        .header-id-number{
+          color: #fff;
+          margin-left: 10px;
+        }
+      }
+
+      .doc-data{
+        pre.prettyprint{
+        }
+      }
+
+      &:hover{
+        .btn-group{
+          display:block;
+        }
+      }
+      //temporary
+      .btn-group{
+        position:absolute;
+        top:10px;
+        right:10px;
+        display:none;
+      }
+
+      .doc-menu {
+        position:absolute;
+        right: 0px;
+        top: 0px;
+        .doc-menu-item{
+          a {
+            text-decoration: none;
+          }
+          .dropdown-menu {
+            left:auto;
+            right: 0px;
+          }
+          display: inline-block;
+          width: 30px;
+          height: 30px;
+        }
+      }
+    }
+  }
+}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/indexes/assets/less/index-form.less
----------------------------------------------------------------------
diff --git a/app/addons/indexes/assets/less/index-form.less b/app/addons/indexes/assets/less/index-form.less
new file mode 100644
index 0000000..c07163b
--- /dev/null
+++ b/app/addons/indexes/assets/less/index-form.less
@@ -0,0 +1,64 @@
+// 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.
+.index-form{
+  .control-group {
+    padding:15px 25px;
+    border-bottom: 1px solid #D9D9D9;
+    border-top: 1px solid #fff;
+    margin: 0 0 0 1px;
+    > input[type=text]{
+      width: 100%;
+      .border-radius(5px 5px 5px 5px);
+    }
+  }
+  .js-editor {
+    border: 1px solid #ccc;
+    .border-radius(5px 5px 5px 5px);
+  }
+}
+.input-prepend {
+  margin-left:0;
+}
+.new-ddoc {
+  .select-wrapper {
+    .border-radius(5px 0 0 5px);
+    margin-left:0;
+    overflow: hidden;
+    border: 1px solid #d0cdc6;
+    position: relative;
+    select {
+      border: 0;
+      color: #000;
+      background: transparent;
+      font-size: 14px;
+      padding: 5px 10px;
+      -webkit-appearance: none;
+      -moz-appearance: window;
+      height: 44px;
+    }
+    i {
+      position: absolute;
+      right: 20px;
+      top: 16px;
+      display: block;
+      color: #000;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 10px 7.5px 0 7.5px;
+      border-color: #000000 transparent transparent transparent;
+    }
+  }
+  input[type=text]{
+    .border-radius(0px 5px 5px 0);
+  }
+}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/indexes/assets/less/indexes.less
----------------------------------------------------------------------
diff --git a/app/addons/indexes/assets/less/indexes.less b/app/addons/indexes/assets/less/indexes.less
new file mode 100644
index 0000000..5795cce
--- /dev/null
+++ b/app/addons/indexes/assets/less/indexes.less
@@ -0,0 +1,17 @@
+// 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.
+@import "../../../../../assets/less/variables.less";
+@import "../../../../../assets/less/bootstrap/variables.less";
+@import "../../../../../assets/less/bootstrap/mixins.less";
+@import "new-index-placeholder.less";
+@import "index-form.less";
+@import "doc-item.less";

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/indexes/assets/less/new-index-placeholder.less
----------------------------------------------------------------------
diff --git a/app/addons/indexes/assets/less/new-index-placeholder.less b/app/addons/indexes/assets/less/new-index-placeholder.less
new file mode 100644
index 0000000..ade1d3a
--- /dev/null
+++ b/app/addons/indexes/assets/less/new-index-placeholder.less
@@ -0,0 +1,25 @@
+// 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.
+.watermark-logo {
+  background: transparent url('../img/couchWatermark.png') no-repeat 50% 50%;
+  min-height: 400px;
+  padding-top: 60%;
+  text-align: center;
+  h3 {
+    border-bottom: 1px solid #ccc;
+    padding-bottom:10px;
+    margin-bottom:20px;
+  }
+  .preview {
+    margin: 0 10px;
+  }
+}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/indexes/base.js
----------------------------------------------------------------------
diff --git a/app/addons/indexes/base.js b/app/addons/indexes/base.js
new file mode 100644
index 0000000..6365c61
--- /dev/null
+++ b/app/addons/indexes/base.js
@@ -0,0 +1,74 @@
+// 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.
+
+
+/*  View Indexes  */
+define([
+  "app",
+  "api",
+  "addons/indexes/routes"
+],
+function(app, FauxtonAPI, Routes) {
+  Routes.initialize = function() {
+
+    /*
+      Example of an extension:
+      An extension is just like an event that may or may not have listener in another view.
+      In this case the listener is in the documents addon in the sidebar.
+
+      If there are is a view that you want rendered in another route, this is the way to do it.
+
+      Each Secondary index is going to trigger this event with the views it's passing.
+      The views will be rendered and have links to the routes defined in this addon. Then it's just business as usual.
+
+      FauxtonAPI.registerExtension('sidebar:list', new Views.IndexMenu({}));
+      FauxtonAPI.registerExtension('sidebar:links',{
+        title: "New View",
+        url: "new_view"
+      });
+
+
+    */
+    //Show in the sidebar
+    FauxtonAPI.registerExtension('sidebar:list', {
+      selector:'views',
+      ddocType:'view',
+      icon: "fonticon-sidenav-map-reduce"
+    });
+    FauxtonAPI.registerExtension('sidebar:list', {
+      selector:'list',
+      icon: "fonticon-sidenav-list-function"
+    });
+    FauxtonAPI.registerExtension('sidebar:list', {
+      selector:'show',
+      icon: "fonticon-sidenav-show-function"
+    });
+
+
+    /* show in the add new menu dropdown */
+    FauxtonAPI.registerExtension('sidebar:links', {
+      title: "Secondary View",
+      url: "new_view"
+    });
+    FauxtonAPI.registerExtension('sidebar:links', {
+      title: "List Function",
+      url: "new_list"
+    });
+
+    FauxtonAPI.registerExtension('sidebar:links', {
+      url: 'new_show',
+      title: 'Show Index'
+    });
+
+  };
+  return Routes;
+});

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/indexes/index-components.js
----------------------------------------------------------------------
diff --git a/app/addons/indexes/index-components.js b/app/addons/indexes/index-components.js
new file mode 100644
index 0000000..1ec34e2
--- /dev/null
+++ b/app/addons/indexes/index-components.js
@@ -0,0 +1,30 @@
+// 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.
+
+
+/*
+  Index components includes any common, generic, and reusable code for creating secondary indexes
+  View functions, List functions, Show Functions, and Filter functions, as well as anything created by
+  couchdb affiliates.
+*/
+
+define([
+  "app",
+  "api"
+],
+
+function(app, FauxtonAPI) {
+  var Components = {};
+
+
+  return Components;
+});

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/indexes/resources.js
----------------------------------------------------------------------
diff --git a/app/addons/indexes/resources.js b/app/addons/indexes/resources.js
new file mode 100644
index 0000000..626d984
--- /dev/null
+++ b/app/addons/indexes/resources.js
@@ -0,0 +1,285 @@
+// 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.
+define([
+  "app",
+  "api",
+  "cloudant.pagingcollection"
+],
+
+function(app, FauxtonAPI, PagingCollection) {
+ var Resources = {};
+
+
+   Resources.QueryParams = (function () {
+    var _eachParams = function (params, action) {
+      // clone to avoid in-place modification
+      var result = _.clone(params);
+
+      _.each(['startkey', 'endkey', 'key'], function (key) {
+        if (_.has(result, key)) {
+          result[key] = action(result[key]);
+        }
+      });
+
+      return result;
+    };
+
+    return {
+      parse: function (params) {
+        return _eachParams(params, JSON.parse);
+      },
+
+      stringify: function (params) {
+        return _eachParams(params, JSON.stringify);
+      }
+    };
+  })();
+
+  Resources.ViewRow = FauxtonAPI.Model.extend({
+    // this is a hack so that backbone.collections doesn't group
+    // these by id and reduce the number of items returned.
+    idAttribute: "_id",
+
+    docType: function() {
+      if (!this.id) return "reduction";
+
+      return this.id.match(/^_design/) ? "design doc" : "doc";
+    },
+    documentation: function(){
+      return "docs";
+    },
+    url: function(context) {
+      return this.collection.database.url(context) + "/" + this.safeID();
+    },
+
+    isEditable: function() {
+      return this.docType() != "reduction";
+    },
+    safeID: function() {
+      var id = this.id || this.get("id");
+
+      return app.utils.safeURLName(id);
+    },
+
+    prettyJSON: function() {
+      //var data = this.get("doc") ? this.get("doc") : this;
+      return JSON.stringify(this, null, "  ");
+    }
+  });
+
+
+  Resources.PouchIndexCollection = PagingCollection.extend({
+    model: Resources.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 Resources.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;
+    }
+  });
+
+
+  Resources.IndexCollection = PagingCollection.extend({
+    model: Resources.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 = Resources.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 Resources.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;
+    }
+
+  });
+
+  return Resources;
+});

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/indexes/routes-core.js
----------------------------------------------------------------------
diff --git a/app/addons/indexes/routes-core.js b/app/addons/indexes/routes-core.js
new file mode 100644
index 0000000..354afb0
--- /dev/null
+++ b/app/addons/indexes/routes-core.js
@@ -0,0 +1,129 @@
+// 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.
+define([
+  "app",
+  "api",
+  "addons/databases/base",
+  "addons/indexes/views",
+  "addons/documents/views",
+  "addons/indexes/resources"
+],
+
+function (app, FauxtonAPI, Databases, Views, Documents, Resources) {
+
+  var CoreIndexRouteObj =  FauxtonAPI.RouteObject.extend({
+    layout: "two_pane",
+
+    initialize: function (route, masterLayout, options) {
+      this.databaseName = options[0];
+
+      this.data = {
+        database: new Databases.Model({id:this.databaseName})
+      };
+
+      this.data.designDocs = new Documents.AllDocs(null, {
+        database: this.data.database,
+        paging: {
+          pageSize: 500
+        },
+        params: {
+          startkey: '_design',
+          endkey: '_design1',
+          include_docs: true,
+          limit: 500
+        }
+      });
+    },
+
+    events: {
+      "route:updatePreviewDocs": "updateAllDocsFromPreview"
+    },
+
+    ddocInfo: function (designDoc, designDocs, view) {
+      return {
+        id: "_design/" + designDoc,
+        currView: view,
+        designDocs: designDocs
+      };
+    },
+
+    createParams: function (options) {
+      var urlParams = app.getParams(options);
+      var params = Documents.QueryParams.parse(urlParams);
+
+      return {
+        urlParams: urlParams,
+        docParams: _.extend(params, {limit: this.getDocPerPageLimit(params, 20)})
+      };
+    },
+
+    getDocPerPageLimit: function (urlParams, perPage) {
+      var storedPerPage = perPage;
+
+      if (window.localStorage) {
+        storedPerPage = window.localStorage.getItem('fauxton:perpage');
+
+        if (!storedPerPage) {
+          this.setDocPerPageLimit(perPage);
+          storedPerPage = perPage;
+        } else {
+          storedPerPage = parseInt(storedPerPage, 10);
+        }
+      }
+
+      if (!urlParams.limit || urlParams.limit > storedPerPage) {
+        return parseInt(storedPerPage, 10);
+      } else {
+        return parseInt(urlParams.limit, 10);
+      }
+    },
+
+    establish: function () {
+      return this.data.designDocs.fetch({reset: true});
+    },
+
+    createViewDocumentsView: function (options) {
+      return this.setView("#right-content", new Documents.Views.AllDocsList({
+        database: options.database,
+        collection: options.indexedDocs,
+        nestedView: Views.Row,
+        viewList: true,
+        ddocInfo: this.ddocInfo(options.designDoc, options.designDocs, options.view),
+        docParams: options.docParams,
+        params: options.urlParams
+      }));
+    },
+
+    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("#right-content", new Documents.Views.AllDocsList({
+        database: this.data.database,
+        collection: this.data.indexedDocs,
+        nestedView: Views.Row,
+        viewList: true
+      }));
+    }
+  });
+
+  return CoreIndexRouteObj;
+
+});

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/indexes/routes-list.js
----------------------------------------------------------------------
diff --git a/app/addons/indexes/routes-list.js b/app/addons/indexes/routes-list.js
new file mode 100644
index 0000000..437cef6
--- /dev/null
+++ b/app/addons/indexes/routes-list.js
@@ -0,0 +1,108 @@
+// 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.
+define([
+  "app",
+  "api",
+  "addons/databases/base",
+  "addons/indexes/views",
+  "addons/documents/views",
+  "addons/indexes/resources",
+  "addons/indexes/routes-core",
+  "addons/fauxton/components"
+],
+
+function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore, Components) {
+
+  var ListIndexes = RouteCore.extend({
+    routes: {
+      "database/:database/_design/:ddoc/_lists/:fn": {
+        route: "tempFn",
+        roles: ['_admin']
+      },
+      "database/:database/new_list": "newListsEditor",
+      "database/:database/new_list/:designDoc": "newListsEditor"
+    },
+
+    apiUrl: function() {
+      //TODO: Hook up proper API urls
+      return '';
+    },
+
+    newListsEditor: function (database, designDoc) {
+      var params = app.getParams();
+
+      /* --------------------------------------------------
+        Insert View Editor for new list
+      ----------------------------------------------------*/
+      this.setView("#left-content", new Views.ListEditor({
+        model: this.data.database,
+        currentddoc: designDoc ? "_design/"+designDoc : "",
+        ddocs: this.data.designDocs,
+        params: params,
+        database: this.data.database,
+        newView: true
+      }));
+      /* --------------------------------------------------
+        Insert Preview Screen View
+      ----------------------------------------------------*/
+      this.setView("#right-content", new Views.PreviewScreen({}));
+
+      /* --------------------------------------------------
+        Set up & Insert breadcrumb header
+      ----------------------------------------------------*/
+      var crumbs = [
+        {"name": "", "className": "fonticon-left-open", "link": Databases.databaseUrl(this.data.database)},
+        {"name": "Create a List Index", "link": Databases.databaseUrl(this.data.database)}
+      ];
+      this.leftheader = this.setView("#breadcrumbs", new Components.LeftHeader({
+        crumbs: crumbs
+      }));
+    },
+    tempFn:  function(databaseName, ddoc, view){
+      /* --------------------------------------------------
+        Set up breadcrumb header
+      ----------------------------------------------------*/
+      var crumbs = [
+        {"name": "", "className": "fonticon-left-open", "link": Databases.databaseUrl(this.data.database)},
+        {"name": view, "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
+      }));
+
+
+      /* --------------------------------------------------
+        Insert List Editor
+      ----------------------------------------------------*/
+      this.setView("#left-content", new Views.ListEditor({}));
+
+      /* --------------------------------------------------
+        Insert Preview Screen View
+      ----------------------------------------------------*/
+      this.setView("#right-content", new Views.PreviewScreen({}));
+    }
+  });
+
+  return ListIndexes;
+});

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/indexes/routes-show.js
----------------------------------------------------------------------
diff --git a/app/addons/indexes/routes-show.js b/app/addons/indexes/routes-show.js
new file mode 100644
index 0000000..73f52d1
--- /dev/null
+++ b/app/addons/indexes/routes-show.js
@@ -0,0 +1,103 @@
+// 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.
+define([
+  "app",
+  "api",
+  "addons/databases/base",
+  "addons/indexes/views",
+  "addons/documents/views",
+  "addons/indexes/resources",
+  "addons/indexes/routes-core",
+   "addons/fauxton/components"
+],
+
+function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore, Components) {
+
+  var ShowIndexes = RouteCore.extend({
+    routes: {
+      "database/:database/_design/:ddoc/_show/:fn": {
+        route: "tempFn",
+        roles: ['_admin']
+      },
+      "database/:database/new_show": "newShowEditor",
+      "database/:database/new_show/:designDoc": "newShowEditor"
+    },
+
+    newShowEditor: function (database, designDoc) {
+      var params = app.getParams();
+      /* --------------------------------------------------
+        Insert View Editor for new view
+      ----------------------------------------------------*/
+      this.setView("#left-content", new Views.ShowEditor({
+        model: this.data.database,
+        currentddoc: designDoc ? "_design/"+designDoc : "",
+        ddocs: this.data.designDocs,
+        params: params,
+        database: this.data.database,
+        newView: true
+      }));
+
+      /* --------------------------------------------------
+        Insert Preview Screen View
+      ----------------------------------------------------*/
+      this.setView("#right-content", new Views.PreviewScreen({}));
+
+      /* --------------------------------------------------
+        Set up & Insert breadcrumb header
+      ----------------------------------------------------*/
+      var crumbs = [
+        {"name": "", "className": "fonticon-left-open", "link": Databases.databaseUrl(this.data.database)},
+        {"name": "Create a Show Index", "link": Databases.databaseUrl(this.data.database)}
+      ];
+      this.leftheader = this.setView("#breadcrumbs", new Components.LeftHeader({
+        crumbs: crumbs
+      }));
+    },
+    tempFn:  function(databaseName, ddoc, view){
+      /* --------------------------------------------------
+        Set up breadcrumb header
+      ----------------------------------------------------*/
+      var crumbs = [
+        {"name": "", "className": "fonticon-left-open", "link": Databases.databaseUrl(this.data.database)},
+        {"name": view, "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
+      }));
+
+
+      /* --------------------------------------------------
+        Insert Show Editor
+      ----------------------------------------------------*/
+      this.setView("#left-content", new Views.ListEditor({}));
+
+      /* --------------------------------------------------
+        Insert Preview Screen View
+      ----------------------------------------------------*/
+      this.setView("#right-content", new Views.PreviewScreen({}));
+    }
+  });
+
+  return ShowIndexes;
+});

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/113615ff/app/addons/indexes/routes-viewindexes.js
----------------------------------------------------------------------
diff --git a/app/addons/indexes/routes-viewindexes.js b/app/addons/indexes/routes-viewindexes.js
new file mode 100644
index 0000000..7330d04
--- /dev/null
+++ b/app/addons/indexes/routes-viewindexes.js
@@ -0,0 +1,156 @@
+// 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.
+define([
+  "app",
+  "api",
+  "addons/databases/base",
+  "addons/indexes/views",
+  "addons/documents/views",
+  "addons/indexes/resources",
+  "addons/indexes/routes-core",
+  "addons/fauxton/components"
+],
+
+function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore, Components) {
+
+  var ViewIndexes = RouteCore.extend({
+    routes: {
+      "database/:database/_design/:ddoc/_view/:view": {
+        route: "viewFn",
+        roles: ['_admin']
+      },
+      "database/:database/new_view": "newViewEditor",
+      "database/:database/new_view/:designDoc": "newViewEditor"
+    },
+
+    newViewEditor: function (database, designDoc) {
+      var params = app.getParams();
+      /* --------------------------------------------------
+        remove right header
+      ----------------------------------------------------*/
+      this.rightheader && this.rightheader.remove();
+
+      /* --------------------------------------------------
+        Insert Preview Screen View
+      ----------------------------------------------------*/
+      this.setView("#right-content", new Views.PreviewScreen({}));
+
+      /* --------------------------------------------------
+        Insert View Editor for new view
+      ----------------------------------------------------*/
+      this.viewEditor = this.setView("#left-content", new Views.ViewEditor({
+        model: this.data.database,
+        currentddoc: designDoc ? "_design/"+designDoc : "",
+        ddocs: this.data.designDocs,
+        params: params,
+        database: this.data.database,
+        newView: true
+      }));
+
+      /* --------------------------------------------------
+        Set up & Insert breadcrumb header
+      ----------------------------------------------------*/
+      var crumbs = [
+        {"name": "", "className": "fonticon-left-open", "link": Databases.databaseUrl(this.data.database)},
+        {"name": "Create a View Index", "link": Databases.databaseUrl(this.data.database)}
+      ];
+      this.leftheader = this.setView("#breadcrumbs", new Components.LeftHeader({
+        crumbs: crumbs
+      }));
+
+    },
+
+    viewFn: function (databaseName, ddoc, view) {
+      var params = this.createParams(),
+          urlParams = params.urlParams,
+          docParams = params.docParams,
+          decodeDdoc = decodeURIComponent(ddoc);
+          view = view.replace(/\?.*$/,'');
+
+      /* --------------------------------------------------
+        Set up breadcrumb header
+      ----------------------------------------------------*/
+      var crumbs = [
+        {"name": "", "className": "fonticon-left-open", "link": Databases.databaseUrl(this.data.database)},
+        {"name": view, "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
+      }));
+
+      /* --------------------------------------------------
+        Set up Index Collection
+      ----------------------------------------------------*/
+      this.data.indexedDocs = new Resources.IndexCollection(null, {
+        database: this.data.database,
+        design: decodeDdoc,
+        view: view,
+        params: docParams,
+        paging: {
+          pageSize: this.getDocPerPageLimit(urlParams, parseInt(docParams.limit, 10))
+        }
+      });
+
+
+      /* --------------------------------------------------
+        Set up right header
+      ----------------------------------------------------*/
+
+      this.rightheader = this.setView("#api-navbar", new Views.RightHeader({
+        database: this.data.database,
+        model: this.data.database,
+        endpoint: this.data.indexedDocs.urlRef("apiurl", urlParams),
+        documentation: "docs"
+      }));
+
+      /* --------------------------------------------------
+        Insert View Editor
+      ----------------------------------------------------*/
+      this.viewEditor = this.setView("#left-content", new Views.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)
+      }));
+
+      /* --------------------------------------------------
+        Insert Docs returned from view
+      ----------------------------------------------------*/
+      this.documentsView = this.createViewDocumentsView({
+        designDoc: decodeDdoc,
+        docParams: docParams,
+        urlParams: urlParams,
+        database: this.data.database,
+        indexedDocs: this.data.indexedDocs,
+        designDocs: this.data.designDocs,
+        view: view
+      });
+    }
+  });
+
+  return ViewIndexes;
+});


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

Posted by ga...@apache.org.
Secondary index work:
use Events to close trays
refactor css for header trays
style api bar button on fixed header
fix api bar help icon


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

Branch: refs/heads/continue-secondary-index
Commit: 8129168ee11152eea45d9ac7e12aa3e78eca1a4f
Parents: e196a73
Author: Jenn Schiffer <je...@pancaketheorem.com>
Authored: Wed Aug 13 15:16:45 2014 -0400
Committer: Garren Smith <ga...@gmail.com>
Committed: Tue Aug 26 12:40:46 2014 +0200

----------------------------------------------------------------------
 .../documents/assets/less/advancedOptions.less  | 35 ++-------
 .../documents/templates/advanced_options.html   |  2 +-
 app/addons/documents/views-advancedopts.js      | 15 ++--
 app/addons/fauxton/components.js                | 13 +++-
 app/addons/fauxton/templates/api_bar.html       |  4 +-
 assets/less/fauxton.less                        | 37 ++--------
 assets/less/headers.less                        | 76 ++++++++++++++------
 7 files changed, 93 insertions(+), 89 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8129168e/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 6febf3b..16ddb2b 100644
--- a/app/addons/documents/assets/less/advancedOptions.less
+++ b/app/addons/documents/assets/less/advancedOptions.less
@@ -13,27 +13,17 @@
 
 /*for advanced options css*/
 .advanced-options.well {
-  display: inline-block;
-  background: none;
-  border: none;
   box-shadow: none;
+  border: none;
+  background: none;
+}
+
+#query-options-tray:before {
+  right: 140px;
 }
+
 #query-options-tray {
-  display: none;
-  .border-radius(5px);
   width: 490px;
-  position: absolute;
-  right: 5px;
-  z-index: 11;
-  background-color: #333;
-  color: #fff;
-  padding: 0;
-  margin: 0;
-  .add-on {
-    padding: 0;
-    margin: 0;
-    line-height: 1em;
-  }
   .query-group {
     padding: 20px;
     border-bottom: 1px solid #555;
@@ -126,15 +116,4 @@
   #skipRows {
     margin-left: 5px;
   }
-}
-#query-options-tray:before {
-  content: '';
-  position: absolute;
-  top: -25px;
-  right: 140px;
-  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/8129168e/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 5e0e77f..95bbe5c 100644
--- a/app/addons/documents/templates/advanced_options.html
+++ b/app/addons/documents/templates/advanced_options.html
@@ -16,7 +16,7 @@ the License.
   Query Options
 </a>
 
-<div id="query-options-tray">
+<div id="query-options-tray" class="tray">
   <form class="js-view-query-update custom-inputs">
 
     <div class="query-group">

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8129168e/app/addons/documents/views-advancedopts.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views-advancedopts.js b/app/addons/documents/views-advancedopts.js
index 0a91914..993750f 100644
--- a/app/addons/documents/views-advancedopts.js
+++ b/app/addons/documents/views-advancedopts.js
@@ -26,6 +26,7 @@ function(app, FauxtonAPI, resizeColumns ) {
     className: "advanced-options well",
 
     initialize: function (options) {
+      FauxtonAPI.Events.on('AdvancedOptions:closeTray', this.closeTray);
       this.database = options.database;
       this.ddocName = options.ddocName;
       this.viewName = options.viewName;
@@ -64,18 +65,22 @@ function(app, FauxtonAPI, resizeColumns ) {
     toggleQuery: function(event) {
       $('#dashboard-content').scrollTop(0);
       this.$('#query-options-tray').toggle();
-      $('.api-navbar').hide();
+      FauxtonAPI.Events.trigger('APIbar:closeTray');
     }, 
 
+    closeTray: function(){
+      $('#query-options-tray').hide();
+    },
+
     resetForm: function() {
-      $('input, textarea').each(function(){
+      this.$('input, textarea').each(function(){
         $(this).val('');
       });
-      $('input:checkbox').attr('checked', false);
-      $("select").each(function(){
+      this.$('input:checkbox').attr('checked', false);
+      this.$("select").each(function(){
         this.selectedIndex = 0;
       });
-      $('#query-options-tray').hide();
+      this.$('#query-options-tray').hide();
     },
 
     showKeys: function(){

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8129168e/app/addons/fauxton/components.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/components.js b/app/addons/fauxton/components.js
index 3784b8d..e8bd559 100644
--- a/app/addons/fauxton/components.js
+++ b/app/addons/fauxton/components.js
@@ -97,6 +97,7 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
     },
 
     initialize: function(options){
+      FauxtonAPI.Events.on('APIbar:closeTray', this.closeTray);
       var _options = options || {};
       this.endpoint = _options.endpoint || '_all_docs';
       this.documentation = _options.documentation || 'docs';
@@ -109,8 +110,8 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
       }else{
         $currentTarget.removeClass("fonticon-minus").addClass("fonticon-plus");
       }
-      $('#query-options-tray').hide();
-      $('.api-navbar').toggle();
+      FauxtonAPI.Events.trigger('AdvancedOptions:closeTray');
+      this.$('.api-navbar').toggle();
     },
 
     serialize: function() {
@@ -123,15 +124,22 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
     hide: function(){
       this.$el.addClass('hide');
     },
+
     show: function(){
       this.$el.removeClass('hide');
     },
+
+    closeTray: function(){
+      $('.api-navbar').hide();
+    },
+
     update: function(endpoint) {
       this.show();
       this.endpoint = endpoint[0];
       this.documentation = endpoint[1];
       this.render();
     },
+
     afterRender: function(){
       ZeroClipboard.config({ moviePath: "/assets/js/plugins/zeroclipboard/ZeroClipboard.swf" });
       var client = new ZeroClipboard(this.$(".copy-url"));
@@ -147,7 +155,6 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
         });
       });
     }
-
   });
 
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8129168e/app/addons/fauxton/templates/api_bar.html
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/templates/api_bar.html b/app/addons/fauxton/templates/api_bar.html
index 255087d..9db0d7b 100644
--- a/app/addons/fauxton/templates/api_bar.html
+++ b/app/addons/fauxton/templates/api_bar.html
@@ -17,12 +17,12 @@ the License.
   API URL
 </a>
 <div class="clearfix"></div>
-<div class="api-navbar" style="display: none">
+<div class="api-navbar tray">
     <div class="input-prepend input-append">
       <span class="add-on">
         API URL
         <a class="help-link" data-bypass="true" href="<%-getDocUrl(documentation)%>" target="_blank">
-          <i class="fonticon-link"></i>
+          <i class="icon-question-sign"></i>
         </a>
       </span>
       <input id="api-url-text" type="text" class="input-xxlarge" value="<%- endpoint %>">

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8129168e/assets/less/fauxton.less
----------------------------------------------------------------------
diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less
index e8a9fdb..74c698a 100644
--- a/assets/less/fauxton.less
+++ b/assets/less/fauxton.less
@@ -249,37 +249,25 @@ div.spinner {
 }
 
 .api-url-btn {
-  margin-top: 5px;
-  margin-bottom: 5px;
   .icon {
     font-size: 11px;
   }
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+.api-url-btn:hover {
+  background: none;
 }
-
 .api-navbar {
-  .border-radius(5px);
-  position: absolute;
-  right: 5px;
-  background-color: #333;
   padding: 5px 20px;
-  z-index: 2;
   .input-append.input-prepend {
     margin-bottom: 0px;
     .copying {
       background-color: #999;
       transition: background-color 5ms linear;
     }
-    .add-on {
-      background: none;
-      padding: 0px;
-      margin: 10px 0;
-      border: none;
-      display: block;
-      text-align: left;
-      color: #fff;
-      text-shadow: none;
-      height: auto;
-    }
     .input-xxlarge {
       .border-radius(5px 0 0 5px);
       border: none;
@@ -315,17 +303,6 @@ div.spinner {
     }
   }
 }
-.api-navbar:before {
-  content: '';
-  position: absolute;
-  top: -25px;
-  right: 30px;
-  border-color: transparent transparent #333 transparent;
-  border-style: solid;
-  border-width: 15px;
-  width: 0;
-  height: 0;
-}
 
 .js-filter-form {
   .help-block {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8129168e/assets/less/headers.less
----------------------------------------------------------------------
diff --git a/assets/less/headers.less b/assets/less/headers.less
index 149e90b..a110714 100644
--- a/assets/less/headers.less
+++ b/assets/less/headers.less
@@ -21,7 +21,6 @@
   .box-shadow(0px 6px 0 0 rgba(0, 0, 0, 0.1));
 }
 
-
 .fixed-header{
   height: 60px;
   background-color: @breadcrumbBG;
@@ -119,6 +118,10 @@
   }
 }
 
+.fixed-header {
+
+}
+
 .header-left{
   position: relative;
   #header-dropdown-menu {
@@ -143,11 +146,58 @@
   }
 }
 
+.tray {
+  display: none;
+  .border-radius(5px);
+  position: absolute;
+  right: 5px;
+  top: 55px;
+  z-index: 11;
+  background-color: #333;
+  color: #fff;
+  margin: 0;
+   .add-on {
+    font-size: 16px;
+    background: none;
+    padding: 0px;
+    margin: 10px 0;
+    border: none;
+    display: block;
+    text-align: left;
+    color: #fff;
+    text-shadow: none;
+    height: auto;
+    line-height: 1em;
+  }
+}
+.tray:before {
+  content: '';
+  position: absolute;
+  top: -25px;
+  border-color: transparent transparent #333 transparent;
+  border-style: solid;
+  border-width: 15px;
+  width: 0;
+  height: 0;
+}
 
+.fixed-header,
 .header-right {
-  .add-on {
-    font-size: 16px;
+  > .btn {
+    padding: 0;
+    margin: 0;
+  }
+  > .button,
+  > .button a,
+  .api-url-btn > button,
+  .btn-primary {
+    color: #666;
+    font-size: 13px;
+    line-height: 3em;
   }
+}
+
+.header-right {
   .well {
     padding: 0;
     margin: 0;
@@ -171,17 +221,6 @@
       color: #999;
     }
   }
-  > .btn {
-    padding: 0;
-    margin: 0;
-  }
-  > .button,
-  > .button a,
-  .api-url-btn > button {
-    color: #666;
-    font-size: 13px;
-    line-height: 3em;
-  }
   > div {
     float: right;
     height: 60px;
@@ -193,11 +232,8 @@
   > div:last-child {
     border-left: none;
   }
-  .api-url-btn {
-    background: none;
-    border: none;
-    padding: 0;
-    margin: 0;
-  }
+}
+.api-navbar:before {
+  right: 25px;
 }
 


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

Posted by ga...@apache.org.
Secondary Index work:
Select all got borked
I'm dumb and when I rebased I removed this import
select menu stuff
move pagination stuff to footer
fix events on select doc header
Use events for advanced options
Adding the dropdown menu in all_docs
Hooked up Delete DB  & event handling in menuDropDown
Trigger event to go back to prev header on Bulk Delete


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

Branch: refs/heads/continue-secondary-index
Commit: fe455df076edf1b67e27ffe079c3f43883e19b3c
Parents: 113615f
Author: deathbearbrown <de...@gmail.com>
Authored: Wed Aug 6 17:06:55 2014 -0400
Committer: Garren Smith <ga...@gmail.com>
Committed: Tue Aug 26 12:40:45 2014 +0200

----------------------------------------------------------------------
 app/addons/documents/assets/less/documents.less |   1 +
 app/addons/documents/resources.js               |   2 +-
 app/addons/documents/routes.js                  |  61 +++++--
 .../documents/templates/all_docs_item.html      |  10 +-
 .../documents/templates/all_docs_list.html      |  24 +--
 .../documents/templates/header_alldocs.html     |   4 +-
 .../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                   | 173 +++++++++++--------
 app/addons/fauxton/components.js                |  20 +++
 app/addons/fauxton/templates/menu_dropdown.html |   2 +
 app/addons/indexes/views.js                     |   4 +-
 app/core/api.js                                 |   7 +-
 assets/less/pagination.less                     |   2 +-
 16 files changed, 225 insertions(+), 153 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/fe455df0/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/fe455df0/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/fe455df0/app/addons/documents/routes.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/routes.js b/app/addons/documents/routes.js
index fbdcbad..994ca5c 100644
--- a/app/addons/documents/routes.js
+++ b/app/addons/documents/routes.js
@@ -192,19 +192,10 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases,
         {"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
+        dropdownMenu: this.setUpDropdown()
       }));
 
       /* --------------------------------------------------
@@ -224,6 +215,54 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases,
       }));
     },
 
+    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({
@@ -373,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"]);
@@ -382,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);

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/fe455df0/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 4078918..783e4f5 100644
--- a/app/addons/documents/templates/all_docs_item.html
+++ b/app/addons/documents/templates/all_docs_item.html
@@ -12,7 +12,7 @@ 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="select" <% if (!showSelect){ %>style="display:none"<%}%> ><input <%- checked ? 'checked="checked"' : '' %> type="checkbox" class="js-row-select"></div>
 <div class="doc-item  ">
 
   <header>
@@ -25,10 +25,8 @@ the License.
     </div>
   <% } %>
   </header>
-  <% if (expanded){ %>
-    <div class="doc-data">
-      <pre class="prettyprint"><%- doc.prettyJSON() %></pre>
-    </div>
-  <% } %>
+  <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/fe455df0/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 4975f84..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">
@@ -41,4 +24,7 @@ the License.
     </div>
   <% } %>
 </div>
-<div id="documents-pagination" class="window-resizeable"></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/fe455df0/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 740d092..6e8f97f 100644
--- a/app/addons/documents/templates/header_alldocs.html
+++ b/app/addons/documents/templates/header_alldocs.html
@@ -16,6 +16,8 @@ the License.
   <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>
 
@@ -23,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/fe455df0/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/fe455df0/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/fe455df0/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/fe455df0/app/addons/documents/views-sidebar.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views-sidebar.js b/app/addons/documents/views-sidebar.js
index 1d746ce..d30c314 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/fe455df0/app/addons/documents/views.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views.js b/app/addons/documents/views.js
index 16a853a..0c55e90 100644
--- a/app/addons/documents/views.js
+++ b/app/addons/documents/views.js
@@ -43,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:
@@ -94,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,
@@ -105,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();
@@ -144,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 +260,25 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
     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,7 @@ 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,
@@ -374,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;
@@ -400,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) {
@@ -523,18 +560,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,

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/fe455df0/app/addons/fauxton/components.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/components.js b/app/addons/fauxton/components.js
index 9540252..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
         }));
       }
     }
@@ -743,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/fe455df0/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/fe455df0/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/fe455df0/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/fe455df0/assets/less/pagination.less
----------------------------------------------------------------------
diff --git a/assets/less/pagination.less b/assets/less/pagination.less
index 07e13b3..0137699 100644
--- a/assets/less/pagination.less
+++ b/assets/less/pagination.less
@@ -10,7 +10,7 @@
  *  License for the specific language governing permissions and limitations under
  *  the License.
  */
-#documents-pagination {
+footer.pagination-footer {
   position:fixed;
   background-color:#fff;
   bottom:0;


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

Posted by ga...@apache.org.
Secondary Index work:
fix semi colon and alldocs select in header
Moved the Header styles into the global header styles
Changes header, updating the view headers and adding the link icons
Hook up delete dropdown on views
Pagination footer
Colors!!!!
Working on alert styling
footer css updates and alert styling
Design doc selector fix
pagination fix
Fixed pagination on indexes
adding back some route events
comment out remove crumbs
remove useless forcerenders for the breadcrumbs
Fix styling the select toggle show
Change the all docs select header to be it's own view
Fix for the header on view save


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

Branch: refs/heads/continue-secondary-index
Commit: e196a738646e9e8f575a16e2720cafe0d5f84b95
Parents: fce5dfe
Author: deathbearbrown <de...@gmail.com>
Authored: Mon Aug 11 15:18:50 2014 -0400
Committer: Garren Smith <ga...@gmail.com>
Committed: Tue Aug 26 12:40:46 2014 +0200

----------------------------------------------------------------------
 app/addons/documents/assets/less/documents.less |  14 +--
 app/addons/documents/assets/less/headers.less   |  56 -----------
 app/addons/documents/routes.js                  |  46 ++++++---
 .../documents/templates/all_docs_item.html      |   4 +-
 .../documents/templates/all_docs_list.html      |   6 +-
 .../documents/templates/all_docs_number.html    |   5 +-
 .../documents/templates/header_alldocs.html     |   1 +
 .../documents/templates/header_changes.html     |  20 ++++
 .../documents/templates/select-doc-menu.html    |  25 +++--
 app/addons/documents/views-changes.js           |   3 +-
 app/addons/documents/views-sidebar.js           |   2 +-
 app/addons/documents/views.js                   |  56 ++++-------
 app/addons/fauxton/base.js                      |   2 +-
 app/addons/fauxton/components.js                |   4 +-
 app/addons/fauxton/resizeColumns.js             |   2 +-
 app/addons/fauxton/templates/api_bar.html       |   2 +-
 .../fauxton/templates/index_pagination.html     |  14 +--
 app/addons/fauxton/templates/pagination.html    |  29 +++---
 app/addons/indexes/assets/less/doc-item.less    |  24 +++--
 app/addons/indexes/routes-core.js               | 100 ++++++++++++++++++-
 app/addons/indexes/routes-viewindexes.js        |  19 +---
 .../indexes/templates/design_doc_selector.html  |  16 ++-
 app/addons/indexes/templates/header_right.html  |  15 ++-
 app/addons/indexes/templates/show_editor.html   |   2 +-
 app/addons/indexes/templates/view_editor.html   |   2 +-
 app/addons/indexes/views.js                     |  24 ++---
 app/templates/layouts/one_pane.html             |   1 +
 app/templates/layouts/two_pane.html             |   4 +-
 app/templates/layouts/with_sidebar.html         |   1 +
 app/templates/layouts/with_tabs.html            |   2 +-
 app/templates/layouts/with_tabs_sidebar.html    |   2 +-
 assets/index.underscore                         |   1 -
 assets/less/bootstrap/alerts.less               |   4 +-
 assets/less/bootstrap/pagination.less           |  66 ++++++------
 assets/less/bootstrap/variables.less            |  12 +--
 assets/less/headers.less                        |  85 +++++++++++++++-
 assets/less/pagination.less                     |  32 +++++-
 assets/less/templates.less                      |  18 +++-
 index.html                                      |   2 +-
 39 files changed, 454 insertions(+), 269 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/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 26e3ffa..0f9836a 100644
--- a/app/addons/documents/assets/less/documents.less
+++ b/app/addons/documents/assets/less/documents.less
@@ -19,10 +19,7 @@
 @import "sidenav.less";
 @import "headers.less";
 
-tr.all-docs-item {
-  border: none;
-  background: transparent;
-}
+
 button.beautify {
   margin-top: 20px;
 }
@@ -33,15 +30,6 @@ button.beautify {
     }
 }
 
-#per-page {
-  float: right;
-
-  #select-per-page {
-    margin-top: 10px;
-  }
-
-}
-
 
 /** used in all_docs_list.html **/
 .view {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/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
deleted file mode 100644
index ce5a27d..0000000
--- a/app/addons/documents/assets/less/headers.less
+++ /dev/null
@@ -1,56 +0,0 @@
-.header-right {
-  .add-on {
-    font-size: 16px;
-  }
-  .well {
-    padding: 0;
-    margin: 0;
-  }
-  .searchbox-container {
-    position: relative;
-    right: inherit;
-    input[type="text"] {
-      .border-radius(5px);
-      font-size: 13px;
-      padding: 8px 35px 8px 10px;
-      width: 275px;
-    }
-    .btn-primary {
-      background: none repeat scroll 0% 0% transparent;
-      border: none;
-      position: absolute;
-      right: 12px;
-      top: 8px;
-      z-index: 2;
-      color: #999;
-    }
-  }
-  > .btn {
-    padding: 0;
-    margin: 0;
-  }
-  > .button,
-  > .button a,
-  .api-url-btn > button {
-    color: #666;
-    font-size: 13px;
-    line-height: 3em;
-  }
-  > div {
-    float: right;
-    height: 60px;
-    border-left: 1px solid #ccc;
-    margin: 0;   
-    padding: 10px 15px;
-    line-height: 40px; 
-  }
-  > div:last-child {
-    border-left: none;
-  }
-  .api-url-btn {
-    background: none;
-    border: none;
-    padding: 0;
-    margin: 0;
-  }
-}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/app/addons/documents/routes.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/routes.js b/app/addons/documents/routes.js
index 994ca5c..46fbc51 100644
--- a/app/addons/documents/routes.js
+++ b/app/addons/documents/routes.js
@@ -158,7 +158,8 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases,
       "route:paginate": "paginate",
       "route:perPageChange": "perPageChange",
       "route:changesFilterAdd": "addFilter",
-      "route:changesFilterRemove": "removeFilter"
+      "route:changesFilterRemove": "removeFilter",
+      "route:toggleSelectHeader": "toggleSelectheader"
     },
 
     initialize: function (route, masterLayout, options) {
@@ -202,7 +203,7 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases,
         Show right header for all docs that includes:
         query options, api bar, search and select
       ----------------------------------------------------*/
-      this.changesHeader = true;
+      this.allDocsHeader = false;
       this.resetAllDocsHeader();
 
       /* --------------------------------------------------
@@ -263,12 +264,26 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases,
 
     },
 
+    toggleSelectheader: function(){
+      /* --------------------------------------------------
+        Set up right header for the document select menu
+        or reset back to all docs header
+      ----------------------------------------------------*/
+      if (this.allDocsHeader){
+        this.allDocsHeader = false;
+        this.rightHeader = this.setView("#api-navbar", new Documents.Views.SelectMenuHeader({}));
+        this.rightHeader.forceRender();
+      } else {
+        this.resetAllDocsHeader();
+      }
+
+    },
     resetAllDocsHeader: function(){
-      if (this.changesHeader){
-        this.headerRight = this.setView("#api-navbar", new Documents.Views.RightAllDocsHeader({
+      if (!this.allDocsHeader){
+        this.rightHeader = this.setView("#api-navbar", new Documents.Views.RightAllDocsHeader({
           database: this.data.database
         }));
-        this.changesHeader = false;
+        this.allDocsHeader = true;
       }
     },
 
@@ -290,7 +305,7 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases,
       /* --------------------------------------------------
         Update the apiUrl
       ----------------------------------------------------*/
-      this.headerRight.updateApiUrl([designDocInfo.url('apiurl'), designDocInfo.documentation()]);
+      this.rightHeader.updateApiUrl([designDocInfo.url('apiurl'), designDocInfo.documentation()]);
 
     },
 
@@ -365,7 +380,7 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases,
       /* --------------------------------------------------
         update the api url
       ----------------------------------------------------*/
-      this.headerRight.updateApiUrl([this.data.database.allDocs.urlRef("apiurl", urlParams), this.data.database.allDocs.documentation()]);
+      this.rightHeader.updateApiUrl([this.data.database.allDocs.urlRef("apiurl", urlParams), this.data.database.allDocs.documentation()]);
     },
 
 
@@ -412,25 +427,32 @@ 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"]);
+      this.rightHeader.updateApiUrl([collection.urlRef("apiurl", urlParams), "docs"]);
     },
 
+    /* --------------------------------------------------
+      Called when you change the # of items to show in the pagination footer
+    ----------------------------------------------------*/
     perPageChange: function (perPage) {
       // 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);
     },
 
+    /* --------------------------------------------------
+      Triggers when you hit the paginate forward and backwards buttons
+    ----------------------------------------------------*/
+
     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});
@@ -495,7 +517,7 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases,
         documentation: this.data.database.documentation()
       }));
 
-      this.changesHeader = true;
+      this.allDocsHeader = true;
 
       /* --------------------------------------------------
         Set sidebar highlight

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/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 783e4f5..4526df2 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" <% if (!showSelect){ %>style="display:none"<%}%> ><input <%- checked ? 'checked="checked"' : '' %> type="checkbox" class="js-row-select"></div>
-<div class="doc-item  ">
+<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>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/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 3eaca80..bf7e250 100644
--- a/app/addons/documents/templates/all_docs_list.html
+++ b/app/addons/documents/templates/all_docs_list.html
@@ -24,7 +24,7 @@ the License.
     </div>
   <% } %>
 </div>
-<footer class="pagination-footer" class="window-resizeable">
-<div id="item-numbers"> </div>
-<div id="documents-pagination"></div>
+<footer class="pagination-footer window-resizeable">
+  <div id="item-numbers"> </div>
+  <div id="documents-pagination"></div>
 </footer>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/app/addons/documents/templates/all_docs_number.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/all_docs_number.html b/app/addons/documents/templates/all_docs_number.html
index 0461a4b..49d6898 100644
--- a/app/addons/documents/templates/all_docs_number.html
+++ b/app/addons/documents/templates/all_docs_number.html
@@ -12,9 +12,10 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 <% if (totalRows === "unknown" || totalRows === 0){ %>
-Showing 0 documents. <a href="#/database/<%=database%>/new"> Create your first document.</a>
+<p>Showing 0 documents.</p>
 <% } else { %>
-Showing <%=pageStart%> - <%= pageEnd %>
+
+<p>Showing <%=pageStart%> - <%= pageEnd %></p>
 <%}%>
 <% if (updateSeq) { %>
 -- Update Sequence: <%= updateSeq %>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/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 3434dde..ff6d8a8 100644
--- a/app/addons/documents/templates/header_alldocs.html
+++ b/app/addons/documents/templates/header_alldocs.html
@@ -29,3 +29,4 @@ the License.
   <div id="header-select-all" class="button">
     <span class="toggle-select-menu icon fonticon-ok-circled">Select</span>
   </div>
+

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/app/addons/documents/templates/header_changes.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/header_changes.html b/app/addons/documents/templates/header_changes.html
new file mode 100644
index 0000000..8521486
--- /dev/null
+++ b/app/addons/documents/templates/header_changes.html
@@ -0,0 +1,20 @@
+<!--
+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.
+-->
+
+  <!-- floats right -->
+
+  <div id="header-api-bar" class="button"></div>
+
+  <!-- search (jump to doc)-->
+  <div id="header-search" class="js-search searchbox-container"></div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/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
index bad70a7..a00c851 100644
--- a/app/addons/documents/templates/select-doc-menu.html
+++ b/app/addons/documents/templates/select-doc-menu.html
@@ -11,14 +11,19 @@ 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>
+
+<!-- Select toggle -->
+<div id="header-select-all active" class="button">
+  <span class="toggle-select-menu icon fonticon-ok-circled">Select</span>
 </div>
+
+<button type="button" class="button btn btn-small all" data-toggle="button">✓ All</button>
+
+<button class="button btn btn-small disabled js-bulk-delete"><i class="icon-trash"></i></button>
+
+<% if (expandDocs) { %>
+<button id="collapse" class="button btn btn-small"><i class="icon-minus"></i> Collapse</button>
+<% } else { %>
+<button id="collapse" class="button btn btn-small"><i class="icon-plus"></i> Expand</button>
+<% } %>
+

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/app/addons/documents/views-changes.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views-changes.js b/app/addons/documents/views-changes.js
index d63a825..f5cb75e 100644
--- a/app/addons/documents/views-changes.js
+++ b/app/addons/documents/views-changes.js
@@ -27,7 +27,8 @@ function(app, FauxtonAPI, resizeColumns, Components, prettify, ZeroClipboard) {
   var Views = {};
 
   Views.ChangesHeader = FauxtonAPI.View.extend({
-    template: "addons/documents/templates/header_alldocs",
+    className: "header-right",
+    template: "addons/documents/templates/header_changes",
     initialize: function (options) {
       this.filterView = options.filterView;
       this.endpoint = options.endpoint;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/app/addons/documents/views-sidebar.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views-sidebar.js b/app/addons/documents/views-sidebar.js
index d30c314..fa3f8d6 100644
--- a/app/addons/documents/views-sidebar.js
+++ b/app/addons/documents/views-sidebar.js
@@ -38,7 +38,7 @@ function(app, FauxtonAPI, Components, Documents, Databases) {
         this.ddocID = options.ddocInfo.id;
         this.currView = options.ddocInfo.currView;
       }
-      FauxtonAPI.Events.on('database:delete', this.showDeleteDatabaseModal)
+      FauxtonAPI.Events.on('database:delete', this.showDeleteDatabaseModal);
     },
     showDeleteDatabaseModal: function(event){
       this.deleteDBModal.showModal();

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/app/addons/documents/views.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views.js b/app/addons/documents/views.js
index 0c55e90..eaf2c84 100644
--- a/app/addons/documents/views.js
+++ b/app/addons/documents/views.js
@@ -56,36 +56,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
     },
 
     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.triggerRouteEvent("toggleSelectHeader");
       FauxtonAPI.Events.trigger("documents:show-select-all",this.selectVisible);
-
-    },
-
-    toggleSelectMenu: function(){
-      if (this.selectVisible){
-        this.selectVisible = false;
-        this.selectMenu.remove();
-        this.addAllDocsMenu();
-      } else {
-        this.removeAllDocsMenu();
-        this.addSelectMenu();
-      }
-    },
-
-    addSelectMenu: function(){
-      this.selectVisible = true;
-      this.selectMenu =  this.insertView('#header-select-menu', new Views.SelectMenu({}));
-      this.selectMenu.render();
-    },
-
-    removeAllDocsMenu: function(){
-      this.headerSearch.remove();
-      this.queryOptions.remove();
-      this.apiBar.remove();
     },
 
     addAllDocsMenu: function(){
@@ -188,13 +160,21 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
   });
 
   // select docs header
-  Views.SelectMenu = FauxtonAPI.View.extend({
+  Views.SelectMenuHeader = FauxtonAPI.View.extend({
+    className: "header-right",
     template:"addons/documents/templates/select-doc-menu",
     events: {
       "click button.all": "selectAll",
       "click button.js-bulk-delete": "bulkDelete",
-      "click #collapse": "collapse"
+      "click #collapse": "collapse",
+      'click .toggle-select-menu': 'selectAllMenu'
+    },
+
+    selectAllMenu: function(e){
+      FauxtonAPI.triggerRouteEvent("toggleSelectHeader");
+      FauxtonAPI.Events.trigger("documents:show-select-all",this.selectVisible);
     },
+
     bulkDelete: function(){
       FauxtonAPI.Events.trigger("documents:bulkDelete");
     },
@@ -240,6 +220,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
         FauxtonAPI.addNotification({
           msg: 'The database <code>' + _.escape(databaseName) + '</code> has been deleted.',
           clear: true,
+          type: "error",
           escape: false // beware of possible XSS when the message changes
         });
       }).fail(function (rsp, error, msg) {
@@ -256,7 +237,9 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
 
   Views.Document = FauxtonAPI.View.extend({
     template: "addons/documents/templates/all_docs_item",
-    className: "all-docs-item doc-row",
+    className: function(){
+      return (this.showSelect? "showSelect":"") + " all-docs-item doc-row";
+    },
     initialize: function (options) {
       this.checked = options.checked;
       this.expanded = options.expanded;
@@ -268,8 +251,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
     },
 
     showSelectBox: function(bool){
-      this.showSelect = bool;
-      this.$('.select').toggle(this.showSelect);
+      this.$el.toggleClass('showSelect');
     },
 
     selectAll: function(checked){
@@ -294,7 +276,6 @@ 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,
@@ -318,10 +299,11 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
       if (!window.confirm("Are you sure you want to delete this doc?")) {
         return false;
       }
-
+      var storeID = _.clone(this.model);
       this.model.destroy().then(function(resp) {
         FauxtonAPI.addNotification({
-          msg: "Succesfully deleted your doc",
+          msg: "Doc "+storeID.get('id')+" has been deleted.",
+          type: "error",
           clear:  true
         });
         that.$el.fadeOut(function () {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/app/addons/fauxton/base.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/base.js b/app/addons/fauxton/base.js
index 68ee7cd..1e43c0f 100644
--- a/app/addons/fauxton/base.js
+++ b/app/addons/fauxton/base.js
@@ -72,7 +72,7 @@ function(app, FauxtonAPI, resizeColumns, Components) {
     });
 
     FauxtonAPI.RouteObject.on('beforeEstablish', function (routeObject) {
-      FauxtonAPI.masterLayout.removeView('#breadcrumbs');
+      //FauxtonAPI.masterLayout.removeView('#breadcrumbs');
       var crumbs = routeObject.get('crumbs');
 
       if (crumbs.length) {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/app/addons/fauxton/components.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/components.js b/app/addons/fauxton/components.js
index 55f4af4..3784b8d 100644
--- a/app/addons/fauxton/components.js
+++ b/app/addons/fauxton/components.js
@@ -154,6 +154,7 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
 
 
   Components.Pagination = FauxtonAPI.View.extend({
+    tagName: "ul",
     className: "pagination pagination-centered",
     template: "addons/fauxton/templates/pagination",
 
@@ -178,6 +179,7 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
 
   Components.IndexPagination = FauxtonAPI.View.extend({
     className: "pagination pagination-centered",
+    tagName: 'ul',
     template: "addons/fauxton/templates/index_pagination",
     events: {
       "click a": 'scrollTo',
@@ -745,7 +747,7 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
     className: "dropdown",
     initialize: function(options){
       this.links = options.links;
-      this.icon = options.icon || "fonticon-plus-circled2";
+      this.icon = options.icon || "fonticon-plus-circled";
       _.bindAll(this);
       this.setUpEvents();
     },

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/app/addons/fauxton/resizeColumns.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/resizeColumns.js b/app/addons/fauxton/resizeColumns.js
index 98555a9..3fd1883 100644
--- a/app/addons/fauxton/resizeColumns.js
+++ b/app/addons/fauxton/resizeColumns.js
@@ -99,7 +99,7 @@ function(FauxtonAPI) {
 
     setPosition: function(panelWidth){
       var primary = this.getPrimaryNavWidth();
-      $('#right-content').css('left',panelWidth+primary+4);
+      $('.set-left-position').css('left',panelWidth+primary+4);
     },
 
     onResizeHandler: function (){

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/app/addons/fauxton/templates/api_bar.html
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/templates/api_bar.html b/app/addons/fauxton/templates/api_bar.html
index bab431b..255087d 100644
--- a/app/addons/fauxton/templates/api_bar.html
+++ b/app/addons/fauxton/templates/api_bar.html
@@ -13,7 +13,7 @@ the License.
 -->
 
 <a class="btn btn-primary pull-right api-url-btn">
-  <i class="fonticon-plus icon"></i>
+  <i class="fonticon-link icon"></i>
   API URL
 </a>
 <div class="clearfix"></div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/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 594f6fc..e3b030e 100644
--- a/app/addons/fauxton/templates/index_pagination.html
+++ b/app/addons/fauxton/templates/index_pagination.html
@@ -12,11 +12,11 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
-<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>
+<li <% if (!canShowPreviousfn()) {%> class="disabled" <% } %>>
+ <a id="previous" class="icon fonticon-left-open" href="#"></a>
+</li>
+<li <% if (!canShowNextfn()) {%> class="disabled" <% } %>>
+ <a id="next" class="icon fonticon-right-open" href="#"></a>
+</li>
+
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/app/addons/fauxton/templates/pagination.html
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/templates/pagination.html b/app/addons/fauxton/templates/pagination.html
index 614fd06..3958f63 100644
--- a/app/addons/fauxton/templates/pagination.html
+++ b/app/addons/fauxton/templates/pagination.html
@@ -11,18 +11,17 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 License for the specific language governing permissions and limitations under
 the License.
 -->
-  <ul>
-    <% if (page > 1) { %>
-    <li> <a href="<%- urlFun(page-1) %>">&laquo;</a></li>
-    <% } else { %>
-      <li class="disabled"> <a href="<%- urlFun(page) %>">&laquo;</a></li>
-    <% } %>
-    <% _.each(_.range(1, totalPages+1), function(i) { %>
-      <li <% if (page == i) { %>class="active"<% } %>> <a href="<%- urlFun(i) %>"><%- i %></a></li>
-    <% }) %>
-    <% if (page < totalPages) { %>
-      <li><a href="<%- urlFun(page+1) %>">&raquo;</a></li>
-    <% } else { %>
-      <li class="disabled"> <a href="<%- urlFun(page) %>">&raquo;</a></li>
-    <% } %>
-  </ul>
+<% if (page > 1) { %>
+<li> <a href="<%- urlFun(page-1) %>">&laquo;</a></li>
+<% } else { %>
+  <li class="disabled"> <a href="<%- urlFun(page) %>">&laquo;</a></li>
+<% } %>
+<% _.each(_.range(1, totalPages+1), function(i) { %>
+  <li <% if (page == i) { %>class="active"<% } %>> <a href="<%- urlFun(i) %>"><%- i %></a></li>
+<% }) %>
+<% if (page < totalPages) { %>
+  <li><a href="<%- urlFun(page+1) %>">&raquo;</a></li>
+<% } else { %>
+  <li class="disabled"> <a href="<%- urlFun(page) %>">&raquo;</a></li>
+<% } %>
+

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/app/addons/indexes/assets/less/doc-item.less
----------------------------------------------------------------------
diff --git a/app/addons/indexes/assets/less/doc-item.less b/app/addons/indexes/assets/less/doc-item.less
index a04883a..3d3e3ad 100644
--- a/app/addons/indexes/assets/less/doc-item.less
+++ b/app/addons/indexes/assets/less/doc-item.less
@@ -13,18 +13,30 @@
   display: block;
 }
 
+
 #doc-list{
-  margin-top: 30px;
-  div.doc-row {
-    margin-bottom:20px;
-    div.select {
-      width: 10%;
+  padding-top: 30px;
+  .all-docs-item {
+    .select {
+      display:none;
       float: left;
       vertical-align: top;
     }
+    &.showSelect{
+      .select {
+        display:block;
+        width: 10%;
+      }
+      .doc-item {
+        width:90%;
+      }
+    }
+  }
+  div.doc-row {
+    margin-bottom:20px;
     .doc-item {
       float:left;
-      width:90%;
+      width:100%;
       vertical-align: top;
       position: relative;
       .border-radius(5px 5px 5px 5px);

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/app/addons/indexes/routes-core.js
----------------------------------------------------------------------
diff --git a/app/addons/indexes/routes-core.js b/app/addons/indexes/routes-core.js
index 354afb0..402ae99 100644
--- a/app/addons/indexes/routes-core.js
+++ b/app/addons/indexes/routes-core.js
@@ -24,6 +24,11 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources) {
     layout: "two_pane",
 
     initialize: function (route, masterLayout, options) {
+      _.bindAll(this);
+      var params = this.createParams(),
+      urlParams = params.urlParams,
+      docParams = params.docParams;
+
       this.databaseName = options[0];
 
       this.data = {
@@ -42,12 +47,62 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources) {
           limit: 500
         }
       });
+
+
+      /* --------------------------------------------------
+        Set up right header
+      ----------------------------------------------------*/
+
+      this.rightHeader = this.setView("#api-navbar", new Views.RightHeader({
+        database: this.data.database,
+        model: this.data.database,
+        endpoint: this.data.designDocs.urlRef("apiurl", urlParams),
+        documentation: "docs"
+      }));
+
     },
 
     events: {
-      "route:updatePreviewDocs": "updateAllDocsFromPreview"
+      "route:updatePreviewDocs": "updateAllDocsFromPreview",
+      "route:perPageChange": "perPageChange",
+      "route:paginate": "paginate",
+      "route:updateAllDocs": "updateAllDocsFromView"
+    },
+
+    /* --------------------------------------------------
+      Called when you change the # of items to show in the pagination footer
+    ----------------------------------------------------*/
+    perPageChange: function (perPage) {
+      // We need to restore the collection parameters to the defaults (1st page)
+      // and update the page size
+      this.perPage = perPage;
+      this.documentsView.forceRender();
+      this.documentsView.collection.pageSizeReset(perPage, {fetch: false});
+      this.setDocPerPageLimit(perPage);
+    },
+
+    /* --------------------------------------------------
+      Store the docs to show per page in local storage
+    ----------------------------------------------------*/
+    setDocPerPageLimit: function (perPage) {
+      window.localStorage.setItem('fauxton:perpage', perPage);
+    },
+
+    /* --------------------------------------------------
+      Triggers when you hit the paginate forward and backwards buttons
+    ----------------------------------------------------*/
+
+    paginate: function (options) {
+      var collection = this.documentsView.collection;
+
+      this.documentsView.forceRender();
+      collection.paging.pageSize = options.perPage;
+      var promise = collection[options.direction]({fetch: false});
     },
 
+    /* --------------------------------------------------
+     Get Design doc info
+    ----------------------------------------------------*/
     ddocInfo: function (designDoc, designDocs, view) {
       return {
         id: "_design/" + designDoc,
@@ -56,6 +111,9 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources) {
       };
     },
 
+    /* --------------------------------------------------
+      URL params from Advanced/ Query options
+    ----------------------------------------------------*/
     createParams: function (options) {
       var urlParams = app.getParams(options);
       var params = Documents.QueryParams.parse(urlParams);
@@ -66,6 +124,9 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources) {
       };
     },
 
+    /* --------------------------------------------------
+      Stored docs in preview
+    ----------------------------------------------------*/
     getDocPerPageLimit: function (urlParams, perPage) {
       var storedPerPage = perPage;
 
@@ -91,6 +152,39 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources) {
       return this.data.designDocs.fetch({reset: true});
     },
 
+
+    /* --------------------------------------------------
+        Reload preview docs
+    -----------------------------------------------------*/
+    updateAllDocsFromView: function (event) {
+      var view = event.view,
+          params = this.createParams(),
+          urlParams = params.urlParams,
+          docParams = params.docParams,
+          ddoc = event.ddoc,
+          pageSize,
+          collection;
+
+      var defaultPageSize = _.isUndefined(this.documentsView) ? 20 : this.documentsView.perPage();
+      docParams.limit = pageSize = this.getDocPerPageLimit(urlParams, defaultPageSize);
+
+      if (event.allDocs) {
+        this.eventAllDocs = true; // this is horrible. But I cannot get the trigger not to fire the route!
+        this.data.database.buildAllDocs(docParams);
+        collection = this.data.database.allDocs;
+        collection.paging.pageSize = pageSize;
+
+      }
+
+      this.documentsView.setCollection(collection);
+      this.documentsView.setParams(docParams, urlParams);
+
+      this.documentsView.forceRender();
+    },
+
+    /* --------------------------------------------------
+      Docs that are returned from a view
+    ----------------------------------------------------*/
     createViewDocumentsView: function (options) {
       return this.setView("#right-content", new Documents.Views.AllDocsList({
         database: options.database,
@@ -103,6 +197,10 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources) {
       }));
     },
 
+
+    /* --------------------------------------------------
+      If Preview worked....
+    ----------------------------------------------------*/
     updateAllDocsFromPreview: function (event) {
       var view = event.view,
       rows = event.rows,

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/app/addons/indexes/routes-viewindexes.js
----------------------------------------------------------------------
diff --git a/app/addons/indexes/routes-viewindexes.js b/app/addons/indexes/routes-viewindexes.js
index 7330d04..546d72c 100644
--- a/app/addons/indexes/routes-viewindexes.js
+++ b/app/addons/indexes/routes-viewindexes.js
@@ -37,7 +37,7 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore, Co
       /* --------------------------------------------------
         remove right header
       ----------------------------------------------------*/
-      this.rightheader && this.rightheader.remove();
+      this.rightHeader && this.rightHeader.remove();
 
       /* --------------------------------------------------
         Insert Preview Screen View
@@ -88,9 +88,11 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore, Co
         links: [{
           title: 'Duplicate Index',
           icon: 'fonticon-documents'
-        },{
+        },
+        {
           title: 'Delete',
-          icon: 'fonticon-trash'
+          icon: 'fonticon-trash',
+          trigger: 'index:delete'
         }]
       }];
 
@@ -114,17 +116,6 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore, Co
 
 
       /* --------------------------------------------------
-        Set up right header
-      ----------------------------------------------------*/
-
-      this.rightheader = this.setView("#api-navbar", new Views.RightHeader({
-        database: this.data.database,
-        model: this.data.database,
-        endpoint: this.data.indexedDocs.urlRef("apiurl", urlParams),
-        documentation: "docs"
-      }));
-
-      /* --------------------------------------------------
         Insert View Editor
       ----------------------------------------------------*/
       this.viewEditor = this.setView("#left-content", new Views.ViewEditor({

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/app/addons/indexes/templates/design_doc_selector.html
----------------------------------------------------------------------
diff --git a/app/addons/indexes/templates/design_doc_selector.html b/app/addons/indexes/templates/design_doc_selector.html
index 7d58116..2cad6af 100644
--- a/app/addons/indexes/templates/design_doc_selector.html
+++ b/app/addons/indexes/templates/design_doc_selector.html
@@ -16,21 +16,19 @@ the License.
   <div class="select-wrapper span5">
     <select id="ddoc">
       <optgroup label="Select a document">
-        <option value="new-doc">New document</option>
+        <option value="new-doc" <% if(newView){ %>selected="selected" <%}%> >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>
-        <% } %>
+          <% if (ddoc.id === ddocName && !newView) { %>
+          <option selected="selected" value="<%- ddoc.id %>"><%- ddoc.id %></option>
+          <% } else { %>
+          <option value="<%- ddoc.id %>"><%- ddoc.id %></option>
+          <% } %>
         <% }); %>
       </optgroup>
     </select>
     <i></i>
   </div>
 
-  <input type="text" id="new-ddoc" class="span7" style="display:none" placeholder="Enter a design doc name" />
+  <input type="text" id="new-ddoc" class="span7" <% if(!newView){ %> style="display:none"<% } %> placeholder="Enter a design doc name" />
 </div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/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 38634b5..0370e51 100644
--- a/app/addons/indexes/templates/header_right.html
+++ b/app/addons/indexes/templates/header_right.html
@@ -12,11 +12,16 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
   <!-- Select toggle-->
-  <div id="header-select-all">
+  <div id="header-api-bar" class="button"></div>
+
+  <!-- Query Options-->
+  <div class="button header-query-options">
+    <!-- Insert the query options here :) -->
+    <div id="query-options"></div>
+  </div>
+
+
+  <div id="header-select-all" class="button">
     <span class="toggle-select-menu icon fonticon-ok-circled">Select</span>
   </div>
-  <!-- Query Options-->
-  <div id="header-query-options"></div>
-  <!--right margin for api bar-->
-  <div id="header-api-bar"></div>
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/app/addons/indexes/templates/show_editor.html
----------------------------------------------------------------------
diff --git a/app/addons/indexes/templates/show_editor.html b/app/addons/indexes/templates/show_editor.html
index 9afa2bf..ef36110 100644
--- a/app/addons/indexes/templates/show_editor.html
+++ b/app/addons/indexes/templates/show_editor.html
@@ -17,7 +17,7 @@ the License.
   <div class="errors-container"></div>
   <form class="form-horizontal view-query-save">
     <div class="control-group">
-      <p>Views are the primary tool used for querying and reporting on CouchDB databases.</p>
+      <p>Views are the primary tool used for querying and reporting.</p>
     </div>
 
     <div class="control-group design-doc-group">

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/app/addons/indexes/templates/view_editor.html
----------------------------------------------------------------------
diff --git a/app/addons/indexes/templates/view_editor.html b/app/addons/indexes/templates/view_editor.html
index f33d3f9..2b8c540 100644
--- a/app/addons/indexes/templates/view_editor.html
+++ b/app/addons/indexes/templates/view_editor.html
@@ -16,7 +16,7 @@ the License.
   <div class="errors-container"></div>
   <form class="form-horizontal view-query-save">
     <div class="control-group">
-      <p>Views are the primary tool used for querying and reporting on CouchDB databases.</p>
+      <p>Views are the primary tool used for querying and reporting.</p>
     </div>
 
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/app/addons/indexes/views.js
----------------------------------------------------------------------
diff --git a/app/addons/indexes/views.js b/app/addons/indexes/views.js
index 9d0546e..421495f 100644
--- a/app/addons/indexes/views.js
+++ b/app/addons/indexes/views.js
@@ -61,7 +61,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
         documentation: this.documentation
       }));
 
-      this.advancedOptions = this.insertView('#header-query-options', new QueryOptions.AdvancedOptions({
+      this.advancedOptions = this.insertView('#query-options', new QueryOptions.AdvancedOptions({
         database: this.database,
         viewName: this.viewName,
         ddocName: this.model.id,
@@ -88,14 +88,12 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
            return FauxtonAPI.addNotification({
              msg: "JSON Parse Error on field: "+param.name,
              type: "error",
-             selector: ".advanced-options .errors-container",
              clear: true
            });
          });
          FauxtonAPI.addNotification({
            msg: "Make sure that strings are properly quoted and any other values are valid JSON structures",
            type: "warning",
-           selector: ".advanced-options .errors-container",
            clear: true
          });
 
@@ -131,7 +129,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
       FauxtonAPI.addNotification({
         msg: "<strong>Warning!</strong> Preview executes the Map/Reduce functions in your browser, and may behave differently from CouchDB.",
         type: "warning",
-        selector: ".advanced-options .errors-container",
         fade: true,
         escape: false // beware of possible XSS when the message changes
       });
@@ -309,6 +306,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
 
       this.showIndex = false;
       _.bindAll(this);
+
+      FauxtonAPI.Events.on('index:delete', this.deleteEvent);
     },
 
     establish: function () {
@@ -341,11 +340,15 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
       }
     },
 
+    deleteEvent: function(){
+      this.deleteView();
+    },
+
     deleteView: function (event) {
-      event.preventDefault();
+      event && event.preventDefault();
 
       if (this.newView) { return alert('Cannot delete a new view.'); }
-      if (!confirm('Are you sure you want to delete this view?')) {return;}
+      if (!confirm('Are you sure you want to delete this view?')) { return; }
 
       var that = this,
           promise,
@@ -392,7 +395,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
 
         notification = FauxtonAPI.addNotification({
           msg: "Saving document.",
-          selector: "#define-view .errors-container",
           clear: true
         });
 
@@ -417,7 +419,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
         notification = FauxtonAPI.addNotification({
           msg: errormessage,
           type: "error",
-          selector: "#define-view .errors-container",
           clear: true
         });
       }
@@ -437,7 +438,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
       FauxtonAPI.addNotification({
         msg: "View has been saved.",
         type: "success",
-        selector: "#define-view .errors-container",
         clear: true
       });
 
@@ -453,9 +453,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
         this.ddocInfo = ddoc;
         this.showIndex = true;
         this.render();
-        FauxtonAPI.triggerRouteEvent('reloadDesignDocs', {
-          selectedTab: app.utils.removeSpecialCharacters(ddocName.replace(/_design\//,'')) + '_' + app.utils.removeSpecialCharacters(viewName)
-        });
       }
 
       // TODO:// this should change to a trigger because we shouldn't define advanced options in this view
@@ -578,6 +575,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
 
       this.designDocSelector = this.setView('.design-doc-group', new Views.DesignDocSelector({
         collection: designDocs,
+        newView: this.newView,
         ddocName: this.currentDdoc || this.model.id,
         database: this.database
       }));
@@ -644,6 +642,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
     },
 
     initialize: function (options) {
+      this.newView = options.newView;
       this.ddocName = options.ddocName;
       this.database = options.database;
       this.listenTo(this.collection, 'add', this.ddocAdded);
@@ -657,6 +656,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
 
     serialize: function () {
       return {
+        newView: this.newView,
         ddocName: this.ddocName,
         ddocs: this.collection
       };

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/app/templates/layouts/one_pane.html
----------------------------------------------------------------------
diff --git a/app/templates/layouts/one_pane.html b/app/templates/layouts/one_pane.html
index c7adf1f..0bbc989 100644
--- a/app/templates/layouts/one_pane.html
+++ b/app/templates/layouts/one_pane.html
@@ -14,6 +14,7 @@ the License.
 
 <div id="primary-navbar"></div>
 <div id="dashboard" class="container-fluid one-pane">
+  <div id="global-notifications" class="container errors-container window-resizeable"></div>
   <div class="fixed-header">
     <div id="breadcrumbs"></div>
     <div id="api-navbar"></div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/app/templates/layouts/two_pane.html
----------------------------------------------------------------------
diff --git a/app/templates/layouts/two_pane.html b/app/templates/layouts/two_pane.html
index 0174a5a..053285a 100644
--- a/app/templates/layouts/two_pane.html
+++ b/app/templates/layouts/two_pane.html
@@ -14,7 +14,7 @@ the License.
 
 <div id="primary-navbar"></div>
 <div id="dashboard" class="container-fluid two-pane">
-
+  <div id="global-notifications" class="container errors-container window-resizeable set-left-position"></div>
   <header class="fixed-header row-fluid">
     <div id="breadcrumbs" class="window-resizeable"></div>
     <div id="api-navbar" class="window-resizeable"></div>
@@ -22,6 +22,6 @@ the License.
 
   <div class="content-area two-pane">
     <div id="left-content" class="span6 window-resizeable"></div>
-    <div id="right-content" class="span6 window-resizeable"></div>
+    <div id="right-content" class="span6 window-resizeable set-left-position"></div>
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/app/templates/layouts/with_sidebar.html
----------------------------------------------------------------------
diff --git a/app/templates/layouts/with_sidebar.html b/app/templates/layouts/with_sidebar.html
index 7fc64db..2d0f4fa 100644
--- a/app/templates/layouts/with_sidebar.html
+++ b/app/templates/layouts/with_sidebar.html
@@ -15,6 +15,7 @@ the License.
 
 <div id="primary-navbar"></div>
 <div id="dashboard" class="container-fluid with-sidebar">
+  <div id="global-notifications" class="container errors-container window-resizeable"></div>
   <header class="fixed-header row-fluid">
     <div id="breadcrumbs" class="sidebar"></div>
     <div id="api-navbar" class="window-resizeable"></div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/app/templates/layouts/with_tabs.html
----------------------------------------------------------------------
diff --git a/app/templates/layouts/with_tabs.html b/app/templates/layouts/with_tabs.html
index 074385f..2d03d19 100644
--- a/app/templates/layouts/with_tabs.html
+++ b/app/templates/layouts/with_tabs.html
@@ -14,7 +14,7 @@ the License.
 
 <div id="primary-navbar"></div>
 <div id="dashboard" class="container-fluid">
-
+  <div id="global-notifications" class="container errors-container window-resizeable"></div>
   <header class="fixed-header row-fluid">
     <div id="breadcrumbs" class="sidebar"></div>
     <div id="api-navbar" class="window-resizeable"></div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/app/templates/layouts/with_tabs_sidebar.html
----------------------------------------------------------------------
diff --git a/app/templates/layouts/with_tabs_sidebar.html b/app/templates/layouts/with_tabs_sidebar.html
index de4bdee..0a7c661 100644
--- a/app/templates/layouts/with_tabs_sidebar.html
+++ b/app/templates/layouts/with_tabs_sidebar.html
@@ -14,7 +14,7 @@ the License.
 
 <div id="primary-navbar"></div>
 <div id="dashboard" class="container-fluid with-sidebar">
-
+  <div id="global-notifications" class="container errors-container window-resizeable"></div>
   <header class="fixed-header row-fluid">
     <div id="breadcrumbs" class="sidebar"></div>
     <div id="api-navbar" class="window-resizeable"></div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/assets/index.underscore
----------------------------------------------------------------------
diff --git a/assets/index.underscore b/assets/index.underscore
index 6a887b5..94befb9 100644
--- a/assets/index.underscore
+++ b/assets/index.underscore
@@ -33,7 +33,6 @@
 <body id="home">
   <!-- Main container. -->
   <div role="main" id="main">
-    <div id="global-notifications" class="container errors-container"></div>
     <div id="app-container"></div>
   </div>
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/assets/less/bootstrap/alerts.less
----------------------------------------------------------------------
diff --git a/assets/less/bootstrap/alerts.less b/assets/less/bootstrap/alerts.less
index 0116b19..281b88f 100644
--- a/assets/less/bootstrap/alerts.less
+++ b/assets/less/bootstrap/alerts.less
@@ -8,11 +8,9 @@
 
 .alert {
   padding: 8px 35px 8px 14px;
-  margin-bottom: @baseLineHeight;
-  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+  min-height: 60px;
   background-color: @warningBackground;
   border: 1px solid @warningBorder;
-  .border-radius(@baseBorderRadius);
 }
 .alert,
 .alert h4 {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/assets/less/bootstrap/pagination.less
----------------------------------------------------------------------
diff --git a/assets/less/bootstrap/pagination.less b/assets/less/bootstrap/pagination.less
index a789db2..c1f6a26 100644
--- a/assets/less/bootstrap/pagination.less
+++ b/assets/less/bootstrap/pagination.less
@@ -7,22 +7,22 @@
   margin: @baseLineHeight 0;
 }
 
-.pagination ul {
+ul.pagination {
   // Allow for text-based alignment
   display: inline-block;
   .ie7-inline-block();
-  // Reset default ul styles
+  // Reset default styles
   margin-left: 0;
   margin-bottom: 0;
   // Visuals
   .border-radius(@baseBorderRadius);
   .box-shadow(0 1px 2px rgba(0,0,0,.05));
 }
-.pagination ul > li {
+ul.pagination > li {
   display: inline; // Remove list-style and block-level defaults
 }
-.pagination ul > li > a,
-.pagination ul > li > span {
+ul.pagination > li > a,
+ul.pagination > li > span {
   float: left; // Collapse white-space
   padding: 4px 12px;
   line-height: @baseLineHeight;
@@ -31,32 +31,32 @@
   border: 1px solid @paginationBorder;
   border-left-width: 0;
 }
-.pagination ul > li > a:hover,
-.pagination ul > li > a:focus,
-.pagination ul > .active > a,
-.pagination ul > .active > span {
+ul.pagination > li > a:hover,
+ul.pagination > li > a:focus,
+ul.pagination > .active > a,
+ul.pagination > .active > span {
   background-color: @paginationActiveBackground;
 }
-.pagination ul > .active > a,
-.pagination ul > .active > span {
+ul.pagination > .active > a,
+ul.pagination > .active > span {
   color: @grayLight;
   cursor: default;
 }
-.pagination ul > .disabled > span,
-.pagination ul > .disabled > a,
-.pagination ul > .disabled > a:hover,
-.pagination ul > .disabled > a:focus {
+ul.pagination > .disabled > span,
+ul.pagination > .disabled > a,
+ul.pagination > .disabled > a:hover,
+ul.pagination > .disabled > a:focus {
   color: @grayLight;
   background-color: transparent;
   cursor: default;
 }
-.pagination ul > li:first-child > a,
-.pagination ul > li:first-child > span {
+ul.pagination > li:first-child > a,
+ul.pagination > li:first-child > span {
   border-left-width: 1px;
   .border-left-radius(@baseBorderRadius);
 }
-.pagination ul > li:last-child > a,
-.pagination ul > li:last-child > span {
+ul.pagination > li:last-child > a,
+ul.pagination > li:last-child > span {
   .border-right-radius(@baseBorderRadius);
 }
 
@@ -77,17 +77,17 @@
 
 // Large
 .pagination-large {
-  ul > li > a,
-  ul > li > span {
+  > li > a,
+  > li > span {
     padding: @paddingLarge;
     font-size: @fontSizeLarge;
   }
-  ul > li:first-child > a,
-  ul > li:first-child > span {
+  > li:first-child > a,
+  > li:first-child > span {
     .border-left-radius(@borderRadiusLarge);
   }
-  ul > li:last-child > a,
-  ul > li:last-child > span {
+  > li:last-child > a,
+  > li:last-child > span {
     .border-right-radius(@borderRadiusLarge);
   }
 }
@@ -95,28 +95,28 @@
 // Small and mini
 .pagination-mini,
 .pagination-small {
-  ul > li:first-child > a,
-  ul > li:first-child > span {
+  > li:first-child > a,
+  > li:first-child > span {
     .border-left-radius(@borderRadiusSmall);
   }
-  ul > li:last-child > a,
-  ul > li:last-child > span {
+  > li:last-child > a,
+  > li:last-child > span {
     .border-right-radius(@borderRadiusSmall);
   }
 }
 
 // Small
 .pagination-small {
-  ul > li > a,
-  ul > li > span {
+  > li > a,
+  > li > span {
     padding: @paddingSmall;
     font-size: @fontSizeSmall;
   }
 }
 // Mini
 .pagination-mini {
-  ul > li > a,
-  ul > li > span {
+  > li > a,
+  > li > span {
     padding: @paddingMini;
     font-size: @fontSizeMini;
   }

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/assets/less/bootstrap/variables.less
----------------------------------------------------------------------
diff --git a/assets/less/bootstrap/variables.less b/assets/less/bootstrap/variables.less
index f52b2cb..eee77a0 100644
--- a/assets/less/bootstrap/variables.less
+++ b/assets/less/bootstrap/variables.less
@@ -234,16 +234,16 @@
 @warningBackground:       #fcf8e3;
 @warningBorder:           darken(spin(@warningBackground, -10), 3%);
 
-@errorText:               #b94a48;
-@errorBackground:         #f2dede;
+@errorText:               #fff;
+@errorBackground:         #C55C56;
 @errorBorder:             darken(spin(@errorBackground, -10), 3%);
 
-@successText:             #468847;
-@successBackground:       #dff0d8;
+@successText:             #CBDFBD;
+@successBackground:       #448C11;
 @successBorder:           darken(spin(@successBackground, -10), 5%);
 
-@infoText:                #3a87ad;
-@infoBackground:          #d9edf7;
+@infoText:                #fff;
+@infoBackground:          #339999;
 @infoBorder:              darken(spin(@infoBackground, -10), 7%);
 
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/assets/less/headers.less
----------------------------------------------------------------------
diff --git a/assets/less/headers.less b/assets/less/headers.less
index e073ad7..149e90b 100644
--- a/assets/less/headers.less
+++ b/assets/less/headers.less
@@ -10,6 +10,18 @@
  *  License for the specific language governing permissions and limitations under
  *  the License.
  */
+
+.left-shadow-border{
+  border-left: 1px solid #999;
+  .box-shadow(-6px 0 rgba(0, 0, 0, 0.1));
+}
+
+.bottom-shadow-border{
+  border-bottom: 1px solid #999;
+  .box-shadow(0px 6px 0 0 rgba(0, 0, 0, 0.1));
+}
+
+
 .fixed-header{
   height: 60px;
   background-color: @breadcrumbBG;
@@ -71,6 +83,11 @@
     > div{
       display:inline-block;
     }
+    .breadcrumb {
+      li:first-child{
+        border-right: 1px solid #ccc;
+      }
+    }
   }
   .breadcrumb {
     margin-bottom: 0;
@@ -86,7 +103,6 @@
         .two-pane & {
           padding:20px 10px;
           font-size: 19px;
-          border-right: 1px solid #ccc;
         }
       }
       color: @breadcrumbText;
@@ -109,20 +125,79 @@
     position: absolute;
     right: 0;
     top: 0;
+    .dropdown-toggle {
+      color: #666666;
+    }
     a {
+      padding: 10px 20px;
       text-decoration: none;
     }
     .dropdown {
       border-left: 1px solid #ccc;
-      padding: 20px;
+      padding: 20px 0px;
     }
     .dropdown-menu {
-      left: -105px;
-      top: 56px;
+      left: -109px;
+      top: 48px;
     }
   }
 }
 
 
-
+.header-right {
+  .add-on {
+    font-size: 16px;
+  }
+  .well {
+    padding: 0;
+    margin: 0;
+  }
+  .searchbox-container {
+    position: relative;
+    right: inherit;
+    input[type="text"] {
+      .border-radius(5px);
+      font-size: 13px;
+      padding: 8px 35px 8px 10px;
+      width: 275px;
+    }
+    .btn-primary {
+      background: none repeat scroll 0% 0% transparent;
+      border: none;
+      position: absolute;
+      right: 12px;
+      top: 8px;
+      z-index: 2;
+      color: #999;
+    }
+  }
+  > .btn {
+    padding: 0;
+    margin: 0;
+  }
+  > .button,
+  > .button a,
+  .api-url-btn > button {
+    color: #666;
+    font-size: 13px;
+    line-height: 3em;
+  }
+  > div {
+    float: right;
+    height: 60px;
+    border-left: 1px solid #ccc;
+    margin: 0;
+    padding: 10px 15px;
+    line-height: 40px;
+  }
+  > div:last-child {
+    border-left: none;
+  }
+  .api-url-btn {
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+}
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/assets/less/pagination.less
----------------------------------------------------------------------
diff --git a/assets/less/pagination.less b/assets/less/pagination.less
index 0137699..df0740a 100644
--- a/assets/less/pagination.less
+++ b/assets/less/pagination.less
@@ -14,8 +14,38 @@ footer.pagination-footer {
   position:fixed;
   background-color:#fff;
   bottom:0;
+  height: 50px;
   border-top:1px solid #ccc;
   .pagination{
-    margin: 15px 0 10px;
+    .box-shadow(none);
+    position: absolute;
+    right:0;
+    top: 0;
+    margin:0px;
+    height: 50px;
+    border-left: 1px solid #ccc;
+    li {
+      display: inline-block;
+      a {
+        padding: 15px 10px 15px 15px;
+        border: none;
+      }
+    }
+  }
+}
+
+#item-numbers{
+  p {
+    margin: 20px;
+    font-size: 14px;
+  }
+}
+
+div#per-page {
+  position: absolute;
+  right: 86px;
+  top: 2px;
+  #select-per-page {
+    margin-top: 10px;
   }
 }

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/assets/less/templates.less
----------------------------------------------------------------------
diff --git a/assets/less/templates.less b/assets/less/templates.less
index 062cd32..abf1c4b 100644
--- a/assets/less/templates.less
+++ b/assets/less/templates.less
@@ -335,13 +335,17 @@
   }
 }
 
+#right-content,
 #dashboard-lower-content{
-  background-color: #F1F1F1;
   .view {
-    padding: 20px;
+    background-color:#A8A1A1;
   }
 }
 
+#dashboard-lower-content .view{
+  padding: 20px;
+}
+
 #dashboard-upper-content{
   .tab-content {
     padding-top: 70px;
@@ -382,6 +386,14 @@
   }
 }
 
+#global-notifications{
+  .with-sidebar & {
+    left: @sidebarWidth+@navWidth;
+    .closeMenu & {
+      left: @sidebarWidth+@collapsedNavWidth;
+    }
+  }
+}
 /*
   Sidenav:
   USED IN DOCUMENT ADDON & EXTERNAL ADDONS
@@ -470,7 +482,7 @@
 #right-content{
   .two-pane &{
     .view {
-      padding: 0 20px;
+      padding: 0 20px 40px;
     }
     border-left: 1px solid #999;
     .box-shadow(-6px 0 rgba(0, 0, 0, 0.1));

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e196a738/index.html
----------------------------------------------------------------------
diff --git a/index.html b/index.html
index 892f499..844e9c9 100644
--- a/index.html
+++ b/index.html
@@ -36,7 +36,7 @@
 <body id="home">
   <!-- Main container. -->
   <div role="main" id="main">
-    <div id="global-notifications" class="container errors-container"></div>
+    <div id="global-notifications" class="container errors-container window-resizeable"></div>
     <div id="app-container"></div>
     <hr>
 


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

Posted by ga...@apache.org.
Secondary Index work:
style buttons to right header
fix tray styling from button work
hide other trays when opening another tray


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

Branch: refs/heads/continue-secondary-index
Commit: fce5dfe15b0a29217193b1c45263260ab54bf75e
Parents: fe455df
Author: Jenn Schiffer <je...@pancaketheorem.com>
Authored: Thu Aug 7 16:36:58 2014 -0400
Committer: Garren Smith <ga...@gmail.com>
Committed: Tue Aug 26 12:40:45 2014 +0200

----------------------------------------------------------------------
 .../documents/assets/less/advancedOptions.less  |  7 +++-
 app/addons/documents/assets/less/headers.less   | 41 ++++++++++++++++++--
 .../documents/templates/advanced_options.html   |  2 +-
 .../documents/templates/header_alldocs.html     | 20 +++++-----
 app/addons/documents/views-advancedopts.js      |  4 +-
 app/addons/fauxton/components.js                |  1 +
 app/addons/fauxton/templates/api_bar.html       | 10 ++---
 assets/less/fauxton.less                        |  2 +
 8 files changed, 66 insertions(+), 21 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/fce5dfe1/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 83b1655..6febf3b 100644
--- a/app/addons/documents/assets/less/advancedOptions.less
+++ b/app/addons/documents/assets/less/advancedOptions.less
@@ -23,13 +23,16 @@
   .border-radius(5px);
   width: 490px;
   position: absolute;
+  right: 5px;
   z-index: 11;
   background-color: #333;
   color: #fff;
   padding: 0;
   margin: 0;
   .add-on {
-    padding-bottom: 10px;
+    padding: 0;
+    margin: 0;
+    line-height: 1em;
   }
   .query-group {
     padding: 20px;
@@ -128,7 +131,7 @@
   content: '';
   position: absolute;
   top: -25px;
-  left: 30px;
+  right: 140px;
   border-color: transparent transparent #333 transparent;
   border-style: solid;
   border-width: 15px;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/fce5dfe1/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
index 31faef1..ce5a27d 100644
--- a/app/addons/documents/assets/less/headers.less
+++ b/app/addons/documents/assets/less/headers.less
@@ -1,21 +1,56 @@
 .header-right {
+  .add-on {
+    font-size: 16px;
+  }
+  .well {
+    padding: 0;
+    margin: 0;
+  }
   .searchbox-container {
     position: relative;
     right: inherit;
-    height: 38px;
     input[type="text"] {
       .border-radius(5px);
       font-size: 13px;
       padding: 8px 35px 8px 10px;
+      width: 275px;
     }
     .btn-primary {
       background: none repeat scroll 0% 0% transparent;
       border: none;
       position: absolute;
-      right: 0;
-      padding-top: 7px;
+      right: 12px;
+      top: 8px;
       z-index: 2;
       color: #999;
     }
   }
+  > .btn {
+    padding: 0;
+    margin: 0;
+  }
+  > .button,
+  > .button a,
+  .api-url-btn > button {
+    color: #666;
+    font-size: 13px;
+    line-height: 3em;
+  }
+  > div {
+    float: right;
+    height: 60px;
+    border-left: 1px solid #ccc;
+    margin: 0;   
+    padding: 10px 15px;
+    line-height: 40px; 
+  }
+  > div:last-child {
+    border-left: none;
+  }
+  .api-url-btn {
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
 }

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/fce5dfe1/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 0502301..5e0e77f 100644
--- a/app/addons/documents/templates/advanced_options.html
+++ b/app/addons/documents/templates/advanced_options.html
@@ -12,7 +12,7 @@ License for the specific language governing permissions and limitations under
 the License.
 -->    
 <a id="toggle-query" href="#query-options-tray" data-bypass="true" data-toggle="tab">
-  <i class="fonticon fonticon-plus"></i>
+  <i class="fonticon fonticon-cog"></i>
   Query Options
 </a>
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/fce5dfe1/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 6e8f97f..3434dde 100644
--- a/app/addons/documents/templates/header_alldocs.html
+++ b/app/addons/documents/templates/header_alldocs.html
@@ -12,18 +12,20 @@ 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>
+  <!-- floats right -->
 
-  <div id="header-select-menu"></div>
-  <!-- search (jump to doc)-->
-  <div id="header-search" class="js-search searchbox-container"></div>
+  <div id="header-api-bar" class="button"></div>
 
   <!-- Query Options-->
-  <div class="header-query-options">
+  <div class="button header-query-options">
     <!-- Insert the query options here :) -->
     <div id="query-options"></div>
   </div>
-  <div id="header-api-bar"></div>
+
+  <!-- search (jump to doc)-->
+  <div id="header-search" class="js-search searchbox-container"></div>
+
+  <!-- Select toggle -->
+  <div id="header-select-all" class="button">
+    <span class="toggle-select-menu icon fonticon-ok-circled">Select</span>
+  </div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/fce5dfe1/app/addons/documents/views-advancedopts.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views-advancedopts.js b/app/addons/documents/views-advancedopts.js
index 6500b50..0a91914 100644
--- a/app/addons/documents/views-advancedopts.js
+++ b/app/addons/documents/views-advancedopts.js
@@ -64,7 +64,8 @@ function(app, FauxtonAPI, resizeColumns ) {
     toggleQuery: function(event) {
       $('#dashboard-content').scrollTop(0);
       this.$('#query-options-tray').toggle();
-    },
+      $('.api-navbar').hide();
+    }, 
 
     resetForm: function() {
       $('input, textarea').each(function(){
@@ -74,6 +75,7 @@ function(app, FauxtonAPI, resizeColumns ) {
       $("select").each(function(){
         this.selectedIndex = 0;
       });
+      $('#query-options-tray').hide();
     },
 
     showKeys: function(){

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/fce5dfe1/app/addons/fauxton/components.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/components.js b/app/addons/fauxton/components.js
index 60d0c26..55f4af4 100644
--- a/app/addons/fauxton/components.js
+++ b/app/addons/fauxton/components.js
@@ -109,6 +109,7 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
       }else{
         $currentTarget.removeClass("fonticon-minus").addClass("fonticon-plus");
       }
+      $('#query-options-tray').hide();
       $('.api-navbar').toggle();
     },
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/fce5dfe1/app/addons/fauxton/templates/api_bar.html
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/templates/api_bar.html b/app/addons/fauxton/templates/api_bar.html
index f56741c..bab431b 100644
--- a/app/addons/fauxton/templates/api_bar.html
+++ b/app/addons/fauxton/templates/api_bar.html
@@ -12,22 +12,22 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
-<button class="btn btn-primary pull-right api-url-btn">
-  API URL
+<a class="btn btn-primary pull-right api-url-btn">
   <i class="fonticon-plus icon"></i>
-</button>
+  API URL
+</a>
 <div class="clearfix"></div>
 <div class="api-navbar" style="display: none">
     <div class="input-prepend input-append">
       <span class="add-on">
         API URL
         <a class="help-link" data-bypass="true" href="<%-getDocUrl(documentation)%>" target="_blank">
-          <i class="icon-question-sign"></i>
+          <i class="fonticon-link"></i>
         </a>
       </span>
       <input id="api-url-text" type="text" class="input-xxlarge" value="<%- endpoint %>">
       <a class="btn copy-url" data-clipboard-target="api-url-text">
-        <i class="fonticon-eye icon"></i>
+        <i class="fonticon-clipboard icon"></i>
         Copy
       </a>
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/fce5dfe1/assets/less/fauxton.less
----------------------------------------------------------------------
diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less
index 29ef04f..e8a9fdb 100644
--- a/assets/less/fauxton.less
+++ b/assets/less/fauxton.less
@@ -262,6 +262,7 @@ div.spinner {
   right: 5px;
   background-color: #333;
   padding: 5px 20px;
+  z-index: 2;
   .input-append.input-prepend {
     margin-bottom: 0px;
     .copying {
@@ -293,6 +294,7 @@ div.spinner {
       margin-left: -1px;
       padding: 10px 10px 8px;
       border: none;
+      line-height: 1.5em;
       .border-radius(5px);
       &:hover{
         background-color: #cbcbcb;