Close #3025 Add boundary for draggable dialog (#4025)

* Close #3025 Add boundary for draggable dialog * simplification of dialog boundary solution * make snapshot dialog draggable
geosolutions-it · Aug 5, 2019 · 81fae70 · 81fae70
1 parent 96a80aa
commit 81fae70
Show file tree

Hide file tree

Showing 14 changed files with 33 additions and 25 deletions.
diff --git a/web/client/components/data/download/DownloadDialog.jsx b/web/client/components/data/download/DownloadDialog.jsx
@@ -67,7 +67,7 @@ class DownloadDialog extends React.Component {
     };
 
     render() {
-        return (<Dialog id="mapstore-export" style={{display: this.props.enabled ? "block" : "none"}}>
+        return (<Dialog id="mapstore-export" style={{display: this.props.enabled ? "block" : "none"}} draggable={false} modal>
             <span role="header">
                 <span className="about-panel-title"><Message msgId="wfsdownload.title" /></span>
                 <button onClick={this.props.onClose} className="settings-panel-close close">{this.props.closeGlyph ? <Glyphicon glyph={this.props.closeGlyph}/> : <span>×</span>}</button>

diff --git a/web/client/components/manager/users/GroupDialog.jsx b/web/client/components/manager/users/GroupDialog.jsx
@@ -208,6 +208,7 @@ class GroupDialog extends React.Component {
               id="mapstore-group-dialog"
               className="group-edit-dialog"
               style={assign({}, this.props.style, {display: this.props.show ? "block" : "none"})}
+              draggable={false}
               >
             <span role="header">
                 <button onClick={this.props.onClose} className="login-panel-close close">

diff --git a/web/client/components/manager/users/UserDialog.jsx b/web/client/components/manager/users/UserDialog.jsx
@@ -223,7 +223,7 @@ class UserDialog extends React.Component {
     };
 
     render() {
-        return (<Dialog onClickOut={this.props.onClose} modal maskLoading={this.props.user && (this.props.user.status === "loading" || this.props.user.status === "saving")} id="mapstore-user-dialog" className="user-edit-dialog" style={assign({}, this.props.style, {display: this.props.show ? "block" : "none"})}>
+        return (<Dialog onClickOut={this.props.onClose} modal draggable={false} maskLoading={this.props.user && (this.props.user.status === "loading" || this.props.user.status === "saving")} id="mapstore-user-dialog" className="user-edit-dialog" style={assign({}, this.props.style, {display: this.props.show ? "block" : "none"})}>
 
           <span role="header">
               <span className="user-panel-title">{(this.props.user && this.props.user.name) || <Message msgId="users.newUser" />}</span>

diff --git a/web/client/components/manager/users/style/userdialog.css b/web/client/components/manager/users/style/userdialog.css
@@ -6,7 +6,6 @@
     width: 300px;
     margin-left: calc(50% - 150px);
     margin-top: 100px;
-    transform: translate(-50%, 0);
 }
 
 .user-edit-dialog .modal-body .nav-tabs li a, .group-edit-dialog .modal-body .nav-tabs li a {

diff --git a/web/client/components/mapcontrols/Snapshot/SnapshotPanel.jsx b/web/client/components/mapcontrols/Snapshot/SnapshotPanel.jsx
@@ -21,6 +21,7 @@ const BasicSpinner = require('../../misc/spinners/BasicSpinner/BasicSpinner');
 const Dialog = require('../../misc/Dialog');
 
 const Message = require('../../I18N/Message');
+const Portal = require('../../misc/Portal');
 
 /**
  * SnapshotPanel allow to export a snapshot of the current map, showing a
@@ -88,7 +89,8 @@ class SnapshotPanel extends React.Component {
         },
         panelClassName: "snapshot-panel",
         closeGlyph: "1-close",
-        buttonStyle: "primary"
+        buttonStyle: "primary",
+        bounds: '#container'
     };
 
     componentWillMount() {
@@ -193,10 +195,14 @@ class SnapshotPanel extends React.Component {
                     {panel}
                 </Panel>);
             }
-            return (<Dialog id="mapstore-snapshot-panel" style={this.props.style}>
-                <span role="header"><span className="snapshot-panel-title"><Message msgId="snapshot.title"/></span><button onClick={this.props.toggleControl} className="print-panel-close close">{this.props.closeGlyph ? <Glyphicon glyph={this.props.closeGlyph}/> : <span>×</span>}</button></span>
-                {panel}
-            </Dialog>);
+            return (
+                <Portal>
+                  <Dialog id="mapstore-snapshot-panel" style={this.props.panelStyle} bounds={this.props.bounds}>
+                    <span role="header"><span className="snapshot-panel-title"><Message msgId="snapshot.title"/></span><button onClick={this.props.toggleControl} className="print-panel-close close">{this.props.closeGlyph ? <Glyphicon glyph={this.props.closeGlyph}/> : <span>×</span>}</button></span>
+                    {panel}
+                  </Dialog>
+                </Portal>
+            );
         }
         return panel;
     };

diff --git a/web/client/components/mapcontrols/measure/MeasureDialog.jsx b/web/client/components/mapcontrols/measure/MeasureDialog.jsx
@@ -76,7 +76,7 @@ class MeasureDialog extends React.Component {
             style={this.props.style}>
                 <MeasureComponent id="measure-panel" {...this.props}/>
             </DockablePanel>
-        : (<Dialog id="measure">
+        : (<Dialog id="measure-dialog">
             <div key="header" role="header">
                 <Glyphicon glyph="1-ruler"/>&nbsp;<Message key="title" msgId="measureComponent.Measure"/>
                 <button key="close" onClick={this.onClose} className="close">{this.props.closeGlyph ? <Glyphicon glyph={this.props.closeGlyph}/> : <span>×</span>}</button>

diff --git a/web/client/components/mapcontrols/measure/__tests__/MeasureDialog-test.jsx b/web/client/components/mapcontrols/measure/__tests__/MeasureDialog-test.jsx
@@ -48,7 +48,7 @@ describe("test the MeasureDialog", () => {
         let measurement = {};
         const mc = ReactDOM.render(<MeasureDialog show measurement={measurement}/>, document.getElementById("container"));
         expect(mc).toExist();
-        const dialog = document.getElementById('measure');
+        const dialog = document.getElementById('measure-dialog');
         expect(dialog).toExist();
 
     });
@@ -79,7 +79,7 @@ describe("test the MeasureDialog", () => {
         const btnGroups = dom.getElementsByClassName('btn-group');
         expect(btnGroups.length).toBe(2);
 
-        const dialog = document.getElementById('measure');
+        const dialog = document.getElementById('measure-dialog');
         expect(dialog).toNotExist();
         expect(spyMount.calls.length).toBe(1);
         expect(spyMount).toHaveBeenCalledWith(showCoordinateEditor);
@@ -119,7 +119,7 @@ describe("test the MeasureDialog", () => {
         const btnGroups = dom.getElementsByClassName('btn-group');
         expect(btnGroups.length).toBe(2);
 
-        const dialog = document.getElementById('measure');
+        const dialog = document.getElementById('measure-dialog');
         expect(dialog).toNotExist();
         expect(spyMount.calls.length).toBe(1);
         expect(spyToggleMeasure.calls.length).toBe(1);

diff --git a/web/client/components/misc/Dialog.jsx b/web/client/components/misc/Dialog.jsx
@@ -27,23 +27,25 @@ class Dialog extends React.Component {
         onClickOut: PropTypes.func,
         modal: PropTypes.bool,
         start: PropTypes.object,
-        draggable: PropTypes.bool
+        draggable: PropTypes.bool,
+        bounds: PropTypes.object
     };
 
     static defaultProps = {
         style: {},
         backgroundStyle: {
             background: "rgba(0,0,0,.5)"
         },
-        start: {x: 0, y: 0},
+        start: {x: 0, y: 150},
         className: "modal-dialog modal-content",
         maskLoading: false,
         containerClassName: "",
         headerClassName: "modal-header",
         bodyClassName: "modal-body",
         footerClassName: "modal-footer",
         modal: false,
-        draggable: true
+        draggable: true,
+        bounds: 'parent'
     };
 
     renderLoading = () => {
@@ -72,7 +74,7 @@ class Dialog extends React.Component {
     };
 
     render() {
-        const body = (<div id={this.props.id} style={{zIndex: 3, ...this.props.style}} className={this.props.className + " modal-dialog-container"}>
+        const body = (<div id={this.props.id} style={{zIndex: 3, ...this.props.style}} className={`${this.props.draggable ? 'modal-dialog-draggable' : ''} ${this.props.className} modal-dialog-container`}>
             <div className={this.props.headerClassName + " draggable-header"}>
                 {this.renderRole('header')}
             </div>
@@ -84,7 +86,7 @@ class Dialog extends React.Component {
                 {this.renderRole('footer')}
             </div> : <span/>}
         </div>);
-        const dialog = this.props.draggable ? (<Draggable defaultPosition={this.props.start} handle=".draggable-header, .draggable-header *">
+        const dialog = this.props.draggable ? (<Draggable defaultPosition={this.props.start} bounds={this.props.bounds} handle=".draggable-header, .draggable-header *">
             {body}
         </Draggable>) : body;
         let containerStyle = assign({}, this.props.style.display ? {display: this.props.style.display} : {}, this.props.backgroundStyle);
@@ -105,4 +107,5 @@ class Dialog extends React.Component {
     };
 }
 
+
 module.exports = Dialog;
diff --git a/web/client/plugins/SearchServicesConfig.jsx b/web/client/plugins/SearchServicesConfig.jsx
@@ -149,7 +149,7 @@ class SearchServicesConfigPanel extends React.Component {
         const Section = pages && pages[page] || null;
         return enabled ? (
             <Portal>
-                <Dialog id={id} style={panelStyle} className={panelClassName}>
+                <Dialog id={id} style={{...panelStyle, display: enabled ? 'block' : 'none'}} className={panelClassName} draggable={false} modal>
                     <span role="header">
                         <span>{titleText}</span>
                         { this.isDirty() ? (

diff --git a/web/client/plugins/Settings.jsx b/web/client/plugins/Settings.jsx
@@ -143,7 +143,7 @@ class SettingsButton extends React.Component {
                         {settings}
                     </Panel>);
                 }
-                return (<Dialog id={this.props.id} style={this.props.panelStyle} className={this.props.panelClassName}>
+                return (<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="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>

diff --git a/web/client/plugins/print/print.css b/web/client/plugins/print/print.css
@@ -37,10 +37,6 @@
     right: -155px;
     z-index: 1000;
 }
-
-#mapstore-print-panel{
-    margin-top: 100px !important;
-}
 #mapstore-print-panel.modal-dialog {
     z-index: 2000;
 }

diff --git a/web/client/product/components/viewer/about/About.jsx b/web/client/product/components/viewer/about/About.jsx
@@ -49,7 +49,7 @@ class About extends React.Component {
             className="map-logo"
             body={
                 <AboutContent/>
-            }/>) : (<Dialog id="mapstore-about" style={assign({}, {zIndex: 1992, display: this.props.enabled ? "block" : "none"})}>
+            }/>) : (<Dialog id="mapstore-about" style={assign({}, {zIndex: 1992, display: this.props.enabled ? "block" : "none"})} draggable={false} modal>
                 <span role="header"><span className="about-panel-title"><I18N.Message msgId="about_title"/></span><button onClick={this.props.onClose} className="about-panel-close close">{this.props.modalConfig.closeGlyph ? <Glyphicon glyph={this.props.modalConfig.closeGlyph}/> : <span>×</span>}</button></span>
                 <div role="body"><AboutContent/></div>
             </Dialog>);

diff --git a/web/client/themes/default/bootstrap-theme.less b/web/client/themes/default/bootstrap-theme.less
@@ -141,6 +141,9 @@ button.close {
         margin: auto;
         margin-top: 150px;
     }
+    .modal-dialog-draggable {
+        margin-top: 0;
+    }
 }
 
 // Dropdown

diff --git a/web/client/themes/default/less/panels.less b/web/client/themes/default/less/panels.less
@@ -205,7 +205,7 @@
     }
 }
 
-#mapstore-print-panel, #measure-dialog, #mapstore-about {
+#mapstore-print-panel, #measure-dialog, #mapstore-about, #share-panel-dialog {
     position: absolute;
     top: 0%;
     left: 20%;