First implementation of ResizableGrid and DockablePanel components #1835

MV88 · 2017-05-17T14:43:57Z

This PR is for adding to the feature grid components two new elements.

The DockablePanel components wrap any the ResizableGrid
Added tests and documentation

coveralls · 2017-05-17T14:55:08Z

Coverage increased (+0.05%) to 79.612% when pulling f9eb291 on MV88:feature-grid-migration into 2a9f77a on geosolutions-it:master.

mbarto · 2017-05-17T14:47:30Z

web/client/components/data/featuregrid/DockedGrid.jsx

+const DockedGrid = React.createClass({
+    propTypes: {
+        dockSize: React.PropTypes.number,
+        featureDockedGrid: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.func]),


mbarto · 2017-05-17T14:48:41Z

web/client/components/data/featuregrid/DockedGrid.jsx

+                 >
+                    <div id="feature-grid-container">
+                        <FeatureDockedGrid id="feature-docked-grid"
+                            toolbar={{


Can we configure this externally. We could have a grid without a toolbar

mbarto · 2017-05-17T14:52:19Z

web/client/components/data/featuregrid/DockedGrid.jsx

+                onSizeChange={this.limitDockHeight}
+                fluid={true}
+                dimStyle={{ background: 'rgba(0, 0, 100, 0.2)' }}
+                dockStyle={null}


mbarto · 2017-05-17T14:52:24Z

web/client/components/data/featuregrid/DockedGrid.jsx

+                fluid={true}
+                dimStyle={{ background: 'rgba(0, 0, 100, 0.2)' }}
+                dockStyle={null}
+                dockHiddenStyle={null}


mbarto · 2017-05-17T14:56:14Z

web/client/components/data/featuregrid/FeatureDockedGrid.jsx

+ * @prop {object} [tools] The tools of the grid
+ *
+ */
+const FeatureDockedGrid = React.createClass({


I don't see any Feature here

And no docked too

offtherailz · 2017-05-17T14:50:24Z

web/client/components/data/featuregrid/DockedGrid.jsx

+    getDefaultProps() {
+        return {
+            dockSize: 0.35,
+            featureDockedGrid: {},


call it grid

offtherailz · 2017-05-17T14:54:21Z

web/client/components/data/featuregrid/FeatureDockedGrid.jsx

+    componentWillReceiveProps(newProps) {
+        if (this.props.size !== newProps.size) {
+            const pos = newProps.position;
+            if (pos === "right" || pos === "left") {


props.autoWidth = true if pos === right or left
props.autoHeight idem

offtherailz · 2017-05-17T14:55:45Z

web/client/components/data/featuregrid/FeatureDockedGrid.jsx

+ * @prop {object} [tools] The tools of the grid
+ *
+ */
+const FeatureDockedGrid = React.createClass({


Rename it ResisableGrid.

offtherailz · 2017-05-17T14:57:54Z

web/client/components/data/featuregrid/FeatureDockedGrid.jsx

+        tools = [...tools, this.props.tools];
+
+        return (
+            <div style={{


Wrap from the container.

offtherailz · 2017-05-17T14:58:51Z

web/client/components/data/featuregrid/FeatureDockedGrid.jsx

+                        bottom: 2}}>
+                        <span>{rowsSelected} {rowText} selected</span>
+                    </div>
+                    <ButtonToolbar className="featuregrid-tools" style={{marginLeft: "0px", flex: "none", marginBottom: "2px", marginRight: "2px"}} bsSize="sm">


Add the toolbar in the container.

offtherailz · 2017-05-17T14:59:44Z

web/client/components/data/featuregrid/FeatureGrid.jsx

@@ -188,7 +188,7 @@ const FeatureGrid = React.createClass({
                flexDirection: "column",
                height: "100%"
            }}>
-                <div fluid={false} style={this.props.style} className="ag-fresh">


Why this change? is related to the DockableGrid?

because fluid is not a parameter of the div tag

offtherailz · 2017-05-17T15:00:34Z

web/client/themes/default/ms2-theme.less

+
+.react-grid-Main, .react-grid-Container, #feature-grid-container {
+    height: 100%;
+    width: 100% !important;


avoid !important when possible. Try to provide instead inline style

offtherailz · 2017-05-17T15:00:44Z

web/client/themes/default/ms2-theme.less

+    width: 100% !important;
+}
+.react-grid-Container {
+    width: 100% !important;


avoid !important

offtherailz · 2017-05-17T15:00:51Z

web/client/themes/default/ms2-theme.less

+    height: 100% !important;
+}*/
+.react-grid-Grid{
+    min-height: 100% !important;


avoid !important

coveralls · 2017-05-18T16:03:26Z

Coverage decreased (-0.08%) to 79.481% when pulling 64a2bec on MV88:feature-grid-migration into 2a9f77a on geosolutions-it:master.

offtherailz · 2017-05-18T15:56:23Z

web/client/components/buttons/GlobeViewSwitcherButton.jsx

@@ -82,7 +82,7 @@ const GlobeViewSwitcherButton = React.createClass({
         ].reduce((result, key) => { result[key] = this.props[key]; return result; }, {});
    },
    render() {
-        return <ToggleButton {...this.getButtonProperties()} pressed={this.props.active} tooltip={<Tooltip><Message msgId={this.props.active ? this.props.activeTooltip : this.props.notActiveTooltip}/></Tooltip>} />;
+        return <ToggleButton {...this.getButtonProperties()} pressed={this.props.active} tooltip={<Tooltip id="globeViewSwitcher"><Message msgId={this.props.active ? this.props.activeTooltip : this.props.notActiveTooltip}/></Tooltip>} />;


globeViewSwitcher-tooltip

offtherailz · 2017-05-18T15:57:16Z

web/client/components/data/featuregrid/FeatureGrid.jsx

@@ -188,7 +188,7 @@ const FeatureGrid = React.createClass({
                flexDirection: "column",
                height: "100%"
            }}>
-                <div fluid={false} style={this.props.style} className="ag-fresh">


offtherailz · 2017-05-18T16:02:37Z

web/client/components/misc/DockablePanel.jsx

+                <div id="container-wrapped-component" style={{height: "calc(100% - " + this.props.toolbarHeight + "px)"}}>
+                    {this.props.wrappedComponent !== null ? (<WrappedComponent
+                    size={{
+                        width: this.getAutoWidth(this.props.position),


use values instead of booleans and avoid the additional size parameter

offtherailz · 2017-05-18T16:03:03Z

web/client/components/misc/__tests__/ResizableGrid-test.jsx

+    }, {
+        id: "3",
+        name: "Edifici"
+    }, {


less entries

offtherailz · 2017-05-18T16:03:41Z

web/client/components/misc/DockablePanel.jsx

+                fluid={this.props.fluid}
+                dimStyle={{ background: 'rgba(0, 0, 100, 0.2)' }}
+            >
+                <div id="container-wrapped-component" style={{height: "calc(100% - " + this.props.toolbarHeight + "px)"}}>


use a class

offtherailz · 2017-05-18T16:04:00Z

web/client/themes/default/ms2-theme.less

@@ -952,15 +952,65 @@ select.form-control option {
 	background-color: @ms2-color-primary !important;
 	color: @ms2-color-text-primary !important;
 }
-/* feauture grid */
+/* feature grid made by react-data-grid */
+#container-wrapped-component .react-grid-Header{


.container-wrapped-component (same below)
use a better name like dockpanel-wrapped-component or something like this

offtherailz · 2017-05-18T16:08:29Z

web/client/components/misc/DockablePanel.jsx

+    },
+    getDefaultProps() {
+        return {
+            id: "dock",


offtherailz · 2017-05-18T16:10:53Z

web/client/components/misc/ResizableGrid.jsx

+                rowGetter={this.rowGetter}
+                rowHeight={this.props.rowHeight}
+                rowKey={this.props.rowKey}
+                rowSelection={{


noSelection by default

coveralls · 2017-05-18T16:32:30Z

Coverage decreased (-0.05%) to 79.513% when pulling 3c7de83 on MV88:feature-grid-migration into 2a9f77a on geosolutions-it:master.

coveralls · 2017-05-19T08:35:26Z

Coverage increased (+0.02%) to 79.578% when pulling 80ebd24 on MV88:feature-grid-migration into 2a9f77a on geosolutions-it:master.

First implementation of FeatureDockedGrid and DockedGrid components

f9eb291

MV88 added the pending review label May 17, 2017

MV88 requested a review from offtherailz May 17, 2017 14:44

mbarto suggested changes May 17, 2017

View reviewed changes

offtherailz requested changes May 17, 2017

View reviewed changes

Improved and generalized components

64a2bec

MV88 changed the title ~~First implementation of FeatureDockedGrid and DockedGrid components~~ First implementation of ResizableGrid and DockablePanel components May 18, 2017

offtherailz requested changes May 18, 2017

View reviewed changes

fixed requested changes

3c7de83

clean up code

80ebd24

offtherailz approved these changes May 19, 2017

View reviewed changes

MV88 merged commit 36bb29f into geosolutions-it:master May 19, 2017

Damianofds removed the pending review label May 19, 2017

allyoucanmap mentioned this pull request Aug 9, 2024

#4675 Remove unused code #10442

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

First implementation of ResizableGrid and DockablePanel components #1835

First implementation of ResizableGrid and DockablePanel components #1835

MV88 commented May 17, 2017 •

edited

Loading

coveralls commented May 17, 2017

mbarto May 17, 2017

mbarto May 17, 2017

mbarto May 17, 2017

mbarto May 17, 2017

mbarto May 17, 2017

mbarto May 17, 2017

offtherailz May 17, 2017

offtherailz May 17, 2017

offtherailz May 17, 2017

offtherailz May 17, 2017

offtherailz May 17, 2017

offtherailz May 17, 2017

MV88 May 17, 2017

offtherailz May 18, 2017

offtherailz May 17, 2017

offtherailz May 17, 2017

offtherailz May 17, 2017

coveralls commented May 18, 2017

offtherailz May 18, 2017

offtherailz May 18, 2017

offtherailz May 18, 2017

offtherailz May 18, 2017

offtherailz May 18, 2017

offtherailz May 18, 2017

offtherailz May 18, 2017

offtherailz May 18, 2017

coveralls commented May 18, 2017

coveralls commented May 19, 2017

First implementation of ResizableGrid and DockablePanel components #1835

First implementation of ResizableGrid and DockablePanel components #1835

Conversation

MV88 commented May 17, 2017 • edited Loading

coveralls commented May 17, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

coveralls commented May 18, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

coveralls commented May 18, 2017

coveralls commented May 19, 2017

MV88 commented May 17, 2017 •

edited

Loading