You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by ga...@apache.org on 2017/04/05 08:50:18 UTC

[couchdb-fauxton] branch master updated: (#892) - Continued styles and text tidying

This is an automated email from the ASF dual-hosted git repository.

garren pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/couchdb-fauxton.git

The following commit(s) were added to refs/heads/master by this push:
       new  1e548f1   (#892) - Continued styles and text tidying
1e548f1 is described below

commit 1e548f154840a0314e883b42781e7475911e294d
Author: Justin McDavid <jm...@us.ibm.com>
AuthorDate: Wed Apr 5 01:50:16 2017 -0700

    (#892) - Continued styles and text tidying
    
    * WIP for continuing styles work
    
    * WIP Continued Text and style tweaks
    
    * WIP more small tweaks.
    
    * More styles/text work.
    
    * More style work
    
    * fixes after review
    
    * WIP for continuing styles work
    
    * WIP Continued Text and style tweaks
    
    * WIP more small tweaks.
    
    * More styles/text work.
    
    * More style work
    
    * fixes after review
    
    * fixing test css selectors
---
 .../components/assets/less/bulk-selector.less      |  4 ++
 .../assets/less/header-togglebutton.less           |  2 +-
 app/addons/components/components/beautify.js       |  4 +-
 app/addons/components/components/confirmbutton.js  |  2 +-
 app/addons/config/assets/less/config.less          | 15 +----
 app/addons/config/components.react.jsx             |  2 +-
 app/addons/config/tests/componentsSpec.react.jsx   |  2 +-
 app/addons/cors/assets/less/cors.less              |  2 +-
 app/addons/cors/components.react.jsx               |  4 +-
 .../documents/mango/mango.components.react.jsx     |  2 +-
 app/addons/documents/sidebar/sidebar.react.jsx     |  2 +-
 .../documents/tests/nightwatch/deletesDocuments.js |  2 +-
 .../documents/tests/nightwatch/viewDelete.js       |  4 +-
 app/addons/fauxton/components.react.jsx            |  2 +-
 .../replication/assets/less/replication.less       |  2 +-
 app/addons/replication/components/common-table.js  |  2 +-
 app/addons/setup/assets/less/setup.less            |  3 +-
 app/addons/setup/setup.react.jsx                   | 26 ++++-----
 app/addons/verifyinstall/components.react.jsx      |  2 +-
 assets/less/bootstrap/dropdowns.less               |  6 +-
 assets/less/fauxton.less                           |  7 ++-
 assets/less/formstyles.less                        | 64 ++++++++++++++++------
 assets/less/templates.less                         | 11 ++--
 23 files changed, 96 insertions(+), 76 deletions(-)

diff --git a/app/addons/components/assets/less/bulk-selector.less b/app/addons/components/assets/less/bulk-selector.less
index 1aaec68..a55ba7f 100644
--- a/app/addons/components/assets/less/bulk-selector.less
+++ b/app/addons/components/assets/less/bulk-selector.less
@@ -81,6 +81,7 @@
     margin-top: 1px;
   }
 
+
   .separator {
     border-left: 1px solid @darkBorder;
     margin: 5px 0;
@@ -93,6 +94,9 @@
       font-size: 8px;
       color: #505050;
       padding: 3px 0;
+      &:hover {
+        color: @dangerRed;
+      }
     }
 
   }
diff --git a/app/addons/components/assets/less/header-togglebutton.less b/app/addons/components/assets/less/header-togglebutton.less
index 33834ca..9df3672 100644
--- a/app/addons/components/assets/less/header-togglebutton.less
+++ b/app/addons/components/assets/less/header-togglebutton.less
@@ -52,7 +52,7 @@
 
 .header-control-box:hover {
   .icon, span {
-    color: @linkColor;
+    color: @hoverHighlight;
   }
 }
 
diff --git a/app/addons/components/components/beautify.js b/app/addons/components/components/beautify.js
index 3ff3519..8773cf2 100644
--- a/app/addons/components/components/beautify.js
+++ b/app/addons/components/components/beautify.js
@@ -50,9 +50,9 @@ export const Beautify = React.createClass({
         className="beautify beautify_map btn btn-primary btn-small beautify-tooltip"
         type="button"
         data-toggle="tooltip"
-        title="Reformat your minified code to make edits to it."
+        title="Switch to editable code format."
       >
-        beautify this code
+        Format Code
       </button>
     );
   }
diff --git a/app/addons/components/components/confirmbutton.js b/app/addons/components/components/confirmbutton.js
index 72e157e..c7915b6 100644
--- a/app/addons/components/components/confirmbutton.js
+++ b/app/addons/components/components/confirmbutton.js
@@ -30,7 +30,7 @@ export const ConfirmButton = React.createClass({
       disabled: false,
       showIcon: true,
       customIcon: 'fonticon-ok-circled',
-      buttonType: 'btn-success',
+      buttonType: 'btn-primary',
       style: {},
       'data-id': null,
       onClick () { }
diff --git a/app/addons/config/assets/less/config.less b/app/addons/config/assets/less/config.less
index 2a3bb07..57c6cf3 100644
--- a/app/addons/config/assets/less/config.less
+++ b/app/addons/config/assets/less/config.less
@@ -37,22 +37,11 @@
   }
 
   button { width: 7%;}
-
-  transition: background-color 100ms;
-}
-
-.config-item:hover {
-  background-color: #e0e0e0;
-}
-
-.config.table-striped tbody > tr.config-item:nth-child(odd) > td,
-.config.table-striped tbody > tr.config-item:nth-child(odd) > th {
   transition: background-color 100ms;
 }
 
-.config.table-striped tbody > tr.config-item:nth-child(odd):hover > td,
-.config.table-striped tbody > tr.config-item:nth-child(odd):hover > th {
-  background-color: #e7e7e7;
+.config-item-trash:hover {
+  color: @dangerRed;
 }
 
 .config-item-deleting {
diff --git a/app/addons/config/components.react.jsx b/app/addons/config/components.react.jsx
index f8cd0c6..57fa6e9 100644
--- a/app/addons/config/components.react.jsx
+++ b/app/addons/config/components.react.jsx
@@ -199,7 +199,7 @@ var ConfigOptionValue = React.createClass({
       return (
         <span>
           <button
-            className="btn btn-success fonticon-ok-circled btn-small btn-config-save"
+            className="btn btn-primary fonticon-ok-circled btn-small btn-config-save"
             onClick={this.onSave}
           />
           <button
diff --git a/app/addons/config/tests/componentsSpec.react.jsx b/app/addons/config/tests/componentsSpec.react.jsx
index 5c49760..b48cff4 100644
--- a/app/addons/config/tests/componentsSpec.react.jsx
+++ b/app/addons/config/tests/componentsSpec.react.jsx
@@ -200,7 +200,7 @@ describe('Config Components', function () {
       );
 
       TestUtils.Simulate.click($(ReactDOM.findDOMNode(el))[0]);
-      TestUtils.Simulate.click($('div.confirmation-modal button.btn-success')[0]);
+      TestUtils.Simulate.click($('div.confirmation-modal button.btn-primary')[0]);
       assert.ok(spy.calledOnce);
     });
   });
diff --git a/app/addons/cors/assets/less/cors.less b/app/addons/cors/assets/less/cors.less
index 5fde96e..c9aaf45 100644
--- a/app/addons/cors/assets/less/cors.less
+++ b/app/addons/cors/assets/less/cors.less
@@ -124,7 +124,7 @@
   }
 
   tr a:hover {
-    color: @linkColor;
+    color: @hoverHighlight;
   }
 
   .edit-domain-section {
diff --git a/app/addons/cors/components.react.jsx b/app/addons/cors/components.react.jsx
index 12b6d3e..f43b81d 100644
--- a/app/addons/cors/components.react.jsx
+++ b/app/addons/cors/components.react.jsx
@@ -98,12 +98,12 @@ var OriginRow = React.createClass({
         </td>
         <td width="30">
           <span>
-            <a className="fonticon-pencil" onClick={this.editOrigin} title="Click to edit" />
+            <a className="fonticon-pencil" onClick={this.editOrigin} title="Edit domain." />
           </span>
         </td>
         <td width="30">
           <span>
-            <a href="#" data-bypass="true" className="fonticon-trash" onClick={this.deleteOrigin} title="Click to delete" />
+            <a href="#" data-bypass="true" className="fonticon-trash" onClick={this.deleteOrigin} title="Delete domain." />
           </span>
         </td>
       </tr>
diff --git a/app/addons/documents/mango/mango.components.react.jsx b/app/addons/documents/mango/mango.components.react.jsx
index 76b26b4..d84c6f1 100644
--- a/app/addons/documents/mango/mango.components.react.jsx
+++ b/app/addons/documents/mango/mango.components.react.jsx
@@ -177,7 +177,7 @@ var MangoEditor = React.createClass({
 
     return (
       <PaddedBorderedBox>
-        <strong>Your available Indexes:</strong>
+        <strong>Queryable indexes:</strong>
         <a className="edit-link" href={'#' + FauxtonAPI.urls('mango', 'index-app', encodeURIComponent(this.props.dbName))}>edit</a>
         <pre
           className="mango-available-indexes">
diff --git a/app/addons/documents/sidebar/sidebar.react.jsx b/app/addons/documents/sidebar/sidebar.react.jsx
index b08b0e5..3ae98cc 100644
--- a/app/addons/documents/sidebar/sidebar.react.jsx
+++ b/app/addons/documents/sidebar/sidebar.react.jsx
@@ -636,7 +636,7 @@ var CloneIndexModal = React.createClass({
             <div className="clone-index-name-row">
               <label className="new-index-title-label" htmlFor="new-index-name">{this.props.indexLabel} Name</label>
               <input type="text" id="new-index-name" value={this.props.newIndexName} onChange={this.setNewIndexName}
-                 placeholder="Enter new view name" />
+                 placeholder="New view name" />
             </div>
           </form>
 
diff --git a/app/addons/documents/tests/nightwatch/deletesDocuments.js b/app/addons/documents/tests/nightwatch/deletesDocuments.js
index 721e9a2..6cc3cbc 100644
--- a/app/addons/documents/tests/nightwatch/deletesDocuments.js
+++ b/app/addons/documents/tests/nightwatch/deletesDocuments.js
@@ -107,7 +107,7 @@ module.exports = {
       .url(baseUrl + '#/database/' + newDatabaseName + '/' + newDocumentName)
       .waitForElementPresent('#editor-container', waitTime, false)
       .clickWhenVisible('#doc-editor-actions-panel button[title="Delete"]')
-      .clickWhenVisible('.confirmation-modal button.btn.btn-success')
+      .clickWhenVisible('.confirmation-modal button.btn.btn-primary')
       .waitForElementPresent('.jump-to-doc', waitTime, false)
 
       //check raw JSON
diff --git a/app/addons/documents/tests/nightwatch/viewDelete.js b/app/addons/documents/tests/nightwatch/viewDelete.js
index c995ef3..d88fff5 100644
--- a/app/addons/documents/tests/nightwatch/viewDelete.js
+++ b/app/addons/documents/tests/nightwatch/viewDelete.js
@@ -32,8 +32,8 @@ module.exports = {
 
       .clickWhenVisible('.index-list .active span', waitTime, true)
       .clickWhenVisible('.popover-content .fonticon-trash', waitTime, true)
-      .waitForElementVisible('.confirmation-modal button.btn-success', waitTime, true)
-      .clickWhenVisible('.confirmation-modal button.btn-success', waitTime, true)
+      .waitForElementVisible('.confirmation-modal button.btn-primary', waitTime, true)
+      .clickWhenVisible('.confirmation-modal button.btn-primary', waitTime, true)
 
 
       // now wait for the sidebar to have removed the design doc
diff --git a/app/addons/fauxton/components.react.jsx b/app/addons/fauxton/components.react.jsx
index 8bc71c9..1781001 100644
--- a/app/addons/fauxton/components.react.jsx
+++ b/app/addons/fauxton/components.react.jsx
@@ -158,7 +158,7 @@ var ConfirmationModal = React.createClass({
       title: 'Please confirm',
       text: '',
       successButtonLabel: 'Okay',
-      buttonClass: 'btn-success',
+      buttonClass: 'btn-primary',
       onClose: function () { },
       onSubmit: function () { }
     };
diff --git a/app/addons/replication/assets/less/replication.less b/app/addons/replication/assets/less/replication.less
index 2c1ba12..87ba4ef 100644
--- a/app/addons/replication/assets/less/replication.less
+++ b/app/addons/replication/assets/less/replication.less
@@ -249,7 +249,7 @@ input.replication__bulk-select-input[type="checkbox"] {
   margin: 8px;
 }
 
-.replication__bulk-select-trash {
+.bulk-select-trash {
   color: #505050;
   border: 1px solid #aaa;
   background-color: rgba(0, 0, 0, 0);
diff --git a/app/addons/replication/components/common-table.js b/app/addons/replication/components/common-table.js
index 4f287c5..fa760fd 100644
--- a/app/addons/replication/components/common-table.js
+++ b/app/addons/replication/components/common-table.js
@@ -228,7 +228,7 @@ const BulkSelectHeader = ({isSelected, deleteDocs, someDocsSelected, onCheck}) =
   const trash = someDocsSelected ?
     <button
       onClick={() => deleteDocs()}
-      className="replication__bulk-select-trash fonticon fonticon-trash"
+      className="bulk-select-trash fonticon fonticon-trash"
       title="Delete all selected">
     </button> : null;
 
diff --git a/app/addons/setup/assets/less/setup.less b/app/addons/setup/assets/less/setup.less
index 577699d..421805c 100644
--- a/app/addons/setup/assets/less/setup.less
+++ b/app/addons/setup/assets/less/setup.less
@@ -28,8 +28,7 @@
   h2 {
     font-size: 16px;
     line-height: normal;
-    margin: 0;
-    text-transform: uppercase;
+    margin: 10px 0;
   }
 
   .node-item {
diff --git a/app/addons/setup/setup.react.jsx b/app/addons/setup/setup.react.jsx
index bc65d5c..1626ef5 100644
--- a/app/addons/setup/setup.react.jsx
+++ b/app/addons/setup/setup.react.jsx
@@ -38,27 +38,26 @@ var ClusterConfiguredScreen = React.createClass({
 var SetupCurrentAdminPassword = React.createClass({
 
   render: function () {
-    var text = 'Your current Admin Username & Password';
+    var text = 'Specify your Admin credentials';
 
     if (this.props.adminParty) {
-      text = 'Admin Username & Password that you want to use';
+      text = 'Create Admin credentials.';
     }
 
     return (
       <div className="setup-creds">
         <div>
-          <h2>Specify Credentials</h2>
-          {text}
+          <p>{text}</p>
         </div>
         <input
           className="setup-username"
           onChange={this.props.onAlterUsername}
-          placeholder="Admin Username"
+          placeholder="Username"
           type="text" />
         <input
           className="setup-password"
           onChange={this.props.onAlterPassword}
-          placeholder="Admin Password"
+          placeholder="Password"
           type="password" />
       </div>
     );
@@ -89,19 +88,16 @@ var SetupOptionalSettings = React.createClass({
   render: function () {
     return (
       <div className="setup-opt-settings">
-        <h2>IP</h2>
-        Bind address to listen on<br/>
-
+        <p>Bind address the node will listen on</p>
         <input
           className="setup-input-ip"
           value={this.state.ipValue}
           onChange={this.handleIpChange}
-          defaultValue="0.0.0.0"
+          placeholder="IP Address"
           type="text" />
 
         <div className="setup-port">
-          <h2>Port</h2>
-          Port that the Node uses <br/>
+          <p>Port that the node will use</p>
           <input
             className="setup-input-port"
             value={this.state.portValue}
@@ -206,14 +202,14 @@ var SetupMultipleNodesController = React.createClass({
           </div>
         <hr/>
         <div className="setup-add-nodes-section">
-          <h2>Add Nodes</h2>
-          Remote host <br/>
+          <h2>Add Nodes to the Cluster</h2>
+          <p>Remote host</p>
           <input
             value={this.state.remoteAddress}
             onChange={this.alterRemoteAddressAdditionalNode}
             className="input-remote-node"
             type="text"
-            placeholder="127.0.0.1" />
+            placeholder="IP Address" />
 
           <SetupOptionalSettings
             onAlterPort={this.alterPortAdditionalNode}
diff --git a/app/addons/verifyinstall/components.react.jsx b/app/addons/verifyinstall/components.react.jsx
index 366a6df..47f7e72 100644
--- a/app/addons/verifyinstall/components.react.jsx
+++ b/app/addons/verifyinstall/components.react.jsx
@@ -64,7 +64,7 @@ var VerifyInstallButton = React.createClass({
 
   render: function () {
     return (
-      <button id="start" className="btn btn-success" onClick={this.props.verify} disabled={this.props.isVerifying}>
+      <button id="start" className="btn btn-primary" onClick={this.props.verify} disabled={this.props.isVerifying}>
         {this.props.isVerifying ? 'Verifying' : 'Verify Installation'}
       </button>
     );
diff --git a/assets/less/bootstrap/dropdowns.less b/assets/less/bootstrap/dropdowns.less
index 49468bb..0984bb1 100644
--- a/assets/less/bootstrap/dropdowns.less
+++ b/assets/less/bootstrap/dropdowns.less
@@ -49,8 +49,8 @@
   min-width: 160px;
   margin: 2px 0 0; // override default ul
   list-style: none;
-  background-color: #564E4C;
-  color: #B3B4B4;
+  background-color: @brandDark1;
+  color: @navIconColor;
   border: 1px solid #ccc; // Fallback for IE7-8
   border: 1px solid @dropdownBorder;
   *border-right-width: 2px;
@@ -65,7 +65,7 @@
     left: auto;
   }
   li.header-label{
-    background-color: #3A2C2B;
+    background-color: @brandDark2;
     color: #FFFFFF;
     padding: 3px 20px;
     font-size: 13px;
diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less
index 603e893..679857b 100644
--- a/assets/less/fauxton.less
+++ b/assets/less/fauxton.less
@@ -81,6 +81,7 @@ a:active {
 
 a:hover {
   color: @linkColorHover;
+  text-decoration: none;
 }
 
 /* bootstrap overrides */
@@ -155,7 +156,7 @@ table tr td{
   }
 }
 thead {
-  border-bottom: 2px solid @brandHighlight;
+  border-bottom: 2px solid #333;
 }
 tbody {
   padding-top: 10px;
@@ -189,11 +190,11 @@ table.databases {
     text-shadow: none;
     .box-shadow(0px 4px 0px rgba(0,0,0,0.45));
     .border-radius(0);
-    border-bottom: 1px solid #3a2c2b;
+    border-bottom: 1px solid @brandDark2;
     box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.4);
     a, a:hover {
       color: #cecece;
-      text-decoration: underline;
+      text-decoration: none;
     }
     a.js-dismiss {
       color: rgba(255, 255, 255, 1);
diff --git a/assets/less/formstyles.less b/assets/less/formstyles.less
index 5a30223..4618adb 100644
--- a/assets/less/formstyles.less
+++ b/assets/less/formstyles.less
@@ -78,25 +78,57 @@ button:focus {
     }
   }
 }
-.btn-primary {
-  background: #2bb673;
-  color: #fff;
-}
-.btn.btn-danger {
-  background-color: #f00;
-  color: #fff;
+.btn-primary, .btn-success {
+  color: @buttonText;
+  background-color: @primaryGreen;
+  border-color: @primaryGreen;
+  &:disabled {
+    background-color: @primaryGreenDisabled;
+    border-color: @primaryGreenDisabled;
+    color: @buttonTextDisabled;
+    pointer-events: none;
+  }
 }
+
 .btn-secondary {
-  background-color: #0082BF;
-  color: #fff;
+  color: @buttonText;
+  background-color: @secondaryBlue;
+  border-color: @secondaryBlue;
+  &:disabled {
+    color: @buttonTextDisabled;
+    background-color: @secondaryBlueDisabled;
+    border-color: @secondaryBlueDisabled;
+    pointer-events: none;
+  }
 }
-.btn-primary:hover, .btn-secondary:hover, .btn-danger:hover, {
-  background-color: @hoverHighlight;
-  color: #fff;
+
+.btn-tertiary {
+  color: @secondaryBlue;
+  background-color: @buttonText;
+  border: 2px solid @secondaryBlue;
+  &:disabled {
+    color: @secondaryBlueDisabled;
+    background-color: @primaryGreenDisabled;
+    border-color: @buttonTextDisabled;
+    pointer-events: none;
+  }
+}
+
+.btn-warning, .btn-danger {
+  color: @buttonText;
+  background-color: @dangerRed;
+  border-color: @dangerRed;
+  &:disabled {
+    color: @buttonTextDisabled;
+    background-color: @dangerDisabled;
+    border-color: @dangerDisabled;
+    pointer-events: none;
+  }
 }
 
-.btn-primary a:visited {
-  color: #fff;
+.btn-success:hover, .btn-primary:hover, .btn-secondary:hover, .btn-tertiary:hover, .btn-warning:hover, .btn-danger:hover {
+  background-color: @hoverHighlight;
+  border-color: @hoverHighlight;
 }
 
 .form-actions {
@@ -270,8 +302,8 @@ div.add-dropdown {
       right: 4px;
     }
     a {
-      background-color: #564E4C;
-      color: #B3B4B4;
+      background-color: @brandDark1;
+      color: @navIconColor;
       &:hover {
         background-color: @hoverHighlight;
         color: white;
diff --git a/assets/less/templates.less b/assets/less/templates.less
index f1f5970..d7a7b49 100644
--- a/assets/less/templates.less
+++ b/assets/less/templates.less
@@ -96,7 +96,7 @@
         height: 4px;
         width: 24px;
         .border-radius(2);
-        background-color: #B3B4B4;
+        background-color: @navIconColor;
         margin: 2px 0px;
       }
       &:hover div {
@@ -114,7 +114,7 @@
         height: 50px;
         padding: 10px 10px 10px 10px;
         float: none;
-        background: #3a2c2b;
+        background: @brandDark2;
         .icon {
           .box-sizing(content-box);
           background: url(../img/CouchDB-negative-logo.png) no-repeat 23px 0px;
@@ -146,7 +146,7 @@
 
           a {
             font-size: 10px;
-            color: #B3B4B4;
+            color: @navIconColor;
             padding: 0px;
             text-shadow: none;
             width: 100%;
@@ -177,13 +177,12 @@
           font-weight: normal;
           font-family: helvetica;
           .box-sizing(border-box);
-          background-color: #564E4C;
+          background-color: @brandDark1;
           border-bottom:  1px solid @brandDark2;
           height: 48px;
           min-height: 48px;
           position: relative;
-
-          &.active:hover,
+ 
           &.active {
             a {
               .box-shadow(none);

-- 
To stop receiving notification emails like this one, please contact
['"commits@couchdb.apache.org" <co...@couchdb.apache.org>'].