couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From deathb...@apache.org
Subject [26/48] fauxton commit: updated refs/heads/secondary-indexes to 8688d16
Date Mon, 25 Aug 2014 13:40:06 GMT
Changes header (not styled)
Left header is now a reusable component
Header stuff
placeholder graphic
Messed up folders
Fix design doc selector
Fixes for the header


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

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

----------------------------------------------------------------------
 app/addons/documents/assets/less/changes.less   |   3 -
 app/addons/documents/assets/less/documents.less |   1 -
 app/addons/documents/assets/less/headers.less   |   6 +-
 app/addons/documents/routes.js                  | 161 +++++++++----
 app/addons/documents/templates/changes.html     |   4 +-
 .../documents/templates/header_alldocs.html     |  23 +-
 app/addons/documents/views-changes.js           |  26 ++-
 app/addons/documents/views-sidebar.js           |   2 +-
 app/addons/documents/views.js                   |  13 +-
 app/addons/fauxton/components.js                |  53 ++++-
 app/addons/fauxton/templates/header_left.html   |  17 ++
 .../assets/less/new-index-placeholder.less      |   2 +-
 app/addons/indexes/less/indexes.less            |  13 --
 .../indexes/less/new-index-placeholder.less     |   3 -
 app/addons/indexes/routes-list.js               |  65 ++++--
 app/addons/indexes/routes-show.js               |  69 ++++--
 app/addons/indexes/routes-viewindexes.js        |  75 ++++--
 .../indexes/templates/design_doc_selector.html  |  44 ++--
 app/addons/indexes/templates/header_left.html   |  17 --
 app/addons/indexes/templates/header_right.html  |   6 +-
 app/addons/indexes/templates/index_header.html  |  28 ---
 .../indexes/templates/preview_screen.html       |   2 +
 app/addons/indexes/views.js                     | 227 +++++++++----------
 assets/less/fauxton.less                        |   1 +
 assets/less/headers.less                        | 116 ++++++++++
 assets/less/templates.less                      | 100 --------
 26 files changed, 636 insertions(+), 441 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f719ed13/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 ebd395a..4bd86b7 100644
--- a/app/addons/documents/assets/less/changes.less
+++ b/app/addons/documents/assets/less/changes.less
@@ -19,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/f719ed13/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..5a39fab 100644
--- a/app/addons/documents/assets/less/documents.less
+++ b/app/addons/documents/assets/less/documents.less
@@ -17,7 +17,6 @@
 @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/f719ed13/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 3df552c..31faef1 100644
--- a/app/addons/documents/assets/less/headers.less
+++ b/app/addons/documents/assets/less/headers.less
@@ -1,7 +1,3 @@
-.header-left {
-  width: 300px;
-  float: left;
-}
 .header-right {
   .searchbox-container {
     position: relative;
@@ -22,4 +18,4 @@
       color: #999;
     }
   }
-}
\ No newline at end of file
+}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f719ed13/app/addons/documents/routes.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/routes.js b/app/addons/documents/routes.js
index bd52fb8..c1d61bd 100644
--- a/app/addons/documents/routes.js
+++ b/app/addons/documents/routes.js
@@ -26,8 +26,10 @@ define([
   "addons/fauxton/components"
 ],
 
-function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases, Resources) {
-
+function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases, Resources, Components) {
+  /* --------------------------------------------------
+    DOCUMENT EDITOR ROUTE OBJECT
+  ----------------------------------------------------*/
   var DocEditorRouteObject = FauxtonAPI.RouteObject.extend({
     layout: "one_pane",
     disableLoader: true,
@@ -102,6 +104,10 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases,
     }
   });
 
