couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From gar...@apache.org
Subject [4/5] fauxton commit: updated refs/heads/master to 14224ea
Date Wed, 30 Nov 2016 13:42:25 GMT
remove with_tabs_sidebar


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

Branch: refs/heads/master
Commit: 63d8923e62e2f3bff1c9930fadfd35b502cfa7af
Parents: a599d5a
Author: Garren Smith <garren.smith@gmail.com>
Authored: Thu Nov 24 17:32:12 2016 +0200
Committer: Garren Smith <garren.smith@gmail.com>
Committed: Wed Nov 30 11:38:40 2016 +0200

----------------------------------------------------------------------
 app/addons/auth/routes.js                    |   2 -
 app/addons/config/assets/less/config.less    |   4 +
 app/addons/config/layout.js                  |  82 +++++++++++
 app/addons/config/routes.js                  |  25 ++--
 app/addons/documents/layouts.js              | 169 ++++++++++++++++++++++
 app/addons/documents/mangolayout.js          |  34 +++--
 app/addons/documents/routes-documents.js     |  75 +++++-----
 app/addons/documents/routes-index-editor.js  |  64 ++++----
 app/addons/documents/routes-mango.js         |   5 -
 app/addons/documents/shared-routes.js        |   6 +-
 app/addons/fauxton/base.js                   |  32 ----
 app/addons/permissions/layout.js             |  42 ++++++
 app/addons/permissions/routes.js             |  23 ++-
 app/templates/layouts/with_tabs_sidebar.html |  36 -----
 14 files changed, 415 insertions(+), 184 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/63d8923e/app/addons/auth/routes.js
