Fix #1776. Move measure into burger menu

docma-config.json

@@ -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",

web/client/components/mapcontrols/locate/LocateBtn.jsx

@@ -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]),

web/client/components/mapcontrols/measure/MeasureComponent.jsx

@@ -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');
@@ -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
@@ -64,7 +64,6 @@ const MeasureComponent = React.createClass({
     },
     getDefaultProps() {
         return {
-            icon: <img src={lineRuleIcon} />,
             columnProperties: {
                 xs: 4,
                 sm: 4,
@@ -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))
@@ -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}
@@ -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>
         );

web/client/components/mapcontrols/measure/MeasureDialog.jsx

@@ -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;

web/client/components/mapcontrols/measure/__tests__/MeasureComponent-test.jsx

@@ -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();
@@ -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"));

web/client/components/mapcontrols/measure/__tests__/MeasureDialog-test.jsx

@@ -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);
+    });
+});