couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From robertkowal...@apache.org
Subject fauxton commit: updated refs/heads/master to 4627fea
Date Tue, 19 Jan 2016 15:01:29 GMT
Repository: couchdb-fauxton
Updated Branches:
  refs/heads/master 6f88c3eb7 -> 4627fea6a


footer updates

 - add dot behind every sentence
 - add text "showing x columns if all colums are shown"
 - swap order between "show all" and amount of displayed elements
 - add border between sections
 - fix alignment of label/checkbox element

PR: #607
PR-URL: https://github.com/apache/couchdb-fauxton/pull/607
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/4627fea6
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/4627fea6
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/4627fea6

Branch: refs/heads/master
Commit: 4627fea6adb59ed02d772e5964dca922514f7643
Parents: 6f88c3e
Author: Robert Kowalski <robertkowalski@apache.org>
Authored: Fri Jan 15 12:25:23 2016 +0100
Committer: Robert Kowalski <robertkowalski@apache.org>
Committed: Tue Jan 19 16:03:25 2016 +0100

----------------------------------------------------------------------
 app/addons/documents/assets/less/documents.less | 13 ++-
 .../documents/pagination/pagination.react.jsx   | 93 ++++++++++++--------
 .../tests/pagination.componentSpec.react.jsx    | 44 ++++++++-
 assets/less/fauxton.less                        |  6 +-
 4 files changed, 107 insertions(+), 49 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/4627fea6/app/addons/documents/assets/less/documents.less