----------------------------------------------------------------------
diff --git a/app/addons/auth/routes.js b/app/addons/auth/routes.js
index 3f67c64..8bfb9c0 100644
--- a/app/addons/auth/routes.js
+++ b/app/addons/auth/routes.js
@@ -31,8 +31,6 @@ var AuthRouteObject = FauxtonAPI.RouteObject.extend({
     'createAdmin': 'checkNodes',
     'createAdmin/:node': 'createAdminForNode'
   },
-  hideNotificationCenter: true,
-  hideApiBar: true,
 
   checkNodes: function () {
     ClusterActions.navigateToNodeBasedOnNodeCount('/createAdmin/');

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/63d8923e/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 a9d7d7c..2a3bb07 100644
--- a/app/addons/config/assets/less/config.less
+++ b/app/addons/config/assets/less/config.less
@@ -213,3 +213,7 @@ table.config {
     margin-left: 50px;
   }
 }
+
+div.faux__config-breadcrumbs {
+  flex: 0 0 331px !important;
+}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/63d8923e/app/addons/config/layout.js
----------------------------------------------------------------------
diff --git a/app/addons/config/layout.js b/app/addons/config/layout.js
new file mode 100644
index 0000000..528dcca
--- /dev/null
+++ b/app/addons/config/layout.js
@@ -0,0 +1,82 @@
+// 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 React from 'react';
+import FauxtonAPI from "../../core/api";
+import {TabsSidebarHeader} from '../documents/layouts';
+import ConfigComponents from "./components.react";
+import CORSComponents from "../cors/components.react";
+import {Breadcrumbs} from '../components/header-breadcrumbs';
+import {NotificationCenterButton} from '../fauxton/notifications/notifications.react';
+import {ApiBarWrapper} from '../components/layouts';
+
+// const sidebarItems = [
+//   {
+//     title: 'Main config',
+//     typeSelect: 'main',
+//     link: '_config/' + node
+//   },
+//   {
+//     title: 'CORS',
+//     typeSelect: 'cors',
+//     link: '_config/' + node + '/cors'
+//   }
+// ];
+
+export const ConfigHeader = ({node, crumbs, docURL, endpoint}) => {
+  return (
+    <header className="two-panel-header">
+      <div className="flex-layout flex-row">
+        <div id='breadcrumbs' className="faux__config-breadcrumbs">
+          <Breadcrumbs crumbs={crumbs}/>
+        </div>
+        <div className="right-header-wrapper flex-layout flex-row flex-body">
+          <div id="react-headerbar" className="flex-body"> </div>
+          <div id="right-header" className="flex-fill">
+            <ConfigComponents.AddOptionController node={node} />
+          </div>
+          <ApiBarWrapper docURL={docURL} endpoint={endpoint} />
+          <div id="notification-center-btn" className="flex-fill">
+            <NotificationCenterButton />
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export const ConfigLayout = ({showCors, docURL, node, endpoint, crumbs}) => {
+  const content = showCors ? <CORSComponents.CORSController/> : <ConfigComponents.ConfigTableController
node={node} />;
+  return (
+    <div id="dashboard" className="with-sidebar">
+      <ConfigHeader
+        docURL={docURL}
+        endpoint={endpoint}
+        node={node}
+        crumbs={crumbs}
+      />
+      <div className="with-sidebar tabs-with-sidebar content-area">
+        <aside id="sidebar-content" className="scrollable">
+        </aside>
+        <section id="dashboard-content" className="flex-layout flex-col">
+          <div id="dashboard-upper-content"></div>
+          <div id="dashboard-lower-content" className="flex-body">
+            {content}
+          </div>
+          <div id="footer"></div>
+        </section>
+      </div>
+    </div>
+  );
+};
+
+export default ConfigLayout;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/63d8923e/app/addons/config/routes.js
----------------------------------------------------------------------
diff --git a/app/addons/config/routes.js b/app/addons/config/routes.js
index b50a132..ee2acff 100644
--- a/app/addons/config/routes.js
+++ b/app/addons/config/routes.js
@@ -19,6 +19,7 @@ import CORSActions from "../cors/actions";
 import ClusterActions from "../cluster/cluster.actions";
 import ConfigComponents from "./components.react";
 import ConfigActions from "./actions";
+import Layout from './layout';
 
 
 var ConfigDisabledRouteObject = FauxtonAPI.RouteObject.extend({
@@ -39,15 +40,11 @@ var ConfigDisabledRouteObject = FauxtonAPI.RouteObject.extend({
 
 
 var ConfigPerNodeRouteObject = FauxtonAPI.RouteObject.extend({
-  layout: 'with_tabs_sidebar',
+  layout: 'empty',
 
   roles: ['_admin'],
   selectedHeader: 'Config',
 
-  crumbs: [
-    { name: 'Config' }
-  ],
-
   apiUrl: function () {
     return [this.configs.url(), this.configs.documentation];
   },
@@ -80,17 +77,27 @@ var ConfigPerNodeRouteObject = FauxtonAPI.RouteObject.extend({
 
   configForNode: function (node) {
     this.removeComponents();
-    this.setComponent('#right-header', ConfigComponents.AddOptionController, { node });
-    this.setComponent('#dashboard-lower-content', ConfigComponents.ConfigTableController,
{ node });
     ConfigActions.fetchAndEditConfig(node);
     this.sidebar.setSelectedTab('main');
+    this.setComponent('.template', Layout, {
+      node: node,
+      docURL: this.configs.documentation,
+      endpoint: this.configs.url(),
+      crumbs: [{ name: 'Config' }],
+      showCors: false
+    });
   },
 
   configCorsForNode: function (node) {
-    this.removeComponents();
-    this.setComponent('#dashboard-lower-content', CORSComponents.CORSController);
     CORSActions.fetchAndEditCors(node);
     this.sidebar.setSelectedTab('cors');
+    this.setComponent('.template', Layout, {
+      node: node,
+      docURL: this.configs.documentation,
+      endpoint: this.configs.url(),
+      crumbs: [{ name: 'Config' }],
+      showCors: true
+    });
   }
 });
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/63d8923e/app/addons/documents/layouts.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/layouts.js b/app/addons/documents/layouts.js
new file mode 100644
index 0000000..fd9283d
--- /dev/null
+++ b/app/addons/documents/layouts.js
@@ -0,0 +1,169 @@
+// 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 React from 'react';
+import FauxtonAPI from "../../core/api";
+import {OnePane, OnePaneContent} from '../components/layouts';
+import IndexResultsComponents from './index-results/index-results.components.react';
+import ReactPagination from './pagination/pagination.react';
+import ReactHeader from './header/header.react';
+import {Breadcrumbs} from '../components/header-breadcrumbs';
+import {RightHeader} from './mangolayout';
+import {NotificationCenterButton} from '../fauxton/notifications/notifications.react';
+import {ApiBarWrapper} from '../components/layouts';
+import SidebarComponents from "./sidebar/sidebar.react";
+import HeaderDocsLeft from './components/header-docs-left';
+import Changes from './changes/components.react';
+import IndexEditorComponents from "./index-editor/components.react";
+import DesignDocInfoComponents from './designdocinfo/components.react';
+import RightAllDocsHeader from './components/header-docs-right';
+
+export const TabsSidebarHeader = ({hideHeaderBar, database, dbName, dropDownLinks, showIncludeAllDocs,
docURL, endpoint}) => {
+  return (
+    <header className="two-panel-header">
+      <div className="flex-layout flex-row">
+        <div id="header-docs-left">
+          <HeaderDocsLeft
+            dbName={dbName}
+            dropDownLinks={dropDownLinks}
+            />
+        </div>
+        <div className="right-header-wrapper flex-layout flex-row flex-body">
+          <div id="react-headerbar" className="flex-body">
+              {hideHeaderBar ? null : <ReactHeader.BulkDocumentHeaderController showIncludeAllDocs={showIncludeAllDocs}
/>}
+          </div>
+          <div id="right-header" className="flex-fill">
+            <RightAllDocsHeader database={database} />
+          </div>
+          <ApiBarWrapper docURL={docURL} endpoint={endpoint} />
+          <div id="notification-center-btn" className="flex-fill">
+            <NotificationCenterButton />
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+TabsSidebarHeader.propTypes = {
+  dbName : React.PropTypes.string.isRequired,
+  dropDownLinks : React.PropTypes.array.isRequired,
+  docURL : React.PropTypes.string.isRequired,
+  endpoint : React.PropTypes.string.isRequired,
+  showIncludeAllDocs : React.PropTypes.bool,
+  hideHeaderBar : React.PropTypes.bool,
+  database : React.PropTypes.object.isRequired
+};
+
+TabsSidebarHeader.defaultProps = {
+  hideHeaderBar: false
+};
+
+export const TabsSidebarContent = ({hideFooter, lowerContent, upperContent}) => {
+  return (
+    <div className="with-sidebar tabs-with-sidebar content-area">
+      <aside id="sidebar-content" className="scrollable">
+        <SidebarComponents.SidebarController />
+      </aside>
+      <section id="dashboard-content" className="flex-layout flex-col">
+        <div id="dashboard-upper-content">
+          {upperContent}
+        </div>
+        <div id="dashboard-lower-content" className="flex-body">
+          {lowerContent}
+        </div>
+        <div id="footer">
+          {hideFooter ? null : <ReactPagination.Footer />}
+        </div>
+      </section>
+    </div>
+  );
+};
+TabsSidebarContent.defaultProps = {
+  hideFooter: false
+};
+
+TabsSidebarContent.propTypes = {
+  hideFooter: React.PropTypes.bool,
+  lowerContent: React.PropTypes.object,
+  upperContent: React.PropTypes.object,
+};
+
+export const DocsTabsSidebarLayout = ({database, showIncludeAllDocs, docURL, endpoint, dbName,
dropDownLinks}) => {
+  return (
+    <div id="dashboard" className="with-sidebar">
+      <TabsSidebarHeader
+        showIncludeAllDocs={showIncludeAllDocs}
+        docURL={docURL}
+        endpoint={endpoint}
+        dbName={dbName}
+        dropDownLinks={dropDownLinks}
+        database={database}
+      />
+      <TabsSidebarContent
+        lowerContent={<IndexResultsComponents.List />}
+      />
+    </div>
+  );
+};
+
+export const ChangesSidebarLayout = ({docURL, database, endpoint, dbName, dropDownLinks})
=> {
+  return (
+    <div id="dashboard" className="with-sidebar">
+      <TabsSidebarHeader
+        hideHeaderBar={true}
+        docURL={docURL}
+        endpoint={endpoint}
+        dbName={dbName}
+        dropDownLinks={dropDownLinks}
+        database={database}
+      />
+      <TabsSidebarContent
+        upperContent={<Changes.ChangesTabContent />}
+        lowerContent={<Changes.ChangesController />}
+        hideFooter={true}
+        />
+    </div>
+  );
+};
+
+export const ViewsTabsSidebarLayout = ({showEditView, database, showIncludeAllDocs, docURL,
endpoint, dbName, dropDownLinks}) => {
+  const content = showEditView ? <IndexEditorComponents.EditorController /> : <DesignDocInfoComponents.DesignDocInfo
/>;
+  return (
+    <div id="dashboard" className="with-sidebar">
+      <TabsSidebarHeader
+        hideHeaderBar={true}
+        endpoint={endpoint}
+        docURL={docURL}
+        dbName={dbName}
+        dropDownLinks={dropDownLinks}
+        database={database}
+      />
+      <TabsSidebarContent
+        lowerContent={content}
+        hideFooter={true}
+      />
+    </div>
+  );
+};
+
+ViewsTabsSidebarLayout.defaultProps = {
+  showEditView: true
+};
+
+ViewsTabsSidebarLayout.propTypes = {
+  showEditView: React.PropTypes.bool,
+  docURL: React.PropTypes.string.isRequired,
+  endpoint: React.PropTypes.string.isRequired,
+  dbName: React.PropTypes.string.isRequired,
+  dropDownLinks: React.PropTypes.array.isRequired
+};

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/63d8923e/app/addons/documents/mangolayout.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/mangolayout.js b/app/addons/documents/mangolayout.js
index 6da0a83..3c75ed1 100644
--- a/app/addons/documents/mangolayout.js
+++ b/app/addons/documents/mangolayout.js
@@ -17,11 +17,27 @@ import ReactPagination from "./pagination/pagination.react";
 import ReactHeader from "./header/header.react";
 import {Breadcrumbs} from '../components/header-breadcrumbs';
 import {NotificationCenterButton} from '../fauxton/notifications/notifications.react';
-import {ApiBarController} from '../components/components/apibar';
 import {ApiBarWrapper} from '../components/layouts';
 import MangoComponents from "./mango/mango.components.react";
 import IndexResultsComponents from "./index-results/index-results.components.react";
 
+
+export const RightHeader = ({showIncludeAllDocs, docURL, endpoint}) => {
+  return (
+    <div className="right-header-wrapper flex-layout flex-row flex-body">
+      <div id="react-headerbar" className="flex-body">
+        <ReactHeader.BulkDocumentHeaderController showIncludeAllDocs={showIncludeAllDocs}
/>
+      </div>
+      <div id="right-header" className="flex-body">
+      </div>
+      <ApiBarWrapper docURL={docURL} endpoint={endpoint} />
+      <div id='notification-center-btn'>
+        <NotificationCenterButton />
+      </div>
+    </div>
+  );
+};
+
 export const MangoFooter = () => {
   return (
     <div id="footer">
@@ -36,17 +52,11 @@ export const MangoHeader = ({showIncludeAllDocs, crumbs, docURL, endpoint})
=> {
       <div className='flex-body faux__breadcrumbs-mango-header'>
         <Breadcrumbs crumbs={crumbs}/>
       </div>
-      <div className="right-header-wrapper flex-layout flex-row flex-body">
-        <div id="react-headerbar" className="flex-body">
-          <ReactHeader.BulkDocumentHeaderController showIncludeAllDocs={showIncludeAllDocs}
/>
-        </div>
-        <div id="right-header" className="flex-body">
-        </div>
-        <ApiBarWrapper docURL={docURL} endpoint={endpoint} />
-        <div id='notification-center-btn'>
-          <NotificationCenterButton />
-        </div>
-      </div>
+      <RightHeader
+        showIncludeAllDocs={showIncludeAllDocs}
+        docURL={docURL}
+        endpoint={endpoint}
+      />
     </div>
   );
 };

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/63d8923e/app/addons/documents/routes-documents.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/routes-documents.js b/app/addons/documents/routes-documents.js
index 767453c..1233933 100644
--- a/app/addons/documents/routes-documents.js
+++ b/app/addons/documents/routes-documents.js
@@ -15,26 +15,20 @@ import app from '../../app';
 import FauxtonAPI from '../../core/api';
 import BaseRoute from './shared-routes';
 import Documents from './resources';
-import RightAllDocsHeader from './components/header-docs-right';
-import Changes from './changes/components.react';
 import ChangesActions from './changes/actions';
 import Databases from '../databases/base';
 import Resources from './resources';
-import Components from '../fauxton/components';
 import IndexResultStores from './index-results/stores';
 import IndexResultsActions from './index-results/actions';
-import IndexResultsComponents from './index-results/index-results.components.react';
-import ReactPagination from './pagination/pagination.react';
-import ReactHeader from './header/header.react';
 import ReactActions from './header/header.actions';
 import SidebarActions from './sidebar/actions';
 import DesignDocInfoActions from './designdocinfo/actions';
-import DesignDocInfoComponents from './designdocinfo/components.react';
 import ComponentsActions from '../components/actions';
 import QueryOptionsActions from './queryoptions/actions';
+import {DocsTabsSidebarLayout, ViewsTabsSidebarLayout, ChangesSidebarLayout} from './layouts';
 
 var DocumentsRouteObject = BaseRoute.extend({
-  layout: "with_tabs_sidebar",
+  layout: "empty",
   routes: {
     "database/:database/_all_docs(:extra)": {
       route: "allDocs",
@@ -67,25 +61,16 @@ var DocumentsRouteObject = BaseRoute.extend({
 
     this.createDesignDocsCollection();
 
-    this.setComponent("#right-header", RightAllDocsHeader, {
-      database: this.database
-    });
-
     this.addLeftHeader();
     this.addSidebar();
   },
 
   designDocMetadata: function (database, ddoc) {
-    this.removeComponent('#footer');
-    this.removeComponent('#react-headerbar');
-    this.removeComponent('#dashboard-upper-content');
-
     var designDocInfo = new Resources.DdocInfo({ _id: "_design/" + ddoc }, { database: this.database
});
     DesignDocInfoActions.fetchDesignDocInfo({
       ddocName: ddoc,
       designDocInfo: designDocInfo
     });
-    this.setComponent("#dashboard-lower-content", DesignDocInfoComponents.DesignDocInfo);
 
     SidebarActions.selectNavItem('designDoc', {
       designDocName: ddoc,
@@ -93,8 +78,17 @@ var DocumentsRouteObject = BaseRoute.extend({
     });
 
     QueryOptionsActions.hideQueryOptions();
-
-    this.apiUrl = [designDocInfo.url('apiurl'), designDocInfo.documentation()];
+    this.apiUrl = [, designDocInfo.documentation()];
+
+    const dropDownLinks = this.getCrumbs(this.database);
+    this.setComponent('.template', ViewsTabsSidebarLayout, {
+      showEditView: false, //a bit of a hack but its fine for now.
+      docURL: designDocInfo.documentation(),
+      endpoint: designDocInfo.url('apiurl'),
+      dbName: this.database.id,
+      dropDownLinks,
+      database: this.database
+    });
   },
 
   /*
@@ -108,10 +102,6 @@ var DocumentsRouteObject = BaseRoute.extend({
         docParams = params.docParams,
         collection;
 
-    this.setComponent('#react-headerbar', ReactHeader.BulkDocumentHeaderController, {showIncludeAllDocs:
true});
-    this.setComponent('#footer', ReactPagination.Footer);
-
-
     // includes_docs = true if you are visiting the _replicator/_users databases
     if (['_replicator', '_users'].indexOf(databaseName) > -1) {
       docParams.include_docs = true;
@@ -131,13 +121,11 @@ var DocumentsRouteObject = BaseRoute.extend({
     SidebarActions.selectNavItem(tab);
     ComponentsActions.showDeleteDatabaseModal({showDeleteModal: false, dbId: ''});
 
-    this.removeComponent('#dashboard-upper-content');
-
     if (!docParams) {
       docParams = {};
     }
 
-    var frozenCollection = app.utils.localStorageGet('include_docs_bulkdocs');
+    const frozenCollection = app.utils.localStorageGet('include_docs_bulkdocs');
     window.localStorage.removeItem('include_docs_bulkdocs');
 
     IndexResultsActions.newResultsList({
@@ -148,15 +136,22 @@ var DocumentsRouteObject = BaseRoute.extend({
 
     this.database.allDocs.paging.pageSize = IndexResultStores.indexResultsStore.getPerPage();
 
-    this.setComponent('#dashboard-lower-content', IndexResultsComponents.List);
-
-    // this used to be a function that returned the object, but be warned: it caused a closure
with a reference to
-    // the initial this.database object which can change
-    this.apiUrl = [this.database.allDocs.urlRef("apiurl", urlParams), this.database.allDocs.documentation()];
+    const endpoint = this.database.allDocs.urlRef("apiurl", urlParams);
+    const docURL = this.database.allDocs.documentation();
 
     // update the query options with the latest & greatest info
     QueryOptionsActions.reset({queryParams: urlParams});
     QueryOptionsActions.showQueryOptions();
+
+    const dropDownLinks = this.getCrumbs(this.database);
+    this.setComponent('.template', DocsTabsSidebarLayout, {
+      showIncludeAllDocs: true,
+      docURL,
+      endpoint,
+      dbName: this.database.id,
+      dropDownLinks,
+      database: this.database
+    });
   },
 
   reloadDesignDocs: function (event) {
@@ -170,21 +165,17 @@ var DocumentsRouteObject = BaseRoute.extend({
     ChangesActions.initChanges({
       databaseName: this.database.id
     });
-    this.setComponent('#dashboard-upper-content', Changes.ChangesTabContent);
-    this.setComponent("#dashboard-lower-content", Changes.ChangesController);
-
-    this.removeComponent('#footer');
-    this.removeComponent('#react-headerbar');
-
-    this.viewEditor && this.viewEditor.remove();
-
     SidebarActions.selectNavItem('changes');
 
     QueryOptionsActions.hideQueryOptions();
 
-    this.apiUrl = function () {
-      return [FauxtonAPI.urls('changes', 'apiurl', this.database.id, ''), this.database.documentation()];
-    };
+    this.setComponent('.template', ChangesSidebarLayout, {
+      endpoint: FauxtonAPI.urls('changes', 'apiurl', this.database.id, ''),
+      docURL: this.database.documentation(),
+      dbName: this.database.id,
+      dropDownLinks: this.getCrumbs(this.database),
+      database: this.database
+    });
   }
 
 });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/63d8923e/app/addons/documents/routes-index-editor.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/routes-index-editor.js b/app/addons/documents/routes-index-editor.js
index c139b67..5a007dd 100644
--- a/app/addons/documents/routes-index-editor.js
+++ b/app/addons/documents/routes-index-editor.js
@@ -15,22 +15,17 @@ import FauxtonAPI from "../../core/api";
 import Helpers from "./helpers";
 import BaseRoute from "./shared-routes";
 import Documents from "./resources";
-import IndexEditorComponents from "./index-editor/components.react";
 import ActionsIndexEditor from "./index-editor/actions";
 import Databases from "../databases/base";
-import Components from "../fauxton/components";
 import IndexResultsStores from "./index-results/stores";
 import IndexResultsActions from "./index-results/actions";
-import IndexResultsComponents from "./index-results/index-results.components.react";
-import ReactPagination from "./pagination/pagination.react";
-import ReactHeader from "./header/header.react";
 import ReactHeaderActions from "./header/header.actions";
 import SidebarActions from "./sidebar/actions";
-import RightAllDocsHeader from './components/header-docs-right';
+import {DocsTabsSidebarLayout, ViewsTabsSidebarLayout} from './layouts';
 
 
 var IndexEditorAndResults = BaseRoute.extend({
-  layout: 'with_tabs_sidebar',
+  layout: 'empty',
   routes: {
     'database/:database/new_view': {
       route: 'createView',
@@ -57,10 +52,6 @@ var IndexEditorAndResults = BaseRoute.extend({
     this.createDesignDocsCollection();
     this.addLeftHeader();
     this.addSidebar();
-
-    this.setComponent("#right-header", RightAllDocsHeader, {
-      database: this.database
-    });
   },
 
   establish: function () {
@@ -76,8 +67,6 @@ var IndexEditorAndResults = BaseRoute.extend({
         decodeDdoc = decodeURIComponent(ddoc);
 
     viewName = viewName.replace(/\?.*$/, '');
-    this.setComponent('#footer', ReactPagination.Footer);
-
     this.indexedDocs = new Documents.IndexCollection(null, {
       database: this.database,
       design: decodeDdoc,
@@ -109,14 +98,20 @@ var IndexEditorAndResults = BaseRoute.extend({
       indexName: viewName
     });
 
-    this.setComponent('#react-headerbar', ReactHeader.BulkDocumentHeaderController, {showIncludeAllDocs:
true});
-    this.setComponent('#dashboard-lower-content', IndexResultsComponents.List);
+    this.showQueryOptions(urlParams, ddoc, viewName);
 
-    this.apiUrl = function () {
-      return [this.indexedDocs.urlRef('apiurl'), FauxtonAPI.constants.DOC_URLS.GENERAL];
-    };
+    const endpoint = this.indexedDocs.urlRef('apiurl');
+    const docURL = FauxtonAPI.constants.DOC_URLS.GENERAL;
 
-    this.showQueryOptions(urlParams, ddoc, viewName);
+    const dropDownLinks = this.getCrumbs(this.database);
+    this.setComponent('.template', DocsTabsSidebarLayout, {
+      showIncludeAllDocs: true,
+      docURL,
+      endpoint,
+      dbName: this.database.id,
+      dropDownLinks,
+      database: this.database
+    });
   },
 
   createView: function (database, _designDoc) {
@@ -137,10 +132,16 @@ var IndexEditorAndResults = BaseRoute.extend({
       newDesignDoc: newDesignDoc
     });
 
-    this.removeComponent('#react-headerbar');
-    this.removeComponent('#footer');
-    this.setComponent('#dashboard-lower-content', IndexEditorComponents.EditorController);
     SidebarActions.selectNavItem('');
+
+    const dropDownLinks = this.getCrumbs(this.database);
+    this.setComponent('.template', ViewsTabsSidebarLayout, {
+      showIncludeAllDocs: true,
+      docURL: FauxtonAPI.constants.DOC_URLS.GENERAL,
+      dbName: this.database.id,
+      database: this.database,
+      dropDownLinks
+    });
   },
 
   editView: function (databaseName, ddocName, viewName) {
@@ -158,14 +159,19 @@ var IndexEditorAndResults = BaseRoute.extend({
       indexName: viewName
     });
 
-    this.apiUrl = function () {
-      return [FauxtonAPI.urls('view', 'apiurl', databaseName, ddocName, viewName), FauxtonAPI.constants.DOC_URLS.GENERAL];
-    };
+    const docURL = FauxtonAPI.constants.DOC_URLS.GENERAL;
+    const endpoint = FauxtonAPI.urls('view', 'apiurl', databaseName, ddocName, viewName);
 
-    this.removeView('#right-header');
-    this.removeComponent('#react-headerbar');
-    this.removeComponent('#footer');
-    this.setComponent('#dashboard-lower-content', IndexEditorComponents.EditorController);
+
+    const dropDownLinks = this.getCrumbs(this.database);
+    this.setComponent('.template', ViewsTabsSidebarLayout, {
+      showIncludeAllDocs: true,
+      docURL,
+      endpoint,
+      dbName: this.database.id,
+      dropDownLinks,
+      database: this.database
+    });
   }
 
 });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/63d8923e/app/addons/documents/routes-mango.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/routes-mango.js b/app/addons/documents/routes-mango.js
index 6a0cecb..c63e5a3 100644
--- a/app/addons/documents/routes-mango.js
+++ b/app/addons/documents/routes-mango.js
@@ -15,19 +15,14 @@ import FauxtonAPI from "../../core/api";
 import Helpers from "./helpers";
 import BaseRoute from "./shared-routes";
 import Databases from "../databases/resources";
-import Components from "../fauxton/components";
 import Resources from "./resources";
 import IndexResultsActions from "./index-results/actions";
 import IndexResultStores from "./index-results/stores";
 import ReactHeader from "./header/header.react";
 import ReactActions from "./header/header.actions";
-import ReactPagination from "./pagination/pagination.react";
-import MangoComponents from "./mango/mango.components.react";
 import MangoActions from "./mango/mango.actions";
 import MangoStores from "./mango/mango.stores";
-import IndexResultsComponents from "./index-results/index-results.components.react";
 import SidebarActions from "./sidebar/actions";
-import RightAllDocsHeader from './components/header-docs-right';
 import {MangoLayout} from './mangolayout';
 
 const MangoIndexEditorAndQueryEditor = FauxtonAPI.RouteObject.extend({

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/63d8923e/app/addons/documents/shared-routes.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/shared-routes.js b/app/addons/documents/shared-routes.js
index 8c66c4b..136c07a 100644
--- a/app/addons/documents/shared-routes.js
+++ b/app/addons/documents/shared-routes.js
@@ -14,10 +14,8 @@ import app from "../../app";
 import FauxtonAPI from "../../core/api";
 import Documents from "./shared-resources";
 import Databases from "../databases/base";
-import Components from "../fauxton/components";
 import PaginationActions from "./pagination/actions";
 import IndexResultStores from "./index-results/stores";
-import SidebarComponents from "./sidebar/sidebar.react";
 import SidebarActions from "./sidebar/actions";
 import QueryActions from './queryoptions/actions';
 import HeaderDocsLeft from './components/header-docs-left';
@@ -26,7 +24,7 @@ import HeaderDocsLeft from './components/header-docs-left';
 // The Documents section is built up a lot of different route object which share code. This
contains
 // base functionality that can be used across routes / addons
 var BaseRoute = FauxtonAPI.RouteObject.extend({
-  layout: 'with_tabs_sidebar',
+  layout: 'empty',
   selectedHeader: 'Databases',
 
   createDesignDocsCollection: function () {
@@ -65,7 +63,6 @@ var BaseRoute = FauxtonAPI.RouteObject.extend({
 
   addLeftHeader: function () {
     const dropDownLinks = this.getCrumbs(this.database);
-    this.setComponent('#header-docs-left', HeaderDocsLeft, {dbName: this.database.id, dropDownLinks:
dropDownLinks});
   },
 
   addSidebar: function (selectedNavItem) {
@@ -78,7 +75,6 @@ var BaseRoute = FauxtonAPI.RouteObject.extend({
     }
 
     SidebarActions.newOptions(options);
-    this.setComponent("#sidebar-content", SidebarComponents.SidebarController);
   },
 
   getCrumbs: function (database) {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/63d8923e/app/addons/fauxton/base.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/base.js b/app/addons/fauxton/base.js
index e02c970..fed1e0b 100644
--- a/app/addons/fauxton/base.js
+++ b/app/addons/fauxton/base.js
@@ -32,38 +32,6 @@ Fauxton.initialize = function () {
 
   FauxtonAPI.RouteObject.on('beforeEstablish', function (routeObject) {
     NavigationActions.setNavbarActiveLink(_.result(routeObject, 'selectedHeader'));
-
-    if (!routeObject.hideApiBar) {
-    // always attempt to render the API Bar. Even if it's hidden on initial load, it may
be enabled later
-      routeObject.setComponent('#api-navbar', ReactComponents.ApiBarController, {
-        buttonVisible: true,
-        contentVisible: false
-      });
-
-      const apiAndDocs = routeObject.get('apiUrl');
-      if (apiAndDocs) {
-        ComponentActions.updateAPIBar({
-          buttonVisible: true,
-          contentVisible: false,
-          endpoint: apiAndDocs[0],
-          docURL: apiAndDocs[1]
-        });
-      } else {
-        ComponentActions.hideAPIBarButton();
-      }
-    }
-
-    if (!routeObject.get('hideNotificationCenter')) {
-      routeObject.setComponent('#notification-center-btn', NotificationComponents.NotificationCenterButton);
-    }
-
-    const crumbs = routeObject.get('crumbs');
-
-    if (!crumbs.length) {
-      return;
-    }
-
-    routeObject.setComponent('#breadcrumbs', Breadcrumbs, {crumbs: crumbs});
   });
 
   const primaryNavBarEl = $('#primary-navbar')[0];

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/63d8923e/app/addons/permissions/layout.js
----------------------------------------------------------------------
diff --git a/app/addons/permissions/layout.js b/app/addons/permissions/layout.js
new file mode 100644
index 0000000..0ddeee0
--- /dev/null
+++ b/app/addons/permissions/layout.js
@@ -0,0 +1,42 @@
+// 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 React from 'react';
+import FauxtonAPI from "../../core/api";
+import {TabsSidebarHeader} from '../documents/layouts';
+import Permissions from "./components.react";
+import SidebarComponents from "../documents/sidebar/sidebar.react";
+
+export const PermissionsLayout = ({docURL, database, endpoint, dbName, dropDownLinks}) =>
{
+  return (
+    <div id="dashboard" className="with-sidebar">
+      <TabsSidebarHeader
+        hideHeaderBar={true}
+        docURL={docURL}
+        endpoint={endpoint}
+        dbName={dbName}
+        dropDownLinks={dropDownLinks}
+        database={database}
+      />
+      <div className="with-sidebar tabs-with-sidebar content-area">
+        <aside id="sidebar-content" className="scrollable">
+          <SidebarComponents.SidebarController />
+        </aside>
+        <section id="dashboard-content" className="flex-layout flex-col">
+          <Permissions.PermissionsController />
+        </section>
+      </div>
+    </div>
+  );
+};
+
+export default PermissionsLayout;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/63d8923e/app/addons/permissions/routes.js
----------------------------------------------------------------------
diff --git a/app/addons/permissions/routes.js b/app/addons/permissions/routes.js
index e6460ec..3b095f4 100644
--- a/app/addons/permissions/routes.js
+++ b/app/addons/permissions/routes.js
@@ -15,10 +15,11 @@ import FauxtonAPI from "../../core/api";
 import Databases from "../databases/base";
 import Resources from "./resources";
 import Actions from "./actions";
-import Permissions from "./components.react";
 import BaseRoute from "../documents/shared-routes";
+import Layout from './layout';
 
 var PermissionsRouteObject = BaseRoute.extend({
+  layout: 'empty',
   roles: ['fx_loggedIn'],
   routes: {
     'database/:database/permissions': 'permissions'
@@ -42,10 +43,6 @@ var PermissionsRouteObject = BaseRoute.extend({
     this.addSidebar('permissions');
   },
 
-  apiUrl: function () {
-    return [this.security.url('apiurl'), this.security.documentation];
-  },
-
   establish: function () {
     return [
       this.designDocs.fetch({reset: true})
@@ -54,18 +51,20 @@ var PermissionsRouteObject = BaseRoute.extend({
 
   permissions: function () {
     Actions.fetchPermissions(this.database, this.security);
-    this.setComponent('#dashboard-content', Permissions.PermissionsController);
-  },
-
-  crumbs: function () {
-    return [
+    const crumbs = [
       { name: this.database.id, link: Databases.databaseUrl(this.database)},
       { name: 'Permissions' }
     ];
+    this.setComponent('.template', Layout, {
+      docURL: this.security.documentation,
+      endpoint: this.security.url('apiurl'),
+      dbName: this.database.id,
+      dropDownLinks: crumbs,
+      database: this.database
+    });
   },
 
-  cleanup: function () {
-    this.removeComponent('#sidebar-content');
+  crumbs: function () {
   }
 });
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/63d8923e/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
deleted file mode 100644
index 26dc7c9..0000000
--- a/app/templates/layouts/with_tabs_sidebar.html
+++ /dev/null
@@ -1,36 +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 id="dashboard" class="with-sidebar">
-  <header class="two-panel-header">
-    <div class="flex-layout flex-row">
-      <div id="header-docs-left"></div>
-      <div class="right-header-wrapper flex-layout flex-row flex-body">
-        <div id="react-headerbar" class="flex-body"></div>
-        <div id="right-header" class="flex-fill"></div>
-        <div id="api-navbar" class="flex-fill"></div>
-        <div id="notification-center-btn" class="flex-fill"></div>
-      </div>
-    </div>
-  </header>
-
-  <div class="with-sidebar tabs-with-sidebar content-area">
-    <aside id="sidebar-content" class="scrollable"></aside>
-    <section id="dashboard-content" class="flex-layout flex-col">
-      <div id="dashboard-upper-content"></div>
-      <div id="dashboard-lower-content" class="flex-body"></div>
-      <div id="footer"></div>
-    </section>
-  </div>
-</div>


Mime
View raw message