+  /* --------------------------------------------------
+    NEW DOCUMENT EDITOR ROUTE OBJECT (for new documents)
+  ----------------------------------------------------*/
+
   var NewDocEditorRouteObject = DocEditorRouteObject.extend({
     initialize: function (route, masterLayout, options) {
       var databaseName = options[0];
@@ -126,6 +132,10 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases,
 
   });
 
+
+  /* --------------------------------------------------
+    ALL DOCS, METADATA AND CHANGES ROUTE OBJECT
+  ----------------------------------------------------*/
   var DocumentsRouteObject = FauxtonAPI.RouteObject.extend({
     layout: "with_tabs_sidebar",
     selectedHeader: "Databases",
@@ -154,11 +164,14 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases,
 
     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: {
@@ -172,10 +185,17 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases,
         }
       });
 
-      this.header = this.setView("#breadcrumbs", new Documents.Views.AllDocsHeader({
-        database: this.data.database
-      }));
 
+      /* --------------------------------------------------
+        Show right header for all docs that includes:
+        query options, api bar, search and select
+      ----------------------------------------------------*/
+      this.changesHeader = true;
+      this.setAllDocsHeader();
+
+      /* --------------------------------------------------
+        Show the sidebar
+      ----------------------------------------------------*/
 
       this.sidebar = this.setView("#sidebar-content", new Documents.Views.Sidebar({
         collection: this.data.designDocs,
@@ -183,26 +203,34 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases,
       }));
     },
 
-    designDocMetadata:  function(database, ddoc){
-      this.viewEditor && this.viewEditor.remove();
+    setAllDocsHeader: 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": "", "className": "fonticon-left-open", "link": "/_all_dbs"},
-          {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)},
-        ];
-      };
-
-      this.apiUrl = [designDocInfo.url('apiurl'), designDocInfo.documentation() ];
+      /* --------------------------------------------------
+        Update the apiUrl
+      ----------------------------------------------------*/
+      this.headerRight.updateApiUrl([designDocInfo.url('apiurl'), designDocInfo.documentation()]);
 
     },
 
@@ -235,18 +263,59 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases,
         return;
       }
 
+
+      /* --------------------------------------------------
+        Set up breadcrumb header
+      ----------------------------------------------------*/
+      var crumbs = [
+        {"name": "", "className": "fonticon-left-open", "link": "/_all_dbs"},
+        {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)}
+      ];
+
+      var dropdown = [{
+        links: [{
+          title: 'Duplicate Index',
+          icon: 'fonticon-documents'
+        },{
+          title: 'Delete',
+          icon: 'fonticon-trash'
+        }]
+      }];
+
+      this.leftheader = this.setView("#breadcrumbs", new Components.LeftHeader({
+        crumbs: crumbs,
+        dropdownMenu: dropdown
+      }));
+
+      /*--------------------------------------------------
+      reset header if you have to
+      ----------------------------------------------------*/
+      this.setAllDocsHeader();
+
+      /* --------------------------------------------------
+        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));
 
+      /* --------------------------------------------------
+        Show all docs
+      ----------------------------------------------------*/
       this.documentsView = this.setView("#dashboard-lower-content", new Documents.Views.AllDocsList({
         database: this.data.database,
         collection: this.data.database.allDocs,
@@ -255,12 +324,10 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases,
         bulkDeleteDocsCollection: new Documents.BulkDeleteDocCollection([], {databaseId: this.data.database.get('id')})
       }));
 
