Skip to content

Commit

Permalink
Fix geosolutions-it#1468 Review the query panel layout (geosolutions-…
Browse files Browse the repository at this point in the history 
…it#1494)

* Changed query builder ux

* Added translations
  • Loading branch information
@allyoucanmap @mbarto
allyoucanmap authored and mbarto committed Feb 22, 2017
1 parent ff04767 commit ba1ed63
Show file tree
Hide file tree
Showing 19 changed files with 591 additions and 325 deletions.
2 changes: 1 addition & 1 deletion web/client/components/data/query/ComboField.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ const ComboField = React.createClass({
};
},
render() {
let style = assign({}, {marginBottom: "15px", borderColor: "#dedede"}, this.props.style);
let style = assign({}, {borderColor: "#dedede"}, this.props.style);

if (this.props.fieldException) {
style = assign({}, style, {borderColor: "#FF0000"});
Expand Down
32 changes: 17 additions & 15 deletions web/client/components/data/query/FilterField.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,21 +61,23 @@ const FilterField = React.createClass({
let selectedAttribute = this.props.attributes.filter((attribute) => attribute.attribute === this.props.filterField.attribute)[0];

return (
<Row>
<Col xs={4}>
<ComboField
valueField={'id'}
textField={'name'}
fieldOptions={this.props.attributes.map((attribute) => { return {id: attribute.attribute, name: attribute.label}; })}
fieldValue={this.props.filterField.attribute}
fieldName="attribute"
fieldRowId={this.props.filterField.rowId}
onUpdateField={this.updateFieldElement}
comboFilter={"contains"}/>
</Col>
<Col xs={2}>{selectedAttribute ? this.renderOperatorField() : null}</Col>
<Col xs={6}>{selectedAttribute && this.props.filterField.operator ? this.renderValueField(selectedAttribute) : null}</Col>
</Row>
<div className="container-fluid">
<Row className="filter-field-row">
<Col xs={4}>
<ComboField
valueField={'id'}
textField={'name'}
fieldOptions={this.props.attributes.map((attribute) => { return {id: attribute.attribute, name: attribute.label}; })}
fieldValue={this.props.filterField.attribute}
fieldName="attribute"
fieldRowId={this.props.filterField.rowId}
onUpdateField={this.updateFieldElement}
comboFilter={"contains"}/>
</Col>
<Col xs={3}>{selectedAttribute ? this.renderOperatorField() : null}</Col>
<Col xs={5}>{selectedAttribute && this.props.filterField.operator ? this.renderValueField(selectedAttribute) : null}</Col>
</Row>
</div>
);
},
updateExceptionFieldElement(rowId, message) {
Expand Down
221 changes: 117 additions & 104 deletions web/client/components/data/query/GeometryDetails.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@
*/
const React = require('react');

const {Row, Col, Panel, Input, Button, Glyphicon, OverlayTrigger, Tooltip} = require('react-bootstrap');

const Draggable = require('react-draggable');
const {Row, Col, Panel, Input, Button, Glyphicon} = require('react-bootstrap');

const I18N = require('../../I18N/I18N');

Expand Down Expand Up @@ -151,22 +149,25 @@ const GeometryDetails = React.createClass({
},
renderHeader() {
return (
<div className="handle">
<div className="detail-header">
<span>
<span><I18N.Message msgId={"queryform.spatialfilter.details.details_header"}/></span>
<Button onClick={() => this.onClosePanel(false)} className="close card-close"><span>×</span></Button>
<span className="detail-title"><I18N.Message msgId={"queryform.spatialfilter.details.details_header"}/></span>
<Button onClick={() => this.onClosePanel(false)} className="remove-filter-button"><Glyphicon glyph="glyphicon glyphicon-remove"/></Button>
</span>
</div>
);
},
renderCoordinateField(value, name) {
return (
<Input
style={{"width": "105px"}}
type="number"
id={"queryform_bbox_" + name}
defaultValue={value}
onChange={(evt) => this.onUpdateBBOX(evt.target.value, name)}/>
<div>
<div className="detail-field-title">{name}</div>
<Input
style={{minWidth: '105px', margin: 'auto'}}
type="number"
id={"queryform_bbox_" + name}
defaultValue={value}
onChange={(evt) => this.onUpdateBBOX(evt.target.value, name)}/>
</div>
);
},
renderCircleField(value, name) {
Expand Down Expand Up @@ -200,60 +201,55 @@ const GeometryDetails = React.createClass({
this.tempExtent = assign({}, this.extent, {});

detailsContent = (
<div style={{"display": "table", "margin": "0 auto", "width": "100%", "marginTop": "20px"}}>
<Row>
<Col xs={4}>
<span/>
</Col>
<Col xs={4}>
{this.renderCoordinateField(this.extent.north, "north")}
</Col>
<Col xs={4}>
<span/>
</Col>
</Row>
<Row>
<Col xs={12}><div style={{"height": "50px"}}/></Col>
</Row>
<Row>
<Col xs={4}>
{this.renderCoordinateField(this.extent.west, "west")}
</Col>
<Col xs={2}>
<OverlayTrigger placement="bottom" overlay={(<Tooltip id="save-bbox-tooltip"><strong><I18N.Message msgId={"queryform.spatialfilter.details.save_bbox"}/></strong></Tooltip>)}>
<Button id="save-bbox" onClick={() => this.onModifyGeometry()}>
<Glyphicon glyph="glyphicon glyphicon-ok"/>
<div>
<div className="container-fluid">
<Row>
<Col xs={4}>
<span/>
</Col>
<Col xs={4}>
{this.renderCoordinateField(this.extent.north, "north")}
</Col>
<Col xs={4}>
<span/>
</Col>
</Row>
<Row>
<Col xs={4}>
{this.renderCoordinateField(this.extent.west, "west")}
</Col>
<Col xs={4}>
<span/>
</Col>
<Col xs={4}>
{this.renderCoordinateField(this.extent.est, "est")}
</Col>
</Row>
<Row>
<Col xs={4}>
<span/>
</Col>
<Col xs={4}>
{this.renderCoordinateField(this.extent.sud, "sud")}
</Col>
<Col xs={4}>
<span/>
</Col>
</Row>
<Row>
<Col>
<Button id="save-bbox" className="filter-buttons" bsSize="xs" onClick={() => this.onModifyGeometry()}>
<Glyphicon glyph="glyphicon glyphicon-ok"/><I18N.Message msgId={"confirm"}/>
</Button>
</OverlayTrigger>
</Col>
<Col xs={2}>
<OverlayTrigger placement="bottom" overlay={(<Tooltip id="reset-bbox-tooltip"><strong><I18N.Message msgId={"queryform.spatialfilter.details.reset"}/></strong></Tooltip>)}>
<Button id="reset-bbox" onClick={() => this.resetBBOX()}>
<Glyphicon glyph="glyphicon glyphicon-remove"/>
<Button id="reset-bbox" className="filter-buttons" bsSize="xs" onClick={() => this.resetBBOX()}>
<Glyphicon glyph="glyphicon glyphicon-refresh"/><I18N.Message msgId={"queryform.reset"}/>
</Button>
</OverlayTrigger>
</Col>
<Col xs={4}>
{this.renderCoordinateField(this.extent.est, "est")}
</Col>
</Row>
<Row>
<Col xs={12}><div style={{"height": "50px"}}/></Col>
</Row>
<Row>
<Col xs={4}>
<span/>
</Col>
<Col xs={4}>
{this.renderCoordinateField(this.extent.sud, "sud")}
</Col>
<Col xs={4}>
<span/>
</Col>
</Row>
</Row>
</div>
<span>
<hr width="100%" style={{"borderTop": "1px solid #337AB7"}}/>
<div style={{"textAlign": "center"}}><h4><I18N.Message msgId={"queryform.spatialfilter.details.details_bbox_label"}/></h4></div>
<hr width="90%"/>
<div ><h5><I18N.Message msgId={"queryform.spatialfilter.details.details_bbox_label"}/></h5></div>
</span>
</div>
);
Expand All @@ -276,46 +272,64 @@ const GeometryDetails = React.createClass({
this.tempCircle = assign({}, this.circle, {});

detailsContent = (
<div style={{"marginTop": "70px"}}>
<Row>
<Col xs={2} style={{"paddingTop": "6px"}}>
<span><strong>X: </strong></span>
</Col>
<Col xs={4}>
{this.renderCircleField(this.circle.x, "x")}
</Col>
<Col xs={2} style={{"paddingTop": "6px"}}>
<span><strong>Y: </strong></span>
</Col>
<Col xs={4}>
{this.renderCircleField(this.circle.y, "y")}
</Col>
</Row>
<Row>
<Col xs={2} style={{"paddingTop": "6px"}}>
<span><strong><I18N.Message msgId={"queryform.spatialfilter.details.radius"}/>: </strong></span>
</Col>
<Col xs={6}>
{this.renderCircleField(this.circle.radius, "radius")}
</Col>
<Col xs={2}>
<OverlayTrigger placement="bottom" overlay={(<Tooltip id="save-radius-tooltip"><strong><I18N.Message msgId={"queryform.spatialfilter.details.save_radius"}/></strong></Tooltip>)}>
<Button id="save-radius" onClick={() => this.onModifyGeometry()}>
<Glyphicon glyph="glyphicon glyphicon-ok"/>
<div>
<div className="container-fluid">
<Row>
<Col xs={2}>
<span/>
</Col>
<Col xs={2}>
<span className="details-circle-attribute-name">{'x:'}</span>
</Col>
<Col xs={4}>
{this.renderCircleField(this.circle.x, "x")}
</Col>
<Col xs={4}>
<span/>
</Col>
</Row>
<Row>
<Col xs={2}>
<span/>
</Col>
<Col xs={2}>
<span className="details-circle-attribute-name">{'y:'}</span>
</Col>
<Col xs={4}>
{this.renderCircleField(this.circle.y, "y")}
</Col>
<Col xs={4}>
<span/>
</Col>
</Row>
<Row>
<Col xs={2}>
<span/>
</Col>
<Col xs={2}>
<span className="details-circle-attribute-name"><I18N.Message msgId={"queryform.spatialfilter.details.radius"}/>{':'}</span>
</Col>
<Col xs={4}>
{this.renderCircleField(this.circle.radius, "radius")}
</Col>
<Col xs={4}>
<span/>
</Col>
</Row>
<Row>
<Col>
<Button id="save-radius" className="filter-buttons" bsSize="xs" onClick={() => this.onModifyGeometry()}>
<Glyphicon glyph="glyphicon glyphicon-ok"/><I18N.Message msgId={"confirm"}/>
</Button>
</OverlayTrigger>
</Col>
<Col xs={2}>
<OverlayTrigger placement="bottom" overlay={(<Tooltip id="reset-radius-tooltip"><strong><I18N.Message msgId={"queryform.spatialfilter.details.reset"}/></strong></Tooltip>)}>
<Button id="reset-radius" onClick={() => this.resetCircle()}>
<Glyphicon glyph="glyphicon glyphicon-remove"/>
<Button id="reset-radius" className="filter-buttons" bsSize="xs" onClick={() => this.resetCircle()}>
<Glyphicon glyph="glyphicon glyphicon-refresh"/><I18N.Message msgId={"queryform.reset"}/>
</Button>
</OverlayTrigger>
</Col>
</Row>
</Col>
</Row>
</div>
<span>
<hr width="100%" style={{"borderTop": "1px solid #337AB7"}}/>
<div style={{"textAlign": "center"}}><h4><I18N.Message msgId={"queryform.spatialfilter.details.details_circle_label"}/></h4></div>
<hr width="90%"/>
<div><h5><I18N.Message msgId={"queryform.spatialfilter.details.details_circle_label"}/></h5></div>
</span>
</div>
);
Expand All @@ -325,11 +339,10 @@ const GeometryDetails = React.createClass({
},
render() {
return (
<Draggable start={{x: 100, y: 55}} handle=".handle,.handle *">
<Panel className="details-panel" header={this.renderHeader()} bsStyle="primary">
{this.renderDetailsContent()}
</Panel>
</Draggable>
<Panel className="details-panel" bsStyle="primary">
{this.renderHeader()}
{this.renderDetailsContent()}
</Panel>
);
},
resetBBOX() {
Expand Down
Loading

0 comments on commit ba1ed63

Please sign in to comment.