Fix geosolutions-it#11794 the layout for modal, dialog due to the change in MapViewerLayout (geosolutions-it#11956)

Author: subashtiwari1010

web/client/components/export/ExportPanel.jsx

@@ -13,6 +13,7 @@ import { Glyphicon } from 'react-bootstrap';
 import Button from '../misc/Button';
 import HTML from '../I18N/HTML';
 import Message from '../I18N/Message';
+import Portal from '../misc/Portal';
 
 export default ({
     show = false,
@@ -24,58 +25,60 @@ export default ({
     onExport = () => {},
     onClose = () => {}
 }) => (show &&
-    <div className="export-panel">
-        <Button
-            style={{
-                border: "none",
-                background: "transparent",
-                color: "white",
-                fontSize: 35,
-                top: 0,
-                right: 0,
-                position: 'absolute'
-            }}
-            onClick={()=> onClose()}
-        ><Glyphicon glyph="1-close" />
-        </Button>
-        <div style={{
-            margin: 'auto',
-            maxWidth: 550
-        }}>
-            <div>
-                <div className="export-panel-heading-icon">
-                    <Glyphicon glyph="upload"/>
-                </div>
+    <Portal>
+        <div className="export-panel">
+            <Button
+                style={{
+                    border: "none",
+                    background: "transparent",
+                    color: "white",
+                    fontSize: 35,
+                    top: 0,
+                    right: 0,
+                    position: 'absolute'
+                }}
+                onClick={()=> onClose()}
+            ><Glyphicon glyph="1-close" />
+            </Button>
+            <div style={{
+                margin: 'auto',
+                maxWidth: 550
+            }}>
                 <div>
-                    {exportPanelTitle}
-                </div>
-                <br/>
-                <div className="export-panel-formats-container">
-                    {toPairs(formats).map(([format, {label, glyph}]) =>
-                        <Button
-                            key={format}
-                            bsStyle="default"
-                            className={selectedFormat === format ? "format-selected" : ""}
-                            onClick={() => onSelect(format)}>
-                            <div>
-                                <Glyphicon style={{marginRight: '4px'}} glyph={glyph}/>
-                                {label}
-                            </div>
-                        </Button>
-                    )}
-                </div>
-                <br/>
-                <Button bsStyle="primary" onClick={() => onExport(selectedFormat)}>{exportButtonLabel}</Button>
-                <br/>
-                <br/>
-                {get(formats, `${selectedFormat}.description`, null)}
-                {get(formats, `${selectedFormat}.note`) &&
+                    <div className="export-panel-heading-icon">
+                        <Glyphicon glyph="upload"/>
+                    </div>
+                    <div>
+                        {exportPanelTitle}
+                    </div>
+                    <br/>
+                    <div className="export-panel-formats-container">
+                        {toPairs(formats).map(([format, {label, glyph}]) =>
+                            <Button
+                                key={format}
+                                bsStyle="default"
+                                className={selectedFormat === format ? "format-selected" : ""}
+                                onClick={() => onSelect(format)}>
+                                <div>
+                                    <Glyphicon style={{marginRight: '4px'}} glyph={glyph}/>
+                                    {label}
+                                </div>
+                            </Button>
+                        )}
+                    </div>
+                    <br/>
+                    <Button bsStyle="primary" onClick={() => onExport(selectedFormat)}>{exportButtonLabel}</Button>
+                    <br/>
+                    <br/>
+                    {get(formats, `${selectedFormat}.description`, null)}
+                    {get(formats, `${selectedFormat}.note`) &&
                     <>
                         <hr/>
                         {get(formats, `${selectedFormat}.note`)}
                     </>
-                }
+                    }
+                </div>
             </div>
         </div>
-    </div>
+    </Portal>
 );

web/client/components/import/ImportDragZone.jsx

@@ -13,6 +13,7 @@ import processFiles from './dragZone/enhancers/processFiles';
 import useFiles from './dragZone/enhancers/useFiles';
 import dropZoneHandlers from './dragZone/enhancers/dropZoneHandlers';
 import { compose } from 'recompose';
+import Portal from '../misc/Portal';
 
 export default compose(
     processFiles,
@@ -24,12 +25,14 @@ export default compose(
         onDrop = () => {},
         onRef = () => {},
         ...props
-    }) => <DragZone
-        onClose={onClose}
-        onDrop={(files) => {
-            return onDrop({ files, options: { importedVectorFileMaxSizeInMB: props.importedVectorFileMaxSizeInMB} });
-        }}
-        onRef={onRef}
-    >
-        <Content {...props} />
-    </DragZone>);
+    }) => <Portal>
+        <DragZone
+            onClose={onClose}
+            onDrop={(files) => {
+                return onDrop({ files, options: { importedVectorFileMaxSizeInMB: props.importedVectorFileMaxSizeInMB} });
+            }}
+            onRef={onRef}
+        >
+            <Content {...props} />
+        </DragZone>
+    </Portal>);

web/client/components/share/SharePanel.jsx

@@ -35,6 +35,7 @@ import {set} from '../../utils/ImmutableUtils';
 import OverlayTrigger from '../misc/OverlayTrigger';
 import ResizableModal from '../misc/ResizableModal';
 import { MapLibraries } from '../../utils/MapTypeUtils';
