couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From benk...@apache.org
Subject fauxton commit: updated refs/heads/master to bede2f3
Date Thu, 03 Mar 2016 19:11:51 GMT
Repository: couchdb-fauxton
Updated Branches:
  refs/heads/master c9bf8a59a -> bede2f30b


Assorted button updates

This makes various updates to buttons through Fauxton as per
Justin's notes: sizes, background colours, labels, etc. and a
few related changes.


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

Branch: refs/heads/master
Commit: bede2f30b5b7c0dd9492991fbfb7058073ea9238
Parents: c9bf8a5
Author: Ben Keen <ben.keen@gmail.com>
Authored: Tue Mar 1 16:40:51 2016 -0800
Committer: Ben Keen <ben.keen@gmail.com>
Committed: Thu Mar 3 10:12:38 2016 -0800

----------------------------------------------------------------------
 app/addons/auth/components.react.jsx            |  4 +-
 app/addons/auth/routes.js                       |  3 +-
 .../components/assets/less/components.less      |  1 +
 app/addons/components/assets/less/modals.less   | 10 +++++
 .../components/react-components.react.jsx       | 25 +++++++++++--
 .../tests/confirmButtonSpec.react.jsx           | 17 +++++++++
 .../documents/doc-editor/components.react.jsx   | 29 +++++++++------
 app/addons/fauxton/assets/less/components.less  | 14 +++----
 app/addons/fauxton/components.react.jsx         | 39 ++++++++++++++++++--
 app/addons/permissions/components.react.jsx     |  4 +-
 app/addons/replication/templates/form.html      |  5 ++-
 app/addons/setup/setup.react.jsx                | 15 +++++---
 app/addons/verifyinstall/components.react.jsx   |  2 +-
 13 files changed, 127 insertions(+), 41 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/bede2f30/app/addons/auth/components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/auth/components.react.jsx b/app/addons/auth/components.react.jsx
