couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From robertkowal...@apache.org
Subject [2/4] fauxton commit: updated refs/heads/master to ebd9ced
Date Thu, 01 Oct 2015 12:59:36 GMT
refactor header buttons, fix minor issues

this unifies two of our 4 snowflake headerbutton implementations.

the elements used are our standart headerbuttons. once the api-url
button is converted we can delete a lot of additional custom css.

 - convert add-db button
 - convert query-option-tray button
 - fix bug in add-db button where the activated state of the
   button was not set

 Conflicts:
	assets/less/fauxton.less

PR: #535
PR-URL: https://github.com/apache/couchdb-fauxton/pull/535
Reviewed-By: Benjamin Keen <ben.keen@gmail.com>


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

Branch: refs/heads/master
Commit: d1d98323d5145af0129ba84c28a5b567f409044d
Parents: 69b686e
Author: Robert Kowalski <robertkowalski@apache.org>
Authored: Wed Sep 23 12:41:48 2015 +0200
Committer: Robert Kowalski <robertkowalski@apache.org>
Committed: Thu Oct 1 14:59:06 2015 +0200

----------------------------------------------------------------------
 .../assets/less/header-togglebutton.less        | 28 ++++++-----
 .../components/react-components.react.jsx       | 49 ++++++++------------
 app/addons/databases/assets/less/databases.less | 10 ----
 app/addons/databases/components.react.jsx       | 36 +++++++-------
 .../tests/nightwatch/createsDatabase.js         |  3 +-
 app/addons/documents/header/header.react.jsx    | 15 ++----
 .../queryoptions/queryoptions.react.jsx         | 16 +++----
 app/addons/documents/queryoptions/stores.js     | 20 +-------
 .../documents/templates/all_docs_header.html    |  2 +-
 .../tests/nightwatch/editDocumentsFromView.js   |  2 +-
 .../documents/tests/nightwatch/paginateView.js  |  6 +--
 .../documents/tests/nightwatch/queryOptions.js  |  2 +-
 .../tests/nightwatch/viewQueryOptions.js        |  2 +-
 .../tests/nightwatch/highlightsidebar.js        |  2 +-
 assets/less/fauxton.less                        | 35 ++++++++------
 assets/less/layouts.less                        |  2 +-
 16 files changed, 99 insertions(+), 131 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/d1d98323/app/addons/components/assets/less/header-togglebutton.less
----------------------------------------------------------------------
diff --git a/app/addons/components/assets/less/header-togglebutton.less b/app/addons/components/assets/less/header-togglebutton.less
index 163f0c1..c73b239 100644
--- a/app/addons/components/assets/less/header-togglebutton.less
+++ b/app/addons/components/assets/less/header-togglebutton.less
@@ -24,6 +24,22 @@
   float: left;
   .icon {
     font-size: 20px;
+    &:before {
+      float: left;
+      margin: 10px 6px 0px 0px;
+    }
+  }
+}
+
+.header-control-square {
+  height: @collapsedNavWidth;
+  width: @collapsedNavWidth;
+  float: left;
+  .icon {
+    &:before {
+      margin: 0px;
+      float: none;
+    }
   }
 }
 
@@ -42,15 +58,3 @@ button.header-control-box:focus {
     color: @linkColor;
   }
 }
