fixed requested changes

MV88 · MV88 · commit 3c7de8340af8 · 2017-05-18T18:24:05.000+02:00
diff --git a/web/client/components/buttons/GlobeViewSwitcherButton.jsx b/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 id="globeViewSwitcher"><Message msgId={this.props.active ? this.props.activeTooltip : this.props.notActiveTooltip}/></Tooltip>} />;
+        return <ToggleButton {...this.getButtonProperties()} pressed={this.props.active} tooltip={<Tooltip id="globeViewSwitcher-tooltip"><Message msgId={this.props.active ? this.props.activeTooltip : this.props.notActiveTooltip}/></Tooltip>} />;
     }
 });
 
diff --git a/web/client/components/misc/DockablePanel.jsx b/web/client/components/misc/DockablePanel.jsx
@@ -47,7 +47,6 @@ const DockablePanel = React.createClass({
     },
     getDefaultProps() {
         return {
-            id: "dock",
             dimMode: "none",
             dockSize: 0.35,
             fluid: true,
@@ -62,11 +61,11 @@ const DockablePanel = React.createClass({
             zIndex: 1030
         };
     },
-    getAutoHeight(pos) {
-        return pos === "top" || pos === "bottom";
+    getHeight(pos) {
+        return pos === "top" || pos === "bottom" ? true : undefined;
     },
-    getAutoWidth(pos) {
-        return pos === "left" || pos === "right";
+    getWidth(pos) {
+        return pos === "left" || pos === "right" ? true : undefined;
     },
     render() {
         const WrappedComponent = this.props.wrappedComponent;
@@ -82,12 +81,11 @@ const DockablePanel = React.createClass({
                 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)"}}>
+                <div className="dockpanel-wrapped-component" style={{height: "calc(100% - " + this.props.toolbarHeight + "px)"}}>
                     {this.props.wrappedComponent !== null ? (<WrappedComponent
                     size={{
-                        width: this.getAutoWidth(this.props.position),
-                        height: this.getAutoHeight(this.props.position),
-                        size: this.props.dockSize
+                        height: this.getHeight(this.props.position) && this.props.dockSize,
+                        width: this.getWidth(this.props.position) && this.props.dockSize
                     }}
                     />) : null }
                 </div>
diff --git a/web/client/components/misc/ResizableGrid.jsx b/web/client/components/misc/ResizableGrid.jsx
@@ -17,13 +17,10 @@ const ReactDataGrid = require('react-data-grid');
  * @prop {number} headerRowHeight the height in pixels of the rows in the header
  * @prop {number} minHeight the min height of the grid container
  * @prop {number} minWidth the min width of the grid container
- * @prop {function} onRowsSelected. The method to call when checkbox is checked.
- * @prop {function} onRowsDeselected. The method to call when checkbox is un-checked.
  * @prop {string} refGrid the reference to the react-data-grid-component
  * @prop {number} rowHeight the height of the rows in the grid
  * @prop {string} rowKey the key used to distinguish rows
  * @prop {object} rows. The features passed to the grid
- * @prop {object} selectBy. It contains the selected rows
  * @prop {number} size. The size of the dock panel wrapping this component
  *
  */
@@ -35,14 +32,12 @@ const ResizableGrid = React.createClass({
         headerRowHeight: React.PropTypes.number,
         minHeight: React.PropTypes.number.isRequired,
         minWidth: React.PropTypes.number,
-        onRowsDeselected: React.PropTypes.func,
-        onRowsSelected: React.PropTypes.func,
         onMount: React.PropTypes.func,
         refGrid: React.PropTypes.string,
         rowHeight: React.PropTypes.number.isRequired,
         rowKey: React.PropTypes.string,
+        rowSelection: React.PropTypes.object,
         rows: React.PropTypes.array.isRequired,
-        selectBy: React.PropTypes.object,
         size: React.PropTypes.object
     },
     contextTypes: {
@@ -56,13 +51,11 @@ const ResizableGrid = React.createClass({
             headerRowHeight: 55,
             minHeight: 250,
             minWidth: null,
-            onRowsDeselected: () => {},
-            onRowsSelected: () => {},
             refGrid: "grid",
             rowHeight: 30,
             rowKey: "id",
+            rowSelection: null,
             rows: [],
-            selectBy: {keys: {values: []}},
             onMount: () => {}
         };
     },
@@ -97,13 +90,7 @@ const ResizableGrid = React.createClass({
                 rowGetter={this.rowGetter}
                 rowHeight={this.props.rowHeight}
                 rowKey={this.props.rowKey}
-                rowSelection={{
-                    showCheckbox: true,
-                    enableShiftSelect: true,
-                    onRowsSelected: this.props.onRowsSelected,
-                    onRowsDeselected: this.props.onRowsDeselected,
-                    selectBy: this.props.selectBy
-                }}
+                rowSelection={this.props.rowSelection}
                 rowsCount={this.props.rows.length}
             />
         );
diff --git a/web/client/themes/default/ms2-theme.less b/web/client/themes/default/ms2-theme.less
@@ -953,26 +953,26 @@ select.form-control option {
 	color: @ms2-color-text-primary !important;
 }
 /* feature grid made by react-data-grid */
-#container-wrapped-component .react-grid-Header{
+.dockpanel-wrapped-component .react-grid-Header{
     background: @ms2-color-primary;
 	color: @ms2-color-text-primary;
 	font-family: @font-family-base;
 }
-#container-wrapped-component .react-grid-Main .react-grid-Header .react-grid-HeaderCell{
+.dockpanel-wrapped-component .react-grid-Main .react-grid-Header .react-grid-HeaderCell{
 	background: @ms2-color-primary;
 	color: @ms2-color-text-primary;
 	font-family: @font-family-base;
     height:55px !important;
     text-align: center;
     padding-top: 17px;
 }
-#container-wrapped-component .react-grid-Row--even .react-grid-Cell { background-color: #f2f2f2; }
+.dockpanel-wrapped-component .react-grid-Row--even .react-grid-Cell { background-color: #f2f2f2; }
 
-#container-wrapped-component .react-grid-Main, .react-grid-Container {
+.dockpanel-wrapped-component .react-grid-Main, .react-grid-Container {
     height: 100%;
     width: 100% !important;
 }
-#container-wrapped-component .react-grid-Container {
+.dockpanel-wrapped-component .react-grid-Container {
     width: 100% !important;
 }
 // dock panel
@@ -986,13 +986,13 @@ select.form-control option {
     right: 2px;
     bottom: 2px;
 }
-#container-wrapped-component{
+.dockpanel-wrapped-component{
     display: flex;
     flex: 1 0 auto;
     flexDirection: column;
     width: 100%;
 }
-#container-wrapped-component .react-grid-Grid{
+.dockpanel-wrapped-component .react-grid-Grid{
     min-height: 100% !important;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -82,7 +82,7 @@ const GlobeViewSwitcherButton = React.createClass({`
`82`	`82`	`].reduce((result, key) => { result[key] = this.props[key]; return result; }, {});`
`83`	`83`	`},`
`84`	`84`	`render() {`
`85`		`- return <ToggleButton {...this.getButtonProperties()} pressed={this.props.active} tooltip={<Tooltip id="globeViewSwitcher"><Message msgId={this.props.active ? this.props.activeTooltip : this.props.notActiveTooltip}/></Tooltip>} />;`
	`85`	`+ return <ToggleButton {...this.getButtonProperties()} pressed={this.props.active} tooltip={<Tooltip id="globeViewSwitcher-tooltip"><Message msgId={this.props.active ? this.props.activeTooltip : this.props.notActiveTooltip}/></Tooltip>} />;`
`86`	`86`	`}`
`87`	`87`	`});`
`88`	`88`