couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From gar...@apache.org
Subject fauxton commit: updated refs/heads/master to 5306f98
Date Mon, 30 Mar 2015 11:46:20 GMT
Repository: couchdb-fauxton
Updated Branches:
  refs/heads/master 592638a10 -> 5306f98d3


Loading component

At a small loading component that gets displayed when data is being
fetched.


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

Branch: refs/heads/master
Commit: 5306f98d3abc19b8149721dfb53db889be42a1d9
Parents: 592638a
Author: Garren Smith <garren.smith@gmail.com>
Authored: Thu Mar 26 16:46:16 2015 +0200
Committer: Garren Smith <garren.smith@gmail.com>
Committed: Mon Mar 30 13:46:02 2015 +0200

----------------------------------------------------------------------
 .../components/assets/less/components.less      |  1 +
 .../components/assets/less/loading-lines.less   | 68 ++++++++++++++++++++
 .../components/react-components.react.jsx       | 20 +++++-
 app/addons/documents/index-results/actions.js   |  1 +
 .../index-results.components.react.jsx          | 15 ++++-
 app/addons/documents/index-results/stores.js    | 10 ++-
 .../index-results.componentsSpec.react.jsx      | 29 +++++++++
 app/addons/documents/pagination/actions.js      |  4 ++
 app/addons/documents/tests/headerSpec.react.jsx |  3 +
 9 files changed, 145 insertions(+), 6 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5306f98d/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 a89f74d..51f19c7 100644
--- a/app/addons/components/assets/less/components.less
+++ b/app/addons/components/assets/less/components.less
@@ -15,3 +15,4 @@
 @import "header-togglebutton.less";
 @import "styled-select.less";
 @import "docs.less";
+@import "loading-lines.less";

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5306f98d/app/addons/components/assets/less/loading-lines.less
----------------------------------------------------------------------
diff --git a/app/addons/components/assets/less/loading-lines.less b/app/addons/components/assets/less/loading-lines.less
new file mode 100644
index 0000000..7d3ab49
--- /dev/null
+++ b/app/addons/components/assets/less/loading-lines.less
@@ -0,0 +1,68 @@
+@import "../../../../../assets/less/variables.less";
+
+
+@loadingLinesHeight: 30px;
+@loadingLinesMargin: 3px;
+@loadingLinesWidth: 10px;
+@loadingLinesTime: 0.8s;
+@loadingLinesEffect: linear;
+@loadingLinesColor: @red;
+
+.loading-lines {
+  display: block;
+  width: 50px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#line1 {
+  background-color: @loadingLinesColor;
+  width: @loadingLinesWidth;
+  -webkit-animation: height-change @loadingLinesTime infinite @loadingLinesEffect;
+   float: left;
+  height: 1px;
+}
+
+#line2 {
+  background-color: @loadingLinesColor;
+  width: @loadingLinesWidth;
+  -webkit-animation: height-change @loadingLinesTime infinite @loadingLinesEffect;
+  -webkit-animation-delay: 0.1s;
+  float:left;
+  margin-left: @loadingLinesMargin;
+  height: 1px;
+
+}
+
+#line3 {
+  background-color: @loadingLinesColor;
+  width: @loadingLinesWidth;
+  -webkit-animation: height-change @loadingLinesTime infinite @loadingLinesEffect;
+  -webkit-animation-delay: 0.2s;
+  float:left;
+  margin-left: @loadingLinesMargin;
+  height: 1px;
+
+}
+
+#line4 {
+  background-color: @loadingLinesColor;
+  width: @loadingLinesWidth;
+  -webkit-animation: height-change @loadingLinesTime infinite @loadingLinesEffect;
+  -webkit-animation-delay: 0.3s;
+  float: left;
+  margin-left: @loadingLinesMargin;
+  height:1px;
+}
+
+@-webkit-keyframes height-change {
+  0% {
+    height:1px;
+  }
+  50% {
+    height: @loadingLinesHeight;
+  }
+  100% {
+    height: 1px;
+  }
+}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5306f98d/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 4cb479a..91d04cd 100644
--- a/app/addons/components/react-components.react.jsx
+++ b/app/addons/components/react-components.react.jsx
@@ -258,6 +258,23 @@ function (app, FauxtonAPI, React, Components, beautifyHelper) {
     }
   });
 
