From ba1ed63aa1fa1b5e6f3b38b207a77a2f073ffdac Mon Sep 17 00:00:00 2001 From: stefano Date: Wed, 22 Feb 2017 15:16:05 +0100 Subject: [PATCH] Fix #1468 Review the query panel layout (#1494) * Changed query builder ux * Added translations --- .../components/data/query/ComboField.jsx | 2 +- .../components/data/query/FilterField.jsx | 32 +- .../components/data/query/GeometryDetails.jsx | 221 +++++----- .../components/data/query/GroupField.jsx | 156 ++++---- .../components/data/query/NumberField.jsx | 2 +- .../components/data/query/QueryBuilder.jsx | 4 +- .../components/data/query/QueryToolbar.jsx | 13 +- .../components/data/query/SpatialFilter.jsx | 54 +-- .../data/query/__tests__/FilterField-test.jsx | 6 +- .../query/__tests__/GeometryDetails-test.jsx | 18 +- .../data/query/__tests__/GroupField-test.jsx | 2 +- .../query/__tests__/SpatialFilter-test.jsx | 8 +- .../components/data/query/queryform.css | 377 ++++++++++++++---- .../queryform/containers/QueryForm.jsx | 4 +- web/client/plugins/TOC.jsx | 13 +- web/client/translations/data.de-DE | 1 + web/client/translations/data.en-US | 1 + web/client/translations/data.fr-FR | 1 + web/client/translations/data.it-IT | 1 + 19 files changed, 591 insertions(+), 325 deletions(-) diff --git a/web/client/components/data/query/ComboField.jsx b/web/client/components/data/query/ComboField.jsx index aefa5ebbc5..593c9dcb47 100644 --- a/web/client/components/data/query/ComboField.jsx +++ b/web/client/components/data/query/ComboField.jsx @@ -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"}); diff --git a/web/client/components/data/query/FilterField.jsx b/web/client/components/data/query/FilterField.jsx index 276d476657..5d0e31f60d 100644 --- a/web/client/components/data/query/FilterField.jsx +++ b/web/client/components/data/query/FilterField.jsx @@ -61,21 +61,23 @@ const FilterField = React.createClass({ let selectedAttribute = this.props.attributes.filter((attribute) => attribute.attribute === this.props.filterField.attribute)[0]; return ( - - - { return {id: attribute.attribute, name: attribute.label}; })} - fieldValue={this.props.filterField.attribute} - fieldName="attribute" - fieldRowId={this.props.filterField.rowId} - onUpdateField={this.updateFieldElement} - comboFilter={"contains"}/> - - {selectedAttribute ? this.renderOperatorField() : null} - {selectedAttribute && this.props.filterField.operator ? this.renderValueField(selectedAttribute) : null} - +
+ + + { return {id: attribute.attribute, name: attribute.label}; })} + fieldValue={this.props.filterField.attribute} + fieldName="attribute" + fieldRowId={this.props.filterField.rowId} + onUpdateField={this.updateFieldElement} + comboFilter={"contains"}/> + + {selectedAttribute ? this.renderOperatorField() : null} + {selectedAttribute && this.props.filterField.operator ? this.renderValueField(selectedAttribute) : null} + +
); }, updateExceptionFieldElement(rowId, message) { diff --git a/web/client/components/data/query/GeometryDetails.jsx b/web/client/components/data/query/GeometryDetails.jsx index 4695506d6d..8c3e15880f 100644 --- a/web/client/components/data/query/GeometryDetails.jsx +++ b/web/client/components/data/query/GeometryDetails.jsx @@ -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'); @@ -151,22 +149,25 @@ const GeometryDetails = React.createClass({ }, renderHeader() { return ( -
+
- - + +
); }, renderCoordinateField(value, name) { return ( - this.onUpdateBBOX(evt.target.value, name)}/> +
+
{name}
+ this.onUpdateBBOX(evt.target.value, name)}/> +
); }, renderCircleField(value, name) { @@ -200,60 +201,55 @@ const GeometryDetails = React.createClass({ this.tempExtent = assign({}, this.extent, {}); detailsContent = ( -
- - - - - - {this.renderCoordinateField(this.extent.north, "north")} - - - - - - -
- - - - {this.renderCoordinateField(this.extent.west, "west")} - - - )}> - - - - - )}> - - - - - {this.renderCoordinateField(this.extent.est, "est")} - - -
- - - - - - - {this.renderCoordinateField(this.extent.sud, "sud")} - - - - - + +
-
-

