Fixes #1165: constrained modals and tooltips to the app container, in…

…stead of body (#1666)
geosolutions-it · Mar 31, 2017 · 421a8af · 421a8af
1 parent cf9d474
commit 421a8af
Show file tree

Hide file tree

Showing 64 changed files with 220 additions and 191 deletions.
diff --git a/prod-webpack.config.js b/prod-webpack.config.js
@@ -19,7 +19,7 @@ webpackConfig.plugins = [
         options: {
             postcss: {
                 plugins: [
-                  require('postcss-prefix-selector')({prefix: '.ms2', exclude: ['.ms2']})
+                  require('postcss-prefix-selector')({prefix: '.ms2', exclude: ['.ms2', '[data-ms2-container]']})
                 ]
             },
             context: __dirname

diff --git a/project/static/localConfig.json → project/localConfig.json b/project/static/localConfig.json → project/localConfig.json
@@ -2,6 +2,7 @@
 	"proxyUrl": "/mapstore/proxy/?url=",
 	"geoStoreUrl": "/mapstore/rest/geostore",
 	"printUrl": "https://demo.geo-solutions.it/geoserver/pdf/info.json",
+  "themePrefix": "__PROJECTNAME__",
 	"translationsPath": "./MapStore2/web/client/translations",
 	"plugins": {
 			"desktop": ["Map", "Home"]

diff --git a/project/prod-webpack.config.js b/project/prod-webpack.config.js
@@ -16,7 +16,7 @@ webpackConfig.plugins = [
         options: {
             postcss: {
                 plugins: [
-                  require('postcss-prefix-selector')({prefix: '.__PROJECTNAME__', exclude: ['.__PROJECTNAME__', '.ms2']})
+                  require('postcss-prefix-selector')({prefix: '.__PROJECTNAME__', exclude: ['.__PROJECTNAME__', '.ms2', '[data-ms2-container]']})
                 ]
             },
             context: __dirname

diff --git a/project/webpack.config.js b/project/webpack.config.js
@@ -28,7 +28,7 @@ module.exports = {
             options: {
                 postcss: {
                     plugins: [
-                      require('postcss-prefix-selector')({prefix: '.__PROJECTNAME__', exclude: ['.ms2', '.__PROJECTNAME__']})
+                      require('postcss-prefix-selector')({prefix: '.__PROJECTNAME__', exclude: ['.ms2', '.__PROJECTNAME__', '[data-ms2-container]']})
                     ]
                 },
                 context: __dirname
@@ -104,8 +104,8 @@ module.exports = {
                         name: "[path][name].[ext]",
                         limit: 8192
                     }
-                }] 
-            }, 
+                }]
+            },
             {
                 test: /\.jsx?$/,
                 exclude: /(ol\.js)$|(Cesium\.js)$|(cesium\.js)$/,

diff --git a/web/client/components/I18N/FlagButton.jsx b/web/client/components/I18N/FlagButton.jsx
@@ -7,7 +7,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 var React = require('react');
-var {Button, Tooltip, OverlayTrigger} = require('react-bootstrap');
+var {Button, Tooltip} = require('react-bootstrap');
+const OverlayTrigger = require('../misc/OverlayTrigger');
 var LocaleUtils = require('../../utils/LocaleUtils');
 
 

diff --git a/web/client/components/TOC/DefaultLayer.jsx b/web/client/components/TOC/DefaultLayer.jsx
@@ -186,7 +186,7 @@ var DefaultLayer = React.createClass({
                 {this.renderCollapsible()}
                 {this.renderTools()}
                 <InlineSpinner loading={this.props.node.loading}/>
-                <ConfirmModal ref="removelayer" className="clayer_removal_confirm_button" show= {this.state.showDeleteDialog} onHide={this.closeDeleteDialog} onClose={this.closeDeleteDialog} onConfirm={this.onConfirmDelete} titleText={this.props.confirmDeleteText} confirmText={this.props.confirmDeleteText} cancelText={<Message msgId="cancel" />} body={this.props.confirmDeleteMessage} />
+                <ConfirmModal ref="removelayer" show= {this.state.showDeleteDialog} onHide={this.closeDeleteDialog} onClose={this.closeDeleteDialog} onConfirm={this.onConfirmDelete} titleText={this.props.confirmDeleteText} confirmText={this.props.confirmDeleteText} cancelText={<Message msgId="cancel" />} body={this.props.confirmDeleteMessage} />
             </Node>
         );
     },

diff --git a/web/client/components/TOC/__tests__/DefaultLayer-test.jsx b/web/client/components/TOC/__tests__/DefaultLayer-test.jsx
@@ -218,7 +218,7 @@ describe('test DefaultLayer module component', () => {
         const tool = ReactDOM.findDOMNode(TestUtils.scryRenderedDOMComponentsWithClass(comp, "clayer_removal_button")[0]);
         expect(tool).toExist();
         tool.click();
-        const confirmButton = document.getElementsByClassName("clayer_removal_confirm_button")[0];
+        const confirmButton = document.getElementsByClassName("btn-primary")[0];
         expect(confirmButton).toExist();
         confirmButton.click();
         expect(spy.calls.length).toBe(1);
@@ -279,7 +279,7 @@ describe('test DefaultLayer module component', () => {
         };
         // helper function to get current modals
         const getModals = function() {
-            return document.getElementsByTagName("body")[0].getElementsByClassName('modal-dialog');
+            return document.getElementsByTagName("body")[0].getElementsByClassName('modal-dialog-container');
         };
         // no modals should be available
         const element1 = {layer: {id: 'layer1', name: 'layer1'}, settings: {}};

diff --git a/web/client/components/TOC/fragments/LayersTool.jsx b/web/client/components/TOC/fragments/LayersTool.jsx
@@ -7,7 +7,8 @@
  */
 
 const React = require('react');
-const {Glyphicon, OverlayTrigger, Tooltip} = require('react-bootstrap');
+const {Glyphicon, Tooltip} = require('react-bootstrap');
+const OverlayTrigger = require('../../misc/OverlayTrigger');
 const Message = require('../../I18N/Message');
 
 require("./css/layertool.css");

diff --git a/web/client/components/TOC/fragments/SettingsModal.jsx b/web/client/components/TOC/fragments/SettingsModal.jsx
@@ -7,7 +7,7 @@
  */
 
 const React = require('react');
-const {Modal, Button, Glyphicon, Tabs, Tab} = require('react-bootstrap');
+const {Button, Glyphicon, Tabs, Tab} = require('react-bootstrap');
 
 require("./css/settingsModal.css");
 
@@ -16,7 +16,7 @@ const ConfirmButton = require('../../buttons/ConfirmButton');
 const General = require('./settings/General');
 const Display = require('./settings/Display');
 const WMSStyle = require('./settings/WMSStyle');
-const {Portal} = require('react-overlays');
+const Portal = require('../../misc/Portal');
 const assign = require('object-assign');
 const Message = require('../../I18N/Message');
 
@@ -37,7 +37,6 @@ const SettingsModal = React.createClass({
         confirmDeleteText: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
         closeText: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
         options: React.PropTypes.object,
-        asModal: React.PropTypes.bool,
         buttonSize: React.PropTypes.string,
         closeGlyph: React.PropTypes.string,
         panelStyle: React.PropTypes.object,
@@ -57,7 +56,6 @@ const SettingsModal = React.createClass({
             updateNode: () => {},
             removeNode: () => {},
             retrieveLayerData: () => {},
-            asModal: true,
             buttonSize: "large",
             closeGlyph: "",
             panelStyle: {
@@ -152,17 +150,7 @@ const SettingsModal = React.createClass({
         </span>);
 
         if (this.props.settings.expanded) {
-            return this.props.asModal ? (
-                <Modal {...this.props.options} show={this.props.settings.expanded} container={document.getElementById("body")}>
-                    <Modal.Header><Modal.Title>{this.props.titleText}</Modal.Title></Modal.Header>
-                    <Modal.Body>
-                        {tabs}
-                    </Modal.Body>
-                    <Modal.Footer>
-                        {footer}
-                    </Modal.Footer>
-                </Modal>
-            ) : (<Portal><Dialog id={this.props.id} style={this.props.panelStyle} className={this.props.panelClassName}>
+            return (<Portal><Dialog id={this.props.id} style={this.props.panelStyle} className={this.props.panelClassName}>
                 <span role="header">
                     <span className="layer-settings-panel-title">{this.props.titleText}</span>
                     <button onClick={this.onClose} className="layer-settings-panel-close close">{this.props.closeGlyph ? <Glyphicon glyph={this.props.closeGlyph}/> : <span>×</span>}</button>

diff --git a/web/client/components/app/StandardApp.jsx b/web/client/components/app/StandardApp.jsx
@@ -29,15 +29,17 @@ const StandardApp = React.createClass({
         storeOpts: React.PropTypes.object,
         initialActions: React.PropTypes.array,
         appComponent: React.PropTypes.func,
-        printingEnabled: React.PropTypes.bool
+        printingEnabled: React.PropTypes.bool,
+        onStoreInit: React.PropTypes.func
     },
     getDefaultProps() {
         return {
             pluginsDef: {plugins: {}, requires: {}},
             initialActions: [],
             printingEnabled: false,
             appStore: () => ({dispatch: () => {}}),
-            appComponent: () => <span/>
+            appComponent: () => <span/>,
+            onStoreInit: () => {}
         };
     },
     getInitialState() {
@@ -69,6 +71,7 @@ const StandardApp = React.createClass({
                 initialState: config.initialState || {defaultState: {}, mobile: {}}
             });
             this.store = this.props.appStore(this.props.pluginsDef.plugins, opts);
+            this.props.onStoreInit(this.store);
             this.setState({
                 store: this.store
             });

diff --git a/web/client/components/buttons/InfoButton.jsx b/web/client/components/buttons/InfoButton.jsx
@@ -7,7 +7,6 @@
  */
 var React = require('react');
 var BootstrapReact = require('react-bootstrap');
-var Modal = BootstrapReact.Modal;
 var Button = BootstrapReact.Button;
 var Glyphicon = BootstrapReact.Glyphicon;
 var ImageButton = require('./ImageButton');
@@ -44,7 +43,6 @@ const InfoButton = React.createClass({
         btnSize: React.PropTypes.oneOf(['large', 'medium', 'small', 'xsmall']),
         btnType: React.PropTypes.oneOf(['normal', 'image']),
         modalOptions: React.PropTypes.object,
-        useModal: React.PropTypes.bool,
         closeGlyph: React.PropTypes.string
     },
     getDefaultProps() {
@@ -59,7 +57,6 @@ const InfoButton = React.createClass({
             btnSize: 'medium',
             btnType: 'normal',
             modalOptions: {},
-            useModal: true,
             closeGlyph: ""
         };
     },
@@ -85,16 +82,7 @@ const InfoButton = React.createClass({
         return btn;
     },
     render() {
-        const dialog = this.props.useModal ? (<Modal
-            {...this.props.modalOptions}
-            show={this.state.isVisible}
-            onHide={this.close}
-            bsStyle="info">
-            <Modal.Header closeButton>
-                <Modal.Title>{this.props.title}</Modal.Title>
-            </Modal.Header>
-            <Modal.Body>{this.props.body}</Modal.Body>
-        </Modal>) : (
+        const dialog = (
             <Dialog id="mapstore-about" style={assign({}, this.props.style, {display: this.state.isVisible ? "block" : "none"})}>
                 <span role="header"><span className="about-panel-title">{this.props.title}</span><button onClick={this.close} className="about-panel-close close">{this.props.closeGlyph ? <Glyphicon glyph={this.props.closeGlyph}/> : <span>×</span>}</button></span>
                 <div role="body">{this.props.body}</div>

diff --git a/web/client/components/buttons/ToggleButton.jsx b/web/client/components/buttons/ToggleButton.jsx
@@ -7,7 +7,10 @@
  */
 
 var React = require('react');
-var {Button, Glyphicon, OverlayTrigger} = require('react-bootstrap');
+var {Button, Glyphicon} = require('react-bootstrap');
+
+const OverlayTrigger = require('../misc/OverlayTrigger');
+
 var ImageButton = require('./ImageButton');
 
 var ToggleButton = React.createClass({

diff --git a/web/client/components/buttons/ZoomButton.jsx b/web/client/components/buttons/ZoomButton.jsx
@@ -7,8 +7,8 @@
  */
 
 const React = require('react');
-const {Button, Glyphicon, Tooltip, OverlayTrigger} = require('react-bootstrap');
-
+const {Button, Glyphicon, Tooltip} = require('react-bootstrap');
+const OverlayTrigger = require('../misc/OverlayTrigger');
 const ZoomButton = React.createClass({
     propTypes: {
         id: React.PropTypes.string,

diff --git a/web/client/components/buttons/ZoomToMaxExtentButton.jsx b/web/client/components/buttons/ZoomToMaxExtentButton.jsx
@@ -8,7 +8,9 @@
 
 var React = require('react');
 
-const {Button, Glyphicon, Tooltip, OverlayTrigger} = require('react-bootstrap');
+const {Button, Glyphicon, Tooltip} = require('react-bootstrap');
+
+const OverlayTrigger = require('../misc/OverlayTrigger');
 
 const mapUtils = require('../../utils/MapUtils');
 const configUtils = require('../../utils/ConfigUtils');

diff --git a/web/client/components/buttons/__tests__/InfoButton-test.jsx b/web/client/components/buttons/__tests__/InfoButton-test.jsx
@@ -31,7 +31,7 @@ describe('This test for InfoButton', () => {
         expect(aboutDom).toExist();
         expect(aboutDom.id).toExist();
 
-        const btnList = aboutDom.getElementsByTagName('button');
+        const btnList = aboutDom.getElementsByClassName('btn-info');
         expect(btnList.length).toBe(1);
 
         const btn = btnList.item(0);
@@ -78,13 +78,13 @@ describe('This test for InfoButton', () => {
         const headerList = modalDiv.getElementsByClassName("modal-header");
         expect(headerList.length).toBe(1);
 
-        const titleList = headerList.item(0).getElementsByClassName("modal-title");
+        const titleList = headerList.item(0).getElementsByClassName("about-panel-title");
         expect(titleList.length).toBe(1);
         expect(titleList.item(0).innerHTML).toBe("Info");
 
         const bodyList = modalDiv.getElementsByClassName("modal-body");
         expect(bodyList.length).toBe(1);
-        expect(bodyList.item(0).innerHTML).toBe("");
+        expect(bodyList.item(0).firstChild.innerHTML).toBe("");
     });
 
     // test CUSTOM
@@ -152,7 +152,7 @@ describe('This test for InfoButton', () => {
 
         const modalDiv = document.getElementsByClassName("modal-content").item(0);
         const headerList = modalDiv.getElementsByClassName("modal-header");
-        const titleDom = headerList.item(0).getElementsByClassName("modal-title").item(0);
+        const titleDom = headerList.item(0).getElementsByClassName("about-panel-title").item(0);
 
         expect(titleDom.innerHTML).toBe(customTitle);
     });
@@ -167,7 +167,7 @@ describe('This test for InfoButton', () => {
         const modalDiv = document.getElementsByClassName("modal-content").item(0);
 
         const bodyList = modalDiv.getElementsByClassName("modal-body");
-        expect(bodyList.item(0).innerHTML).toBe(customBody);
+        expect(bodyList.item(0).firstChild.innerHTML).toBe(customBody);
     });
 
     it('checks the custom style', () => {
@@ -189,7 +189,7 @@ describe('This test for InfoButton', () => {
         const about = ReactDOM.render(<InfoButton btnType="image"/>, document.getElementById("container"));
         expect(about).toExist();
         const aboutDom = ReactDOM.findDOMNode(about);
-        expect(aboutDom.getElementsByTagName('button').length).toBe(0);
+        expect(aboutDom.getElementsByClassName('btn-primary').length).toBe(0);
         expect(aboutDom.getElementsByTagName('img').length).toBe(1);
     });
 });
diff --git a/web/client/components/catalog/SharingLink.jsx b/web/client/components/catalog/SharingLink.jsx
@@ -7,7 +7,8 @@
  */
 const React = require('react');
 const Message = require('../I18N/Message');
-const {FormControl, FormGroup, Button, Glyphicon, OverlayTrigger, Tooltip} = require('react-bootstrap');
+const {FormControl, FormGroup, Button, Glyphicon, Tooltip} = require('react-bootstrap');
+const OverlayTrigger = require('../misc/OverlayTrigger');
 const CopyToClipboard = require('react-copy-to-clipboard');
 const SecurityUtils = require('../../utils/SecurityUtils');
 

diff --git a/web/client/components/catalog/SharingLinks.jsx b/web/client/components/catalog/SharingLinks.jsx
@@ -8,7 +8,9 @@
 const React = require('react');
 const SharingLink = require('./SharingLink');
 const Message = require('../I18N/Message');
-const {OverlayTrigger, Popover, Button, Glyphicon} = require('react-bootstrap');
+const {Popover, Button, Glyphicon} = require('react-bootstrap');
+
+const OverlayTrigger = require('../misc/OverlayTrigger');
 
 const SharingLinks = React.createClass({
     propTypes: {

diff --git a/web/client/components/data/featuregrid/DockedFeatureGrid.jsx b/web/client/components/data/featuregrid/DockedFeatureGrid.jsx
@@ -3,7 +3,8 @@ const {connect} = require('react-redux');
 const {isObject} = require('lodash');
 const Dock = require('react-dock');
 
-const {Modal, Button, Glyphicon} = require('react-bootstrap');
+const {Button, Glyphicon} = require('react-bootstrap');
+const Modal = require('../../../components/misc/Modal');
 
 const FilterUtils = require('../../../utils/FilterUtils');
 

diff --git a/web/client/components/data/identify/GeocodeViewer.jsx b/web/client/components/data/identify/GeocodeViewer.jsx
@@ -8,7 +8,8 @@
 
 const React = require('react');
 const PropTypes = React.PropTypes;
-const {Modal, Button} = require('react-bootstrap');
+const {Button} = require('react-bootstrap');
+const Modal = require('../../misc/Modal');
 
 const GeocodeViewer = (props) => {
     if (props.latlng) {

diff --git a/web/client/components/data/query/ComboField.jsx b/web/client/components/data/query/ComboField.jsx
@@ -8,7 +8,9 @@
 const React = require('react');
 const assign = require('object-assign');
 
-const {OverlayTrigger, Tooltip} = require('react-bootstrap');
+const {Tooltip} = require('react-bootstrap');
+
+const OverlayTrigger = require('../../misc/OverlayTrigger');
 
 const {DropdownList, Multiselect} = require('react-widgets');
 

diff --git a/web/client/components/data/query/GroupField.jsx b/web/client/components/data/query/GroupField.jsx
@@ -7,7 +7,8 @@
  */
 const React = require('react');
 
-const {Row, Col, Button, Glyphicon, Panel, OverlayTrigger, Tooltip} = require('react-bootstrap');
+const {Row, Col, Button, Glyphicon, Panel, Tooltip} = require('react-bootstrap');
+const OverlayTrigger = require('../../misc/OverlayTrigger');
 
 const FilterField = require('./FilterField');
 const ComboField = require('./ComboField');

diff --git a/web/client/components/data/query/NumberField.jsx b/web/client/components/data/query/NumberField.jsx
@@ -7,7 +7,8 @@
  */
 
 const React = require('react');
-const {Tooltip, OverlayTrigger, Row, Col} = require("react-bootstrap");
+const {Tooltip, Row, Col} = require("react-bootstrap");
+const OverlayTrigger = require('../../misc/OverlayTrigger');
 const LocaleUtils = require('../../../utils/LocaleUtils');
 const numberLocalizer = require('react-widgets/lib/localizers/simple-number');
 numberLocalizer();

diff --git a/web/client/components/data/query/QueryToolbar.jsx b/web/client/components/data/query/QueryToolbar.jsx
@@ -7,7 +7,9 @@
  */
 const React = require('react');
 
-const {Button, Glyphicon, ButtonToolbar, Modal} = require('react-bootstrap');
+const {Button, Glyphicon, ButtonToolbar} = require('react-bootstrap');
+
+const Modal = require('../../misc/Modal');
 
 const I18N = require('../../I18N/I18N');
 

diff --git a/web/client/components/data/query/SimpleFilterField.jsx b/web/client/components/data/query/SimpleFilterField.jsx
@@ -7,7 +7,8 @@
  */
 
 const React = require('react');
-const {Panel, ButtonToolbar, Button, OverlayTrigger, Tooltip} = require('react-bootstrap');
+const {Panel, ButtonToolbar, Button, Tooltip} = require('react-bootstrap');
+const OverlayTrigger = require('../../misc/OverlayTrigger');
 const ComboField = require('./ComboField');
 const NumberField = require('./NumberField');
 const TextField = require('./TextField');