create common tablelement create a tab component for all future tabs
PR: #714 PR-URL: https://github.com/apache/couchdb-fauxton/pull/714 Reviewed-By: garren smith <garren.sm...@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/58a1ac7e Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/58a1ac7e Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/58a1ac7e Branch: refs/heads/master Commit: 58a1ac7eeda5bccb961083a349ade2136d61a911 Parents: 9ac2d75 Author: Robert Kowalski <robertkowal...@apache.org> Authored: Mon May 23 17:10:42 2016 +0200 Committer: Robert Kowalski <robertkowal...@apache.org> Committed: Tue May 24 19:45:27 2016 +0200 ---------------------------------------------------------------------- .../activetasks/assets/less/activetasks.less | 32 +--------- app/addons/activetasks/components.react.jsx | 37 +++++------- .../tests/activetasks.componentsSpec.react.jsx | 22 +++---- .../components/assets/less/components.less | 1 + .../components/assets/less/tab-element.less | 61 ++++++++++++++++++++ .../components/react-components.react.jsx | 36 +++++++++++- 6 files changed, 126 insertions(+), 63 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/58a1ac7e/app/addons/activetasks/assets/less/activetasks.less ---------------------------------------------------------------------- diff --git a/app/addons/activetasks/assets/less/activetasks.less b/app/addons/activetasks/assets/less/activetasks.less index 8ae0199..a7620a2 100644 --- a/app/addons/activetasks/assets/less/activetasks.less +++ b/app/addons/activetasks/assets/less/activetasks.less @@ -98,43 +98,17 @@ min-width: 770px; input { - display:none; - } - - li { - background-color: #eee; - margin-top: 25px; - margin-left: 3px; - - &.active-tasks-checked { - background-color: @linkColorHover; - - label { - color: #fff; - } - }; - - &:hover { - color: @linkColorHover; - }; - - label { - height: 35px; - width: 100%; - line-height: 35px; - text-align: center; - .noselect() - } + display: none; } #active-tasks-search-box { display: inline; font-size: 14px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; - height: 36px; + height: 51px; background-color: #eee; width: 200px; - margin: 0px; + margin: 9px 0 0 0; &:focus { background-color: #fff; http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/58a1ac7e/app/addons/activetasks/components.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/activetasks/components.react.jsx b/app/addons/activetasks/components.react.jsx index 4809655..d352175 100644 --- a/app/addons/activetasks/components.react.jsx +++ b/app/addons/activetasks/components.react.jsx @@ -18,12 +18,17 @@ define([ './stores', './resources', './actions', + '../components/react-components.react', '../fauxton/components.react', 'react-addons-css-transition-group' -], function (app, FauxtonAPI, React, ReactDOM, Stores, Resources, Actions, Components, ComponentsReact, ReactCSSTransitionGroup) { +], (app, FauxtonAPI, React, ReactDOM, Stores, Resources, Actions, + Components, ComponentsReact, ReactCSSTransitionGroup) => { + + const TabElement = Components.TabElement; var activeTasksStore = Stores.activeTasksStore; + var ActiveTasksController = React.createClass({ getStoreState: function () { @@ -125,31 +130,17 @@ define([ createFilterTabs: function () { return ( - this.props.radioNames.map(function (radioName) { - var checked = this.checked(radioName); - var id = radioName.replace(' ', '-'); - var radioClassName = "radio-" + id; - var radioClick = this.onRadioClick; - var checkedClassName = checked ? 'active-tasks-checked' : ''; + this.props.radioNames.map((radioName, i) => { + const checked = this.checked(radioName); return ( - <li className={"active-tasks-one-checkbox " + checkedClassName} key={radioName + "li"}> - <input - className="toggle-filter-tab" - data-bypass="true" - id={id} - type="radio" - key ={radioName} - name="radio-button-active-task-filter-tray" - value={radioName} - checked={checked} - onChange={radioClick} /> - <label htmlFor={id} className="active-tasks-checkbox-label"> - {radioName} - </label> - </li> + <TabElement + key={i} + selected={checked} + text={radioName} + onChange={this.onRadioClick} /> ); - }.bind(this)) + }) ); }, http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/58a1ac7e/app/addons/activetasks/tests/activetasks.componentsSpec.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/activetasks/tests/activetasks.componentsSpec.react.jsx b/app/addons/activetasks/tests/activetasks.componentsSpec.react.jsx index 65189d7..4029e48 100644 --- a/app/addons/activetasks/tests/activetasks.componentsSpec.react.jsx +++ b/app/addons/activetasks/tests/activetasks.componentsSpec.react.jsx @@ -62,10 +62,6 @@ define([ tableDiv = document.createElement('div'); activeTasksStore.initAfterFetching(activeTasksCollection.table, activeTasksCollection); table = TestUtils.renderIntoDocument(<Components.ActiveTasksController />, tableDiv); - - // open filter tray - //filterTab = TestUtils.findRenderedDOMComponentWithClass(table, 'toggle-filter-tab'); - //TestUtils.Simulate.click(filterTab); }); afterEach(function () { @@ -80,18 +76,24 @@ define([ restore(Actions.setSearchTerm); }); - var radioIDs = [ + const radioTexts = [ 'Replication', - 'Database-Compaction', + 'Database Compaction', 'Indexer', - 'View-Compaction' + 'View Compaction' ]; - it('should trigger change to radio buttons', function () { - _.each(radioIDs, function (radioID) { + it('should trigger change to radio buttons', () => { + + radioTexts.forEach((text) => { spy = sinon.spy(Actions, 'switchTab'); - TestUtils.Simulate.change($(ReactDOM.findDOMNode(table)).find('#' + radioID)[0]); + + const $table = $(ReactDOM.findDOMNode(table)); + const element = $table.find(`input[value="${text}"]`)[0]; + + TestUtils.Simulate.change(element); assert.ok(spy.calledOnce); + spy.restore(); }); }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/58a1ac7e/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 fa4fc01..1cfb2ae 100644 --- a/app/addons/components/assets/less/components.less +++ b/app/addons/components/assets/less/components.less @@ -20,3 +20,4 @@ @import "bulk-selector.less"; @import "badges.less"; @import "modals.less"; +@import "tab-element.less"; http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/58a1ac7e/app/addons/components/assets/less/tab-element.less ---------------------------------------------------------------------- diff --git a/app/addons/components/assets/less/tab-element.less b/app/addons/components/assets/less/tab-element.less new file mode 100644 index 0000000..c6413e5 --- /dev/null +++ b/app/addons/components/assets/less/tab-element.less @@ -0,0 +1,61 @@ +// 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. + +@import "../../../../../assets/less/mixins.less"; + + +.component-tab-element { + background-color: #eee; + margin-top: 10px; + line-height: 40px; + + label { + margin-right: 0; + line-height: 25px; + .noselect() + } + + .tab-element-content { + padding: 8px 12px 12px 12px; + + } + + .tab-element-indicator-wrapper { + height: 5px; + } + + .tab-element-indicator { + height: 0px; + transition: all .25s linear; + } + + &.tab-element-checked .tab-element-indicator { + height: 5px; + background-color: @linkColorHover; + }; + + &.tab-element-checked { + background-color: #fff; + } + + transition: all .25s linear; + + &:hover { + background-color: #fff; + color: @linkColorHover; + }; + + &:hover .tab-element-indicator { + height: 5px; + background-color: @linkColorHover; + }; +} http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/58a1ac7e/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 7ec7f8a..e9cc587 100644 --- a/app/addons/components/react-components.react.jsx +++ b/app/addons/components/react-components.react.jsx @@ -1557,6 +1557,39 @@ define([ } }); + const TabElement = ({selected, text, onChange, iconClass}) => { + + const additionalClass = selected ? 'tab-element-checked' : ''; + + return ( + <li className={`component-tab-element ${additionalClass}`}> + + <label> + <div className="tab-element-indicator-wrapper"> + <div className="tab-element-indicator"></div> + </div> + <div className="tab-element-content"> + <i className={iconClass}></i> + <input + type="radio" + value={text} + checked={selected} + onChange={onChange} /> + + {text} + </div> + </label> + </li> + + ); + }; + TabElement.propTypes = { + selected: React.PropTypes.bool.isRequired, + text: React.PropTypes.string.isRequired, + onChange: React.PropTypes.func.isRequired, + iconClass: React.PropTypes.string, + }; + return { BadgeList: BadgeList, Badge: Badge, @@ -1583,7 +1616,8 @@ define([ removeMenuDropDown: function (el) { ReactDOM.unmountComponentAtNode(el); }, - DeleteDatabaseModal: DeleteDatabaseModal + DeleteDatabaseModal: DeleteDatabaseModal, + TabElement: TabElement }; });