+
+
); @@ -276,46 +272,64 @@ const GeometryDetails = React.createClass({ this.tempCircle = assign({}, this.circle, {}); detailsContent = ( -
- - - X: - - - {this.renderCircleField(this.circle.x, "x")} - - - Y: - - - {this.renderCircleField(this.circle.y, "y")} - - - - - : - - - {this.renderCircleField(this.circle.radius, "radius")} - - - )}> - - - - - )}> - - - - + + +
-
-

+
+
); @@ -325,11 +339,10 @@ const GeometryDetails = React.createClass({ }, render() { return ( - - - {this.renderDetailsContent()} - - + + {this.renderHeader()} + {this.renderDetailsContent()} + ); }, resetBBOX() { diff --git a/web/client/components/data/query/GroupField.jsx b/web/client/components/data/query/GroupField.jsx index b7bcd614e2..a68a7baf64 100644 --- a/web/client/components/data/query/GroupField.jsx +++ b/web/client/components/data/query/GroupField.jsx @@ -103,49 +103,50 @@ const GroupField = React.createClass({ let comboValues = this.getComboValues(selectedAttribute, this.props.attributes); return ( - - - - - - - - - - - { - filterField.exception ? ( - )}> - + + ) : ( + - - ) : ( - - ) - } - - + ) + } + + +
); }, renderGroupHeader(groupField) { @@ -161,30 +162,43 @@ const GroupField = React.createClass({ ); return ( - - -
- {removeButton} -
-
- - { - return LocaleUtils.getMessageById(this.context.messages, opt.name); - }) - } - fieldName="logic" - style={{minWidth: "80px", display: "inline-block", position: "relative", top: "10px"}} - fieldRowId={groupField.id} - fieldValue={ - LocaleUtils.getMessageById(this.context.messages, - this.props.logicComboOptions.filter((opt) => groupField.logic === opt.logic)[0].name) - } - onUpdateField={this.updateLogicCombo}/> -
- - +
+ + +
+ +
+ +
+
+ { + return LocaleUtils.getMessageById(this.context.messages, opt.name); + }) + } + fieldName="logic" + style={{minWidth: "80px"}} + fieldRowId={groupField.id} + fieldValue={ + LocaleUtils.getMessageById(this.context.messages, + this.props.logicComboOptions.filter((opt) => groupField.logic === opt.logic)[0].name) + } + onUpdateField={this.updateLogicCombo}/> +
+
+ +
+ +
+ + +
+ {removeButton} +
+ + +
); }, renderGroupField(groupField) { @@ -206,22 +220,22 @@ const GroupField = React.createClass({ const addButton = groupField.index <= this.props.groupLevels ? ( - ) : ( ); return ( - + {this.renderGroupHeader(groupField)}
{container}
- - {addButton}
); @@ -242,7 +256,7 @@ const GroupField = React.createClass({ }, render() { return ( - {this.props.groupFields.filter(g => !g.groupId).map(this.renderGroupField)} diff --git a/web/client/components/data/query/NumberField.jsx b/web/client/components/data/query/NumberField.jsx index 9c7c92d6d0..841505ff6a 100644 --- a/web/client/components/data/query/NumberField.jsx +++ b/web/client/components/data/query/NumberField.jsx @@ -47,7 +47,7 @@ const NumberField = React.createClass({ }, getDefaultProps() { return { - style: {marginBottom: "15px", borderColor: "#dedede"}, + style: { borderColor: "#dedede"}, operator: "=", fieldName: null, fieldRowId: null, diff --git a/web/client/components/data/query/QueryBuilder.jsx b/web/client/components/data/query/QueryBuilder.jsx index 6f8d9f6e21..3a050417d1 100644 --- a/web/client/components/data/query/QueryBuilder.jsx +++ b/web/client/components/data/query/QueryBuilder.jsx @@ -60,7 +60,7 @@ const QueryBuilder = React.createClass({ attributes: [], featureTypeError: "", spatialField: {}, - removeButtonIcon: "glyphicon glyphicon-minus", + removeButtonIcon: "glyphicon glyphicon-remove", addButtonIcon: "glyphicon glyphicon-plus", attributePanelExpanded: true, spatialPanelExpanded: true, @@ -119,7 +119,7 @@ const QueryBuilder = React.createClass({ return (
{this.props.featureTypeErrorText}
); } return this.props.attributes.length > 0 ? ( -
+
+
- - diff --git a/web/client/components/data/query/SpatialFilter.jsx b/web/client/components/data/query/SpatialFilter.jsx index df6ea6ec88..f462dab124 100644 --- a/web/client/components/data/query/SpatialFilter.jsx +++ b/web/client/components/data/query/SpatialFilter.jsx @@ -91,7 +91,7 @@ const SpatialFilter = React.createClass({ }) } fieldName="method" - style={{width: "140px", marginTop: "3px"}} + style={{width: "140px"}} fieldRowId={new Date().getUTCMilliseconds()} fieldValue={ LocaleUtils.getMessageById(this.context.messages, selectedMethod ? selectedMethod.name : "") @@ -100,30 +100,30 @@ const SpatialFilter = React.createClass({ ); const detailsButton = this.props.spatialField.geometry && (this.props.spatialField.method === "BBOX" || this.props.spatialField.method === "Circle") ? ( - ) : ( ); const resetButton = this.props.spatialField.geometry && this.props.spatialField.geometry.coordinates ? ( - ) : ( ); const methodSelector = this.props.spatialField.geometry ? ( - + -
+
{methodCombo} - + {detailsButton} @@ -131,9 +131,9 @@ const SpatialFilter = React.createClass({ ) : ( - + -
+
{methodCombo} @@ -142,7 +142,9 @@ const SpatialFilter = React.createClass({ ); return ( - methodSelector +
+ {methodSelector} +
); }, renderZoneFields() { @@ -189,7 +191,9 @@ const SpatialFilter = React.createClass({ {this.renderZoneFields()} {this.props.spatialOperations.length > 1 ? ( - {operationRow} +
+ {operationRow} +
{drawLabel} @@ -209,8 +213,8 @@ const SpatialFilter = React.createClass({ if (this.props.spatialField.method && this.props.spatialField.method !== "ZONE") { drawLabel = !this.props.spatialField.geometry ? ( -
-

+
+
) : ( @@ -230,11 +234,11 @@ const SpatialFilter = React.createClass({ ); const operationRow = selectedOperation && selectedOperation.id === "DWITHIN" ? ( - + -
+ - + { @@ -242,18 +246,17 @@ const SpatialFilter = React.createClass({ }) } fieldName="operation" - style={{width: "140px", marginTop: "3px"}} + style={{width: "140px"}} fieldRowId={new Date().getUTCMilliseconds()} fieldValue={ LocaleUtils.getMessageById(this.context.messages, selectedOperation ? selectedOperation.name : "") } onUpdateField={this.updateSpatialOperation}/> - -
+ + {':'} -
this.props.actions.onChangeDwithinValue(evt.target.value, name)}/> -
) : ( - + -
+ +
{ this.props.withContainer ? ( diff --git a/web/client/components/data/query/__tests__/FilterField-test.jsx b/web/client/components/data/query/__tests__/FilterField-test.jsx index f763a8da81..92c08a57a9 100644 --- a/web/client/components/data/query/__tests__/FilterField-test.jsx +++ b/web/client/components/data/query/__tests__/FilterField-test.jsx @@ -97,7 +97,7 @@ describe('FilterField', () => { let childNodes = filterFieldDOMNode.actual.childNodes; - expect(childNodes.length).toBe(3); + expect(childNodes.length).toBe(1); const inputFields = filterFieldDOMNode.actual.getElementsByClassName('rw-input'); expect(inputFields.length).toBe(4); @@ -170,7 +170,7 @@ describe('FilterField', () => { let childNodes = filterFieldDOMNode.actual.childNodes; - expect(childNodes.length).toBe(3); + expect(childNodes.length).toBe(1); const inputFields = filterFieldDOMNode.actual.getElementsByClassName('rw-input'); expect(inputFields.length).toBe(4); @@ -181,7 +181,7 @@ describe('FilterField', () => { const operatorSelect = filterFieldDOMNode.actual.getElementsByClassName('rw-input')[2]; expect(operatorSelect.childNodes[0].nodeValue).toBe("="); - const valueSelectContainer = filterFieldDOMNode.actual.getElementsByClassName('col-xs-6')[0].childNodes[0]; + const valueSelectContainer = filterFieldDOMNode.actual.getElementsByClassName('col-xs-5')[0].childNodes[0]; expect(valueSelectContainer.style.display).toBe('none'); }); diff --git a/web/client/components/data/query/__tests__/GeometryDetails-test.jsx b/web/client/components/data/query/__tests__/GeometryDetails-test.jsx index 620c2cdfb5..49df453504 100644 --- a/web/client/components/data/query/__tests__/GeometryDetails-test.jsx +++ b/web/client/components/data/query/__tests__/GeometryDetails-test.jsx @@ -56,13 +56,12 @@ describe('GeometryDetails', () => { expect(geometryDetailsDOMNode).toExist(); let childNodes = geometryDetailsDOMNode.actual.childNodes; - expect(childNodes.length).toBe(2); - expect(childNodes[0].className).toBe("panel-heading"); - expect(childNodes[1].className).toBe("panel-body"); + expect(childNodes.length).toBe(1); + expect(childNodes[0].className).toBe("panel-body"); - let panelBodyRows = childNodes[1].getElementsByClassName('row'); + let panelBodyRows = childNodes[0].getElementsByClassName('row'); expect(panelBodyRows).toExist(); - expect(panelBodyRows.length).toBe(2); + expect(panelBodyRows.length).toBe(4); expect(panelBodyRows[0].childNodes.length).toBe(4); }); @@ -98,12 +97,11 @@ describe('GeometryDetails', () => { expect(geometryDetailsDOMNode).toExist(); let childNodes = geometryDetailsDOMNode.actual.childNodes; - expect(childNodes.length).toBe(2); - expect(childNodes[0].className).toBe("panel-heading"); - expect(childNodes[1].className).toBe("panel-body"); + expect(childNodes.length).toBe(1); + expect(childNodes[0].className).toBe("panel-body"); - let panelBodyRows = childNodes[1].getElementsByClassName('row'); + let panelBodyRows = childNodes[0].getElementsByClassName('row'); expect(panelBodyRows).toExist(); - expect(panelBodyRows.length).toBe(5); + expect(panelBodyRows.length).toBe(4); }); }); diff --git a/web/client/components/data/query/__tests__/GroupField-test.jsx b/web/client/components/data/query/__tests__/GroupField-test.jsx index e9b15997ee..a9a15c48cb 100644 --- a/web/client/components/data/query/__tests__/GroupField-test.jsx +++ b/web/client/components/data/query/__tests__/GroupField-test.jsx @@ -106,7 +106,7 @@ describe('GroupField', () => { for (let i = 0; i < childNodes.length; i++) { let child = childNodes[i]; expect( - child.className === "logicHeader row" + child.className === "container-fluid" || child.className === "row" || child.className === "query-content" || child.className === "query-buttons" diff --git a/web/client/components/data/query/__tests__/SpatialFilter-test.jsx b/web/client/components/data/query/__tests__/SpatialFilter-test.jsx index 8a3412c035..457904f822 100644 --- a/web/client/components/data/query/__tests__/SpatialFilter-test.jsx +++ b/web/client/components/data/query/__tests__/SpatialFilter-test.jsx @@ -59,9 +59,13 @@ describe('SpatialFilter', () => { let combosPanel = spatialFilterDOMNode.actual.getElementsByClassName('panel-body'); expect(combosPanel).toExist(); - let logicHeader = combosPanel[1].childNodes[0]; + let containerFluid = combosPanel[1].childNodes[0]; + expect(containerFluid).toExist(); + expect(containerFluid.className).toBe("container-fluid"); + + let logicHeader = containerFluid.childNodes[0]; expect(logicHeader).toExist(); - expect(logicHeader.className).toBe("logicHeader row"); + expect(logicHeader.className).toBe("logicHeader filter-field-row row"); let operationPanelRows = combosPanel[2].getElementsByClassName('row'); expect(operationPanelRows.length).toBe(2); diff --git a/web/client/components/data/query/queryform.css b/web/client/components/data/query/queryform.css index e4e01bc3a1..41c0cdec72 100644 --- a/web/client/components/data/query/queryform.css +++ b/web/client/components/data/query/queryform.css @@ -6,121 +6,348 @@ * LICENSE file in the root directory of this source tree. */ -.logicHeader{ - background-color: #F5F5F5; - margin-bottom: 10px; - padding-top: 10px; - margin-left: 1px; - margin-right: 1px; -} -.logicHeader .query-remove{ - float: right; - margin-right: 10px; - padding-top: 10px; -} +/*****************************/ +/* TOC ***********************/ +/*****************************/ -#queryFormPanel .panel-title{ - font-size: 16px; +#mapstore-drawermenu #toc-query-close-button { + float: left; } -#queryFormPanel .panel-title a{ - cursor: text; - text-decoration:none; +#mapstore-drawermenu #toc-query-container { + background-color: #f7f7f7; } /*****************************/ -/* DRAWER MENU ***************/ +/* END - TOC *****************/ /*****************************/ -#mapstore-drawermenu #queryFormPanel .queryFormToolbar button:disabled{ - color: gray; -} -#mapstore-drawermenu #queryFormPanel .logicHeader { + +/*****************************/ +/* GENERAL SETTINGS **********/ +/*****************************/ + +#query-form-panel .panel { + background-color: transparent; + border: none; + border-radius: 0; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; margin: 0; - background-color: #078aa3; - color: white; } -#mapstore-drawermenu #queryFormPanel .logicHeader .query-remove { - float: right; - padding-top: 0px; - top: 10px; - margin-right: 10px; + +#query-form-panel .panel-body { + padding: 0; + border: none; +} + +#mapstore-drawermenu #query-form-panel .glyphicon { + font-size: 22px; +} + +#query-form-panel .btn-default { + background-color: transparent; + border-radius: 0; + color: #078aa3; + border-color: #078aa3; +} + +#query-form-panel .btn-default:hover { + background-color: #dedede; } -#mapstore-drawermenu #queryFormPanel .remove-filter-button { +#query-form-panel input.form-control { height: 32px; - width: 32px; + border: 1px solid #dedede; +} + +#query-form-panel button:disabled { + color: #ffffff; + background-color: #abc8cd; + border-color: transparent; +} + +#query-form-panel button:disabled { + color: #ffffff; + background-color: #abc8cd; + border-color: transparent; +} + +#query-form-panel button span { + line-height: 22px; + padding: 0 2px 0 2px; +} + +#query-form-panel button .glyphicon { padding: 0; } -#mapstore-drawermenu #queryFormPanel input.form-control { - height: 32px; + +#query-form-panel .query-buttons { + float: right; + margin: 4px; } -#mapstore-drawermenu #queryFormPanel .logicHeader .group_label_a,#mapstore-drawermenu #queryFormPanel .logicHeader .group_label_b { - margin: auto 5px; +#query-form-panel .filter-buttons { + background-color: #f7f7f7; + border: none; + margin-left: 4px; } -/* nested groups */ -#mapstore-drawermenu #queryFormPanel .panel .panel .panel{ - margin-left: 10px; +#query-form-panel .filter-buttons:hover { + background-color: #dedede; } -#mapstore-drawermenu #queryFormPanel .panel .panel .panel > .panel-body{ - border: thin solid #078aa3; - margin-top: 1px; + +#query-form-panel .remove-filter-button { + height: 32px; + width: 32px; + padding: 0; + margin: 2px; + border: none; + float: right; +} + +#mapstore-drawermenu #query-form-panel .remove-filter-button .glyphicon { + font-size: 32px; } -#mapstore-drawermenu #queryFormPanel .query-content, -#mapstore-drawermenu #queryFormPanel .query-buttons -{ - margin-left: 3px; - margin-bottom: 3px; + +#mapstore-drawermenu #query-form-panel .remove-filter-button span { + line-height: 32px; } -/* Spatial Selector */ -#mapstore-drawermenu #queryFormPanel .panel.details-panel { - width: auto; - height: auto; +#query-form-panel .close { + display: none; } -#mapstore-drawermenu #queryFormPanel .details-panel .panel-body { - padding: 15px; + +#query-form-panel .form-group { + margin-bottom: 0; } -#mapstore-drawermenu #queryFormPanel .details-panel.panel{ - border: 1px solid transparent; + +#query-form-panel input { + border: 1px solid #dedede; border-radius: 4px; - -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); - box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); + padding: 0 4px 0 8px; } -#mapstore-drawermenu #queryFormPanel .details-panel.panel-primary { - border-color: #078aa3; + +/*****************************/ +/* END - GENERAL SETTINGS ****/ +/*****************************/ + + +/*****************************/ +/* HEAD QUERY ****************/ +/*****************************/ + +#query-form-panel { + overflow: hidden; } -#mapstore-drawermenu #queryFormPanel .query-toolbar{ - position: absolute; - right: 0; - top: 42px; + +#query-form-panel .query-toolbar { + padding: 0; + height: 50px; + /*border-bottom: 2px dotted #dedede;*/ + overflow: hidden; + background-color: #ffffff; + margin-bottom: 20px; } +#query-form-panel #query-toolbar-title { + float: left; + font-size: 20px; + margin: 11px 11px 11px 20px; + color: #078aa3; +} + +#query-form-panel .queryFormToolbar { + margin: 8px; +} + + /*****************************/ -/* DRAWER MENU END ***********/ +/* END - HEAD QUERY **********/ /*****************************/ -.detail_geom_button{ - text-align: right; - margin-top: 3px; + +/*****************************/ +/* BODY QUERY ****************/ +/*****************************/ + +#query-form-panel .querypanel { + background-color: #f7f7f7; +} + +#query-form-panel .querypanel .panel-heading { + border: none; + color: #333333; + text-decoration: underline; + padding-left: 11px; + background-color: transparent; + font-weight: bold; +} + +#query-form-panel .querypanel .panel-heading span { + font-size: 14px; +} + +#query-form-panel .querypanel .panel-heading .panel-title:hover { + color: #777777; +} + +#query-form-panel .query-content > .container-fluid { + margin: 4px 0 4px 0; + border-top: 1px dashed #dedede; +} + +#query-form-panel .filter-field-row > div { + margin: 0; + padding: 4px; +} + +#query-form-panel .filter-field-row .filter-field-row div { + margin: 0; +} + +#query-form-panel .filter-logig-header-text { + float: left; +} + +#query-form-panel .filter-logig-header-text > span { + float: left; + margin-top: 7px; +} + +#query-form-panel #spatialFilterPanel .panel { + margin: 0; +} + +#query-form-panel #spatialFilterPanel .filter-field-row div > span{ + line-height: 32px; +} + +#query-form-panel .querypanel > .query-filter-container { + margin: 0 30px 20px 20px; + background-color: transparent; + border-bottom: 1px solid #dedede; + padding-bottom: 10px; +} + +#mapstore-drawermenu #query-form-panel .querypanel > .query-filter-container { + margin-right: 60px; + margin-left: 10px; +} + +/* nested groups */ +#query-form-panel .panel .panel .panel { + margin-left: 10px; } -.detail_geom_label{ - text-align: left; +#query-form-panel .panel .panel .filter-group-panel { + -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + -moz-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + background-color: #ffffff; + margin-bottom: 20px; } -.details-panel{ - width: 400px; - height: 400px; - position: absolute; - top: 10px; - left: 10px; +#query-form-panel .panel .panel .filter-group-panel button { + background-color: #ffffff; } -.querypanel{ +#query-form-panel .panel .panel .filter-group-panel button:hover { + background-color: #dedede; +} +/* end - nested groups */ + +#query-form-panel hr { + border-top: 1px dashed #dedede; +} + +#query-form-panel h5 { + font-family: Georgia, serif; + font-style: italic; + text-align: center; +} + +#query-form-panel .filter-text-desc { + text-align: center; +} + +.querypanel { max-height: 660px; overflow-x: hidden; overflow-y: auto; border: none; } + +/*****************************/ +/* END - BODY QUERY ********/ +/*****************************/ + +/*****************************/ +/** DETAIL PANEL *************/ +/*****************************/ + +#query-form-panel div.details-panel { + background-color: #ffffff; + -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + -moz-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + min-width: 565px; +} + +#query-form-panel .details-panel .detail-header { + overflow: hidden; + background-color: transparent; + text-decoration: none; + padding: 4px 4px 8px 8px; +} + +#query-form-panel .details-panel .detail-title span { + text-decoration: none; + line-height: 32px; + font-weight: normal; +} + +#query-form-panel .details-panel button { + float: right; + border: none; + margin-top: 8px; + background-color: #ffffff; +} + +#query-form-panel .details-panel button.remove-filter-button { + margin-top: 0; +} + +#query-form-panel .details-panel button.remove-filter-button:hover { + background-color: #dedede; +} + +#query-form-panel .details-panel button.remove-filter-button span { + cursor: pointer; +} + +#query-form-panel .details-panel .container-fluid > .row { + margin: 4px 0 4px 0; +} + +#query-form-panel .details-panel .details-circle-attribute-name { + padding-top: 6px; + float: right; + text-transform: lowercase; +} + +#query-form-panel .details-panel .detail-field > div { + width: 105px; + margin: auto; + text-align: center; +} + +#query-form-panel .details-panel .detail-field-title { + min-width: 105px; + margin: auto; + text-align: center; +} + +/*****************************/ +/** END -DETAIL PANEL ********/ +/*****************************/ diff --git a/web/client/examples/queryform/containers/QueryForm.jsx b/web/client/examples/queryform/containers/QueryForm.jsx index 67776c1f02..4cb6c41287 100644 --- a/web/client/examples/queryform/containers/QueryForm.jsx +++ b/web/client/examples/queryform/containers/QueryForm.jsx @@ -14,7 +14,7 @@ const QueryFormMap = require('../components/QueryFormMap'); const SmartQueryForm = require('../components/SmartQueryForm'); const Results = require('../components/Results'); -const {Panel} = require('react-bootstrap'); +const {Panel, Glyphicon} = require('react-bootstrap'); const Draggable = require('react-draggable'); require('./queryform.css'); @@ -28,7 +28,7 @@ const QueryForm = React.createClass({ return (
- Query Panel +
); diff --git a/web/client/plugins/TOC.jsx b/web/client/plugins/TOC.jsx index 92bfca92ab..29fca7d150 100644 --- a/web/client/plugins/TOC.jsx +++ b/web/client/plugins/TOC.jsx @@ -241,12 +241,13 @@ const LayerTree = React.createClass({ ); }, renderQueryPanel() { - return (
- - } - /> -
); + return ( +
+ + }/> +
+ ); }, render() { if (!this.props.groups) { diff --git a/web/client/translations/data.de-DE b/web/client/translations/data.de-DE index 4c583a34e1..73aa5e7101 100644 --- a/web/client/translations/data.de-DE +++ b/web/client/translations/data.de-DE @@ -373,6 +373,7 @@ "styler": "Erstelle den Stil für die gewählte Ebene" }, "queryform": { + "title": "Erweiterte Suche", "query": "Suche", "reset": "Zurücksetzen", "query_request_exception": "Abfrage Fehler", diff --git a/web/client/translations/data.en-US b/web/client/translations/data.en-US index 6b2d3214f3..40daa81120 100644 --- a/web/client/translations/data.en-US +++ b/web/client/translations/data.en-US @@ -373,6 +373,7 @@ "styler": "Add rule and generate a new styled layer" }, "queryform": { + "title": "Advanced Search", "query": "Search", "reset": "Reset", "query_request_exception": "Request Error", diff --git a/web/client/translations/data.fr-FR b/web/client/translations/data.fr-FR index d886ffa84d..0a87176568 100644 --- a/web/client/translations/data.fr-FR +++ b/web/client/translations/data.fr-FR @@ -375,6 +375,7 @@ "styler": "Créer un style pour la couche sélectionnée" }, "queryform": { + "title": "Recherche Avancée", "query": "Recherche", "reset": "Recommencer", "query_request_exception": "Erreur de requête", diff --git a/web/client/translations/data.it-IT b/web/client/translations/data.it-IT index f5e75b4ef5..86e7d2b548 100644 --- a/web/client/translations/data.it-IT +++ b/web/client/translations/data.it-IT @@ -373,6 +373,7 @@ "styler": "Crea lo style per il layer selezionato" }, "queryform": { + "title": "Ricerca Avanzata", "query": "Ricerca", "reset": "Reimposta", "query_request_exception": "Errore nella richiesta",