-      this.crumbs = [
-        {"name": "", "className": "fonticon-left-open", "link": "/_all_dbs"},
-        {"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()]);
     },
 
 
@@ -309,7 +376,7 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases,
       this.documentsView.setParams(docParams, urlParams);
       this.documentsView.forceRender();
 
-      this.apiUrl = [collection.urlRef("apiurl", urlParams), "docs"];
+      this.headerRight.updateApiUrl([collection.urlRef("apiurl", urlParams), "docs"]);
     },
 
     perPageChange: function (perPage) {
@@ -366,34 +433,48 @@ function(app, FauxtonAPI, Components, Documents, Changes, DocEditor, Databases,
     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.changesHeader = true;
 
-      this.viewEditor && this.viewEditor.remove();
+      /* --------------------------------------------------
+        Set sidebar highlight
+      ----------------------------------------------------*/
 
       this.sidebar.setSelectedTab('changes');
 
-      this.crumbs = function () {
-        return [
-          {"name": "", "className": "fonticon-left-open", "link": "/_all_dbs"},
-          {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)},
-          {"name": "_changes", "link": "/_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) {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f719ed13/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/f719ed13/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 dfdfc03..d83cb08 100644
--- a/app/addons/documents/templates/header_alldocs.html
+++ b/app/addons/documents/templates/header_alldocs.html
@@ -12,29 +12,14 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
-<div class="header-left">
-  <!--back arrow-->
-   
-  <!--title with dropdown DB search-->
-  <h2><%-database%></h2>
-   
-  <!-- Menu gear-->
-</div>
- 
- 
-<div class="header-right">
   <!-- Select all -->
-   
+
   <!-- 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="query-options"></div>
+    <div id="header-api-bar"></div>
   </div>
- 
-</div>
- 
-<!--right margin for api bar-->
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f719ed13/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);

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f719ed13/app/addons/documents/views-sidebar.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views-sidebar.js b/app/addons/documents/views-sidebar.js
index 2c53b1b..8592dc1 100644
--- a/app/addons/documents/views-sidebar.js
+++ b/app/addons/documents/views-sidebar.js
@@ -190,7 +190,7 @@ function(app, FauxtonAPI, Components, Documents, Databases) {
 
         menuLinks.push({
           title: link.title,
-          url: "#" + database.url('app') + "/_design/" + docSafe + "/" + link.url,
+          url: "#" + database.url('app')+ "/" + link.url + "/" + docSafe,
           icon: 'fonticon-plus-circled'
         });
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f719ed13/app/addons/documents/views.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views.js b/app/addons/documents/views.js
index dedb897..62073d5 100644
--- a/app/addons/documents/views.js
+++ b/app/addons/documents/views.js
@@ -39,8 +39,9 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
     });
   }
 
-  //Header for alldocs with search, back, Menu, Query options, select etc
-  Views.AllDocsHeader = FauxtonAPI.View.extend({
+  //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'
@@ -52,6 +53,11 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
     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 {
@@ -97,6 +103,9 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
         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) {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f719ed13/app/addons/fauxton/components.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/components.js b/app/addons/fauxton/components.js
index c92a7ce..18ea5b8 100644
--- a/app/addons/fauxton/components.js
+++ b/app/addons/fauxton/components.js
@@ -35,6 +35,40 @@ 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",
@@ -45,7 +79,10 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
         crumbs: crumbs
       };
     },
-
+    update: function(crumbs) {
+      this.crumbs = crumbs;
+      this.render();
+    },
     initialize: function(options) {
       this.crumbs = options.crumbs;
     }
@@ -53,14 +90,16 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
 
   Components.ApiBar = FauxtonAPI.View.extend({
     template: "addons/fauxton/templates/api_bar",
-    endpoint: '_all_docs',
-
-    documentation: 'docs',
-
     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")){
@@ -703,6 +742,10 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
       this.links = options.links;
       this.icon = options.icon || "fonticon-plus-circled2";
     },
+    update: function(links){
+      this.links = links;
+      this.render();
+    },
     serialize: function(){
       return {
         links: this.links,

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f719ed13/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/f719ed13/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 6336771..ade1d3a 100644
--- a/app/addons/indexes/assets/less/new-index-placeholder.less
+++ b/app/addons/indexes/assets/less/new-index-placeholder.less
@@ -12,7 +12,7 @@
 .watermark-logo {
   background: transparent url('../img/couchWatermark.png') no-repeat 50% 50%;
   min-height: 400px;
-  padding-top: 80%;
+  padding-top: 60%;
   text-align: center;
   h3 {
     border-bottom: 1px solid #ccc;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f719ed13/app/addons/indexes/less/indexes.less
----------------------------------------------------------------------
diff --git a/app/addons/indexes/less/indexes.less b/app/addons/indexes/less/indexes.less
deleted file mode 100644
index d526ee9..0000000
--- a/app/addons/indexes/less/indexes.less
+++ /dev/null
@@ -1,13 +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.
-
-@import "new-index-placeholder.less";

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f719ed13/app/addons/indexes/less/new-index-placeholder.less
----------------------------------------------------------------------
diff --git a/app/addons/indexes/less/new-index-placeholder.less b/app/addons/indexes/less/new-index-placeholder.less
deleted file mode 100644
index 3f5db0e..0000000
--- a/app/addons/indexes/less/new-index-placeholder.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.watermark-logo {
-  background: transparent url(../img/couchWatermark.png') no-repeat 0 0;
-}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f719ed13/app/addons/indexes/routes-list.js
----------------------------------------------------------------------
diff --git a/app/addons/indexes/routes-list.js b/app/addons/indexes/routes-list.js
index 1245c24..437cef6 100644
--- a/app/addons/indexes/routes-list.js
+++ b/app/addons/indexes/routes-list.js
@@ -16,10 +16,11 @@ define([
   "addons/indexes/views",
   "addons/documents/views",
   "addons/indexes/resources",
-  "addons/indexes/routes-core"
+  "addons/indexes/routes-core",
+  "addons/fauxton/components"
 ],
 
-function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore) {
+function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore, Components) {
 
   var ListIndexes = RouteCore.extend({
     routes: {
@@ -39,6 +40,9 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore) {
     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 : "",
@@ -47,23 +51,56 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore) {
         database: this.data.database,
         newView: true
       }));
-
+      /* --------------------------------------------------
+        Insert Preview Screen View
+      ----------------------------------------------------*/
       this.setView("#right-content", new Views.PreviewScreen({}));
-      this.crumbs = function () {
-        return [
-          {"name": "Create List Index", "link": Databases.databaseUrl(this.data.database)},
-        ];
-      };
+
+      /* --------------------------------------------------
+        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, fn){
+    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({}));
-      this.crumbs = function () {
-        return [
-          {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)},
-        ];
-      };
     }
   });
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f719ed13/app/addons/indexes/routes-show.js
----------------------------------------------------------------------
diff --git a/app/addons/indexes/routes-show.js b/app/addons/indexes/routes-show.js
index 10a3a56..73f52d1 100644
--- a/app/addons/indexes/routes-show.js
+++ b/app/addons/indexes/routes-show.js
@@ -16,10 +16,11 @@ define([
   "addons/indexes/views",
   "addons/documents/views",
   "addons/indexes/resources",
-  "addons/indexes/routes-core"
+  "addons/indexes/routes-core",
+   "addons/fauxton/components"
 ],
 
-function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore) {
+function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore, Components) {
 
   var ShowIndexes = RouteCore.extend({
     routes: {
@@ -33,7 +34,9 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore) {
 
     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 : "",
@@ -43,28 +46,56 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore) {
         newView: true
       }));
 
+      /* --------------------------------------------------
+        Insert Preview Screen View
+      ----------------------------------------------------*/
       this.setView("#right-content", new Views.PreviewScreen({}));
-      this.crumbs = function () {
-        return [
-          {"name": "Create Show Index", "link": Databases.databaseUrl(this.data.database)},
-        ];
-      };
-    },
 
-    apiUrl: function() {
-      //TODO: Hook up proper API urls
-      return '';
+      /* --------------------------------------------------
+        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
+      }));
+
 
-    tempFn:  function(databaseName, ddoc, fn){
-      this.setView("#left-content", new Views.ShowEditor({}));
+      /* --------------------------------------------------
+        Insert Show Editor
+      ----------------------------------------------------*/
+      this.setView("#left-content", new Views.ListEditor({}));
 
+      /* --------------------------------------------------
+        Insert Preview Screen View
+      ----------------------------------------------------*/
       this.setView("#right-content", new Views.PreviewScreen({}));
-      this.crumbs = function () {
-        return [
-          {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)},
-        ];
-      };
     }
   });
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f719ed13/app/addons/indexes/routes-viewindexes.js
----------------------------------------------------------------------
diff --git a/app/addons/indexes/routes-viewindexes.js b/app/addons/indexes/routes-viewindexes.js
index de53981..7330d04 100644
--- a/app/addons/indexes/routes-viewindexes.js
+++ b/app/addons/indexes/routes-viewindexes.js
@@ -16,10 +16,11 @@ define([
   "addons/indexes/views",
   "addons/documents/views",
   "addons/indexes/resources",
-  "addons/indexes/routes-core"
+  "addons/indexes/routes-core",
+  "addons/fauxton/components"
 ],
 
-function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore) {
+function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore, Components) {
 
   var ViewIndexes = RouteCore.extend({
     routes: {
@@ -33,10 +34,19 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore) {
 
     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 : "",
@@ -46,9 +56,15 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore) {
         newView: true
       }));
 
-      this.leftheader = this.setView("#breadcrumbs", new Views.LeftHeader({
-        title:"Create a View Index",
-        database: this.data.database
+      /* --------------------------------------------------
+        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
       }));
 
     },
@@ -60,15 +76,32 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore) {
           decodeDdoc = decodeURIComponent(ddoc);
           view = view.replace(/\?.*$/,'');
 
-      this.leftheader = this.setView("#breadcrumbs", new Views.LeftHeader({
-        title: view,
-        database: this.data.database
-      }));
+      /* --------------------------------------------------
+        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.rightheader = this.setView("#api-bar", new Views.RightHeader({
-        database: this.data.database
+      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,
@@ -79,6 +112,21 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore) {
         }
       });
 
+
+      /* --------------------------------------------------
+        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,
@@ -89,6 +137,9 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore) {
         ddocInfo: this.ddocInfo(decodeDdoc, this.data.designDocs, view)
       }));
 
+      /* --------------------------------------------------
+        Insert Docs returned from view
+      ----------------------------------------------------*/
       this.documentsView = this.createViewDocumentsView({
         designDoc: decodeDdoc,
         docParams: docParams,
@@ -98,8 +149,6 @@ function (app, FauxtonAPI, Databases, Views, Documents, Resources, RouteCore) {
         designDocs: this.data.designDocs,
         view: view
       });
-
-      this.apiUrl = [this.data.indexedDocs.urlRef("apiurl", urlParams), "docs"];
     }
   });
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f719ed13/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 98abc46..7d58116 100644
--- a/app/addons/indexes/templates/design_doc_selector.html
+++ b/app/addons/indexes/templates/design_doc_selector.html
@@ -11,28 +11,26 @@ 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" 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>
+<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>
-</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" />
+        <% 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>
-</div>
\ No newline at end of file
+
+  <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/f719ed13/app/addons/indexes/templates/header_left.html
----------------------------------------------------------------------
diff --git a/app/addons/indexes/templates/header_left.html b/app/addons/indexes/templates/header_left.html
deleted file mode 100644
index 13bea60..0000000
--- a/app/addons/indexes/templates/header_left.html
+++ /dev/null
@@ -1,17 +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.
--->
-<!--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/f719ed13/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 90828d2..8279bf6 100644
--- a/app/addons/indexes/templates/header_right.html
+++ b/app/addons/indexes/templates/header_right.html
@@ -11,8 +11,12 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 License for the specific language governing permissions and limitations under
 the License.
 -->
-
   <!-- Query Options-->
+  <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/f719ed13/app/addons/indexes/templates/index_header.html
----------------------------------------------------------------------
diff --git a/app/addons/indexes/templates/index_header.html b/app/addons/indexes/templates/index_header.html
deleted file mode 100644
index ac8ac56..0000000
--- a/app/addons/indexes/templates/index_header.html
+++ /dev/null
@@ -1,28 +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-->
-
-<!-- Menu gear-->
-
-</div>
-
-
-<div class="header-right">
-  <!-- Query Options-->
-  <!--right margin for api bar-->
-</div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f719ed13/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
index 1fcf6d9..a7de45b 100644
--- a/app/addons/indexes/templates/preview_screen.html
+++ b/app/addons/indexes/templates/preview_screen.html
@@ -13,4 +13,6 @@ 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/f719ed13/app/addons/indexes/views.js
----------------------------------------------------------------------
diff --git a/app/addons/indexes/views.js b/app/addons/indexes/views.js
index 80e6a40..bfe209e 100644
--- a/app/addons/indexes/views.js
+++ b/app/addons/indexes/views.js
@@ -34,41 +34,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
 
   var Views = {};
 
-//left header
-  Views.LeftHeader = FauxtonAPI.View.extend({
-    className: "header-left",
-    template: "addons/indexes/templates/header_left",
-    initialize:function(options){
-      this.database = options.database;
-      this.title = options.title;
-    },
-    beforeRender: function(){
-      var crumbs = [
-        {"name": "", "className": "fonticon-left-open", "link": Databases.databaseUrl(this.database)},
-        {"name": this.title, "link": Databases.databaseUrl(this.database)}
-      ];
-      this.insertView("#header-breadcrumbs", new Components.Breadcrumbs({
-        crumbs: crumbs
-      }));
-      this.dropDownMenu();
-    },
-    dropDownMenu: function(){
-      var newLinks = [{
-        links: [{
-          title: 'Table',
-          icon: 'fonticon-table'
-        },{
-          title: 'JSON',
-          icon: 'fonticon-json'
-        }]
-      }];
-
-      this.insertView("#header-dropdown-menu", new Components.MenuDropDown({
-        icon: 'fonticon-cog',
-        links: newLinks,
-      }));
-    }
-  });
 
 //right header
   Views.RightHeader = FauxtonAPI.View.extend({
@@ -77,9 +42,116 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
     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.insertView(".header-api-bar", new Components.ApiBar({}));
+
+      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});
+        });
+      });
     }
   });
 