+  var LoadLines = React.createClass({
+
+    render: function () {
+
+      return (
+        <div className="loading-lines">
+          <div id="line1"> </div>
+          <div id="line2"> </div>
+          <div id="line3"> </div>
+          <div id="line4"> </div>
+        </div>
+      );
+    }
+
+  });
+
+
   var ConfirmButton = React.createClass({
     render: function () {
       return (
@@ -277,7 +294,8 @@ function (app, FauxtonAPI, React, Components, beautifyHelper) {
     CodeEditor: CodeEditor,
     Beautify: Beautify,
     PaddedBorderedBox: PaddedBorderedBox,
-    Document: Document
+    Document: Document,
+    LoadLines: LoadLines
   };
 
   return ReactComponents;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5306f98d/app/addons/documents/index-results/actions.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/index-results/actions.js b/app/addons/documents/index-results/actions.js
index 3e882eb..88d57bf 100644
--- a/app/addons/documents/index-results/actions.js
+++ b/app/addons/documents/index-results/actions.js
@@ -45,6 +45,7 @@ function (app, FauxtonAPI, ActionTypes, Stores, HeaderStores, HeaderActions,
Doc
       });
 
       if (!options.collection.fetch) { return; }
+      this.clearResults();
 
       return options.collection.fetch({reset: true}).then(function () {
         this.resultsListReset();

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5306f98d/app/addons/documents/index-results/index-results.components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/index-results/index-results.components.react.jsx b/app/addons/documents/index-results/index-results.components.react.jsx
index 92fc018..61d1955 100644
--- a/app/addons/documents/index-results/index-results.components.react.jsx
+++ b/app/addons/documents/index-results/index-results.components.react.jsx
@@ -47,7 +47,6 @@ function (app, FauxtonAPI, React, Stores, Actions, Components, Documents)
{
         return null;
       }
 
-
       return (
         <a href={url}>
           <i className="fonticon-pencil"></i>
@@ -74,6 +73,11 @@ function (app, FauxtonAPI, React, Stores, Actions, Components, Documents)
{
 
     render: function () {
       var classNames = 'view';
+      var loadLines = null;
+
+      if (this.props.isLoading) {
+        loadLines = <Components.LoadLines />;
+      }
 
       if (this.props.isDeleteable) {
         classNames += ' show-select';
@@ -81,6 +85,8 @@ function (app, FauxtonAPI, React, Stores, Actions, Components, Documents)
{
 
       return (
       <div className={classNames}>
+        {loadLines}
+
         <div id="doc-list">
           <ReactCSSTransitionGroup transitionName={'slow-fade'}>
             {this.getDocumentList()}
@@ -107,7 +113,8 @@ function (app, FauxtonAPI, React, Stores, Actions, Components, Documents)
{
         results: store.getResults(),
         isDeleteable: store.isDeleteable(),
         isSelected: store.isSelected,
-        hasReduce: store.hasReduce()
+        hasReduce: store.hasReduce(),
+        isLoading: store.isLoading()
       };
     },
 
@@ -145,6 +152,7 @@ function (app, FauxtonAPI, React, Stores, Actions, Components, Documents)
{
           hasReduce={this.state.hasReduce}
           isDeleteable={this.state.isDeleteable}
           docChecked={this.docChecked}
+          isLoading={this.state.isLoading}
           results={this.state.results} />;
       }
 
@@ -161,7 +169,8 @@ function (app, FauxtonAPI, React, Stores, Actions, Components, Documents)
{
     removeViewResultList: function (el) {
       React.unmountComponentAtNode(el);
     },
-    List: ViewResultListController
+    List: ViewResultListController,
+    ResultsScreen: ResultsScreen
   };
 
   return Views;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5306f98d/app/addons/documents/index-results/stores.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/index-results/stores.js b/app/addons/documents/index-results/stores.js
index 1f2382d..605ee6f 100644
--- a/app/addons/documents/index-results/stores.js
+++ b/app/addons/documents/index-results/stores.js
@@ -98,10 +98,14 @@ function (FauxtonAPI, ActionTypes, HeaderActionTypes, Documents) {
     },
 
     hasResults: function () {
-      if (this._isLoading) { return this._isLoading; }
+      if (this.isLoading()) { return this.isLoading(); }
       return this._collection.length > 0;
     },
 
+    isLoading: function () {
+      return this._isLoading;
+    },
+
     isDeleteable: function () {
       return this._deleteable;
     },
@@ -207,7 +211,9 @@ function (FauxtonAPI, ActionTypes, HeaderActionTypes, Documents) {
     },
 
     clearResultsBeforeFetch: function () {
-      this.getCollection().reset();
+      if (this._collection && this._collection.reset) {
+        this._collection.reset();
+      }
       this._isLoading = true;
     },
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5306f98d/app/addons/documents/index-results/tests/index-results.componentsSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/index-results/tests/index-results.componentsSpec.react.jsx
b/app/addons/documents/index-results/tests/index-results.componentsSpec.react.jsx
index 4502921..8d22f2c 100644
--- a/app/addons/documents/index-results/tests/index-results.componentsSpec.react.jsx
+++ b/app/addons/documents/index-results/tests/index-results.componentsSpec.react.jsx
@@ -23,9 +23,38 @@ define([
   describe('Index Results', function () {
     var container;
 
+    beforeEach(function () {
+      container = document.createElement('div');
+
+    });
+
     afterEach(function () {
       React.unmountComponentAtNode(container);
     });
 
+    describe('loading', function () {
+
+      it('should show loading component', function () {
+        var resultsEl = TestUtils.renderIntoDocument(<Views.ResultsScreen
+          isLoading={true}
+          />, container);
+
+        var $el = $(resultsEl.getDOMNode());
+
+        assert.ok($el.find('.loading-lines').length === 1);
+      });
+
+      it('should not show loading component', function () {
+        var resultsEl = TestUtils.renderIntoDocument(<Views.ResultsScreen
+          isLoading={false}
+          />, container);
+
+        var $el = $(resultsEl.getDOMNode());
+
+        assert.ok($el.find('.loading-lines').length === 0);
+      });
+
+    });
+
   });
 });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5306f98d/app/addons/documents/pagination/actions.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/pagination/actions.js b/app/addons/documents/pagination/actions.js
index 5705d90..cb4248a 100644
--- a/app/addons/documents/pagination/actions.js
+++ b/app/addons/documents/pagination/actions.js
@@ -47,6 +47,8 @@ function (app, FauxtonAPI, ActionTypes, Stores, IndexResultsActions) {
         type: ActionTypes.PAGINATE_NEXT,
       });
 
+      IndexResultsActions.clearResults();
+
       store.getCollection().next().then(function () {
         IndexResultsActions.resultsListReset();
       });
@@ -57,6 +59,8 @@ function (app, FauxtonAPI, ActionTypes, Stores, IndexResultsActions) {
         type: ActionTypes.PAGINATE_PREVIOUS,
       });
 
+      IndexResultsActions.clearResults();
+
       store.getCollection().previous().then(function () {
         IndexResultsActions.resultsListReset();
       });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5306f98d/app/addons/documents/tests/headerSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/tests/headerSpec.react.jsx b/app/addons/documents/tests/headerSpec.react.jsx
index 75769a0..33528c5 100644
--- a/app/addons/documents/tests/headerSpec.react.jsx
+++ b/app/addons/documents/tests/headerSpec.react.jsx
@@ -78,6 +78,9 @@ define([
         params: {}
       });
 
+      //override reset so we don't loose the added doc needed for testing
+      database.allDocs.reset = function () {};
+
       IndexResultsActions.newResultsList({
         collection: database.allDocs,
         deleteable: false


Mime
View raw message