couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From robertkowal...@apache.org
Subject [4/4] fauxton commit: updated refs/heads/master to ebd9ced
Date Thu, 01 Oct 2015 12:59:38 GMT
convert api bar to react

 - delete superfluous snowflake css
 - use headertoggle button

 Conflicts:
	app/addons/fauxton/templates/api_bar.html
	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/ebd9ced8
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/ebd9ced8
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/ebd9ced8

Branch: refs/heads/master
Commit: ebd9ced89d27de297526acf74ebad88f1c6a6711
Parents: 685d6f8
Author: Robert Kowalski <robertkowalski@apache.org>
Authored: Thu Sep 24 15:48:25 2015 +0200
Committer: Robert Kowalski <robertkowalski@apache.org>
Committed: Thu Oct 1 14:59:17 2015 +0200

----------------------------------------------------------------------
 .../assets/less/header-togglebutton.less        |  11 +-
 .../components/react-components.react.jsx       |  64 +++++++++-
 .../databases/tests/nightwatch/zeroclipboard.js |   9 +-
 app/addons/documents/views.js                   |   5 -
 app/addons/fauxton/base.js                      |  32 +++--
 app/addons/fauxton/components.js                |  65 ----------
 app/addons/fauxton/templates/api_bar.html       |  41 -------
 assets/less/fauxton.less                        | 118 ++-----------------
 8 files changed, 98 insertions(+), 247 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/ebd9ced8/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 c73b239..24b860b 100644
--- a/app/addons/components/assets/less/header-togglebutton.less
+++ b/app/addons/components/assets/less/header-togglebutton.less
@@ -19,7 +19,7 @@
   height: @collapsedNavWidth;
   background-color: transparent;
   border: none;