-
-.control-toggle-alternative-header {
-  .icon {
-    padding: 0px 8px 0px 0px;
-  }
-}
-
-.header-control-square {
-  height: @collapsedNavWidth;
-  width: @collapsedNavWidth;
-  float: left;
-}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/d1d98323/app/addons/components/react-components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/components/react-components.react.jsx b/app/addons/components/react-components.react.jsx
index 6107dde..1288fa2 100644
--- a/app/addons/components/react-components.react.jsx
+++ b/app/addons/components/react-components.react.jsx
@@ -23,11 +23,24 @@ function (app, FauxtonAPI, React, Components, ace, beautifyHelper) {
   var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
 
   var ToggleHeaderButton = React.createClass({
+    getDefaultProps: function () {
+      return {
+        innerClasses: '',
+        fonticon: '',
+        containerClasses: '',
+        selected: false,
+        title: '',
+        disabled: false,
+        toggleCallback: null,
+        text: ''
+      };
+    },
+
     render: function () {
       var iconClasses = 'icon ' + this.props.fonticon + ' ' + this.props.innerClasses,
           containerClasses = 'button ' + this.props.containerClasses;
 
-      if (this.props.setEnabledClass) {
+      if (this.props.selected) {
         containerClasses = containerClasses + ' js-headerbar-togglebutton-selected';
       }
 
@@ -132,8 +145,7 @@ function (app, FauxtonAPI, React, Components, ace, beautifyHelper) {
             defaultCode={this.state.code}
             mode={this.props.mode}
             ignorableErrors={this.ignorableErrors}
-            onExit={this.exitZenMode}
-          />
+            onExit={this.exitZenMode} />
         );
       }
     },
@@ -972,29 +984,6 @@ function (app, FauxtonAPI, React, Components, ace, beautifyHelper) {
     }
   });
 
-  var TrayLink = React.createClass({
-
-    onClick: function (e) {
-      e.preventDefault();
-      this.props.toggleTray();
-    },
-
-    render: function () {
-      return (
-        <a
-          onClick={this.onClick}
-          id={this.props.id}
-          data-bypass="true"
-          data-toggle="tab"
-          className={this.props.className}
-        >
-          <i className={this.props.icon} />
-          {this.props.text}
-        </a>
-      );
-    }
-  });
-
   var TrayContents = React.createClass({
     getChildren: function () {
       if (!this.props.trayVisible) {
@@ -1019,7 +1008,7 @@ function (app, FauxtonAPI, React, Components, ace, beautifyHelper) {
 
   // The tray components work as follows:
   // <Tray> Outer wrapper for all components in the tray
-  // <TrayLink></TrayLink> The tray button to activate the tray
+  // <ToggleHeaderButton /> The tray button to activate the tray, e.g the ToggleHeaderButton
   // <TrayContents> </TrayContents> What is displayed when the tray is active
   // </Tray>
   // See documents/queryoptions/queryoptions.react.jsx for a complete example
@@ -1058,7 +1047,8 @@ function (app, FauxtonAPI, React, Components, ace, beautifyHelper) {
       return React.Children.map(this.props.children, function (child, key) {
         return React.addons.cloneWithProps(child, {
           trayVisible: this.state.trayVisible,
-          toggleTray: this.toggleTray,
+          selected: this.state.trayVisible,
+          toggleCallback: this.toggleTray,
           key: key
         });
       }.bind(this));
@@ -1067,7 +1057,7 @@ function (app, FauxtonAPI, React, Components, ace, beautifyHelper) {
     render: function () {
       return (
         <div>
-            {this.renderChildren()}
+          {this.renderChildren()}
         </div>
       );
     },
@@ -1098,7 +1088,6 @@ function (app, FauxtonAPI, React, Components, ace, beautifyHelper) {
     MenuDropDown: MenuDropDown,
     Tray: Tray,
     TrayContents: TrayContents,
-    TrayLink: TrayLink
   };
 
 });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/d1d98323/app/addons/databases/assets/less/databases.less
----------------------------------------------------------------------
diff --git a/app/addons/databases/assets/less/databases.less b/app/addons/databases/assets/less/databases.less
index 0124499..23765e5 100644
--- a/app/addons/databases/assets/less/databases.less
+++ b/app/addons/databases/assets/less/databases.less
@@ -30,16 +30,6 @@
   }
 }
 
-#add-new-database {
-  line-height: 40px;
-
-  &:hover {
-    transition: none;
-    text-decoration: none;
-    color: @linkColorHover;
-  }
-}
-
 .new-database-tray {
   padding: 16px 20px 28px;
   &:before {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/d1d98323/app/addons/databases/components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/databases/components.react.jsx b/app/addons/databases/components.react.jsx
index 80b06fa..374ffe6 100644
--- a/app/addons/databases/components.react.jsx
+++ b/app/addons/databases/components.react.jsx
@@ -22,6 +22,7 @@ define([
   'helpers'
 ], function (app, FauxtonAPI, React, Components, ComponentsReact, Stores, Resources, Actions,
Helpers) {
 
+  var ToggleHeaderButton = Components.ToggleHeaderButton;
   var databasesStore = Stores.databasesStore;
 
   var DatabasesController = React.createClass({
@@ -178,6 +179,9 @@ define([
 
     onTrayToggle: function (e) {
       e.preventDefault();
+
+      this.setState({isPromptVisible: !this.state.isPromptVisible});
+
       this.refs.newDbTray.toggle(function (shown) {
         if (shown) {
           this.refs.newDbName.getDOMNode().focus();
@@ -191,18 +195,10 @@ define([
       }
     },
 
-    componentDidMount: function () {
-      databasesStore.on('change', this.onChange, this);
-    },
-
-    componentWillUnmount: function () {
-      databasesStore.off('change', this.onChange, this);
-    },
-
-    onChange: function () {
-      if (this.isMounted()) {
-        this.refs.newDbTray.setVisible(databasesStore.isPromptVisible());
-      }
+    getInitialState: function () {
+      return {
+        isPromptVisible: false
+      };
     },
 
     onAddDatabase: function () {
@@ -211,13 +207,19 @@ define([
     },
 
     render: function () {
+      var headerButtonContainerClasses = 'header-control-box add-new-database-btn';
 
       return (
-        <div className="button" id="add-db-button">
-          <a id="add-new-database" href="#" className="add-new-database-btn" onClick={this.onTrayToggle}
data-bypass="true">
-                <i className="header-icon fonticon-new-database"></i>
-                Add New Database
-          </a>
+        <div>
+
+          <ToggleHeaderButton
+            selected={this.state.isPromptVisible}
+            toggleCallback={this.onTrayToggle}
+            containerClasses={headerButtonContainerClasses}
+            title="Add New Database"
+            fonticon="fonticon-new-database"
+            text="Add New Database" />
+
           <ComponentsReact.Tray ref="newDbTray" className="new-database-tray">
             <span className="add-on">Add New Database</span>
             <input id="js-new-database-name" type="text" onKeyUp={this.onKeyUpInInput}
ref="newDbName" className="input-xxlarge" placeholder="Name of database" />

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/d1d98323/app/addons/databases/tests/nightwatch/createsDatabase.js
----------------------------------------------------------------------
diff --git a/app/addons/databases/tests/nightwatch/createsDatabase.js b/app/addons/databases/tests/nightwatch/createsDatabase.js
index 4f6b1ee..74496ff 100644
--- a/app/addons/databases/tests/nightwatch/createsDatabase.js
+++ b/app/addons/databases/tests/nightwatch/createsDatabase.js
@@ -39,8 +39,7 @@ module.exports = {
 
       // ensure the page has fully loaded
       .waitForElementPresent('.databases.table', waitTime, false)
-      .waitForElementPresent('#add-new-database', waitTime, false)
-      .clickWhenVisible('#add-new-database', waitTime, false)
+      .clickWhenVisible('.add-new-database-btn')
       .waitForElementVisible('#js-new-database-name', waitTime, false)
       .setValue('#js-new-database-name', [newDatabaseName])
       .clickWhenVisible('#js-create-database', waitTime, false)

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/d1d98323/app/addons/documents/header/header.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/header/header.react.jsx b/app/addons/documents/header/header.react.jsx
index 0b2b0df..f343030 100644
--- a/app/addons/documents/header/header.react.jsx
+++ b/app/addons/documents/header/header.react.jsx
@@ -66,48 +66,42 @@ function (app, FauxtonAPI, React, Stores, Actions, ReactComponents, IndexResults
           <ToggleHeaderButton
             fonticon={'fonticon-select-all'}
             toggleCallback={this.selectAllDocuments}
-            innerClasses={''}
             containerClasses={baseClass + 'control-select-all'}
             text={''}
-            setEnabledClass={!canSelectAll}
+            selected={!canSelectAll}
             disabled={!canSelectAll}
             title={'Select all Documents'} />
 
           <ToggleHeaderButton
             fonticon={'fonticon-deselect-all'}
             toggleCallback={this.deSelectAllDocuments}
-            innerClasses={''}
             containerClasses={baseClass + 'control-de-select-all'}
             text={''}
-            setEnabledClass={!canDeselectAll}
+            selected={!canDeselectAll}
             disabled={!canDeselectAll}
             title={'Deselect all Documents'} />
 
-
           <ToggleHeaderButton
             fonticon={'fonticon-collapse'}
             toggleCallback={this.collapseDocuments}
-            innerClasses={''}
             containerClasses={baseClass + 'control-collapse'}
             text={''}
-            setEnabledClass={!canCollapseDocs}
+            selected={!canCollapseDocs}
             disabled={!canCollapseDocs}
             title={'Collapse Selected'} />
 
           <ToggleHeaderButton
             fonticon={'fonticon-expand'}
             toggleCallback={this.unCollapseDocuments}
-            innerClasses={''}
             containerClasses={baseClass + 'control-expand'}
             text={''}
-            setEnabledClass={!canUncollapseDocs}
+            selected={!canUncollapseDocs}
             disabled={!canUncollapseDocs}
             title={'Expand Selected'} />
 
           <ToggleHeaderButton
             fonticon={'fonticon-trash'}
             toggleCallback={this.deleteSelected}
-            innerClasses={''}
             containerClasses={baseClass + 'control-delete'}
             text={''}
             title={'Delete selected'} />
@@ -115,7 +109,6 @@ function (app, FauxtonAPI, React, Stores, Actions, ReactComponents, IndexResults
           <ToggleHeaderButton
             fonticon={''}
             toggleCallback={this.cancelView}
-            innerClasses={''}
             containerClasses={baseClass + 'control-cancel'}
             text={'Cancel'}
             title={'Switch to other view'} />

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/d1d98323/app/addons/documents/queryoptions/queryoptions.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/queryoptions/queryoptions.react.jsx b/app/addons/documents/queryoptions/queryoptions.react.jsx
index 0f17383..02ee208 100644
--- a/app/addons/documents/queryoptions/queryoptions.react.jsx
+++ b/app/addons/documents/queryoptions/queryoptions.react.jsx
@@ -24,7 +24,7 @@ function (app, FauxtonAPI, React, Stores, Actions, Components) {
   var LoadLines = Components.LoadLines;
   var Tray = Components.Tray;
   var TrayContents = Components.TrayContents;
-  var TrayLink = Components.TrayLink;
+  var ToggleHeaderButton = Components.ToggleHeaderButton;
 
   var MainFieldsView = React.createClass({
 
@@ -297,7 +297,6 @@ A key value is the first parameter emitted in a map function. For example
emit("
   var QueryOptionsController = React.createClass({
     getStoreState: function () {
       return {
-        isVisible: store.isVisible(),
         includeDocs: store.includeDocs(),
         showBetweenKeys: store.showBetweenKeys(),
         showByKeys: store.showByKeys(),
@@ -340,12 +339,13 @@ A key value is the first parameter emitted in a map function. For example
emit("
     render: function () {
       return (
         <Tray id="query-options-tray" ref="tray">
-          <TrayLink
-            id="toggle-query"
-            className="btn btn-primary pull-right query-options-btn"
-            text="Query Options"
-            icon="icon header-icon fonticon-gears"
-          />
+
+          <ToggleHeaderButton
+            containerClasses="header-control-box control-toggle-queryoptions"
+            title="Query Options"
+            fonticon="fonticon-gears"
+            text="Query Options" />
+
           <TrayContents
             className="query-options"
             id="query-options-tray">

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/d1d98323/app/addons/documents/queryoptions/stores.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/queryoptions/stores.js b/app/addons/documents/queryoptions/stores.js
index 114b707..9fde62a 100644
--- a/app/addons/documents/queryoptions/stores.js
+++ b/app/addons/documents/queryoptions/stores.js
@@ -50,10 +50,6 @@ function (app, FauxtonAPI, ActionTypes) {
       return this._loading;
     },
 
-    isVisible: function () {
-      return true;
-    },
-
     showReduce: function () {
       return this._showReduce;
     },
@@ -247,64 +243,52 @@ function (app, FauxtonAPI, ActionTypes) {
       switch (action.type) {
         case ActionTypes.QUERY_RESET:
           this.setQueryParams(action.params);
-          this.triggerChange();
         break;
         case ActionTypes.QUERY_TOGGLE_INCLUDE_DOCS:
           this._includeDocs = !this._includeDocs;
-          this.triggerChange();
         break;
         case ActionTypes.QUERY_TOGGLE_UPDATE_SEQ:
           this._updateSeq = !this._updateSeq;
-          this.triggerChange();
         break;
         case ActionTypes.QUERY_TOGGLE_DESCENDING:
           this._descending = !this._descending;
-          this.triggerChange();
         break;
         case ActionTypes.QUERY_TOGGLE_BY_KEYS:
           this.toggleByKeys();
-          this.triggerChange();
         break;
         case ActionTypes.QUERY_TOGGLE_BETWEEN_KEYS:
           this.toggleBetweenKeys();
-          this.triggerChange();
         break;
         case ActionTypes.QUERY_UPDATE_BETWEEN_KEYS:
           this.updateBetweenKeys(action.betweenKeys);
-          this.triggerChange();
         break;
         case ActionTypes.QUERY_UPDATE_BY_KEYS:
           this.updateByKeys(action.byKeys);
-          this.triggerChange();
         break;
         case ActionTypes.QUERY_UPDATE_SKIP:
           this.updateSkip(action.skip);
-          this.triggerChange();
         break;
         case ActionTypes.QUERY_UPDATE_LIMIT:
           this.updateLimit(action.limit);
-          this.triggerChange();
         break;
         case ActionTypes.QUERY_SHOW_REDUCE:
           this._showReduce = true;
-          this.triggerChange();
         break;
         case ActionTypes.QUERY_TOGGLE_REDUCE:
           this._reduce = !this._reduce;
-          this.triggerChange();
         break;
         case ActionTypes.QUERY_SHOW_STALE:
           this._showStale = true;
-          this.triggerChange();
         break;
         case ActionTypes.QUERY_UPDATE_GROUP_LEVEL:
           this.updateGroupLevel(action.groupLevel);
-          this.triggerChange();
         break;
         default:
         return;
         // do nothing
       }
+      this.triggerChange();
+
     }
   });
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/d1d98323/app/addons/documents/templates/all_docs_header.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/all_docs_header.html b/app/addons/documents/templates/all_docs_header.html
index 07c6368..9d04848 100644
--- a/app/addons/documents/templates/all_docs_header.html
+++ b/app/addons/documents/templates/all_docs_header.html
@@ -15,7 +15,7 @@ the License.
 %>
 
   <!-- Query Options-->
-  <div id="header-query-options" class="button">
+  <div id="header-query-options">
     <div id="query-options"></div>
   </div>
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/d1d98323/app/addons/documents/tests/nightwatch/editDocumentsFromView.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/tests/nightwatch/editDocumentsFromView.js b/app/addons/documents/tests/nightwatch/editDocumentsFromView.js
index 834ed31..64be89d 100644
--- a/app/addons/documents/tests/nightwatch/editDocumentsFromView.js
+++ b/app/addons/documents/tests/nightwatch/editDocumentsFromView.js
@@ -47,7 +47,7 @@ module.exports = {
 
     client
       .clickWhenVisible('#dashboard a[href="#database/fauxton-selenium-tests/_design/abc/_view/evens"]')
-      .clickWhenVisible('#toggle-query')
+      .clickWhenVisible('.control-toggle-queryoptions')
       .clickWhenVisible('#query-options-tray label[for="qoReduce"]')
       .clickWhenVisible('#button-options button[type="submit"]')
       .waitForElementNotPresent('i.fonticon-pencil', waitTime)

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/d1d98323/app/addons/documents/tests/nightwatch/paginateView.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/tests/nightwatch/paginateView.js b/app/addons/documents/tests/nightwatch/paginateView.js
index 3055d03..7f7e6ca 100644
--- a/app/addons/documents/tests/nightwatch/paginateView.js
+++ b/app/addons/documents/tests/nightwatch/paginateView.js
@@ -26,7 +26,7 @@ module.exports = {
 
       .url(baseUrl + '/#/database/' + newDatabaseName + '/_design/keyview/_view/keyview')
 
-      .waitForElementPresent('#toggle-query', waitTime, false)
+      .waitForElementPresent('.control-toggle-queryoptions', waitTime, false)
 
       // ensure the page content has loaded
       .waitForElementPresent('.prettyprint', waitTime, false)
@@ -61,7 +61,7 @@ module.exports = {
       .waitForElementVisible('#dashboard-content table.databases', waitTime, false)
 
       .url(baseUrl + '/#/database/' + newDatabaseName + '/_design/keyview/_view/keyview')
-      .waitForElementPresent('#toggle-query', waitTime, false)
+      .waitForElementPresent('.control-toggle-queryoptions', waitTime, false)
 
       // ensure the page content has loaded
       .waitForElementPresent('.prettyprint', waitTime, false)
@@ -95,7 +95,7 @@ module.exports = {
       .waitForElementVisible('#dashboard-content table.databases', waitTime, false)
 
       .url(baseUrl + '/#/database/' + newDatabaseName + '/_design/keyview/_view/keyview')
-      .waitForElementPresent('#toggle-query', waitTime, false)
+      .waitForElementPresent('.control-toggle-queryoptions', waitTime, false)
 
       // ensure the page content has loaded
       .waitForElementPresent('.prettyprint', waitTime, false)

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/d1d98323/app/addons/documents/tests/nightwatch/queryOptions.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/tests/nightwatch/queryOptions.js b/app/addons/documents/tests/nightwatch/queryOptions.js
index f7562dd..4b105a4 100644
--- a/app/addons/documents/tests/nightwatch/queryOptions.js
+++ b/app/addons/documents/tests/nightwatch/queryOptions.js
@@ -22,7 +22,7 @@ module.exports = {
       .populateDatabase(newDatabaseName, 3)
       .loginToGUI()
       .url(baseUrl + '/#/database/' + newDatabaseName + '/_all_docs')
-      .clickWhenVisible('#toggle-query', waitTime, false)
+      .clickWhenVisible('.control-toggle-queryoptions')
       .clickWhenVisible('#betweenKeys', waitTime, false)
       .setValue('#startkey', '"document_2"')
       .clickWhenVisible('#query-options .btn-success')

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/d1d98323/app/addons/documents/tests/nightwatch/viewQueryOptions.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/tests/nightwatch/viewQueryOptions.js b/app/addons/documents/tests/nightwatch/viewQueryOptions.js
index 244c380..434bad1 100644
--- a/app/addons/documents/tests/nightwatch/viewQueryOptions.js
+++ b/app/addons/documents/tests/nightwatch/viewQueryOptions.js
@@ -21,7 +21,7 @@ module.exports = {
       .populateDatabase(newDatabaseName, 3)
       .loginToGUI()
       .url(baseUrl + '/#/database/' + newDatabaseName + '/_design/keyview/_view/keyview')
-      .clickWhenVisible('#toggle-query', waitTime, false)
+      .clickWhenVisible('.control-toggle-queryoptions')
       .clickWhenVisible('#byKeys', waitTime, false)
       .setValue('#keys-input', '["document_1"]')
       .clickWhenVisible('#query-options .btn-success')

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/d1d98323/app/addons/fauxton/tests/nightwatch/highlightsidebar.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/tests/nightwatch/highlightsidebar.js b/app/addons/fauxton/tests/nightwatch/highlightsidebar.js
index 7171887..315ae62 100644
--- a/app/addons/fauxton/tests/nightwatch/highlightsidebar.js
+++ b/app/addons/fauxton/tests/nightwatch/highlightsidebar.js
@@ -18,7 +18,7 @@ module.exports = {
     client
       .loginToGUI()
       .url(baseUrl)
-      .waitForElementPresent('#add-new-database', waitTime, false)
+      .waitForElementPresent('.add-new-database-btn', waitTime, false)
       .click('a[href="#/replication"]')
       .pause(1000)
       .waitForElementVisible('#replication', waitTime, false)

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/d1d98323/assets/less/fauxton.less
----------------------------------------------------------------------
diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less
index 9446f61..99c6750 100644
--- a/assets/less/fauxton.less
+++ b/assets/less/fauxton.less
@@ -315,7 +315,8 @@ div.spinner {
 }
 
 
-
+// legacy - remove when soft migration to header toggles is complete
+// missing: add_config_option
 .header-icon {
   font-size: 20px;
   &:before {
@@ -324,23 +325,18 @@ div.spinner {
   }
 }
 
-#api-navbar {
-  /* prevents a slight shift on page load */
-  width: 108px;
-  overflow: hidden;
-
-  > div:not(.hide) {
-    border-left: 1px solid #ccc;
-  }
+#header-search {
+  height: @collapsedNavWidth;
 }
 
-.api-url-btn, .query-options-btn {
+// remove when migration is complete
+.api-url-btn {
   background: none;
   border: none;
   padding: 0px 3px;
   margin: 0;
 }
-.api-url-btn:hover, .query-options-btn:hover {
+.api-url-btn:hover {
   background: none;
 }
 
@@ -572,6 +568,8 @@ body #dashboard .two-panel-header {
   height: 0;
 }
 
+
+// remove when migration to headerbuttons is complete
 #api-navbar,
 .right-header-wrapper,
 .fixed-header,
@@ -588,8 +586,6 @@ body #dashboard .two-panel-header {
     font-size: 13px;
     line-height: 33px;
   }
-  .query-options-btn.enabled,
-  .query-options-btn:hover,
   .api-url-btn.enabled,
   .api-url-btn:hover {
     background-color: transparent;
@@ -609,6 +605,7 @@ body #dashboard .two-panel-header {
     width: 295px;
   }
   .searchbox-container {
+    margin: 12px;
     position: absolute;
     right: inherit;
     input[type="text"] {
@@ -644,8 +641,18 @@ body #dashboard .two-panel-header {
   }
 }
 
-.header-right,
+// remove when migration is complete
+.right-header-wrapper #api-navbar > div:not(.hide) {
+  border-left: none;
+}
+#api-navbar > div:not(.hide) {
+  border-left: 1px solid #ccc;
+}
+
 #api-navbar {
+  // prevents a slight shift on page load
+  width: 108px;
+  overflow: hidden;
   > div {
     padding: 12px;
     height: @collapsedNavWidth - 1;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/d1d98323/assets/less/layouts.less
----------------------------------------------------------------------
diff --git a/assets/less/layouts.less b/assets/less/layouts.less
index cc5a539..30b6057 100644
--- a/assets/less/layouts.less
+++ b/assets/less/layouts.less
@@ -77,7 +77,7 @@ body #dashboard .flex-body {
     flex-basis: inherit;
   }
   #api-navbar {
-    .flex(0 0 108px);
+    .flex(0 0 117px);
   }
 }
 


Mime
View raw message