From 9f7fd3fa8634c0c411dac061b7da1c6943527784 Mon Sep 17 00:00:00 2001 From: Lorenzo Natali Date: Tue, 29 Sep 2015 18:59:23 +0200 Subject: [PATCH] fix #171. Add toolbar with panels and controls MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2 Please enter the commit message for your changes. Lines starting 2 with '#' will be ignored, and an empty message aborts the commit. 2 On branch mapToolbar 237ÜÐ0+r6b31ÜÐ0+r6b32ÜÐ0+r6b33Ü Changes to be committed: --- build.sh | 2 +- .../BackgroundSwitcher/BackgroundSwitcher.jsx | 3 +- web/client/components/LayerTree/LayerTree.js | 9 +- .../components/buttons/ToggleButton.jsx | 6 +- .../buttons/__tests__/ToggleButton-test.jsx | 26 ++--- .../components/BackgroundSwitcherTool.jsx | 40 ------- .../viewer/components/GetFeatureInfo.jsx | 20 +--- .../examples/viewer/components/MapToolBar.jsx | 106 ++++++++++++++++++ .../viewer/components/ViewerFloatingPanel.jsx | 65 ----------- .../viewer/components/backgroundTool.css | 32 ------ .../examples/viewer/components/mapPanel.css | 0 web/client/examples/viewer/index.html | 7 -- web/client/examples/viewer/plugins/index.jsx | 38 +++++-- 13 files changed, 160 insertions(+), 194 deletions(-) delete mode 100644 web/client/examples/viewer/components/BackgroundSwitcherTool.jsx create mode 100644 web/client/examples/viewer/components/MapToolBar.jsx delete mode 100644 web/client/examples/viewer/components/ViewerFloatingPanel.jsx delete mode 100644 web/client/examples/viewer/components/backgroundTool.css delete mode 100644 web/client/examples/viewer/components/mapPanel.css diff --git a/build.sh b/build.sh index beb0545dd0..08641d1efd 100755 --- a/build.sh +++ b/build.sh @@ -1,2 +1,2 @@ #!/bin/bash -mvn clean install -Pgeostore,proxy,extjs,postgres,h2_disk \ No newline at end of file +mvn clean install -Pgeostore,proxy,extjs,postgres,h2_disk diff --git a/web/client/components/BackgroundSwitcher/BackgroundSwitcher.jsx b/web/client/components/BackgroundSwitcher/BackgroundSwitcher.jsx index e879d6b49e..33730e71a9 100644 --- a/web/client/components/BackgroundSwitcher/BackgroundSwitcher.jsx +++ b/web/client/components/BackgroundSwitcher/BackgroundSwitcher.jsx @@ -7,7 +7,7 @@ */ var React = require('react'); -var {Grid, Col, Thumbnail} = require('react-bootstrap'); +var {Grid, Col, Thumbnail, Glyphicon} = require('react-bootstrap'); var HYBRID = require('./images/mapthumbs/HYBRID.jpg'); var ROADMAP = require('./images/mapthumbs/ROADMAP.jpg'); var TERRAIN = require('./images/mapthumbs/TERRAIN.jpg'); @@ -50,6 +50,7 @@ let BackgroundSwitcher = React.createClass({ }, getDefaultProps() { return { + icon: , columnProperties: { xs: 6, sm: 4, diff --git a/web/client/components/LayerTree/LayerTree.js b/web/client/components/LayerTree/LayerTree.js index 633383dcfd..7c76d2f7d1 100644 --- a/web/client/components/LayerTree/LayerTree.js +++ b/web/client/components/LayerTree/LayerTree.js @@ -11,13 +11,20 @@ var React = require('react'); var assign = require('object-assign'); var Legend = require('../Legend/Legend'); var {Glyphicon, Panel} = require('react-bootstrap'); +var icon = require('./images/layers.png'); let LayerTree = React.createClass({ propTypes: { id: React.PropTypes.number, + buttonContent: React.PropTypes.node, layers: React.PropTypes.array, propertiesChangeHandler: React.PropTypes.func }, + getDefaultProps() { + return { + buttonContent: + }; + }, renderGroup(group, layerObjs) { var groupTitle = group === "_default" ? "Default" : group; @@ -73,7 +80,7 @@ let LayerTree = React.createClass({ groups._default.push(layerObj); } } ); - return {Object.keys(groups).map(groupName => {return this.renderGroup(groupName, groups[groupName]); })}; + return {Object.keys(groups).map(groupName => {return this.renderGroup(groupName, groups[groupName]); })}; }, changeLayerVisibility(eventObj) { let position = parseInt(eventObj.currentTarget.dataset.position, 10); diff --git a/web/client/components/buttons/ToggleButton.jsx b/web/client/components/buttons/ToggleButton.jsx index 842d37e18a..c3f0ff9cfb 100644 --- a/web/client/components/buttons/ToggleButton.jsx +++ b/web/client/components/buttons/ToggleButton.jsx @@ -27,17 +27,15 @@ var ToggleButton = React.createClass({ }; }, onClick() { - this.props.onClick(this.props.pressed); + this.props.onClick(!this.props.pressed); }, render() { return ( -
- -
); } }); diff --git a/web/client/components/buttons/__tests__/ToggleButton-test.jsx b/web/client/components/buttons/__tests__/ToggleButton-test.jsx index b907697eac..0ad4acd8c3 100644 --- a/web/client/components/buttons/__tests__/ToggleButton-test.jsx +++ b/web/client/components/buttons/__tests__/ToggleButton-test.jsx @@ -25,11 +25,9 @@ describe("test the ToggleButton", () => { expect(tbNode).toExist(); expect(tbNode.id).toNotExist(); - const button = tbNode.getElementsByTagName('button')[0]; - expect(button).toExist(); - expect(button.className.indexOf('default') >= 0).toBe(true); - - expect(button.innerHTML).toNotExist(); + expect(tbNode).toExist(); + expect(tbNode.className.indexOf('default') >= 0).toBe(true); + expect(tbNode.innerHTML).toNotExist(); }); it('test glyphicon property', () => { @@ -38,11 +36,8 @@ describe("test the ToggleButton", () => { const tbNode = React.findDOMNode(tb); expect(tbNode).toExist(); - - const button = tbNode.getElementsByTagName('button')[0]; - expect(button).toExist(); - - const icons = button.getElementsByTagName('span'); + expect(tbNode).toExist(); + const icons = tbNode.getElementsByTagName('span'); expect(icons.length).toBe(1); }); @@ -52,11 +47,9 @@ describe("test the ToggleButton", () => { const tbNode = React.findDOMNode(tb); expect(tbNode).toExist(); + expect(tbNode).toExist(); - const button = tbNode.getElementsByTagName('button')[0]; - expect(button).toExist(); - - const btnItems = button.getElementsByTagName('span'); + const btnItems = tbNode.getElementsByTagName('span'); expect(btnItems.length).toBe(3); expect(btnItems[0].innerHTML).toBe(""); @@ -69,9 +62,8 @@ describe("test the ToggleButton", () => { expect(tb).toExist(); const tbNode = React.findDOMNode(tb); - const button = tbNode.getElementsByTagName('button')[0]; - expect(button.className.indexOf('primary') >= 0).toBe(true); + expect(tbNode.className.indexOf('primary') >= 0).toBe(true); }); it('test click handler', () => { @@ -85,6 +77,6 @@ describe("test the ToggleButton", () => { tbNode.click(); expect(spy.calls.length).toEqual(1); - expect(spy.calls[0].arguments).toEqual([true]); + expect(spy.calls[0].arguments).toEqual([false]); }); }); diff --git a/web/client/examples/viewer/components/BackgroundSwitcherTool.jsx b/web/client/examples/viewer/components/BackgroundSwitcherTool.jsx deleted file mode 100644 index 39d81c4f12..0000000000 --- a/web/client/examples/viewer/components/BackgroundSwitcherTool.jsx +++ /dev/null @@ -1,40 +0,0 @@ -/** - * 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 React = require('react'); - -var {Panel} = require('react-bootstrap'); -var BackgroundSwitcher = require('../../../components/BackgroundSwitcher/BackgroundSwitcher'); -var {Glyphicon, Button, OverlayTrigger, Tooltip} = require('react-bootstrap'); -var I18N = require('../../../components/I18N/I18N'); -require("./backgroundTool.css"); - -let MyButton = React.createClass({ - - propTypes: { - id: React.PropTypes.string, - layers: React.PropTypes.array, - propertiesChangeHandler: React.PropTypes.func - }, - getDefaultProps() { - return { - id: "mapstore-background-switcher", - layers: [], - propertiesChangeHandler: () => {} - }; - }, - render() { - var tooltip = ; - var button = ( - - ); - return ( - - ); - } -}); -module.exports = MyButton; diff --git a/web/client/examples/viewer/components/GetFeatureInfo.jsx b/web/client/examples/viewer/components/GetFeatureInfo.jsx index 33d886c473..ba45a84ed6 100644 --- a/web/client/examples/viewer/components/GetFeatureInfo.jsx +++ b/web/client/examples/viewer/components/GetFeatureInfo.jsx @@ -12,10 +12,7 @@ var Modal = BootstrapReact.Modal; var Tabs = BootstrapReact.Tabs; var Tab = BootstrapReact.Tab; var I18N = require('../../../components/I18N/I18N'); - -var ToggleButton = require('../../../components/buttons/ToggleButton'); var HtmlRenderer = require('../../../components/misc/HtmlRenderer'); - var CoordinatesUtils = require('../../../utils/CoordinatesUtils'); var assign = require('object-assign'); @@ -23,14 +20,11 @@ var GetFeatureInfo = React.createClass({ propTypes: { htmlResponses: React.PropTypes.array, btnConfig: React.PropTypes.object, - btnText: React.PropTypes.string, - btnIcon: React.PropTypes.string, enabled: React.PropTypes.bool, mapConfig: React.PropTypes.object, layerFilter: React.PropTypes.func, actions: React.PropTypes.shape({ getFeatureInfo: React.PropTypes.func, - changeMapInfoState: React.PropTypes.func, purgeMapInfoResults: React.PropTypes.func, changeMousePointer: React.PropTypes.func }), @@ -53,7 +47,6 @@ var GetFeatureInfo = React.createClass({ }, actions: { getFeatureInfo() {}, - changeMapInfoState() {}, purgeMapInfoResults() {}, changeMousePointer() {} } @@ -99,9 +92,6 @@ var GetFeatureInfo = React.createClass({ this.props.actions.changeMousePointer('auto'); } }, - onToggleButtonClick(btnEnabled) { - this.props.actions.changeMapInfoState(!btnEnabled); - }, onModalHiding() { this.props.actions.purgeMapInfoResults(); }, @@ -191,14 +181,6 @@ var GetFeatureInfo = React.createClass({ }, render() { return ( -
- -
+ ); }, reprojectBbox(bbox, destSRS) { diff --git a/web/client/examples/viewer/components/MapToolBar.jsx b/web/client/examples/viewer/components/MapToolBar.jsx new file mode 100644 index 0000000000..59fba85443 --- /dev/null +++ b/web/client/examples/viewer/components/MapToolBar.jsx @@ -0,0 +1,106 @@ +/** + * 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 React = require('react'); + +var {Collapse, Panel, Button, ButtonGroup, Tooltip, OverlayTrigger} = require('react-bootstrap'); + +var assign = require('object-assign'); + +/** + * This toolbar renders as an accordion for big screens, as a + * toolbar with small screens, rendering the content as a modal + * window. + */ +let MapToolBar = React.createClass({ + propTypes: { + layers: React.PropTypes.array, + panelStyle: React.PropTypes.object, + containerStyle: React.PropTypes.object, + propertiesChangeHandler: React.PropTypes.func, + onActivateItem: React.PropTypes.func, + activeKey: React.PropTypes.string + }, + getDefaultProps() { + return { + panelStyle: { + minWidth: "300px", + right: "52px", + position: "absolute", + overflow: "auto" + }, + containerStyle: { + position: "absolute", + top: 0, + right: 0, + marginRight: "5px", + marginTop: "50px" + } + }; + }, + getPanelStyle() { + var width = window.innerWidth + || document.documentElement.clientWidth + || document.body.clientWidth; + + var height = window.innerHeight + || document.documentElement.clientHeight + || document.body.clientHeight; + var maxHeight = height - 70; // TODO make it parametric or calculate + var maxWidth = width - 70; // TODO make it parametric or calculate + return assign({}, this.props.panelStyle, {maxWidth: maxWidth + "px", maxHeight: maxHeight + "px"}); + }, + render() { + var children = this.props.children.map((item) => { + if (item.props.isPanel) { + return ( + + + {item} + + ); + } + return null; + + }, this); + var buttons = this.props.children.map((item) => { + if (item.props.isPanel) { + let tooltip = {item.props.buttonTooltip}; + let panelButton = ( + + + + ); + return panelButton; + } + return item; + + }, this); + return (
+ {children} + + {buttons} + +
); + + }, + + handleSelect(activeKey) { + if (activeKey === this.props.activeKey) { + this.props.onActivateItem(); + }else { + this.props.onActivateItem(activeKey); + } + + } +}); +module.exports = MapToolBar; diff --git a/web/client/examples/viewer/components/ViewerFloatingPanel.jsx b/web/client/examples/viewer/components/ViewerFloatingPanel.jsx deleted file mode 100644 index 0c7bb4054b..0000000000 --- a/web/client/examples/viewer/components/ViewerFloatingPanel.jsx +++ /dev/null @@ -1,65 +0,0 @@ -/** - * 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 React = require('react'); - -var {Panel, PanelGroup} = require('react-bootstrap'); -var LayerSwitcher = require('../../../components/LayerTree/LayerTree'); -var {Button, Tooltip, OverlayTrigger} = require('react-bootstrap'); -var {Message} = require('../../../components/I18N/I18N'); -var icon = require('../../../components/LayerTree/images/layers.png'); - -require("./mapPanel.css"); - -let ViewerFloatingPanel = React.createClass({ - propTypes: { - id: React.PropTypes.string, - layers: React.PropTypes.array, - panelStyle: React.PropTypes.object, - propertiesChangeHandler: React.PropTypes.func, - onActivateItem: React.PropTypes.func, - activeKey: React.PropTypes.string - }, - getDefaultProps() { - return { - id: "mapstore-floating-panel", - panelStyle: { - position: "absolute", - bottom: "0px", - right: "75px", - maxWidth: "100%", - marginTop: "50px", - maxHeight: "700px", - transition: "width 5s" - } - }; - }, - render() { - - var tooltip = ; - var layerSwitcherButton = ( - - - - ); - return ( - - - - - ); - }, - handleSelect(activeKey) { - if (activeKey === this.props.activeKey) { - this.props.onActivateItem(); - }else { - this.props.onActivateItem(activeKey); - } - - } -}); -module.exports = ViewerFloatingPanel; diff --git a/web/client/examples/viewer/components/backgroundTool.css b/web/client/examples/viewer/components/backgroundTool.css deleted file mode 100644 index 94b53ec899..0000000000 --- a/web/client/examples/viewer/components/backgroundTool.css +++ /dev/null @@ -1,32 +0,0 @@ -.background-switcher-panel { - background-color: transparent !important; - overflow: auto; - position: absolute; - top:75px; - max-height: 90%; - left: 10px; -} -.background-switcher-panel, .panel-heading{ - padding-right: 0px; - padding-left: 0px; - padding-top: 0px; - padding-bottom: 0px; -} -.background-switcher-panel button.btn { - padding: 4px; -} -.background-switcher-panel .panel-body{ - - height:auto; - max-height:100%%; - overflow:auto; - background-color: rgba(255, 255, 255, 0.5); - overflow: auto; -} - -.background-switcher-panel .row { - background-color: rgba(255,255,255,0.5); - border-radius: 10px; - padding: 20px; - margin: 10px; -} diff --git a/web/client/examples/viewer/components/mapPanel.css b/web/client/examples/viewer/components/mapPanel.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/web/client/examples/viewer/index.html b/web/client/examples/viewer/index.html index 5ff7d7975b..5b114a420a 100644 --- a/web/client/examples/viewer/index.html +++ b/web/client/examples/viewer/index.html @@ -51,13 +51,6 @@ position: absolute; margin: 8px; } - #mapstore-getfeatureinfo { - z-index: 10; - top: 38px; - right: 0px; - position: absolute; - margin: 8px; - } diff --git a/web/client/examples/viewer/plugins/index.jsx b/web/client/examples/viewer/plugins/index.jsx index 0ccf21b284..7187fb189c 100644 --- a/web/client/examples/viewer/plugins/index.jsx +++ b/web/client/examples/viewer/plugins/index.jsx @@ -1,7 +1,11 @@ var About = require('../components/About'); var LangSelector = require('../../../components/I18N/LangSelector'); -var BackgroundSwitcherTool = require("../components/BackgroundSwitcherTool"); -var ViewerFloatingPanel = require("../components/ViewerFloatingPanel"); +var {Message} = require('../../../components/I18N/I18N'); + +var ToggleButton = require('../../../components/buttons/ToggleButton'); +var BackgroundSwitcher = require("../../../components/BackgroundSwitcher/BackgroundSwitcher"); +var LayerTree = require("../../../components/LayerTree/LayerTree"); +var MapToolBar = require("../components/MapToolBar"); var GetFeatureInfo = require("../components/GetFeatureInfo"); var mapInfo = require('../../../reducers/mapInfo'); @@ -21,21 +25,41 @@ module.exports = { return [ , , - , - , + onActivateItem={props.activatePanel} + mapInfo={props.mapInfo} + changeMapInfoState={props.changeMapInfoState}> + + } + title={} + layers={props.mapConfig.layers} + propertiesChangeHandler={props.changeLayerProperties}/> + } + buttonTooltip={} + propertiesChangeHandler={props.changeLayerProperties}/> + ,