index 448c7c0..91f1465 100644
--- a/app/addons/auth/components.react.jsx
+++ b/app/addons/auth/components.react.jsx
@@ -87,7 +87,7 @@ define([
           <div className="span12">
             <form id="login" onSubmit={this.submit}>
               <p className="help-block">
-                Login with your username and password
+                Enter your username and password.
               </p>
               <input id="username" type="text" name="name" ref="username" placeholder="Username"
size="24"
                 onChange={this.onInputChange} value={this.state.username} />
@@ -95,7 +95,7 @@ define([
               <input id="password" type="password" name="password" ref="password" placeholder="Password"
size="24"
                 onChange={this.onInputChange} value={this.state.password} />
               <br/>
-              <button id="submit" className="btn" type="submit">Login</button>
+              <button id="submit" className="btn btn-success" type="submit">Log In</button>
             </form>
           </div>
         </div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/bede2f30/app/addons/auth/routes.js
----------------------------------------------------------------------
diff --git a/app/addons/auth/routes.js b/app/addons/auth/routes.js
index 9fd7189..1114ed1 100644
--- a/app/addons/auth/routes.js
+++ b/app/addons/auth/routes.js
@@ -39,8 +39,7 @@ function (app, FauxtonAPI, Auth, AuthActions, Components, ClusterActions)
{
     },
 
     login: function () {
-      this.crumbs = [{ name: 'Login', link: "#" }];
-
+      this.crumbs = [{ name: 'Log In to Couch DB', link: "#" }];
       this.setComponent('#dashboard-content', Components.LoginForm, { urlBack: app.getParams().urlback
});
     },
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/bede2f30/app/addons/components/assets/less/components.less
----------------------------------------------------------------------
diff --git a/app/addons/components/assets/less/components.less b/app/addons/components/assets/less/components.less
index 9b452ea..fa4fc01 100644
--- a/app/addons/components/assets/less/components.less
+++ b/app/addons/components/assets/less/components.less
@@ -19,3 +19,4 @@
 @import "code-editor.less";
 @import "bulk-selector.less";
 @import "badges.less";
+@import "modals.less";

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/bede2f30/app/addons/components/assets/less/modals.less
----------------------------------------------------------------------
diff --git a/app/addons/components/assets/less/modals.less b/app/addons/components/assets/less/modals.less
new file mode 100644
index 0000000..7d51966
--- /dev/null
+++ b/app/addons/components/assets/less/modals.less
@@ -0,0 +1,10 @@
+@import "../../../../../assets/less/variables.less";
+
+.modal .cancel-link {
+  margin: 0 5px 0 15px;
+  font-size: 14px;
+  color: @defaultText;
+  &:hover {
+    color: @brandPrimaryDark;
+  }
+}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/bede2f30/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 8ddeecf..a4f2c06 100644
--- a/app/addons/components/react-components.react.jsx
+++ b/app/addons/components/react-components.react.jsx
@@ -1114,10 +1114,29 @@ function (app, FauxtonAPI, React, ReactDOM, Actions, Stores, FauxtonComponents,
   });
 
   var ConfirmButton = React.createClass({
+    propTypes: {
+      showIcon: React.PropTypes.bool
+    },
+
+    getDefaultProps: function () {
+      return {
+        showIcon: true
+      };
+    },
+
+    getIcon: function () {
+      if (!this.props.showIcon) {
+        return null;
+      }
+      return (
+        <i className="icon fonticon-ok-circled" />
+      );
+    },
+
     render: function () {
       return (
         <button onClick={this.props.onClick} type="submit" className="btn btn-success
save" id={this.props.id}>
-          <i className="icon fonticon-ok-circled"></i>
+          {this.getIcon()}
           {this.props.text}
         </button>
       );
@@ -1335,8 +1354,9 @@ function (app, FauxtonAPI, React, ReactDOM, Actions, Stores, FauxtonComponents,
 
             <FauxtonComponents.ClipboardWithTextField
               onClipBoardClick={this.showCopiedMessage}
-              text="Copy"
+              text="Copy URL"
               textToCopy={this.props.endpoint}
+              showCopyIcon={false}
               uniqueKey="clipboard-apiurl" />
 
             <div className="add-on">
@@ -1346,7 +1366,6 @@ function (app, FauxtonAPI, React, ReactDOM, Actions, Stores, FauxtonComponents,
                 target="_blank"
                 className="btn"
               >
-                <i className="fonticon-eye icon"></i>
                 View JSON
               </a>
             </div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/bede2f30/app/addons/components/tests/confirmButtonSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/components/tests/confirmButtonSpec.react.jsx b/app/addons/components/tests/confirmButtonSpec.react.jsx
index d650c59..fac8aa6 100644
--- a/app/addons/components/tests/confirmButtonSpec.react.jsx
+++ b/app/addons/components/tests/confirmButtonSpec.react.jsx
@@ -49,5 +49,22 @@ define([
       React.addons.TestUtils.Simulate.click(ReactDOM.findDOMNode(button));
       assert.ok(spy.calledOnce);
     });
+
+    it('shows icon by default', function () {
+      button = TestUtils.renderIntoDocument(
+        <ReactComponents.ConfirmButton text="Click here" onClick={function () { }} />,
+        container
+      );
+      assert.equal($(ReactDOM.findDOMNode(button)).find('.icon').length, 1);
+    });
+
+    it('optionally omits the icon', function () {
+      button = TestUtils.renderIntoDocument(
+        <ReactComponents.ConfirmButton text="Click here" onClick={function () { }} showIcon={false}
/>,
+        container
+      );
+      assert.equal($(ReactDOM.findDOMNode(button)).find('.icon').length, 0);
+    });
+
   });
 });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/bede2f30/app/addons/documents/doc-editor/components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/doc-editor/components.react.jsx b/app/addons/documents/doc-editor/components.react.jsx
index 56ed8d3..fe97085 100644
--- a/app/addons/documents/doc-editor/components.react.jsx
+++ b/app/addons/documents/doc-editor/components.react.jsx
@@ -148,7 +148,7 @@ define([
           <div id="doc-editor-actions-panel">
             <div className="doc-actions-left">
               <button className="save-doc btn btn-success save" type="button" onClick={this.saveDoc}>
-                <i className="icon fonticon-ok-circled"></i> Save
+                <i className="icon fonticon-ok-circled"></i> Save Changes
               </button>
               <div>
                 <a href={this.props.previousPage} className="js-back cancel-button">Cancel</a>
@@ -172,10 +172,12 @@ define([
             visible={this.state.cloneDocModalVisible}
             onSubmit={this.clearChanges} />
           <FauxtonComponents.ConfirmationModal
+            title="Confirm Deletion"
             visible={this.state.deleteDocModalVisible}
             text="Are you sure you want to delete this document?"
             onClose={this.hideDeleteDocModal}
-            onSubmit={this.deleteDoc} />
+            onSubmit={this.deleteDoc}
+            successButtonLabel="Delete Document" />
         </div>
       );
     }
@@ -279,7 +281,11 @@ define([
       };
     },
 
-    closeModal: function () {
+    closeModal: function (e) {
+      if (e) {
+        e.preventDefault();
+      }
+
       if (this.state.inProgress) {
         Actions.cancelUpload();
       }
@@ -328,12 +334,10 @@ define([
             </div>
           </Modal.Body>
           <Modal.Footer>
-            <button href="#" data-bypass="true" className="btn" onClick={this.closeModal}>
-              <i className="icon fonticon-cancel-circled"></i> Cancel
-            </button>
             <button href="#" id="upload-btn" data-bypass="true" className="btn btn-success
save" onClick={this.upload}>
-              <i className="icon fonticon-ok-circled"></i> Upload
+              Upload Attachment
             </button>
+            <a href="#" data-bypass="true" className="cancel-link" onClick={this.closeModal}>Cancel</a>
           </Modal.Footer>
         </Modal>
       );
@@ -368,7 +372,10 @@ define([
       }
     },
 
-    closeModal: function () {
+    closeModal: function (e) {
+      if (e) {
+        e.preventDefault();
+      }
       Actions.hideCloneDocModal();
     },
 
@@ -396,12 +403,10 @@ define([
             </form>
           </Modal.Body>
           <Modal.Footer>
-            <button className="btn" onClick={this.closeModal}>
-              <i className="icon fonticon-cancel-circled"></i> Cancel
-            </button>
             <button className="btn btn-success save" onClick={this.cloneDoc}>
-              <i className="fonticon-ok-circled"></i> Clone
+              <i className="fonticon-ok-circled"></i> Clone Document
             </button>
+            <a href="#" data-bypass="true" className="cancel-link" onClick={this.closeModal}>Cancel</a>
           </Modal.Footer>
         </Modal>
       );

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/bede2f30/app/addons/fauxton/assets/less/components.less
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/assets/less/components.less b/app/addons/fauxton/assets/less/components.less
index 4202efa..8e737d1 100644
--- a/app/addons/fauxton/assets/less/components.less
+++ b/app/addons/fauxton/assets/less/components.less
@@ -4,12 +4,13 @@
 
 .api-bar-tray {
   padding: 16px 20px;
+
+  input[type="text"].text-field-to-copy {
+    .border-radius(5px 0 0 5px);
+  }
   .input-append.input-prepend {
-    margin-bottom: 0px;
+    margin-bottom: 0;
 
-    .input-xxlarge {
-      .border-radius(5px 0 0 5px);
-    }
     .btn {
       background-color: @navBG;
       color: #fff;
@@ -17,16 +18,11 @@
       padding: 10px 10px 9px;
       border: none;
       line-height: 1.5em;
-      .border-radius(5px);
       &:hover{
         background-color: #cbcbcb;
       }
     }
 
-    .copy-button {
-      .border-radius(0 5px 5px 0);
-    }
-
     .zeroclipboard-is-hover {
       background-color: #cbcbcb;
     }

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/bede2f30/app/addons/fauxton/components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/components.react.jsx b/app/addons/fauxton/components.react.jsx
index 7847f0a..3d54e58 100644
--- a/app/addons/fauxton/components.react.jsx
+++ b/app/addons/fauxton/components.react.jsx
@@ -90,6 +90,20 @@ function (app, FauxtonAPI, React, ReactDOM, ZeroClipboard, ReactBootstrap)
{
   //  </ComponentsReact.ClipboardWithTextField>
   // pass in the text and a unique key, the key has to be unique or you'll get a warning
   var ClipboardWithTextField = React.createClass({
+    propTypes: {
+      onClipBoardClick: React.PropTypes.func.isRequired,
+      textToCopy: React.PropTypes.string.isRequired,
+      uniqueKey: React.PropTypes.string.isRequired,
+      showCopyIcon: React.PropTypes.bool
+    },
+
+    getDefaultProps: function () {
+      return {
+        showCopyIcon: true,
+        text: 'Copy'
+      };
+    },
+
     componentWillMount: function () {
       ZeroClipboard.config({ moviePath: getZeroClipboardSwfPath() });
     },
@@ -104,6 +118,13 @@ function (app, FauxtonAPI, React, ReactDOM, ZeroClipboard, ReactBootstrap)
{
       }.bind(this));
     },
 
+    getCopyIcon: function () {
+      if (!this.props.showCopyIcon) {
+        return null;
+      }
+      return (<i className="fontawesome icon-paste"></i>);
+    },
+
     render: function () {
       return (
         <p key={this.props.uniqueKey}>
@@ -120,7 +141,7 @@ function (app, FauxtonAPI, React, ReactDOM, ZeroClipboard, ReactBootstrap)
{
             ref={"copy-text-" + this.props.uniqueKey}
             title="Copy to clipboard"
           >
-            <i className="fontawesome icon-paste"></i> Copy
+            {this.getCopyIcon()} {this.props.text}
           </a>
         </p>
       );
@@ -342,14 +363,22 @@ function (app, FauxtonAPI, React, ReactDOM, ZeroClipboard, ReactBootstrap)
{
         visible: false,
         title: 'Please confirm',
         text: '',
+        successButtonLabel: 'Okay',
         onClose: function () { },
         onSubmit: function () { }
       };
     },
 
+    close: function (e) {
+      if (e) {
+        e.preventDefault();
+      }
+      this.props.onClose();
+    },
+
     render: function () {
       return (
-        <Modal dialogClassName="confirmation-modal" show={this.props.visible} onHide={this.props.onClose}>
+        <Modal dialogClassName="confirmation-modal" show={this.props.visible} onHide={this.close}>
           <Modal.Header closeButton={true}>
             <Modal.Title>{this.props.title}</Modal.Title>
           </Modal.Header>
@@ -359,8 +388,10 @@ function (app, FauxtonAPI, React, ReactDOM, ZeroClipboard, ReactBootstrap)
{
             </p>
           </Modal.Body>
           <Modal.Footer>
-            <button className="btn" onClick={this.props.onClose}><i className="icon
fonticon-cancel-circled"></i> Cancel</button>
-            <button className="btn btn-success js-btn-success" onClick={this.props.onSubmit}><i
className="fonticon-ok-circled"></i> Okay</button>
+            <button className="btn btn-success js-btn-success" onClick={this.props.onSubmit}>
+              <i className="fonticon-ok-circled"></i> {this.props.successButtonLabel}
+            </button>
+            <a href="#" data-bypass="true" className="cancel-link" onClick={this.close}>Cancel</a>
           </Modal.Footer>
         </Modal>
       );

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/bede2f30/app/addons/permissions/components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/permissions/components.react.jsx b/app/addons/permissions/components.react.jsx
index 772a86d..559fc12 100644
--- a/app/addons/permissions/components.react.jsx
+++ b/app/addons/permissions/components.react.jsx
@@ -142,8 +142,8 @@ function (app, FauxtonAPI, React, Components, Stores, Actions) {
               <p>Specify users who will have {this.props.section} access to this database.</p>
             </header>
             <form onSubmit={this.addNames} className="permission-item-form form-inline">
-              <input onChange={this.nameChange} value={this.state.newName} type="text"
className="item input-small" placeholder="Add Name" />
-              <button type="submit" className="btn btn-success"><i className="icon
fonticon-plus-circled" /> Add Name</button>
+              <input onChange={this.nameChange} value={this.state.newName} type="text"
className="item input-small" placeholder="Add User" />
+              <button type="submit" className="btn btn-success"><i className="icon
fonticon-plus-circled" /> Add User</button>
             </form>
             <ul className="clearfix unstyled permission-items span10">
               {this.getNames()}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/bede2f30/app/addons/replication/templates/form.html
----------------------------------------------------------------------
diff --git a/app/addons/replication/templates/form.html b/app/addons/replication/templates/form.html
index 3ad2ec4..b5bc63d 100644
--- a/app/addons/replication/templates/form.html
+++ b/app/addons/replication/templates/form.html
@@ -65,7 +65,10 @@ the License.
 			</label>
 		</div>
 
-		<button class="btn btn-success btn-large save" type="submit">Replicate</button>
+		<button class="btn btn-success save" type="submit">
+          <i class="icon fonticon-ok-circled"></i>
+          Replicate
+        </button>
 	</div>
 </form>
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/bede2f30/app/addons/setup/setup.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/setup/setup.react.jsx b/app/addons/setup/setup.react.jsx
index 647f09b..33cf278 100644
--- a/app/addons/setup/setup.react.jsx
+++ b/app/addons/setup/setup.react.jsx
@@ -226,8 +226,9 @@ define([
             <div className="setup-add-button">
               <ConfirmButton
                 onClick={this.addNode}
+                showIcon={false}
                 id="setup-btn-no-thanks"
-                text="ADD" />
+                text="Add Node" />
             </div>
           </div>
           <div className="setup-nodelist">
@@ -235,7 +236,7 @@ define([
           </div>
 
           <div className="centered setup-finish">
-            <ConfirmButton onClick={this.finishClusterSetup} text="SETUP" />
+            <ConfirmButton onClick={this.finishClusterSetup} showIcon={false} text="Configure
Cluster" />
           </div>
         </div>
       );
@@ -295,7 +296,9 @@ define([
             <SetupOptionalSettings
               onAlterPort={this.alterPort}
               onAlterBindAddress={this.alterBindAddress} />
-            <ConfirmButton onClick={this.finishSingleNode} text="Finish" />
+            <ConfirmButton
+              onClick={this.finishSingleNode}
+              text="Configure Node" />
           </div>
         </div>
       );
@@ -352,11 +355,13 @@ define([
           <div>
             <ConfirmButton
               onClick={this.redirectToMultiNodeSetup}
-              text="Setup cluster" />
+              showIcon={false}
+              text="Configure	Cluster" />
             <ConfirmButton
               onClick={this.redirectToSingleNodeSetup}
+              showIcon={false}
               id="setup-btn-no-thanks"
-              text="Single-Node-Setup" />
+              text="Configure	Single	Node" />
           </div>
         </div>
       );

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/bede2f30/app/addons/verifyinstall/components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/verifyinstall/components.react.jsx b/app/addons/verifyinstall/components.react.jsx
index 06b8816..fe6c652 100644
--- a/app/addons/verifyinstall/components.react.jsx
+++ b/app/addons/verifyinstall/components.react.jsx
@@ -71,7 +71,7 @@ function (app, FauxtonAPI, React, Constants, VerifyInstall, Actions, Stores)
{
 
     render: function () {
       return (
-        <button id="start" className="btn btn-large btn-success" onClick={this.props.verify}
disabled={this.props.isVerifying}>
+        <button id="start" className="btn btn-success" onClick={this.props.verify} disabled={this.props.isVerifying}>
           {this.props.isVerifying ? 'Verifying' : 'Verify Installation'}
         </button>
       );


Mime
View raw message