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 <[email protected]> Authored: Thu Mar 26 16:46:16 2015 +0200 Committer: Garren Smith <[email protected]> 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
