Skip to content

Commit

Permalink
Fix #1776. Move measure into burger menu (#1790)
Browse files Browse the repository at this point in the history
The dialog for measure is now in the burger menu. This fixes #1776.

The old plugin will be kept in MeasurePanel + MeasureResult plugin and deprecated.
All the duplicated functionalities are now merged in a unique component.
  • Loading branch information
offtherailz authored May 8, 2017
1 parent c78a596 commit 1cdb8f0
Show file tree
Hide file tree
Showing 13 changed files with 286 additions and 211 deletions.
3 changes: 3 additions & 0 deletions docma-config.json
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,9 @@
"web/client/plugins/GlobeViewSwitcher.jsx",
"web/client/plugins/GoFull.jsx",
"web/client/plugins/Map.jsx",
"web/client/plugins/Measure.jsx",
"web/client/plugins/MeasurePanel.jsx",
"web/client/plugins/MeasureResults.jsx",
"web/client/plugins/FullScreen.jsx",
"web/client/plugins/Identify.jsx",
"web/client/plugins/Login.jsx",
Expand Down
1 change: 1 addition & 0 deletions web/client/components/mapcontrols/locate/LocateBtn.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ let geoLocationAllowed = false;
const LocateBtn = React.createClass({
propTypes: {
id: React.PropTypes.string,
hide: React.PropTypes.bool,
btnConfig: React.PropTypes.object,
text: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
help: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
Expand Down
50 changes: 31 additions & 19 deletions web/client/components/mapcontrols/measure/MeasureComponent.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,8 @@
const React = require('react');
const {Panel, ButtonGroup, Tooltip, Glyphicon, Button} = require('react-bootstrap');
const ToggleButton = require('../../buttons/ToggleButton');
var NumberFormat = require('../../I18N/Number');

const lineRuleIcon = require('./img/line-ruler.png');
const areaRuleIcon = require('./img/area-ruler.png');
const bearingRuleIcon = require('./img/bearing-ruler.png');
const NumberFormat = require('../../I18N/Number');
const Message = require('../../I18N/Message');

const measureUtils = require('../../../utils/MeasureUtils');
const localeUtils = require('../../../utils/LocaleUtils');
Expand Down Expand Up @@ -49,12 +46,15 @@ const MeasureComponent = React.createClass({
lineMeasureEnabled: React.PropTypes.bool,
areaMeasureEnabled: React.PropTypes.bool,
bearingMeasureEnabled: React.PropTypes.bool,
showButtons: React.PropTypes.bool,
showResults: React.PropTypes.bool,
lineGlyph: React.PropTypes.string,
areaGlyph: React.PropTypes.string,
bearingGlyph: React.PropTypes.string,
useButtonGroup: React.PropTypes.bool,
withReset: React.PropTypes.bool,
showButtonsLabels: React.PropTypes.bool,
inlineGlyph: React.PropTypes.bool,
formatLength: React.PropTypes.func,
formatArea: React.PropTypes.func,
formatBearing: React.PropTypes.func
Expand All @@ -64,7 +64,6 @@ const MeasureComponent = React.createClass({
},
getDefaultProps() {
return {
icon: <img src={lineRuleIcon} />,
columnProperties: {
xs: 4,
sm: 4,
Expand All @@ -75,12 +74,17 @@ const MeasureComponent = React.createClass({
length: {unit: 'm', label: 'm'},
area: {unit: 'sqm', label: 'm²'}
},
showButtons: true,
showResults: true,
useButtonGroup: false,
withReset: false,
lineGlyph: "1-measure-lenght",
areaGlyph: "1-measure-area",
bearingGlyph: "1-bearing",
showButtonsLabels: true,
lengthLabel: <Message msgId="measureComponent.lengthLabel"/>,
areaLabel: <Message msgId="measureComponent.areaLabel"/>,
bearingLabel: <Message msgId="measureComponent.bearingLabel"/>,
formatLength: (uom, value) => measureUtils.getFormattedLength(uom, value),
formatArea: (uom, value) => measureUtils.getFormattedArea(uom, value),
formatBearing: (value) => measureUtils.getFormattedBearingValue(round(value || 0, 6))
Expand Down Expand Up @@ -135,33 +139,41 @@ const MeasureComponent = React.createClass({
}
return null;
},
renderLabel(msgId) {
if (this.props.showButtonsLabels) {
return <span className="option-text">{localeUtils.getMessageById(this.context.messages, msgId)}</span>;
}
},
renderText(glyph, labelId) {
if (glyph) {
return (<span>
<span className="option-icon"><Glyphicon glyph={glyph}/></span>
{this.renderLabel(labelId)}
</span>);
}
return this.renderLabel(labelId);
},
renderButtons() {
let {lineToolTip, areaToolTip, bearingToolTip} = this.getToolTips();
return (
<div>
<ToggleButton
text={<span>
<span className="option-icon">{this.props.lineGlyph ? <Glyphicon glyph={this.props.lineGlyph}/> : <img src={lineRuleIcon}/>}</span>
<span className="option-text">{localeUtils.getMessageById(this.context.messages, "measureComponent.MeasureLength")}</span>
</span>}
text={this.renderText(this.props.inlineGlyph && this.props.lineGlyph, "measureComponent.MeasureLength")}
glyphicon={!this.props.inlineGlyph && this.props.lineGlyph}
style={{"width": "100%", textAlign: "left"}}
pressed={this.props.lineMeasureEnabled}
onClick={this.onLineClick}
tooltip={lineToolTip} />
<ToggleButton
text={<span>
<span className="option-icon">{this.props.areaGlyph ? <Glyphicon glyph={this.props.areaGlyph}/> : <img src={areaRuleIcon}/>}</span>
<span className="option-text">{localeUtils.getMessageById(this.context.messages, "measureComponent.MeasureArea")}</span>
</span>}
text={this.renderText(this.props.inlineGlyph && this.props.areaGlyph, "measureComponent.MeasureArea")}
glyphicon={!this.props.inlineGlyph && this.props.areaGlyph}
style={{"width": "100%", textAlign: "left"}}
pressed={this.props.areaMeasureEnabled}
onClick={this.onAreaClick}
tooltip={areaToolTip} />
<ToggleButton
text={<span>
<span className="option-icon">{this.props.bearingGlyph ? <Glyphicon glyph={this.props.bearingGlyph}/> : <img src={bearingRuleIcon}/>}</span>
<span className="option-text">{localeUtils.getMessageById(this.context.messages, "measureComponent.MeasureBearing")}</span>
</span>}
text={this.renderText(this.props.inlineGlyph && this.props.bearingGlyph, "measureComponent.MeasureBearing")}
glyphicon={!this.props.inlineGlyph && this.props.bearingGlyph}
style={{"width": "100%", textAlign: "left"}}
pressed={this.props.bearingMeasureEnabled}
onClick={this.onBearingClick}
Expand All @@ -185,7 +197,7 @@ const MeasureComponent = React.createClass({
render() {
return (
<Panel id={this.props.id}>
{this.props.useButtonGroup ? this.renderButtonGroup() : this.renderButtons() }
{this.props.showButtons && (this.props.useButtonGroup ? this.renderButtonGroup() : this.renderButtons()) }
{this.renderPanel()}
</Panel>
);
Expand Down
45 changes: 45 additions & 0 deletions web/client/components/mapcontrols/measure/MeasureDialog.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
/*
* Copyright 2017, GeoSolutions Sas.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree.
*/

const React = require('react');
const {Glyphicon} = require('react-bootstrap');
const MeasureComponent = require('./MeasureComponent');
const Message = require('../../I18N/Message');
const Dialog = require('../../misc/Dialog');


const MeasureDialog = React.createClass({
propTypes: {
show: React.PropTypes.bool,
closeGlyph: React.PropTypes.string,
onClose: React.PropTypes.func
},
getDefaultProps() {
return {
show: false,
closeGlyph: "1-close"
};
},
onClose() {
this.props.onClose(false);
},
render() {
return this.props.show ? (<Dialog>
<div key="header" role="header">
<Glyphicon glyph="1-ruler"/>&nbsp;<Message key="title" msgId="measureComponent.Measure"/>
<button key="close" onClick={this.onClose} className="close">{this.props.closeGlyph ? <Glyphicon glyph={this.props.closeGlyph}/> : <span>×</span>}</button>
</div>
<div key="body" className="panel-body" role="body">
<MeasureComponent id="measure-panel" style={{
minWidth: "500px"
}}{...this.props}/>
</div>
</Dialog>) : null;
}
});
module.exports = MeasureDialog;
136 changes: 0 additions & 136 deletions web/client/components/mapcontrols/measure/MeasureResults.jsx

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ describe("test the MeasureComponent", () => {

it('test creation of button UIs ', () => {
let measurement = {};
const mc = ReactDOM.render(<MeasureComponent measurement={measurement}/>, document.getElementById("container"));
const mc = ReactDOM.render(<MeasureComponent useButtonGroup={true} measurement={measurement}/>, document.getElementById("container"));
expect(mc).toExist();
const domNode = ReactDOM.findDOMNode(mc);
expect(domNode).toExist();
Expand All @@ -43,6 +43,17 @@ describe("test the MeasureComponent", () => {
expect(domButtons.length).toBe(3);
});

it('test creation of button UIs useButtonGroup option ', () => {
let measurement = {};
const mc = ReactDOM.render(<MeasureComponent useButtonGroup={true} measurement={measurement}/>, document.getElementById("container"));
expect(mc).toExist();
const domNode = ReactDOM.findDOMNode(mc);
expect(domNode).toExist();
const domButtons = domNode.getElementsByClassName('btn-block');
expect(domButtons).toExist();
expect(domButtons.length).toBe(1);
});

it('test creation of measurement result panel UI ', () => {
let measurement = {};
const mc = ReactDOM.render(<MeasureComponent measurement={measurement}/>, document.getElementById("container"));
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
/**
* Copyright 2015, GeoSolutions Sas.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree.
*/
var expect = require('expect');

var React = require('react');
var ReactDOM = require('react-dom');
const ReactTestUtils = require('react-addons-test-utils');
var MeasureDialog = require('../MeasureDialog');


describe("test the MeasureComponent", () => {
beforeEach((done) => {
document.body.innerHTML = '<div id="container"></div>';
setTimeout(done);
});

afterEach((done) => {
ReactDOM.unmountComponentAtNode(document.getElementById("container"));
document.body.innerHTML = '';
setTimeout(done);
});

it('test component creation', () => {
let measurement = {};
const mc = ReactDOM.render(<MeasureDialog show={true} measurement={measurement}/>, document.getElementById("container"));
expect(mc).toExist();
});
it('test close', () => {
let measurement = {};
const handlers = {
onClose() {}
};
let spy = expect.spyOn(handlers, "onClose");
const mc = ReactDOM.render(<MeasureDialog show={true} onClose={handlers.onClose} measurement={measurement}/>, document.getElementById("container"));
expect(mc).toExist();
const dom = ReactDOM.findDOMNode(mc);
const closeBtn = dom.getElementsByClassName('close')[0];
expect(closeBtn).toExist();
ReactTestUtils.Simulate.click(closeBtn);
expect(spy.calls.length).toBe(1);
});
});
Loading

0 comments on commit 1cdb8f0

Please sign in to comment.