+import Portal from '../misc/Portal';
 
 /**
  * SharePanel allow to share the current map in some different ways.
@@ -300,7 +301,7 @@ class SharePanel extends React.Component {
         </Tabs>);
         const hideInTabs = this.getHideIntabs(itemTabs);
         let sharePanel =
-            (<ResizableModal
+            (<Portal><ResizableModal
                 id={this.props.modal ? "share-panel-dialog-modal" : "share-panel-dialog"}
                 title={getMessageById(this.context.messages, "share.title")}
                 dialogClassName=" share-win"
@@ -316,7 +317,7 @@ class SharePanel extends React.Component {
                         && this.renderAdvancedSettings()
                     }
                 </div>
-            </ResizableModal>);
+            </ResizableModal></Portal>);
         return sharePanel;
     }
 

web/client/plugins/Print.jsx

@@ -39,6 +39,7 @@ import FlexBox from '../components/layout/FlexBox';
 import Text from '../components/layout/Text';
 import Button from '../components/layout/Button';
 import { getResolutionMultiplier } from '../utils/PrintUtils';
+import Portal from '../components/misc/Portal';
 
 /**
  * Print plugin. This plugin allows to print current map view. **note**: this plugin requires the  **printing module** to work.
@@ -568,7 +569,7 @@ export default {
                                         {this.renderBody()}
                                     </Panel>);
                                 }
-                                return (<Dialog start={{x: 0, y: 80}} id="mapstore-print-panel" style={{ zIndex: 1990, ...this.props.style}}>
+                                return (<Portal><Dialog start={{x: 0, y: 80}} id="mapstore-print-panel" style={{ zIndex: 1990, ...this.props.style}}>
                                     <FlexBox role="header" centerChildrenVertically gap="sm">
                                         <FlexBox.Fill component={Text} ellipsis fontSize="md" className="print-panel-title _padding-lr-sm">
                                             <Message msgId="print.paneltitle"/>
@@ -578,7 +579,7 @@ export default {
                                         </Button>
                                     </FlexBox>
                                     {this.renderBody()}
-                                </Dialog>);
+                                </Dialog></Portal>);
                             }
                             return this.renderBody();
                         }

web/client/plugins/Settings.jsx

@@ -23,6 +23,7 @@ import Dialog from '../components/misc/Dialog';
 import { getSupportedLocales } from '../utils/LocaleUtils';
 import Message from './locale/Message';
 import SettingsPanel from './settings/SettingsPanel';
+import Portal from '../components/misc/Portal';
 
 const LangBar = connect((state) => ({
     currentLocale: state.locale && state.locale.current
@@ -142,13 +143,13 @@ class SettingsButton extends React.Component {
                         {settings}
                     </Panel>);
                 }
-                return (<Dialog id={this.props.id} style={{...this.props.panelStyle, display: this.props.visible ? 'block' : 'none'}} className={this.props.panelClassName} draggable={false} modal>
+                return (<Portal><Dialog id={this.props.id} style={{...this.props.panelStyle, display: this.props.visible ? 'block' : 'none'}} className={this.props.panelClassName} draggable={false} modal>
                     <span role="header">
                         <span className="modal-title settings-panel-title"><Message msgId="settings"/></span>
                         <button onClick={this.props.toggleControl} className="settings-panel-close close">{this.props.closeGlyph ? <Glyphicon glyph={this.props.closeGlyph}/> : <span>×</span>}</button>
                     </span>
                     {settings}
-                </Dialog>);
+                </Dialog></Portal>);
             }
         } else {
             return settings;

web/client/product/components/viewer/about/About.jsx

@@ -16,6 +16,7 @@ import { Message } from '../../../../components/I18N/I18N';
 import AboutContent from './AboutContent';
 import aboutImg from '../../../assets/img/Blank.gif';
 import VersionInfo from './VersionInfo';
+import Portal from '../../../../components/misc/Portal';
 
 
 class About extends React.Component {
@@ -78,7 +79,7 @@ class About extends React.Component {
                 );
             }
             return (
-                <Dialog
+                <Portal><Dialog
                     id="mapstore-about"
                     style={{zIndex: 1992, paddingTop: 0}}
                     modal
@@ -102,7 +103,7 @@ class About extends React.Component {
                         />}
                         {this.props.showAboutContent && <AboutContent/>}
                     </div>
-                </Dialog>
+                </Dialog></Portal>
             );
         }
         return null;

web/client/themes/default/less/featuregrid.less

@@ -229,10 +229,11 @@
         .background-color-var(@theme-vars[main-bg]);
         width: 100%;
         height: 100%;
+        min-height: 300px;
         bottom: 0;
         display: flex;
         justify-content: center;
         align-items: center;
-        position: absolute;
+        position: relative;
     }
 }

web/client/themes/default/less/map-footer.less

@@ -113,6 +113,8 @@
 // Layout
 // **************
 .mapstore-map-footer {
+    min-height: 42px;
+    z-index: 10;
     border: 1px solid transparent;
     .leaflet-control-attribution {
         display: flex;