Repository: couchdb-fauxton Updated Branches: refs/heads/master be342c77a -> 96d31bc7d
introduce a document component supports: - checking / unchecking via checkbox - double click callbacks - optional nesting of html fragments for edit links, usage: ```html <ReactComponents.Document> <a href="#editDoc"></a> </ReactComponents.Document> ``` Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/2bc72f24 Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/2bc72f24 Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/2bc72f24 Branch: refs/heads/master Commit: 2bc72f240038043562b93fc45b59305655a20def Parents: be342c7 Author: Robert Kowalski <[email protected]> Authored: Fri Mar 6 13:41:20 2015 +0100 Committer: Garren Smith <[email protected]> Committed: Thu Mar 26 11:14:14 2015 +0200 ---------------------------------------------------------------------- .../components/assets/less/components.less | 2 +- app/addons/components/assets/less/docs.less | 101 +++++++++++++++++++ .../assets/less/header-togglebutton.less | 1 + .../components/react-components.react.jsx | 64 +++++++++++- app/addons/components/tests/docSpec.react.jsx | 92 +++++++++++++++++ app/addons/documents/assets/less/documents.less | 87 ---------------- 6 files changed, 258 insertions(+), 89 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/2bc72f24/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 be88e1c..a89f74d 100644 --- a/app/addons/components/assets/less/components.less +++ b/app/addons/components/assets/less/components.less @@ -14,4 +14,4 @@ @import "header-togglebutton.less"; @import "styled-select.less"; - +@import "docs.less"; http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/2bc72f24/app/addons/components/assets/less/docs.less ---------------------------------------------------------------------- diff --git a/app/addons/components/assets/less/docs.less b/app/addons/components/assets/less/docs.less new file mode 100644 index 0000000..97957c2 --- /dev/null +++ b/app/addons/components/assets/less/docs.less @@ -0,0 +1,101 @@ +// 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/variables.less"; +@import "../../../../../assets/less/bootstrap/mixins.less"; + +#doc-list { + .custom-inputs { + display: none; + } + padding: 30px 12px 0 12px; + div.doc-row { + margin-bottom: 20px; + .doc-item { + vertical-align: top; + position: relative; + .box-shadow(3px 4px 0 rgba(0, 0, 0, 0.3)); + .doc-data { + border-bottom: 1px solid @docHeaderBorderBottom; + border-left: 1px solid @docHeaderOtherBorders; + border-right: 1px solid @docHeaderOtherBorders; + } + header { + font-weight: bold; + position: relative; + padding: 20px; + background-color: @docHeaderBG; + border-bottom: 1px solid @docHeaderBorderBottom; + border-left: 1px solid @docHeaderOtherBorders; + border-right: 1px solid @docHeaderOtherBorders; + border-top: 1px solid @docHeaderOtherBorders; + .header-doc-id { + color: @docHeaderDocId; + margin-left: 10px; + } + .header-keylabel, + .fonticon-pencil { + color: @docHeaderLabels; + } + .doc-edit-symbol { + top: -3px; + position: relative; + } + .fonticon-pencil { + font-size: 20px; + } + .fonticon-pencil:hover { + color: @docHeaderDocId; + } + } + } + } +} + +.show-select { + #doc-list { + padding: 30px 0 30px 0; + .custom-inputs { + display: block; + float: left; + } + } + .checkbox.inline { + padding-top: 32px; + padding-left: 0; + label { + padding-left: 23px; // 7px to the right-border + 16px around + } + } + .doc-item { + width: auto; + overflow: hidden; + } + label.label-checkbox-doclist { + // https://code.google.com/p/chromium/issues/detail?id=411065 + -webkit-user-select: none; + height: 1px; + width: 1px; + } + /* checkboxes in doc-list */ + input[type="checkbox"] + label:before { + background-color: @docCheckBoxUncheckedBG; + border: @docCheckBoxUncheckedBorder; + } + input[type="checkbox"] + label:hover:before { + border: @docCheckBoxHoverBorder; + } + input[type="checkbox"]:checked + label::before { + border: @docCheckBoxCheckedBorder; + background-color: @docCheckBoxCheckedBG; + } +} http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/2bc72f24/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 index 02964c4..199a652 100644 --- a/app/addons/components/assets/less/header-togglebutton.less +++ b/app/addons/components/assets/less/header-togglebutton.less @@ -9,6 +9,7 @@ // 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/variables.less"; .header-control-box { color: #666; http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/2bc72f24/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 b09ecce..b5727f9 100644 --- a/app/addons/components/react-components.react.jsx +++ b/app/addons/components/react-components.react.jsx @@ -188,12 +188,74 @@ function (app, FauxtonAPI, React, Components, beautifyHelper) { } }); + var Document = React.createClass({ + + propTypes: { + docIdentifier: React.PropTypes.string.isRequired + }, + + getUrlFragment: function () { + if (!this.props.children) { + return ''; + } + + return ( + <div className="doc-edit-symbol pull-right"> + {this.props.children} + </div> + ); + }, + + getCheckbox: function () { + return ( + <div className="checkbox inline"> + <input + id={'checkbox-' + this.props.docIdentifier} + checked={this.props.checked ? 'checked="checked"': null} + type="checkbox" + onChange={this.props.onChange} + className="js-row-select" /> + <label + className="label-checkbox-doclist" + htmlFor={'checkbox-' + this.props.docIdentifier} /> + </div> + ); + }, + + + render: function () { + return ( + <div onDoubleClick={this.props.onDoubleClick} className="doc-row"> + <div className="custom-inputs"> + {this.getCheckbox()} + </div> + <div className="doc-item"> + <header> + <span className="header-keylabel"> + {this.props.keylabel} + </span> + <span className="header-doc-id"> + "{this.props.docIdentifier}" + </span> + {this.getUrlFragment()} + </header> + <div className="doc-data"> + <pre className="prettyprint">{this.props.docContent}</pre> + </div> + </div> + <div className="clearfix"></div> + </div> + ); + } + }); + var ReactComponents = { ToggleHeaderButton: ToggleHeaderButton, StyledSelect: StyledSelect, CodeEditor: CodeEditor, Beautify: Beautify, - PaddedBorderedBox: PaddedBorderedBox + PaddedBorderedBox: PaddedBorderedBox, + Document: Document }; return ReactComponents; http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/2bc72f24/app/addons/components/tests/docSpec.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/components/tests/docSpec.react.jsx b/app/addons/components/tests/docSpec.react.jsx new file mode 100644 index 0000000..ce3a94c --- /dev/null +++ b/app/addons/components/tests/docSpec.react.jsx @@ -0,0 +1,92 @@ +// 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('Document', function () { + var container, el; + + beforeEach(function () { + container = document.createElement('div'); + }); + + afterEach(function () { + React.unmountComponentAtNode(container); + }); + + it('hosts child elements', function () { + el = TestUtils.renderIntoDocument( + <ReactComponents.Document> + <div className="foo-children"></div> + </ReactComponents.Document>, + container + ); + assert.ok($(el.getDOMNode()).find('.foo-children').length); + }); + + it('does not require child elements', function () { + el = TestUtils.renderIntoDocument( + <ReactComponents.Document />, + container + ); + assert.notOk($(el.getDOMNode()).find('.doc-edit-symbol').length); + }); + + it('you can check it', function () { + el = TestUtils.renderIntoDocument( + <ReactComponents.Document checked={true} docIdentifier="foo" />, + container + ); + assert.equal($(el.getDOMNode()).find('#checkbox-foo').attr('checked'), 'checked'); + }); + + it('you can uncheck it', function () { + el = TestUtils.renderIntoDocument( + <ReactComponents.Document docIdentifier="foo" />, + container + ); + assert.equal($(el.getDOMNode()).find('#checkbox-foo').attr('checked'), undefined); + }); + + it('it calls an onchange callback', function () { + var spy = sinon.spy(); + + el = TestUtils.renderIntoDocument( + <ReactComponents.Document onChange={spy} docIdentifier="foo" />, + container + ); + var testEl = $(el.getDOMNode()).find('#checkbox-foo')[0]; + React.addons.TestUtils.Simulate.change(testEl, {target: {value: 'Hello, world'}}); + assert.ok(spy.calledOnce); + }); + + it('it calls an dblclick callback', function () { + var spy = sinon.spy(); + + el = TestUtils.renderIntoDocument( + <ReactComponents.Document onDoubleClick={spy} docIdentifier="foo" />, + container + ); + React.addons.TestUtils.Simulate.doubleClick(el.getDOMNode()); + assert.ok(spy.calledOnce); + }); + }); + +}); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/2bc72f24/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 899e9e9..4d0725d 100644 --- a/app/addons/documents/assets/less/documents.less +++ b/app/addons/documents/assets/less/documents.less @@ -154,93 +154,6 @@ button.string-edit[disabled] { } } -.show-select { - #doc-list { - padding: 30px 0 30px 0; - .custom-inputs { - display: block; - float: left; - } - } - .checkbox.inline { - padding-top: 32px; - padding-left: 0; - label { - padding-left: 23px; // 7px to the right-border + 16px around - } - } - .doc-item { - width: auto; - overflow: hidden; - } - label.label-checkbox-doclist { - // https://code.google.com/p/chromium/issues/detail?id=411065 - -webkit-user-select: none; - height: 1px; - width: 1px; - } - /* checkboxes in doc-list */ - input[type="checkbox"] + label:before { - background-color: @docCheckBoxUncheckedBG; - border: @docCheckBoxUncheckedBorder; - } - input[type="checkbox"] + label:hover:before { - border: @docCheckBoxHoverBorder; - } - input[type="checkbox"]:checked + label::before { - border: @docCheckBoxCheckedBorder; - background-color: @docCheckBoxCheckedBG; - } -} - -#doc-list { - .custom-inputs { - display: none; - } - padding: 30px 12px 0 12px; - div.doc-row { - margin-bottom: 20px; - .doc-item { - vertical-align: top; - position: relative; - .box-shadow(3px 4px 0 rgba(0, 0, 0, 0.3)); - .doc-data { - border-bottom: 1px solid @docHeaderBorderBottom; - border-left: 1px solid @docHeaderOtherBorders; - border-right: 1px solid @docHeaderOtherBorders; - } - header { - font-weight: bold; - position: relative; - padding: 20px; - background-color: @docHeaderBG; - border-bottom: 1px solid @docHeaderBorderBottom; - border-left: 1px solid @docHeaderOtherBorders; - border-right: 1px solid @docHeaderOtherBorders; - border-top: 1px solid @docHeaderOtherBorders; - .header-doc-id { - color: @docHeaderDocId; - margin-left: 10px; - } - .header-keylabel, - .fonticon-pencil { - color: @docHeaderLabels; - } - .doc-edit-symbol { - top: -3px; - position: relative; - } - .fonticon-pencil { - font-size: 20px; - } - .fonticon-pencil:hover { - color: @docHeaderDocId; - } - } - } - } -} - #react-headerbar { float: left; }
