Fixed #1545 Various fixes to look and feel (#1704)

* Fixed #1545 Various fixes to look and feel * adjusted some tranlations and placeholders * Changed the default placeholder
geosolutions-it · Apr 7, 2017 · 042ae4d · 042ae4d
1 parent aa850a1
commit 042ae4d
Show file tree

Hide file tree

Showing 20 changed files with 194 additions and 46 deletions.
diff --git a/web/client/components/data/query/ComboField.jsx b/web/client/components/data/query/ComboField.jsx
@@ -14,14 +14,15 @@ const OverlayTrigger = require('../../misc/OverlayTrigger');
 
 const {DropdownList, Multiselect} = require('react-widgets');
 
-const LocaleUtils = require('../../../utils/LocaleUtils');
+const Message = require('../../../components/I18N/Message');
 
 const ComboField = React.createClass({
     propTypes: {
         busy: React.PropTypes.bool,
         style: React.PropTypes.object,
         valueField: React.PropTypes.string,
         textField: React.PropTypes.string,
+        placeholder: React.PropTypes.string,
         fieldOptions: React.PropTypes.array,
         fieldName: React.PropTypes.string,
         fieldRowId: React.PropTypes.number,
@@ -64,6 +65,7 @@ const ComboField = React.createClass({
             style: {
                 width: "100%"
             },
+            placeholder: <Message msgId="queryform.comboField.default_placeholder"/>,
             multivalue: false,
             disabled: false,
             valueField: null,
@@ -89,8 +91,6 @@ const ComboField = React.createClass({
             style = assign({}, style, {borderColor: "#FF0000"});
         }
 
-        let placeholder = LocaleUtils.getMessageById(this.context.messages, "queryform.attributefilter.combo_placeholder");
-
         const ListComponent = this.props.multivalue ? Multiselect : DropdownList;
 
         const list = this.props.valueField !== null && this.props.textField !== null ? (
@@ -104,7 +104,7 @@ const ComboField = React.createClass({
                 value={this.props.fieldValue}
                 caseSensitive={false}
                 minLength={3}
-                placeholder={placeholder}
+                placeholder={this.props.placeholder}
                 filter={this.props.comboFilter}
                 style={style}
                 groupBy={this.props.groupBy}
@@ -121,7 +121,7 @@ const ComboField = React.createClass({
                 value={this.props.fieldValue}
                 caseSensitive={false}
                 minLength={3}
-                placeholder={placeholder}
+                placeholder={this.props.placeholder}
                 filter={this.props.comboFilter}
                 style={style}
                 groupBy={this.props.groupBy}

diff --git a/web/client/components/data/query/FilterField.jsx b/web/client/components/data/query/FilterField.jsx
@@ -10,6 +10,7 @@ const {Row, Col} = require('react-bootstrap');
 
 const ComboField = require('./ComboField');
 const assign = require('object-assign');
+const LocaleUtils = require('../../../utils/LocaleUtils');
 
 const FilterField = React.createClass({
     propTypes: {
@@ -20,6 +21,9 @@ const FilterField = React.createClass({
         onUpdateExceptionField: React.PropTypes.func,
         onChangeCascadingValue: React.PropTypes.func
     },
+    contextTypes: {
+        messages: React.PropTypes.object
+    },
     getDefaultProps() {
         return {
             attributes: [],
@@ -68,6 +72,7 @@ const FilterField = React.createClass({
                             valueField={'id'}
                             textField={'name'}
                             fieldOptions={this.props.attributes.map((attribute) => { return {id: attribute.attribute, name: attribute.label}; })}
+                            placeholder={LocaleUtils.getMessageById(this.context.messages, "queryform.attributefilter.combo_placeholder")}
                             fieldValue={this.props.filterField.attribute}
                             fieldName="attribute"
                             fieldRowId={this.props.filterField.rowId}

diff --git a/web/client/components/data/query/SpatialFilter.jsx b/web/client/components/data/query/SpatialFilter.jsx
@@ -90,6 +90,7 @@ const SpatialFilter = React.createClass({
                         return LocaleUtils.getMessageById(this.context.messages, opt.name);
                     })
                 }
+                placeholder={LocaleUtils.getMessageById(this.context.messages, "queryform.spatialfilter.combo_placeholder")}
                 fieldName="method"
                 style={{width: "140px"}}
                 fieldRowId={new Date().getUTCMilliseconds()}
@@ -118,7 +119,7 @@ const SpatialFilter = React.createClass({
         const methodSelector = this.props.spatialField.geometry ? (
             <Row className="logicHeader filter-field-row">
                 <Col xs={5}>
-                    <div><I18N.Message msgId={"queryform.spatialfilter.selection_method"}/></div>
+                    <div><I18N.Message msgId="queryform.spatialfilter.filterType"/></div>
                 </Col>
                 <Col xs={3}>
                     {methodCombo}
@@ -133,7 +134,7 @@ const SpatialFilter = React.createClass({
         ) : (
             <Row className="logicHeader filter-field-row">
                 <Col xs={5}>
-                    <div><I18N.Message msgId={"queryform.spatialfilter.selection_method"}/></div>
+                    <div><I18N.Message msgId={"queryform.spatialfilter.filterType"}/></div>
                 </Col>
                 <Col xs={7}>
                     {methodCombo}

diff --git a/web/client/components/theme/ThemeSwitcher.jsx b/web/client/components/theme/ThemeSwitcher.jsx
@@ -21,10 +21,7 @@ const ThemeSwitcher = React.createClass({
      getDefaultProps() {
          return {
              onThemeSelected: () => {},
-             style: {
-                 width: "300px",
-                 margin: "20px auto"
-             }
+             style: {}
          };
      },
 

diff --git a/web/client/localConfig.json b/web/client/localConfig.json
@@ -279,7 +279,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"]
     }
 }
diff --git a/web/client/plugins/BackgroundSwitcher.jsx b/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
         }

diff --git a/web/client/plugins/DrawerMenu.jsx b/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');
 
@@ -102,9 +103,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>

diff --git a/web/client/plugins/GridContainer.jsx b/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: {}
+};
diff --git a/web/client/plugins/Measure.jsx b/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
         }

diff --git a/web/client/plugins/TOC.jsx b/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
         }

diff --git a/web/client/plugins/ThemeSwitcher.jsx b/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')
     }

diff --git a/web/client/plugins/drawer/Menu.jsx b/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,

diff --git a/web/client/product/assets/css/maps.css b/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);

diff --git a/web/client/product/plugins.js b/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'),

diff --git a/web/client/product/plugins/MapType.jsx b/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')}
 };
diff --git a/web/client/product/plugins/homedescription/homedescription.css b/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;