Skip to content

Commit

Permalink
fix #171. Add toolbar with panels and controls
Browse files Browse the repository at this point in the history
  • Loading branch information
offtherailz committed Sep 29, 2015
1 parent 9a4f178 commit c6473d5
Show file tree
Hide file tree
Showing 13 changed files with 160 additions and 194 deletions.
2 changes: 1 addition & 1 deletion build.sh
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
#!/bin/bash
mvn clean install -Pgeostore,proxy,extjs,postgres,h2_disk
mvn clean install -DskipTests -nsu
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -50,6 +50,7 @@ let BackgroundSwitcher = React.createClass({
},
getDefaultProps() {
return {
icon: <Glyphicon glyph="globe"/>,
columnProperties: {
xs: 6,
sm: 4,
Expand Down
9 changes: 8 additions & 1 deletion web/client/components/LayerTree/LayerTree.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: <img src={icon}/>
};
},
renderGroup(group, layerObjs) {
var groupTitle = group === "_default" ? "Default" : group;

Expand Down Expand Up @@ -73,7 +80,7 @@ let LayerTree = React.createClass({
groups._default.push(layerObj);
}
} );
return <Panel style={{overflow: "auto", height: "400px"}} >{Object.keys(groups).map(groupName => {return this.renderGroup(groupName, groups[groupName]); })}</Panel>;
return <Panel style={{overflow: "auto"}} >{Object.keys(groups).map(groupName => {return this.renderGroup(groupName, groups[groupName]); })}</Panel>;
},
changeLayerVisibility(eventObj) {
let position = parseInt(eventObj.currentTarget.dataset.position, 10);
Expand Down
6 changes: 2 additions & 4 deletions web/client/components/buttons/ToggleButton.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,17 +27,15 @@ var ToggleButton = React.createClass({
};
},
onClick() {
this.props.onClick(this.props.pressed);
this.props.onClick(!this.props.pressed);
},
render() {
return (
<div id={this.props.id} onClick={this.onClick}>
<Button {...this.props.btnConfig} bsStyle={this.props.pressed ? 'primary' : 'default'}>
<Button id={this.props.id} {...this.props.btnConfig} onClick={this.onClick} bsStyle={this.props.pressed ? 'primary' : 'default'}>
{this.props.glyphicon ? <Glyphicon glyph={this.props.glyphicon}/> : null}
{this.props.glyphicon && this.props.text ? "\u00A0" : null}
{this.props.text}
</Button>
</div>
);
}
});
Expand Down
26 changes: 9 additions & 17 deletions web/client/components/buttons/__tests__/ToggleButton-test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand All @@ -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);
});

Expand All @@ -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("");
Expand All @@ -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', () => {
Expand All @@ -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]);
});
});
40 changes: 0 additions & 40 deletions web/client/examples/viewer/components/BackgroundSwitcherTool.jsx

This file was deleted.

20 changes: 1 addition & 19 deletions web/client/examples/viewer/components/GetFeatureInfo.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,25 +12,19 @@ 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');

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
}),
Expand All @@ -53,7 +47,6 @@ var GetFeatureInfo = React.createClass({
},
actions: {
getFeatureInfo() {},
changeMapInfoState() {},
purgeMapInfoResults() {},
changeMousePointer() {}
}
Expand Down Expand Up @@ -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();
},
Expand Down Expand Up @@ -191,14 +181,6 @@ var GetFeatureInfo = React.createClass({
},
render() {
return (
<div id="mapstore-getfeatureinfo">
<ToggleButton
pressed={this.props.enabled}
btnConfig={this.props.btnConfig}
text={this.props.btnText}
glyphicon={this.props.btnIcon}
onClick={this.onToggleButtonClick}
/>
<Modal
show={this.props.htmlResponses.length !== 0}
onHide={this.onModalHiding}
Expand All @@ -214,7 +196,7 @@ var GetFeatureInfo = React.createClass({
</Tabs>
</Modal.Body>
</Modal>
</div>

);
},
reprojectBbox(bbox, destSRS) {
Expand Down
106 changes: 106 additions & 0 deletions web/client/examples/viewer/components/MapToolBar.jsx
Original file line number Diff line number Diff line change
@@ -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 (
<Collapse in={this.props.activeKey === item.key}>
<Panel header={item.props.title} style={this.getPanelStyle()} >
{item}
</Panel>
</Collapse>);
}
return null;

}, this);
var buttons = this.props.children.map((item) => {
if (item.props.isPanel) {
let tooltip = <Tooltip id="toolbar-map-layers-button">{item.props.buttonTooltip}</Tooltip>;
let panelButton = (
<OverlayTrigger placement="left" overlay={tooltip}>
<Button
pressed={this.props.activeKey === item.key}
style={{width: "100%"}}
onClick={ () => this.handleSelect(item.key)}>
{item.props.buttonContent || item.props.icon}
</Button>
</OverlayTrigger>
);
return panelButton;
}
return item;

}, this);
return (<div style={this.props.containerStyle}>
{children}
<ButtonGroup vertical>
{buttons}
</ButtonGroup>
</div>);

},

handleSelect(activeKey) {
if (activeKey === this.props.activeKey) {
this.props.onActivateItem();
}else {
this.props.onActivateItem(activeKey);
}

}
});
module.exports = MapToolBar;
Loading

0 comments on commit c6473d5

Please sign in to comment.