Repository: couchdb-fauxton Updated Branches: refs/heads/master 73bacedae -> a85eb42a1
extract components: header-toggle-button-component Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/b34a64eb Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/b34a64eb Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/b34a64eb Branch: refs/heads/master Commit: b34a64eb78167a95ba767125fb15a236404c87b7 Parents: 73baced Author: Robert Kowalski <[email protected]> Authored: Fri Feb 27 14:02:14 2015 +0100 Committer: Robert Kowalski <[email protected]> Committed: Fri Feb 27 17:49:56 2015 +0100 ---------------------------------------------------------------------- .gitignore | 1 + app/addons/components/README.md | 3 ++ .../components/assets/less/components.less | 3 ++ .../assets/less/header-togglebutton.less | 43 +++++++++++++++++ app/addons/components/base.js | 22 +++++++++ .../components/react-components.react.jsx | 50 ++++++++++++++++++++ .../tests/headerTogglebuttonSpec.react.jsx | 41 ++++++++++++++++ app/addons/documents/assets/less/header.less | 44 ----------------- app/addons/documents/header/header.react.jsx | 29 ++---------- app/addons/documents/tests/headerSpec.react.jsx | 19 -------- settings.json.default | 1 + 11 files changed, 168 insertions(+), 88 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b34a64eb/.gitignore ---------------------------------------------------------------------- diff --git a/.gitignore b/.gitignore index 7d5a71f..f6f8a2e 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,7 @@ app/load_addons.js app/addons/* !app/addons/activetasks !app/addons/config +!app/addons/components !app/addons/plugins !app/addons/replication !app/addons/auth http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b34a64eb/app/addons/components/README.md ---------------------------------------------------------------------- diff --git a/app/addons/components/README.md b/app/addons/components/README.md new file mode 100644 index 0000000..01bf4b5 --- /dev/null +++ b/app/addons/components/README.md @@ -0,0 +1,3 @@ +# Components + +small building blocks for Fauxton built using React http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b34a64eb/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 new file mode 100644 index 0000000..b85f5f7 --- /dev/null +++ b/app/addons/components/assets/less/components.less @@ -0,0 +1,3 @@ +@import "../../../../../assets/less/variables.less"; + +@import "header-togglebutton.less"; http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b34a64eb/app/addons/components/assets/less/header-togglebutton.less ---------------------------------------------------------------------- diff --git a/app/addons/components/assets/less/header-togglebutton.less b/app/addons/components/assets/less/header-togglebutton.less new file mode 100644 index 0000000..807a0ef --- /dev/null +++ b/app/addons/components/assets/less/header-togglebutton.less @@ -0,0 +1,43 @@ +.header-control-box { + color: #666; + font-size: 13px; + line-height: 33px; + padding: 12px 20px 12px 20px; + height: @collapsedNavWidth; + background-color: transparent; + border: none; + border-right: 1px solid @btnBorder; + text-decoration: none; + float: left; + .icon { + font-size: 20px; + } +} + +.header-control-box:hover { + .icon, span { + color: #e33f3b; + } +} + +button.header-control-box:focus { + outline: 0; +} + +.js-headerbar-togglebutton-selected { + .icon, span { + color: #e33f3b; + } +} + +.control-toggle-alternative-header { + .icon { + padding: 0px 8px 0px 0px; + } +} + +.header-control-square { + height: @collapsedNavWidth; + width: @collapsedNavWidth; + float: left; +} http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b34a64eb/app/addons/components/base.js ---------------------------------------------------------------------- diff --git a/app/addons/components/base.js b/app/addons/components/base.js new file mode 100644 index 0000000..4a4a892 --- /dev/null +++ b/app/addons/components/base.js @@ -0,0 +1,22 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may not +// use this file except in compliance with the License. You may obtain a copy of +// the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations under +// the License. + +define([ + +], + +function () { + var Components = {}; + Components.initialize = function () {}; + + return Components; +}); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b34a64eb/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 new file mode 100644 index 0000000..c783e94 --- /dev/null +++ b/app/addons/components/react-components.react.jsx @@ -0,0 +1,50 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may not +// use this file except in compliance with the License. You may obtain a copy of +// the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations under +// the License. + +define([ + 'app', + 'api', + + 'react', +], + +function (app, FauxtonAPI, React) { + + var ToggleHeaderButton = React.createClass({ + render: function () { + var iconClasses = 'icon ' + this.props.fonticon + ' ' + this.props.innerClasses, + containerClasses = 'button ' + this.props.containerClasses; + + if (this.props.setEnabledClass) { + containerClasses = containerClasses + ' js-headerbar-togglebutton-selected'; + } + + return ( + <button + title={this.props.title} + disabled={this.props.disabled} + onClick={this.props.toggleCallback} + className={containerClasses} + > + <i className={iconClasses}></i><span>{this.props.text}</span> + </button> + ); + } + }); + + var Components = { + ToggleHeaderButton: ToggleHeaderButton + }; + + return Components; + +}); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b34a64eb/app/addons/components/tests/headerTogglebuttonSpec.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/components/tests/headerTogglebuttonSpec.react.jsx b/app/addons/components/tests/headerTogglebuttonSpec.react.jsx new file mode 100644 index 0000000..14523f3 --- /dev/null +++ b/app/addons/components/tests/headerTogglebuttonSpec.react.jsx @@ -0,0 +1,41 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may not +// use this file except in compliance with the License. You may obtain a copy of +// the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations under +// the License. +define([ + 'api', + 'addons/components/react-components.react', + + 'testUtils', + 'react' +], function (FauxtonAPI, ReactComponents, utils, React) { + + var assert = utils.assert; + var TestUtils = React.addons.TestUtils; + + describe('Header Togglebutton', function () { + var container, toggleEl, toggleCallback; + beforeEach(function () { + container = document.createElement('div'); + toggleCallback = sinon.spy(); + toggleEl = TestUtils.renderIntoDocument(<ReactComponents.ToggleHeaderButton fonticon={'foo'} + classString={'bar'} toggleCallback={toggleCallback} />, container); + }); + + afterEach(function () { + React.unmountComponentAtNode(container); + }); + + it('should call the passed callback', function () { + TestUtils.Simulate.click(toggleEl.getDOMNode()); + assert.ok(toggleCallback.calledOnce); + }); + }); +}); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b34a64eb/app/addons/documents/assets/less/header.less ---------------------------------------------------------------------- diff --git a/app/addons/documents/assets/less/header.less b/app/addons/documents/assets/less/header.less index 9c3c15d..7675510 100644 --- a/app/addons/documents/assets/less/header.less +++ b/app/addons/documents/assets/less/header.less @@ -1,51 +1,7 @@ -.header-control-box { - color: #666; - font-size: 13px; - line-height: 33px; - padding: 12px 20px 12px 20px; - height: @collapsedNavWidth; - background-color: transparent; - border: none; - border-right: 1px solid @btnBorder; - text-decoration: none; - float: left; - .icon { - font-size: 20px; - } -} - -.header-control-box:hover { - .icon, span { - color: #e33f3b; - } -} - -button.header-control-box:focus { - outline: 0; -} - -.js-headerbar-togglebutton-selected { - .icon, span { - color: #e33f3b; - } -} - -.control-toggle-alternative-header { - .icon { - padding: 0px 8px 0px 0px; - } -} - .control-cancel { border-right: none; } -.header-control-square { - height: @collapsedNavWidth; - width: @collapsedNavWidth; - float: left; -} - .alternative-header { float: left; } http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b34a64eb/app/addons/documents/header/header.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/documents/header/header.react.jsx b/app/addons/documents/header/header.react.jsx index faf46bc..efdf75f 100644 --- a/app/addons/documents/header/header.react.jsx +++ b/app/addons/documents/header/header.react.jsx @@ -15,36 +15,15 @@ define([ 'api', 'react', 'addons/documents/header/header.stores', - 'addons/documents/header/header.actions' + 'addons/documents/header/header.actions', + 'addons/components/react-components.react', ], -function (app, FauxtonAPI, React, Stores, Actions) { +function (app, FauxtonAPI, React, Stores, Actions, ReactComponents) { var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; var headerBarStore = Stores.headerBarStore; var bulkDocumentHeaderStore = Stores.bulkDocumentHeaderStore; - - // this will be a global component - var ToggleHeaderButton = React.createClass({ - render: function () { - var iconClasses = 'icon ' + this.props.fonticon + ' ' + this.props.innerClasses, - containerClasses = 'button ' + this.props.containerClasses; - - if (this.props.setEnabledClass) { - containerClasses = containerClasses + ' js-headerbar-togglebutton-selected'; - } - - return ( - <button - title={this.props.title} - disabled={this.props.disabled} - onClick={this.props.toggleCallback} - className={containerClasses} - > - <i className={iconClasses}></i><span>{this.props.text}</span> - </button> - ); - } - }); + var ToggleHeaderButton = ReactComponents.ToggleHeaderButton; var BulkDocumentHeaderController = React.createClass({ getStoreState: function () { http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b34a64eb/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 83edada..052bc9c 100644 --- a/app/addons/documents/tests/headerSpec.react.jsx +++ b/app/addons/documents/tests/headerSpec.react.jsx @@ -28,25 +28,6 @@ define([ var assert = utils.assert; var TestUtils = React.addons.TestUtils; - describe('Header Togglebutton', function () { - var container, toggleEl, toggleCallback; - beforeEach(function () { - container = document.createElement('div'); - toggleCallback = sinon.spy(); - toggleEl = TestUtils.renderIntoDocument(<Views.ToggleHeaderButton fonticon={'foo'} - classString={'bar'} toggleCallback={toggleCallback} />, container); - }); - - afterEach(function () { - React.unmountComponentAtNode(container); - }); - - it('should call the passed callback', function () { - TestUtils.Simulate.click(toggleEl.getDOMNode()); - assert.ok(toggleCallback.calledOnce); - }); - }); - describe('Header Controller', function () { var container, toggleEl; beforeEach(function () { http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b34a64eb/settings.json.default ---------------------------------------------------------------------- diff --git a/settings.json.default b/settings.json.default index 35ed88e..775dfb9 100644 --- a/settings.json.default +++ b/settings.json.default @@ -1,6 +1,7 @@ { "deps": [ { "name": "fauxton" }, + { "name": "components" }, { "name": "databases" }, { "name": "documents" }, { "name": "activetasks" },
