various fixes to resizable grid documentation and theme

geosolutions-it · May 26, 2017 · 347d477 · 347d477
1 parent 1b731f4
commit 347d477
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 8 deletions.
diff --git a/docs/developer-guide/maps-configuration.md b/docs/developer-guide/maps-configuration.md
@@ -1,8 +1,36 @@
 # Map options
 
+projection: {string} expressed in EPSG values
+units: {string} uom of the coordinates
+center: [object] center of the map with starting point in the bottom-left corner
+zoom: {number} level of zoom
+maxExtent: {number[]} max bbox of the map expressed [minx, miny, maxx, maxy]
+layers: {object[]} list of layers to be loaded on the map
 
+i.e.
+> ``{ "projection": "EPSG:900913",
+    "units": "m",
+    "center": {"x": 1000000.000000, "y": 5528000.000000, "crs": "EPSG:900913"},
+    "zoom": 15,
+    "maxExtent": [
+        -20037508.34, -20037508.34,
+        20037508.34, 20037508.34
+    ],
+    "layers": [{...},{...}]
+}``
 # Layers option
 
+i.e.
+> ``{
+    "url": "http..."
+    "format": "image/png8"
+    "type": "osm",
+    "title": "Open Street Map",
+    "name": "mapnik",
+    "source": "osm",
+    "group": "background",
+    "visibility": false
+}``
 
 ## Layer types
 
@@ -22,9 +50,9 @@
 ### MapQuest
 
 ### TileProvider
-TileProvider is a shortcut to easily configure many different layer sources. 
+TileProvider is a shortcut to easily configure many different layer sources.
 It's enough to add provider property and 'tileprovider' as type property to the layer configuration object. Property value should be in the form of ProviderName.VariantName.
- 
+
 List of available layer [here](https://github.com/geosolutions-it/MapStore2/blob/master/web/client/utils/ConfigProvider.js)
 
 i.e.

diff --git a/web/client/components/misc/ResizableGrid.jsx b/web/client/components/misc/ResizableGrid.jsx
@@ -36,8 +36,11 @@ const ResizableGrid = React.createClass({
         rowKey: React.PropTypes.string,
         rowSelection: React.PropTypes.object,
         rowGetter: React.PropTypes.func,
+        selectBy: React.PropTypes.object,
         rows: React.PropTypes.array.isRequired,
-        size: React.PropTypes.object
+        size: React.PropTypes.object,
+        onRowsSelected: React.PropTypes.func,
+        onRowsDeselected: React.PropTypes.func
     },
     contextTypes: {
         messages: React.PropTypes.object
@@ -51,8 +54,11 @@ const ResizableGrid = React.createClass({
             refGrid: "grid",
             rowHeight: 30,
             rowKey: "id",
-            rowGetter: (i) => this.props.rows && this.props.rows.length > 0 ? this.props.rows[i] : {},
             rowSelection: null,
+            rowGetter: null,
+            selectBy: null,
+            onRowsSelected: () => {},
+            onRowsDeselected: () => {},
             rows: []
         };
     },
@@ -89,13 +95,22 @@ const ResizableGrid = React.createClass({
                 minHeight={this.state.minHeight || this.props.minHeight}
                 minWidth={this.state.minWidth || this.props.minWidth}
                 ref={this.props.refGrid}
-                rowGetter={this.props.rowGetter}
+                rowGetter={this.props.rowGetter || this.rowGetter}
                 rowHeight={this.props.rowHeight}
                 rowKey={this.props.rowKey}
-                rowSelection={this.props.rowSelection}
+                rowSelection={{
+                    showCheckbox: this.props.rowSelection.showCheckbox,
+                    enableShiftSelect: true,
+                    onRowsSelected: this.props.onRowsSelected,
+                    onRowsDeselected: this.props.onRowsDeselected,
+                    selectBy: this.props.selectBy
+                }}
                 rowsCount={this.props.rows.length}
             />
         );
+    },
+    rowGetter(i) {
+        return this.props.rows[i];
     }
 });
 

diff --git a/web/client/themes/default/ms2-theme.less b/web/client/themes/default/ms2-theme.less
@@ -967,6 +967,7 @@ select.form-control option {
     padding-top: 17px;
 }
 .dockpanel-wrapped-component .react-grid-Row--even .react-grid-Cell { background-color: #f2f2f2; }
+.dockpanel-wrapped-component .react-grid-Row--even .react-grid-Cell.row-selected { background-color: #badffd; }
 
 .dockpanel-wrapped-component .react-grid-Main, .react-grid-Container {
     height: 100%;
@@ -998,8 +999,8 @@ select.form-control option {
 
 
 .radio-custom+.radio-custom-label:before, .react-grid-checkbox+.react-grid-checkbox-label:before{
-    width: 15px;
-    height: 15px;
+    width: 19px;
+    height: 19px;
 }
 
 // feature grid