Fixed #1545 Various fixes to look and feel

web/client/components/theme/ThemeSwitcher.jsx

@@ -21,10 +21,7 @@ const ThemeSwitcher = React.createClass({
      getDefaultProps() {
          return {
              onThemeSelected: () => {},
-             style: {
-                 width: "300px",
-                 margin: "20px auto"
-             }
+             style: {}
          };
      },
 

web/client/localConfig.json

@@ -108,7 +108,7 @@
                     }
                 }
             }, "Login",
-            "OmniBar", "BurgerMenu", "Expander"
+            "OmniBar", "GridContainer", "BurgerMenu", "Expander"
         ],
         "desktop": ["Map", "Help", "Share", "DrawerMenu", {
                 "name": "Identify",
@@ -202,7 +202,7 @@
                     }
                 }
             },
-            "OmniBar", "Login", "Save", "SaveAs", "BurgerMenu", "Expander", "Undo", "Redo", "FullScreen"
+            "OmniBar", "GridContainer", "Login", "Save", "SaveAs", "BurgerMenu", "Expander", "Undo", "Redo", "FullScreen"
         ],
         "embedded": [{
                 "name": "Map",
@@ -275,7 +275,7 @@
                 "className": "navbar shadow navbar-home"
             }
         }, "ManagerMenu", "Login", "Language", "Attribution", "ScrollTop"],
-        "maps": ["Header", "Fork", "MapSearch", "HomeDescription", "MapType", "ThemeSwitcher", "CreateNewMap", "Maps", "Examples", "Footer"],
+        "maps": ["Header", "Fork", "MapSearch", "HomeDescription", "MapType", "ThemeSwitcher",  "GridContainer", "CreateNewMap", "Maps", "Examples", "Footer"],
         "manager": ["Header", "Redirect", "Manager", "Home", "UserManager", "GroupManager", "Footer"]
     }
 }

web/client/plugins/BackgroundSwitcher.jsx

@@ -53,7 +53,8 @@ module.exports = {
             icon: <Glyphicon glyph="1-map"/>,
             title: 'background',
             buttonConfig: {
-                buttonClassName: "square-button no-border"
+                buttonClassName: "square-button no-border",
+                tooltip: "toc.backgroundSwitcher"
             },
             priority: 2
         }

web/client/plugins/DrawerMenu.jsx

@@ -8,14 +8,15 @@
 
 const React = require('react');
 const {connect} = require('react-redux');
+const OverlayTrigger = require('../components/misc/OverlayTrigger');
 
 const Message = require('./locale/Message');
 
 const {toggleControl, setControlProperty} = require('../actions/controls');
 
 const {changeMapStyle} = require('../actions/map');
 
-const {Button, Glyphicon, Panel} = require('react-bootstrap');
+const {Button, Glyphicon, Panel, Tooltip} = require('react-bootstrap');
 
 const Section = require('./drawer/Section');
 
