Fixes #1484: cleanup of plugins configuration

web/client/components/TOC/background/BackgroundSwitcher.jsx

@@ -62,11 +62,11 @@ let BackgroundSwitcher = React.createClass({
         return {
             id: "background-switcher",
             icon: <Glyphicon glyph="globe"/>,
-            fluid: false,
+            fluid: true,
             columnProperties: {
-                xs: 6,
-                sm: 4,
-                md: 2
+                xs: 12,
+                sm: 12,
+                md: 12
              }
         };
     },

web/client/components/buttons/ZoomToMaxExtentButton.jsx

@@ -51,7 +51,8 @@ var ZoomToMaxExtentButton = React.createClass({
             btnType: 'normal',
             useInitialExtent: false,
             tooltipPlace: "left",
-            bsStyle: "default"
+            bsStyle: "default",
+            className: "square-button"
         };
     },
     render() {

web/client/components/catalog/Catalog.jsx

@@ -20,7 +20,7 @@ const Catalog = React.createClass({
         active: React.PropTypes.bool,
         formats: React.PropTypes.array,
         format: React.PropTypes.string,
-        searchOnStarup: React.PropTypes.bool,
+        searchOnStartup: React.PropTypes.bool,
         onSearch: React.PropTypes.func,
         onReset: React.PropTypes.func,
         onChangeFormat: React.PropTypes.func,
@@ -77,7 +77,7 @@ const Catalog = React.createClass({
         };
     },
     componentDidMount() {
-        if (this.props.searchOnStarup) {
+        if (this.props.searchOnStartup) {
             this.props.onSearch(this.props.format, this.getCatalogUrl(), 1, this.props.pageSize, "");
         }
     },

web/client/components/data/identify/GeocodeViewer.jsx

@@ -11,35 +11,38 @@ const PropTypes = React.PropTypes;
 const {Modal, Button} = require('react-bootstrap');
 
 const GeocodeViewer = (props) => {
-    /* lngCorrected is the converted longitude in order to have the value between
-       the range (-180 / +180).
-    */
-    let lngCorrected = Math.round(props.latlng.lng * 100000) / 100000;
-    /* the following formula apply the converion */
-    lngCorrected = lngCorrected - (360) * Math.floor(lngCorrected / (360) + 0.5);
-    return (
-        <div>
-            <span>Lat: {Math.round(props.latlng.lat * 100000) / 100000 } - Long: { lngCorrected }</span>
-            <Button
-                style={{"float": "right"}}
-                bsStyle="primary"
-                bsSize="small"
-                onClick={() => props.showRevGeocode({lat: props.latlng.lat, lng: lngCorrected})} >
-                {props.identifyRevGeocodeSubmitText}
-            </Button>
-            <Modal {...props.modalOptions} show={props.showModalReverse} bsSize="large" container={document.getElementById("body")}>
-                <Modal.Header>
-                    <Modal.Title>{props.identifyRevGeocodeModalTitle}</Modal.Title>
-                </Modal.Header>
-                <Modal.Body >
-                    <p>{props.revGeocodeDisplayName}</p>
-                </Modal.Body>
-                <Modal.Footer>
-                    <Button bsSize="small" style={{"float": "right"}} bsStyle="primary" onClick={props.hideRevGeocode}>{props.identifyRevGeocodeCloseText}</Button>
-                </Modal.Footer>
-            </Modal>
-        </div>
-    );
+    if (props.latlng) {
+        /* lngCorrected is the converted longitude in order to have the value between
+           the range (-180 / +180).
+        */
+        let lngCorrected = Math.round(props.latlng.lng * 100000) / 100000;
+        /* the following formula apply the converion */
+        lngCorrected = lngCorrected - (360) * Math.floor(lngCorrected / (360) + 0.5);
+        return (
+            <div>
+                <span>Lat: {Math.round(props.latlng.lat * 100000) / 100000 } - Long: { lngCorrected }</span>
+                <Button
+                    style={{"float": "right"}}
+                    bsStyle="primary"
+                    bsSize="small"
+                    onClick={() => props.showRevGeocode({lat: props.latlng.lat, lng: lngCorrected})} >
+                    {props.identifyRevGeocodeSubmitText}
+                </Button>
+                <Modal {...props.modalOptions} show={props.showModalReverse} bsSize="large" container={document.getElementById("body")}>
+                    <Modal.Header>
+                        <Modal.Title>{props.identifyRevGeocodeModalTitle}</Modal.Title>
+                    </Modal.Header>
+                    <Modal.Body >
+                        <p>{props.revGeocodeDisplayName}</p>
+                    </Modal.Body>
+                    <Modal.Footer>
+                        <Button bsSize="small" style={{"float": "right"}} bsStyle="primary" onClick={props.hideRevGeocode}>{props.identifyRevGeocodeCloseText}</Button>
+                    </Modal.Footer>
+                </Modal>
+            </div>
+        );
+    }
+    return <span/>;
 };
 
 GeocodeViewer.propTypes = {

web/client/components/data/identify/Identify.jsx

@@ -81,10 +81,13 @@ const Identify = React.createClass({
             changeMousePointer: () => {},
             showRevGeocode: () => {},
             hideRevGeocode: () => {},
+            containerProps: {
+                continuous: false
+            },
             showModalReverse: false,
             reverseGeocodeData: {},
-            enableRevGeocode: false,
-            wrapRevGeocode: true,
+            enableRevGeocode: true,
+            wrapRevGeocode: false,
             queryableLayersFilter: MapInfoUtils.defaultQueryableFilter,
             style: {
                 position: "absolute",
@@ -105,12 +108,13 @@ const Identify = React.createClass({
                 "filter",
                 "propertyName"
             ],
-            panelClassName: "panel default-panel",
-            headerClassName: "panel-heading",
-            bodyClassName: "panel-body",
-            asPanel: true,
-            headerGlyph: "info-sign",
-            closeGlyph: "",
+            panelClassName: "modal-dialog info-panel modal-content",
+            headerClassName: "modal-header",
+            bodyClassName: "modal-body info-wrap",
+            asPanel: false,
+            headerGlyph: "",
+            closeGlyph: "1-close",
+            className: "square-button",
             allowMultiselection: false
         };
     },

web/client/components/data/identify/__tests__/Identify-test.jsx

@@ -42,7 +42,7 @@ describe('Identify', () => {
 
         expect(identify).toExist();
         const dom = ReactDOM.findDOMNode(identify);
-        expect(dom.parentNode.getElementsByClassName('panel').length).toBe(1);
+        expect(dom.parentNode.getElementsByClassName('info-panel').length).toBe(1);
     });
 
     it('creates the Identify component with missing responses', () => {

web/client/components/help/HelpTextPanel.jsx

@@ -39,8 +39,8 @@ const HelpTextPanel = React.createClass({
             isVisible: false,
             title: 'HELP',
             onClose: () => {},
-            asPanel: true,
-            closeGlyph: ""
+            asPanel: false,
+            closeGlyph: "1-close"
         };
     },
     render() {

web/client/components/help/__tests__/HelpTextPanel-test.jsx

@@ -24,7 +24,7 @@ describe('Test for HelpTextPanel', () => {
 
     // test DEFAULTS
     it('creates the component with defaults', () => {
-        const helpPanel = ReactDOM.render(<HelpTextPanel/>, document.getElementById("container"));
+        const helpPanel = ReactDOM.render(<HelpTextPanel asPanel/>, document.getElementById("container"));
         expect(helpPanel).toExist();
 
         const helpPanelDom = ReactDOM.findDOMNode(helpPanel);
@@ -45,6 +45,7 @@ describe('Test for HelpTextPanel', () => {
 
     it('creates the component with custom props', () => {
         const helpPanel = ReactDOM.render(<HelpTextPanel
+                        asPanel
                         id="fooid"
                         isVisible={true}
                         title="footitle"

web/client/components/mapcontrols/Snapshot/SnapshotPanel.jsx

@@ -83,7 +83,7 @@ let SnapshotPanel = React.createClass({
             timeout: 1000,
             mapType: 'leaflet',
             wrap: false,
-            wrapWithPanel: true,
+            wrapWithPanel: false,
             panelStyle: {
                 minWidth: "720px",
                 zIndex: 100,
@@ -93,8 +93,8 @@ let SnapshotPanel = React.createClass({
                 right: "100px"
             },
             panelClassName: "snapshot-panel",
-            closeGlyph: "",
-            buttonStyle: "default"
+            closeGlyph: "1-close",
+            buttonStyle: "primary"
         };
     },
     shouldComponentUpdate(nextProps) {

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

@@ -34,7 +34,10 @@ const LocateBtn = React.createClass({
             locate: "DISABLED",
             tooltipPlace: "left",
             bsStyle: "default",
-            glyph: "screenshot"
+            glyph: "1-position-1",
+            btnConfig: {
+                className: "square-button"
+            }
         };
     },
     onClick() {

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

@@ -77,8 +77,11 @@ const MeasureComponent = React.createClass({
                 area: {unit: 'sqm', label: 'm²'}
             },
             showResults: true,
-            useButtonGroup: true,
+            useButtonGroup: false,
             withReset: false,
+            lineGlyph: "1-measure-lenght",
+            areaGlyph: "1-measure-area",
+            bearingGlyph: "1-bearing",
             formatLength: (uom, value) => measureUtils.getFormattedLength(uom, value),
             formatArea: (uom, value) => measureUtils.getFormattedArea(uom, value),
             formatBearing: (value) => measureUtils.getFormattedBearingValue(round(value || 0, 6))

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

@@ -72,8 +72,8 @@ const MeasureResults = React.createClass({
                 overflow: "auto"
             },
             panelClassName: "drawer-menu-panel",
-            withPanelAsContainer: true,
-            closeGlyph: ""
+            withPanelAsContainer: false,
+            closeGlyph: "1-close"
         };
     },
     shouldComponentUpdate(nextProps) {

web/client/components/mapcontrols/navigationhistory/RedoButton.jsx

@@ -28,8 +28,11 @@ var RedoBtn = React.createClass({
             id: "redo-btn",
             onClick: () => {},
             tooltipPlace: "left",
-            glyph: "step-forward",
-            buttonStyle: "default"
+            glyph: "1-screen-forward",
+            buttonStyle: "primary",
+            btnConfig: {
+                className: "square-button"
+            }
         };
     },
     onClick() {

web/client/components/mapcontrols/navigationhistory/UndoButton.jsx

@@ -28,8 +28,11 @@ var UndoBtn = React.createClass({
             id: "undo-btn",
             onClick: () => {},
             tooltipPlace: "left",
-            glyph: "step-backward",
-            buttonStyle: "default"
+            glyph: "1-screen-backward",
+            buttonStyle: "primary",
+            btnConfig: {
+                className: "square-button"
+            }
         };
     },
     onClick() {

web/client/components/misc/spinners/GlobalSpinner/GlobalSpinner.jsx

@@ -20,7 +20,7 @@ const GlobalSpinner = React.createClass({
         return {
             id: "mapstore-globalspinner",
             loading: false,
-            className: "mapstore-globalspinner",
+            className: "ms2-loading",
             spinner: "circle"
         };
     },

web/client/components/security/UserMenu.jsx

@@ -53,9 +53,29 @@ const UserMenu = React.createClass({
           displayAttributes: (attr) => {
               return attr.name === "email";
           },
-          className: "user-menu"
+          className: "user-menu",
+          menuProps: {
+              noCaret: true
+          },
+          toolsCfg: [{
+              buttonSize: "small",
+              includeCloseButton: false,
+              useModal: false,
+              closeGlyph: "1-close"
+          }, {
+              buttonSize: "small",
+              includeCloseButton: false,
+              useModal: false,
+              closeGlyph: "1-close"
+          }, {
+              buttonSize: "small",
+              includeCloseButton: false,
+              useModal: false,
+              closeGlyph: "1-close"
+          }]
       };
   },
+
   renderGuestTools() {
       let DropDown = this.props.nav ? NavDropdown : DropdownButton;
       return (<DropDown id="loginButton" className={this.props.className} pullRight bsStyle={this.props.bsStyle} title={this.renderButtonText()} id="dropdown-basic-primary" {...this.props.menuProps}>

web/client/components/share/SharePanel.jsx

@@ -37,7 +37,8 @@ let SharePanel = React.createClass({
     getDefaultProps() {
         return {
             title: <Message msgId="share.titlePanel"/>,
-            onClose: () => {}
+            onClose: () => {},
+            closeGlyph: "1-close"
         };
     },
     render() {

web/client/containers/Page.jsx

@@ -47,20 +47,14 @@ const Page = React.createClass({
     },
     render() {
         let pluginsConfig = {
-            desktop: [...(this.props.pagePluginsConfig.desktop).filter((tool) => !this.isBottom(tool)), ...this.props.pluginsConfig.desktop, ...(this.props.pagePluginsConfig.desktop).filter(this.isBottom)],
-            mobile: [...(this.props.pagePluginsConfig.mobile).filter((tool) => !this.isBottom(tool)), ...this.props.pluginsConfig.mobile, ...(this.props.pagePluginsConfig.desktop).filter(this.isBottom)]
+            desktop: [...this.props.pagePluginsConfig.desktop, ...this.props.pluginsConfig.desktop],
+            mobile: [...this.props.pagePluginsConfig.mobile, ...this.props.pluginsConfig.mobile]
         };
         return (<PluginsContainer key="{this.props.id}" id={"page-" + this.props.id} className={"page page-" + this.props.id}
             pluginsConfig={pluginsConfig}
             plugins={this.props.plugins}
             params={this.props.params}
             />);
-    },
-    isBottom(tool) {
-        if ( tool.cfg ) {
-            return tool.cfg.bottom;
-        }
-        return false;
     }
 });
 

web/client/examples/3dviewer/containers/Viewer.jsx

@@ -9,7 +9,7 @@ const MousePosition = require("../../../components/mapcontrols/mouseposition/Mou
 
 const {changeMapView} = require('../../../actions/map');
 const {changeMousePosition} = require('../../../actions/mousePosition');
-const {textSearch, resultsPurge} = require("../../../actions/search");
+const {textSearch, resultsPurge, searchTextChanged} = require("../../../actions/search");
 const {toggleGraticule, updateMarker} = require('../actions/controls');
 
 const Localized = require('../../../components/I18N/Localized');
@@ -22,6 +22,7 @@ const Viewer = React.createClass({
         // redux store dispatch func
         dispatch: React.PropTypes.func,
         textSearch: React.PropTypes.func,
+        searchTextChanged: React.PropTypes.func,
         resultsPurge: React.PropTypes.func,
         changeMapView: React.PropTypes.func,
         changeMousePosition: React.PropTypes.func,
@@ -34,7 +35,8 @@ const Viewer = React.createClass({
         searchResults: React.PropTypes.array,
         mapStateSource: React.PropTypes.string,
         showGraticule: React.PropTypes.bool,
-        marker: React.PropTypes.object
+        marker: React.PropTypes.object,
+        searchText: React.PropTypes.string
     },
     onSearchClick: function(center) {
         this.props.updateMarker({lng: center.x, lat: center.y});
@@ -79,7 +81,7 @@ const Viewer = React.createClass({
                             }}>
                             <label>Graticule:&nbsp;&nbsp;<input type="checkbox" checked={this.props.showGraticule} onChange={this.props.toggleGraticule}/></label>
                         </div>
-                        <SearchBar key="seachBar" onSearch={this.props.textSearch} onSearchReset={this.props.resultsPurge} />
+                        <SearchBar key="seachBar" searchText={this.props.searchText} onSearchTextChange={this.props.searchTextChanged} onSearch={this.props.textSearch} onSearchReset={this.props.resultsPurge} />
                         <NominatimResultList key="nominatimresults"
                             results={this.props.searchResults}
                             onItemClick={this.onSearchClick}
@@ -111,12 +113,14 @@ module.exports = connect((state) => {
         locale: state.locale ? state.locale.current : null,
         localeError: state.locale && state.locale.loadingError ? state.locale.loadingError : undefined,
         searchResults: state.searchResults && state.searchResults.results ? state.searchResults.results : null,
+        searchText: state.searchResults && state.searchResults.searchText,
         mousePosition: state.mousePosition && state.mousePosition.position || null,
         showGraticule: state.controls && state.controls.graticule || false,
         marker: state.controls && state.controls.marker || null
     };
 }, {
     textSearch,
+    searchTextChanged,
     resultsPurge,
     changeMapView,
     changeMousePosition,