----------------------------------------------------------------------
diff --git a/app/addons/documents/assets/less/documents.less b/app/addons/documents/assets/less/documents.less
index 91355ae..f8aca08 100644
--- a/app/addons/documents/assets/less/documents.less
+++ b/app/addons/documents/assets/less/documents.less
@@ -171,13 +171,24 @@ button.string-edit[disabled] {
   .footer-table-control label {
     margin: 0;
     padding: 0;
-
+    line-height: initial;
   }
+
   .footer-table-control {
     float: right;
     display: inline-block;
     input {
       margin: 0 5px 0 15px;
     }
+    margin: 17px 40px 17px 20px;
+  }
+
+  .footer-doc-control-prioritized-wrapper {
+    margin-right: 18px;
   }
+
+  .page-controls {
+    border-right: solid 1px @btnBorder;
+  }
+
 }

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/4627fea6/app/addons/documents/pagination/pagination.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/pagination/pagination.react.jsx b/app/addons/documents/pagination/pagination.react.jsx
index c5a658c..7a6ca7a 100644
--- a/app/addons/documents/pagination/pagination.react.jsx
+++ b/app/addons/documents/pagination/pagination.react.jsx
@@ -152,74 +152,88 @@ define([
 
       getPageNumberText: function () {
         if (this.state.totalRows === 0) {
-          return <span>Showing 0 documents</span>;
+          return <span>Showing 0 documents.</span>;
         }
 
-        return <span>Showing document {this.state.pageStart} - {this.state.pageEnd}</span>;
+        return <span>Showing document {this.state.pageStart} - {this.state.pageEnd}.</span>;
       },
 
-      toggleTableViewType: function () {
-        Actions.toggleTableViewType();
+      perPageChange: function (perPage) {
+        var collection = this.state.collection;
+        var bulkCollection = this.state.bulkCollection;
+        Actions.updatePerPage(perPage, collection, bulkCollection);
       },
 
-      getTableControl: function () {
-        if (!this.state.showPrioritizedFieldToggler) {
-          return null;
-        }
+      render: function () {
+        var showTableControls = this.state.showPrioritizedFieldToggler;
 
         return (
-          <div className="footer-table-control">
-            <div className="footer-doc-control-prioritized-wrapper pull-left">
-              <label htmlFor="footer-doc-control-prioritized">
-                <input
-                  id="footer-doc-control-prioritized"
-                  checked={this.state.prioritizedEnabled}
-                  onChange={this.toggleTableViewType}
-                  type="checkbox">
-                </input>
-                Show all columns
-              </label>
+          <div className="footer-controls">
+
+            <div className="page-controls">
+              {showTableControls ?
+                <TableControls
+                  prioritizedEnabled={this.state.prioritizedEnabled}
+                  displayedFields={this.state.displayedFields} /> : null}
+            </div>
+
+            <PerPageSelector perPageChange={this.perPageChange} perPage={this.state.perPage}
/>
+            <div className="current-docs">
+              {this.getPageNumberText()}
             </div>
-            {this.getAmountShownFields()}
           </div>
         );
-      },
+      }
 
-      perPageChange: function (perPage) {
-        var collection = this.state.collection;
-        var bulkCollection = this.state.bulkCollection;
-        Actions.updatePerPage(perPage, collection, bulkCollection);
+    });
+
+    var TableControls = React.createClass({
+
+      propTypes: {
+        prioritizedEnabled: React.PropTypes.bool.isRequired,
+        displayedFields: React.PropTypes.object.isRequired,
       },
 
       getAmountShownFields: function () {
-        var fields = this.state.displayedFields;
-        if (!fields || this.state.prioritizedEnabled) {
-          return null;
+        var fields = this.props.displayedFields;
+
+        if (fields.shown === fields.allFieldCount) {
+          return (
+            <div className="pull-left shown-fields">
+              Showing {fields.shown} columns.
+            </div>
+          );
         }
 
         return (
-          <div className="pull-right">
+          <div className="pull-left shown-fields">
             Showing {fields.shown} of {fields.allFieldCount} columns.
           </div>
         );
       },
 
+      toggleTableViewType: function () {
+        Actions.toggleTableViewType();
+      },
 
       render: function () {
         return (
-          <div className="footer-controls">
-            <div className="page-controls">
-              {this.getTableControl()}
-            </div>
-
-            <PerPageSelector perPageChange={this.perPageChange} perPage={this.state.perPage}
/>
-            <div className="current-docs">
-              {this.getPageNumberText()}
+          <div className="footer-table-control">
+            {this.getAmountShownFields()}
+            <div className="footer-doc-control-prioritized-wrapper pull-left">
+              <label htmlFor="footer-doc-control-prioritized">
+                <input
+                  id="footer-doc-control-prioritized"
+                  checked={this.props.prioritizedEnabled}
+                  onChange={this.toggleTableViewType}
+                  type="checkbox">
+                </input>
+                Show all columns.
+              </label>
             </div>
           </div>
         );
       }
-
     });
 
     var Footer = React.createClass({
@@ -236,7 +250,8 @@ define([
     return {
       AllDocsNumber: AllDocsNumberController,
       PerPageSelector: PerPageSelector,
-      Footer: Footer
+      Footer: Footer,
+      TableControls: TableControls,
     };
 
   });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/4627fea6/app/addons/documents/pagination/tests/pagination.componentSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/pagination/tests/pagination.componentSpec.react.jsx b/app/addons/documents/pagination/tests/pagination.componentSpec.react.jsx
index 1b4f3c5..7c6c07e 100644
--- a/app/addons/documents/pagination/tests/pagination.componentSpec.react.jsx
+++ b/app/addons/documents/pagination/tests/pagination.componentSpec.react.jsx
@@ -13,8 +13,10 @@ define([
   'api',
   'addons/documents/pagination/pagination.react',
   'testUtils',
-  "react"
+  'react',
+
 ], function (FauxtonAPI, Views, utils, React) {
+
   FauxtonAPI.router = new FauxtonAPI.Router([]);
 
   var assert = utils.assert;
@@ -31,14 +33,13 @@ define([
         selectorEl = TestUtils.renderIntoDocument(
           <Views.PerPageSelector
             perPageChange={perPageChange}
-            perPage={10}
-          />,
+            perPage={10} />,
           container
         );
       });
 
       afterEach(function () {
-        React.unmountComponentAtNode(container);
+        React.unmountComponentAtNode(React.findDOMNode(selectorEl).parentNode);
       });
 
       it('on new select calls callback with new page size', function () {
@@ -52,7 +53,42 @@ define([
 
         assert.ok(perPageChange.calledWith(perPage));
       });
+    });
+
+    describe('TableControls', function () {
+      var container, selectorEl;
+
+      beforeEach(function () {
+        container = document.createElement('div');
+      });
+
+      afterEach(function () {
+        React.unmountComponentAtNode(React.findDOMNode(selectorEl).parentNode);
+      });
+
+      it('shows the amount of fields, none hidden', function () {
+
+        selectorEl = TestUtils.renderIntoDocument(
+          <Views.TableControls prioritizedEnabled={true} displayedFields={{shown: 7, allFieldCount:
7}} />,
+          container
+        );
+
+        var text = $(selectorEl.getDOMNode()).find('.shown-fields').text();
+
+        assert.equal('Showing 7 columns.', text);
+      });
+
+      it('shows the amount of fields, some hidden', function () {
 
+        selectorEl = TestUtils.renderIntoDocument(
+          <Views.TableControls prioritizedEnabled={true} displayedFields={{shown: 5, allFieldCount:
7}} />,
+          container
+        );
+
+        var text = $(selectorEl.getDOMNode()).find('.shown-fields').text();
+
+        assert.equal('Showing 5 of 7 columns.', text);
+      });
     });
   });
 });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/4627fea6/assets/less/fauxton.less
----------------------------------------------------------------------
diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less
index 3c534a5..9cad9a5 100644
--- a/assets/less/fauxton.less
+++ b/assets/less/fauxton.less
@@ -538,13 +538,9 @@ footer.pagination-footer {
     }
   }
 
-  .footer-doc-control-prioritized-wrapper {
-    margin-right: 18px;
-  }
-
   .page-controls {
     float: left;
-    margin: 17px 20px 17px 20px;
+
   }
 
   .current-docs {


Mime
View raw message