@@ -86,9 +87,14 @@ const DrawerMenu = React.createClass({
         });
     },
     render() {
+        let tooltip = <Tooltip key="drawerButtonTooltip" id="drawerButtonTooltip"><Message msgId={"toc.drawerButton"}/></Tooltip>;
         return (
             <div id={this.props.id}>
-                <Button id="drawer-menu-button" style={this.props.menuButtonStyle} bsStyle={this.props.buttonStyle} key="menu-button" className={this.props.buttonClassName} onClick={this.props.toggleMenu} disabled={this.props.disabled}><Glyphicon glyph={this.props.glyph}/></Button>
+                <OverlayTrigger placement="bottom" key="drawerButtonTooltip"
+                    overlay={tooltip}>
+                    <Button id="drawer-menu-button" style={this.props.menuButtonStyle} bsStyle={this.props.buttonStyle} key="menu-button" className={this.props.buttonClassName} onClick={this.props.toggleMenu} disabled={this.props.disabled}><Glyphicon glyph={this.props.glyph}/></Button>
+                </OverlayTrigger>
+
                 <Menu single={this.props.singleSection} {...this.props.menuOptions} title={<Message msgId="menu" />} alignment="left">
                     {this.renderItems()}
                 </Menu>

web/client/plugins/GridContainer.jsx

@@ -0,0 +1,69 @@
+/*
+ * 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 {Grid, Row, Col} = require('react-bootstrap');
+const ToolsContainer = require('./containers/ToolsContainer');
+
+/**
+ * GridContainerPlugin. This is a plugin that works as container
+ * of other plugins displaying them in a grid
+*/
+const GridContainer = React.createClass({
+    propTypes: {
+        className: React.PropTypes.string,
+        style: React.PropTypes.object,
+        items: React.PropTypes.array,
+        id: React.PropTypes.string,
+        mapType: React.PropTypes.string
+    },
+    getDefaultProps() {
+        return {
+            items: [],
+            className: "grid-home-container",
+            style: {},
+            id: "mapstore-grid-home",
+            mapType: "leaflet"
+        };
+    },
+    getPanels() {
+        return this.props.items.filter((item) => item.tools).reduce((previous, current) => {
+            return previous.concat(
+                current.tools.map((tool, index) => ({
+                    name: current.name + index,
+                    panel: tool,
+                    cfg: current.cfg.toolsCfg ? current.cfg.toolsCfg[index] : {}
+                }))
+            );
+        }, []);
+    },
+    getTools() {
+        return this.props.items.sort((a, b) => a.position - b.position);
+    },
+    render() {
+        return (<ToolsContainer
+            id={this.props.id}
+            style={this.props.style}
+            className={this.props.className}
+            mapType={this.props.mapType}
+            container={(props) => (<Grid fluid><Row>
+                        {props.children.map( item => <Col xs={12} xsOffset={0} sm={6} smOffset={3} smOffset={0}>{item}</Col>)}
+                </Row></Grid>)}
+            toolStyle="primary"
+            activeStyle="default"
+            stateSelector="omnibar"
+            tool={(props) => <div>{props.children}</div>}
+            tools={this.getTools()}
+            panels={this.getPanels()}
+        />);
+    }
+});
+
+module.exports = {
+    GridContainerPlugin: GridContainer,
+    reducers: {}
+};

web/client/plugins/Measure.jsx

@@ -66,7 +66,8 @@ module.exports = {
             title: 'measureComponent.title',
             showPanel: false,
             buttonConfig: {
-                buttonClassName: "square-button no-border"
+                buttonClassName: "square-button no-border",
+                tooltip: "toc.measure"
             },
             priority: 2
         }

web/client/plugins/TOC.jsx

@@ -314,7 +314,8 @@ module.exports = {
             icon: <img src={layersIcon}/>,
             title: 'layers',
             buttonConfig: {
-                buttonClassName: "square-button no-border"
+                buttonClassName: "square-button no-border",
+                tooltip: "toc.layers"
             },
             priority: 2
         }

web/client/plugins/ThemeSwitcher.jsx

@@ -1,13 +1,14 @@
-/**
+/*
  * 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 {connect} = require('react-redux');
 const {selectTheme} = require('../actions/theme');
-
+const assign = require('object-assign');
 const themes = require('../themes');
 
 const ThemeSwitcherPlugin = connect((s) => ({
@@ -18,7 +19,15 @@ const ThemeSwitcherPlugin = connect((s) => ({
 })(require('../components/theme/ThemeSwitcher'));
 
 module.exports = {
-    ThemeSwitcherPlugin: ThemeSwitcherPlugin,
+    ThemeSwitcherPlugin: assign(ThemeSwitcherPlugin, {
+        GridContainer: {
+            id: 'themeSwitcher',
+            name: 'themeSwitcher',
+            tool: true,
+            position: 1,
+            priority: 1
+        }
+    }),
     reducers: {
         theme: require('../reducers/theme')
     }

web/client/plugins/drawer/Menu.jsx

@@ -5,13 +5,13 @@
  * 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 {Glyphicon, Button, Tooltip} = require('react-bootstrap');
+const React = require('react');
+const {Glyphicon, Button, Tooltip} = require('react-bootstrap');
 const OverlayTrigger = require('../../components/misc/OverlayTrigger');
-var Sidebar = require('react-sidebar').default;
-var Message = require('../../components/I18N/Message');
+const Sidebar = require('react-sidebar').default;
+const Message = require('../../components/I18N/Message');
 
-var Menu = React.createClass({
+const Menu = React.createClass({
     propTypes: {
         title: React.PropTypes.node,
         alignment: React.PropTypes.string,

web/client/product/assets/css/maps.css

@@ -67,13 +67,30 @@ div#mailinglists h1 {
     font-size: 26px;
     text-align: center;
 }
+@media (min-width: 769px) {
+    div#mapstore-maptype {
+        width: 300px;
+        margin-left: auto;
+        margin-bottom: 40px;
+    }
+}
+@media (max-width: 768px) {
+    div#mapstore-maptype {
+        width: 100%;
+    }
+}
 
-div#mapstore-maptype {
-    width: 300px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 20px;
-    margin-top: -35px;
+@media (min-width: 769px) {
+     #mapstore-grid-home div.theme-switcher.form-group.form-group-sm {
+        width: 300px;
+        margin-bottom: 40px;
+    }
+}
+
+@media (max-width: 768px) {
+    #mapstore-grid-home div.theme-switcher.form-group.form-group-sm {
+        width: 100%;
+    }
 }
 .mapstore-home-examples .carousel-caption{
     background-color: rgba(0,0,0,0.4);

web/client/product/plugins.js

@@ -37,6 +37,7 @@ module.exports = {
         MetadataExplorerPlugin: require('../plugins/MetadataExplorer'),
         LoginPlugin: require('../plugins/Login'),
         OmniBarPlugin: require('../plugins/OmniBar'),
+        GridContainerPlugin: require('../plugins/GridContainer'),
         BurgerMenuPlugin: require('../plugins/BurgerMenu'),
         UndoPlugin: require('../plugins/History'),
         RedoPlugin: require('../plugins/History'),

web/client/product/plugins/MapType.jsx

@@ -11,6 +11,7 @@ const Message = require('../../components/I18N/Message');
 const {compose} = require('redux');
 const {changeMapType} = require('../actions/home');
 const {connect} = require('react-redux');
+const assign = require('object-assign');
 
 const MapType = React.createClass({
     propTypes: {
@@ -47,6 +48,13 @@ const MapTypePlugin = connect((state) => ({
 })(MapType);
 
 module.exports = {
-    MapTypePlugin: MapTypePlugin,
+    MapTypePlugin: assign(MapTypePlugin, {
+        GridContainer: {
+            name: 'MapType',
+            tool: true,
+            position: 1,
+            priority: 1
+        }
+    }),
     reducers: {home: require('../reducers/home')}
 };

web/client/product/plugins/homedescription/homedescription.css

@@ -1,6 +1,6 @@
 .mapstore-home-description {
     margin-top: -50px;
-    margin-bottom: 50px;
+    margin-bottom: 30px;
     margin-left: 20px;
     margin-right: 20px;
 

web/client/translations/data.de-DE

@@ -177,7 +177,11 @@
             "editLayerProperties": "Ändere Ebenen Eigenschaften",
             "searchFeatures": "Auf dieser Ebene suchen...",
             "removeLayer": "Ebene entfernen",
-            "loadingerror": "Diese Ebene wurde nicht korrekt geladen"
+            "loadingerror": "Diese Ebene wurde nicht korrekt geladen",
+            "measure": "Messen",
+            "backgroundSwitcher": "Hintergrund",
+            "layers": "Ebenen",
+            "drawerButton": "Ebenen"
         },
         "print":{
             "paneltitle": "Drucken",
@@ -402,7 +406,7 @@
                 "add_group": " Füge Gruppe hinzu",
                 "group_label_a": "Übereinstimmung",
                 "group_label_b": "der folgenden Bedingungen:",
-                "combo_placeholder": "Wähle",
+                "combo_placeholder": "Attribut",
                 "text_placeholder": "Gib den zu suchenden Text ein",
                 "attribute_filter_header": "Attribut Filter",
                 "groupField": {

web/client/translations/data.en-US

@@ -177,7 +177,11 @@
             "editLayerProperties": "Edit layer properties",
             "searchFeatures": "Search on this layer...",
             "removeLayer": "Remove layer",
-            "loadingerror": "The layer has not been loaded correctly"
+            "loadingerror": "The layer has not been loaded correctly",
+            "measure": "Measure",
+            "backgroundSwitcher": "Backgrounds",
+            "layers": "Layers",
+            "drawerButton": "Layers"
         },
         "print":{
             "paneltitle": "Print",
@@ -402,7 +406,7 @@
                 "add_group": " Add Group",
                 "group_label_a": "Match",
                 "group_label_b": "of the following conditions:",
-                "combo_placeholder": "Select",
+                "combo_placeholder": "Attribute",
                 "text_placeholder": "Type text to search",
                 "attribute_filter_header": "Attribute Filter",
                 "groupField": {

web/client/translations/data.fr-FR

@@ -178,7 +178,11 @@
             "editLayerProperties": "Modifier les propriétés de la couche",
             "searchFeatures": "Recherche sur ce calque ...",
             "removeLayer": "Supprimer la couche",
-            "loadingerror": "La couche n'a pas été chargée correctement"
+            "loadingerror": "La couche n'a pas été chargée correctement",
+            "measure": "Mesurer",
+            "backgroundSwitcher": "Fond de plan",
+            "layers": "Couches",
+            "drawerButton": "Couches"
         },
         "print":{
             "paneltitle": "Impression",
@@ -404,7 +408,7 @@
                 "add_group": " Ajouter un groupe",
                 "group_label_a": "Adéquation",
                 "group_label_b": "des conditions suivantes:",
-                "combo_placeholder": "Sélectionner",
+                "combo_placeholder": "Attribut",
                 "text_placeholder": "Entrer le texte à rechercher",
                 "attribute_filter_header": "Filtre sur attribut",
                 "groupField": {

web/client/translations/data.it-IT

@@ -177,7 +177,11 @@
             "editLayerProperties": "Modifica proprietà dal livello",
             "searchFeatures": "Effettua una ricerca su questo livello...",
             "removeLayer": "Rimuovi livello",
-            "loadingerror": "Il livello non è stato caricato correttamente"
+            "loadingerror": "Il livello non è stato caricato correttamente",
+            "measure": "Misure",
+            "backgroundSwitcher": "Sfondi",
+            "layers": "Livelli",
+            "drawerButton": "Livelli"
         },
         "print":{
             "paneltitle": "Stampa",
@@ -402,7 +406,7 @@
                 "add_group": " Aggiungi Gruppo",
                 "group_label_a": "Soddisfa",
                 "group_label_b": "seguenti condizioni:",
-                "combo_placeholder": "Seleziona",
+                "combo_placeholder": "Attributo",
                 "text_placeholder": "Digita il testo da cercare",
                 "attribute_filter_header": "Filtro Attributi",
                 "groupField": {