Repository: couchdb-fauxton Updated Branches: refs/heads/master 4cb022619 -> ea3089ca7
introduce padded-bordered-box-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/ea3089ca Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/ea3089ca Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/ea3089ca Branch: refs/heads/master Commit: ea3089ca7a981b63936370229664273f9dc1451b Parents: 4cb0226 Author: Robert Kowalski <[email protected]> Authored: Wed Mar 4 20:40:29 2015 +0100 Committer: Robert Kowalski <[email protected]> Committed: Fri Mar 6 12:26:03 2015 +0100 ---------------------------------------------------------------------- .../components/react-components.react.jsx | 15 ++- .../documents/index-editor/components.react.jsx | 123 +++++++++---------- 2 files changed, 70 insertions(+), 68 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/ea3089ca/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 7645c17..b09ecce 100644 --- a/app/addons/components/react-components.react.jsx +++ b/app/addons/components/react-components.react.jsx @@ -176,11 +176,24 @@ function (app, FauxtonAPI, React, Components, beautifyHelper) { } }); + var PaddedBorderedBox = React.createClass({ + render: function () { + return ( + <div className="bordered-box"> + <div className="padded-box"> + {this.props.children} + </div> + </div> + ); + } + }); + var ReactComponents = { ToggleHeaderButton: ToggleHeaderButton, StyledSelect: StyledSelect, CodeEditor: CodeEditor, - Beautify: Beautify + Beautify: Beautify, + PaddedBorderedBox: PaddedBorderedBox }; return ReactComponents; http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/ea3089ca/app/addons/documents/index-editor/components.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/documents/index-editor/components.react.jsx b/app/addons/documents/index-editor/components.react.jsx index c705c20..a7c1fcb 100644 --- a/app/addons/documents/index-editor/components.react.jsx +++ b/app/addons/documents/index-editor/components.react.jsx @@ -26,6 +26,7 @@ function (app, FauxtonAPI, React, Stores, Actions, Components, ReactComponents, var getDocUrl = app.helpers.getDocUrl; var StyledSelect = ReactComponents.StyledSelect; var CodeEditor = ReactComponents.CodeEditor; + var PaddedBorderedBox = ReactComponents.PaddedBorderedBox; var DesignDocSelector = React.createClass({ @@ -83,29 +84,27 @@ function (app, FauxtonAPI, React, Stores, Actions, Components, ReactComponents, return ( <div className="new-ddoc-section"> - <div className="bordered-box"> - <div className="padded-box"> - <div className="control-group design-doc-group"> - <div className="pull-left"> - <label htmlFor="ddoc"><strong>Design Document</strong> - <a className="help-link" data-bypass="true" href={getDocUrl('DESIGN_DOCS')} target="_blank"> - <i className="icon-question-sign"> - </i> - </a> - </label> - <StyledSelect - selectContent={this.getSelectContent()} - selectChange={this.selectChange} - selectId="ddoc" - selectValue={designDocId} - /> - </div> - <div className="pull-left"> - {designDocInput} - </div> + <PaddedBorderedBox> + <div className="control-group design-doc-group"> + <div className="pull-left"> + <label htmlFor="ddoc"><strong>Design Document</strong> + <a className="help-link" data-bypass="true" href={getDocUrl('DESIGN_DOCS')} target="_blank"> + <i className="icon-question-sign"> + </i> + </a> + </label> + <StyledSelect + selectContent={this.getSelectContent()} + selectChange={this.selectChange} + selectId="ddoc" + selectValue={designDocId} + /> + </div> + <div className="pull-left"> + {designDocInput} </div> </div> - </div> + </PaddedBorderedBox> </div> ); }, @@ -354,58 +353,48 @@ function (app, FauxtonAPI, React, Stores, Actions, Components, ReactComponents, render: function () { return ( <div className="define-view"> - <div className="bordered-box"> - <div className="padded-box"> - Views are the primary tools for querying and reporting. - </div> - </div> - <div className="bordered-box"> - <div className="padded-box"> - <strong>Database</strong> - <div className="db-title">{this.state.database.id}</div> - </div> - </div> + <PaddedBorderedBox> + Views are the primary tools for querying and reporting. + </PaddedBorderedBox> + <PaddedBorderedBox> + <strong>Database</strong> + <div className="db-title">{this.state.database.id}</div> + </PaddedBorderedBox> <form className="form-horizontal view-query-save" onSubmit={this.saveView}> <DesignDocSelector /> <div className="control-group"> - <div className="bordered-box"> - <div className="padded-box"> - <label htmlFor="index-name"> - <strong>Index name</strong> - <a - className="help-link" - data-bypass="true" - href={getDocUrl('VIEW_FUNCS')} - target="_blank"> - <i className="icon-question-sign"></i> - </a> - </label> - <input - type="text" - id="index-name" - value={this.state.viewName} - onChange={this.viewChange} - placeholder="Index name" /> - </div> - </div> + <PaddedBorderedBox> + <label htmlFor="index-name"> + <strong>Index name</strong> + <a + className="help-link" + data-bypass="true" + href={getDocUrl('VIEW_FUNCS')} + target="_blank"> + <i className="icon-question-sign"></i> + </a> + </label> + <input + type="text" + id="index-name" + value={this.state.viewName} + onChange={this.viewChange} + placeholder="Index name" /> + </PaddedBorderedBox> </div> <div className="control-group"> - <div className="bordered-box"> - <div className="padded-box"> - <CodeEditor - id={'map-function'} - ref="mapEditor" - title={"Map function"} - docs={getDocUrl('MAP_FUNCS')} - code={this.state.map} /> - </div> - </div> - </div> - <div className="bordered-box"> - <div className="padded-box"> - <ReduceEditor ref="reduceEditor" /> - </div> + <PaddedBorderedBox> + <CodeEditor + id={'map-function'} + ref="mapEditor" + title={"Map function"} + docs={getDocUrl('MAP_FUNCS')} + code={this.state.map} /> + </PaddedBorderedBox> </div> + <PaddedBorderedBox> + <ReduceEditor ref="reduceEditor" /> + </PaddedBorderedBox> <div className="padded-box"> <div className="control-group"> <button type="submit" className="btn btn-success save">