-  border-right: 1px solid @btnBorder;
+  border-left: 1px solid @btnBorder;
   text-decoration: none;
   float: left;
   .icon {
@@ -57,4 +57,13 @@ button.header-control-box:focus {
   .icon, span {
     color: @linkColor;
   }
+
+}
+
+button.control-toggle-alternative-header {
+  border-right: 1px solid @btnBorder;
+}
+
+button.control-toggle-alternative-header.js-headerbar-togglebutton-selected {
+  border-right: none;
 }

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/ebd9ced8/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 1288fa2..41e49d2 100644
--- a/app/addons/components/react-components.react.jsx
+++ b/app/addons/components/react-components.react.jsx
@@ -14,12 +14,12 @@ define([
   'app',
   'api',
   'react',
-  'addons/fauxton/components',
+  'addons/fauxton/components.react',
   'ace/ace',
   'plugins/beautify'
 ],
 
-function (app, FauxtonAPI, React, Components, ace, beautifyHelper) {
+function (app, FauxtonAPI, React, FauxtonComponents, ace, beautifyHelper) {
   var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
 
   var ToggleHeaderButton = React.createClass({
@@ -1073,6 +1073,65 @@ function (app, FauxtonAPI, React, Components, ace, beautifyHelper)
{
 
   });
 
+
+  var ApiBarController = React.createClass({
+
+    getDefaultProps: function () {
+      return {
+        endpoint: '_all_docs',
+        documentation: FauxtonAPI.constants.DOC_URLS.GENERAL
+      };
+    },
+
+    showCopiedMessage: function () {
+      FauxtonAPI.addNotification({
+        msg: 'The API URL has been copied to the clipboard.',
+        type: 'success',
+        clear: true
+      });
+    },
+
+    render: function () {
+      return (
+        <Tray id="api-bar-controller" ref="tray">
+
+          <ToggleHeaderButton
+            containerClasses="header-control-box control-toggle-api-url"
+            title="API URL"
+            fonticon="fonticon-link"
+            text="API URL" />
+
+          <TrayContents
+            className="api-bar-tray"
+          >
+            <div className="input-prepend input-append">
+              <span className="add-on">
+                API URL
+                <a className="help-link" data-bypass="true" href={this.props.documentation}
target="_blank">
+                  <i className="icon icon-question-sign"></i>
+                </a>
+              </span>
+
+              <FauxtonComponents.ClipboardWithTextField
+                onClipBoardClick={this.showCopiedMessage}
+                text="Copy"
+                textToCopy={this.props.endpoint}
+                uniqueKey="clipboard-apiurl" />
+
+              <div className="add-on">
+                <a data-bypass="true" href={this.props.endpoint} target="_blank" className="btn">
+                  <i className="fonticon-eye icon"></i>
+                  View JSON
+                </a>
+              </div>
+            </div>
+
+          </TrayContents>
+        </Tray>
+      );
+    },
+  });
+
   return {
     ConfirmButton: ConfirmButton,
     ToggleHeaderButton: ToggleHeaderButton,
@@ -1088,6 +1147,7 @@ function (app, FauxtonAPI, React, Components, ace, beautifyHelper) {
     MenuDropDown: MenuDropDown,
     Tray: Tray,
     TrayContents: TrayContents,
+    ApiBarController: ApiBarController
   };
 
 });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/ebd9ced8/app/addons/databases/tests/nightwatch/zeroclipboard.js
----------------------------------------------------------------------
diff --git a/app/addons/databases/tests/nightwatch/zeroclipboard.js b/app/addons/databases/tests/nightwatch/zeroclipboard.js
index bdfa1d3..0a888d9 100644
--- a/app/addons/databases/tests/nightwatch/zeroclipboard.js
+++ b/app/addons/databases/tests/nightwatch/zeroclipboard.js
@@ -28,11 +28,10 @@ module.exports = {
       .deleteDatabase(newDatabaseName) //need to delete the automatic database 'fauxton-selenium-tests'
that has been set up before each test
       .url(baseUrl)
 
-      .waitForElementPresent('.api-url-btn', waitTime, false)
-      .click('.api-url-btn')
-      .waitForElementVisible('.copy-url', waitTime, false)
-      .moveTo('.copy-url')
-      .click('.copy-url')
+      .clickWhenVisible('.control-toggle-api-url')
+      .waitForElementVisible('.copy-button', waitTime, false)
+      .moveTo('.copy-button')
+      .click('.copy-button')
       .mouseButtonDown('left')
       .mouseButtonUp('left')
       .closeNotification()

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/ebd9ced8/app/addons/documents/views.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views.js b/app/addons/documents/views.js
index 24f8078..0b4831e 100644
--- a/app/addons/documents/views.js
+++ b/app/addons/documents/views.js
@@ -73,11 +73,6 @@ function (app, FauxtonAPI, Components, Documents, Databases, QueryOptions,
Query
       FauxtonAPI.Events.trigger("documents:showSelectAll", this.selectVisible);
     },
 
-    // updates the API bar when the route changes
-    updateApiUrl: function (api) {
-      this.apiBar && this.apiBar.update(api);
-    },
-
     resetQueryOptions: function (options) {
       QueryActions.reset(options);
     },

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/ebd9ced8/app/addons/fauxton/base.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/base.js b/app/addons/fauxton/base.js
index 7a6ac3e..c1d159a 100644
--- a/app/addons/fauxton/base.js
+++ b/app/addons/fauxton/base.js
@@ -16,10 +16,12 @@ define([
   "addons/fauxton/components",
   "addons/fauxton/navigation/components.react",
   "addons/fauxton/navigation/actions",
-  'addons/fauxton/dependencies/ZeroClipboard'
+  'addons/fauxton/dependencies/ZeroClipboard',
+  'addons/components/react-components.react',
 ],
 
-function (app, FauxtonAPI, Components, NavbarReactComponents, NavigationActions, ZeroClipboard)
{
+function (app, FauxtonAPI, Components, NavbarReactComponents,
+          NavigationActions, ZeroClipboard, ReactComponents) {
 
   var Fauxton = FauxtonAPI.addon();
   FauxtonAPI.addNotification = function (options) {
@@ -51,14 +53,18 @@ function (app, FauxtonAPI, Components, NavbarReactComponents, NavigationActions,
 
 
   Fauxton.initialize = function () {
-    app.apiBar = new Components.ApiBar();
-
-    FauxtonAPI.masterLayout.setView("#api-navbar", app.apiBar, true);
-    app.apiBar.render();
-    FauxtonAPI.masterLayout.apiBar = app.apiBar;
-
     FauxtonAPI.RouteObject.on('beforeFullRender', function (routeObject) {
       NavigationActions.setNavbarActiveLink(_.result(routeObject, 'selectedHeader'));
+
+      if (!routeObject.get('apiUrl')) {
+        return;
+      }
+
+      var apiAndDocs = routeObject.get('apiUrl');
+      routeObject.setComponent('#api-navbar', ReactComponents.ApiBarController, {
+        endpoint: apiAndDocs[0],
+        documentation: apiAndDocs[1]
+      });
     });
 
     FauxtonAPI.RouteObject.on('beforeEstablish', function (routeObject) {
@@ -72,17 +78,7 @@ function (app, FauxtonAPI, Components, NavbarReactComponents, NavigationActions,
           crumbs: crumbs
         }), true).render();
       }
-    });
 
-    FauxtonAPI.RouteObject.on('renderComplete', function (routeObject) {
-      var masterLayout = FauxtonAPI.masterLayout;
-
-      if (routeObject.get('apiUrl')) {
-        masterLayout.apiBar.show();
-        masterLayout.apiBar.update(routeObject.get('apiUrl'));
-      } else {
-        masterLayout.apiBar.hide();
-      }
     });
 
     var primaryNavBarEl = $('#primary-navbar')[0];

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/ebd9ced8/app/addons/fauxton/components.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/components.js b/app/addons/fauxton/components.js
index 81ba65c..d78997d 100644
--- a/app/addons/fauxton/components.js
+++ b/app/addons/fauxton/components.js
@@ -271,55 +271,6 @@ function (app, FauxtonAPI, ace, spin, ZeroClipboard) {
   });
 
 
-  Components.ApiBar = Components.Tray.extend({
-    template: "addons/fauxton/templates/api_bar",
-
-    initialize: function (options) {
-      var _options = options || {};
-      this.endpoint = _options.endpoint || '_all_docs';
-      this.documentation = _options.documentation || FauxtonAPI.constants.DOC_URLS.GENERAL;
-
-      this.initTray({ toggleTrayBtnSelector: '.api-url-btn' });
-    },
-
-    serialize: function () {
-      return {
-        endpoint: this.endpoint,
-        documentation: this.documentation
-      };
-    },
-
-    hide: function () {
-      this.$el.addClass('hide');
-    },
-
-    show: function () {
-      this.$el.removeClass('hide');
-    },
-
-    update: function (endpoint) {
-      this.endpoint = endpoint[0];
-      this.documentation = endpoint[1];
-      this.render();
-    },
-
-    afterRender: function () {
-      var client = new Components.Clipboard({
-        $el: this.$('.copy-url')
-      });
-
-      client.on('load', function () {
-        client.on('mouseup', function () {
-          FauxtonAPI.addNotification({
-            msg: 'The API URL has been copied to the clipboard.',
-            type: 'success',
-            clear: true
-          });
-        });
-      });
-    }
-  });
-
   Components.Pagination = FauxtonAPI.View.extend({
     tagName: "ul",
     className: 'pagination',
@@ -624,22 +575,6 @@ function (app, FauxtonAPI, ace, spin, ZeroClipboard) {
     }
   });
 
-  Components.Clipboard = FauxtonAPI.View.extend({
-    initialize: function (options) {
-      this.$el = options.$el;
-
-      // the path to the swf depends on whether we're in a bundled environment (e.g. prod)
or local
-      var path = (app.bundled) ? 'js/fauxton' : 'app/addons/fauxton/dependencies';
-      ZeroClipboard.config({ moviePath: app.root + path + '/ZeroClipboard.swf' });
-      this.client = new ZeroClipboard(this.$el);
-    },
-
-    on: function () {
-      return this.client.on.apply(this.client, arguments);
-    }
-  });
-
-
   Components.LookaheadTray = FauxtonAPI.View.extend({
     className: "lookahead-tray tray",
     template: "addons/fauxton/templates/lookahead_tray",

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/ebd9ced8/app/addons/fauxton/templates/api_bar.html
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/templates/api_bar.html b/app/addons/fauxton/templates/api_bar.html
deleted file mode 100644
index a7b6f07..0000000
--- a/app/addons/fauxton/templates/api_bar.html
+++ /dev/null
@@ -1,41 +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.
-*/ %>
-
-<a class="btn btn-primary api-url-btn">
-  <i class="fonticon-link header-icon"></i>
-  API URL
-</a>
-<div class="api-navbar tray">
-    <div class="input-prepend input-append">
-      <span class="add-on">
-        API URL
-        <a class="help-link" data-bypass="true" href="<%-documentation%>" target="_blank">
-          <i class="icon icon-question-sign"></i>
-        </a>
-      </span>
-      <input id="api-url-text" type="text" class="input-xxlarge" value="<%- endpoint
%>">
-      <a class="btn copy-url" data-clipboard-target="api-url-text">
-        <i class="fonticon-clipboard icon"></i>
-        Copy
-      </a>
-
-      <div class="add-on">
-        <a data-bypass="true" href="<%- endpoint %>" target="_blank" class="btn">
-          <i class="fonticon-eye icon"></i>
-          View JSON
-        </a>
-      </div>
-    </div>
-</div>
-

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/ebd9ced8/assets/less/fauxton.less
----------------------------------------------------------------------
diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less
index 99c6750..7799f16 100644
--- a/assets/less/fauxton.less
+++ b/assets/less/fauxton.less
@@ -329,30 +329,15 @@ div.spinner {
   height: @collapsedNavWidth;
 }
 
-// remove when migration is complete
-.api-url-btn {
-  background: none;
-  border: none;
-  padding: 0px 3px;
-  margin: 0;
-}
-.api-url-btn:hover {
-  background: none;
-}
-
-.api-navbar:before {
-  right: 25px;
-}
-.api-navbar {
+.api-bar-tray {
   padding: 16px 20px;
   .input-append.input-prepend {
     margin-bottom: 0px;
 
     .input-xxlarge {
       .border-radius(5px 0 0 5px);
-
     }
-    .btn{
+    .btn {
       background-color: @navBG;
       color: #fff;
       margin-left: -1px;
@@ -364,29 +349,25 @@ div.spinner {
         background-color: #cbcbcb;
       }
     }
-    .copy-url {
+
+    .copy-button {
       .border-radius(0 5px 5px 0);
     }
 
     .zeroclipboard-is-hover {
       background-color: #cbcbcb;
     }
-    .icon-question-sign,
-    .icon {
-      font-size: 17.5px;
-    }
-
-    .icon {
-      vertical-align: bottom;
-    }
 
     .icon-question-sign {
-      position: fixed;
       margin-left: 3px;
     }
   }
 }
 
+.api-bar-tray:before {
+  right: 25px;
+}
+
 .js-filter-form {
   .help-block {
     padding: 5px 0 5px 0;
@@ -533,69 +514,6 @@ body #dashboard .two-panel-header {
   }
 }
 
-.tray {
-  .bottom-left-shadow-border;
-  display: none;
-  position: absolute;
-  right: 5px;
-  top: 55px;
-  z-index: 11;
-  background-color: #333;
-  color: #fff;
-  margin: 0;
-  .add-on {
-    font-size: 16px;
-    background: none;
-    padding: 0px;
-    margin: 10px 0;
-    border: none;
-    display: block;
-    text-align: left;
-    color: #fff;
-    text-shadow: none;
-    height: auto;
-    line-height: 1em;
-  }
-}
-.tray:before {
-  content: '';
-  position: absolute;
-  top: -25px;
-  border-color: transparent transparent #333 transparent;
-  border-style: solid;
-  border-width: 15px;
-  width: 0;
-  height: 0;
-}
-
-
-// remove when migration to headerbuttons is complete
-#api-navbar,
-.right-header-wrapper,
-.fixed-header,
-.header-right {
-  > .btn {
-    padding: 0;
-    margin: 0;
-  }
-  > .button,
-  > .button a,
-  .api-url-btn > button,
-  .btn-primary {
-    color: #666;
-    font-size: 13px;
-    line-height: 33px;
-  }
-  .api-url-btn.enabled,
-  .api-url-btn:hover {
-    background-color: transparent;
-    color: @linkColorHover;
-  }
-  .btn:active {
-    box-shadow: none;
-  }
-}
-
 .header-right {
   .well {
     padding: 0;
@@ -633,32 +551,12 @@ body #dashboard .two-panel-header {
   > div {
     float: right;
     margin: 0;
-    line-height: 40px;
-    border-left: 1px solid #ccc;
   }
   > div:last-child {
     border-left: none;
   }
 }
 
-// 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;
-  }
-}
-
 //----footer--///
 footer.pagination-footer {
   background-color: #fff;


Mime
View raw message