@@ -396,89 +468,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
       FauxtonAPI.triggerRouteEvent('updateAllDocs', {ddoc: ddocName, view: viewName});
     },
 
-    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();
     },

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f719ed13/assets/less/fauxton.less
----------------------------------------------------------------------
diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less
index 31678a3..6467923 100644
--- a/assets/less/fauxton.less
+++ b/assets/less/fauxton.less
@@ -23,6 +23,7 @@
 @import "prettyprint.less";
 @import "icons.less";
 @import "templates.less";
+@import "headers.less";
 @import "formstyles.less";
 /**
  * HTML-wide overrides

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f719ed13/assets/less/headers.less
----------------------------------------------------------------------
diff --git a/assets/less/headers.less b/assets/less/headers.less
new file mode 100644
index 0000000..c80a88f
--- /dev/null
+++ b/assets/less/headers.less
@@ -0,0 +1,116 @@
+.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/f719ed13/assets/less/templates.less
----------------------------------------------------------------------
diff --git a/assets/less/templates.less b/assets/less/templates.less
index a6f1a78..5c877b4 100644
--- a/assets/less/templates.less
+++ b/assets/less/templates.less
@@ -297,104 +297,6 @@
   }
 }
 
-.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;
-      }
-    }
-  }
-}
-
-
-
-
-
-
 
 
 /* SIDEBAR-CONTENT & DASHBOARD-CONTENT LAYOUTS:
@@ -449,8 +351,6 @@
   }
 }
 
-
-
 #dashboard-content{
   &.row-fluid,
   &.window-resizeable{


Mime
View raw message