From 421a8afb5f1197d0e2acedfd84a632fd8afa801c Mon Sep 17 00:00:00 2001 From: mbarto Date: Fri, 31 Mar 2017 17:01:51 +0200 Subject: [PATCH] Fixes #1165: constrained modals and tooltips to the app container, instead of body (#1666) --- prod-webpack.config.js | 2 +- project/{static => }/localConfig.json | 1 + project/prod-webpack.config.js | 2 +- project/webpack.config.js | 6 ++-- web/client/components/I18N/FlagButton.jsx | 3 +- web/client/components/TOC/DefaultLayer.jsx | 2 +- .../TOC/__tests__/DefaultLayer-test.jsx | 4 +-- .../components/TOC/fragments/LayersTool.jsx | 3 +- .../TOC/fragments/SettingsModal.jsx | 18 ++-------- web/client/components/app/StandardApp.jsx | 7 ++-- web/client/components/buttons/InfoButton.jsx | 14 +------- .../components/buttons/ToggleButton.jsx | 5 ++- web/client/components/buttons/ZoomButton.jsx | 4 +-- .../buttons/ZoomToMaxExtentButton.jsx | 4 ++- .../buttons/__tests__/InfoButton-test.jsx | 12 +++---- web/client/components/catalog/SharingLink.jsx | 3 +- .../components/catalog/SharingLinks.jsx | 4 ++- .../data/featuregrid/DockedFeatureGrid.jsx | 3 +- .../data/identify/GeocodeViewer.jsx | 3 +- .../components/data/query/ComboField.jsx | 4 ++- .../components/data/query/GroupField.jsx | 3 +- .../components/data/query/NumberField.jsx | 3 +- .../components/data/query/QueryToolbar.jsx | 4 ++- .../data/query/SimpleFilterField.jsx | 3 +- web/client/components/home/Home.jsx | 3 +- .../components/manager/importer/Import.jsx | 3 +- .../manager/importer/ImportsGrid.jsx | 3 +- .../components/manager/importer/Transform.jsx | 4 +-- .../manager/importer/TransformsGrid.jsx | 3 +- .../manager/rulesmanager/ActiveRuleModal.jsx | 3 +- .../rulesmanager/RulesTableControls.jsx | 3 +- .../components/manager/users/UsersTable.jsx | 3 +- .../mapcontrols/locate/LocateBtn.jsx | 3 +- .../navigationhistory/HistoryBar.jsx | 3 +- .../navigationhistory/RedoButton.jsx | 3 +- .../navigationhistory/UndoButton.jsx | 3 +- .../mapcontrols/search/SearchBar.jsx | 3 +- web/client/components/maps/MapItem.jsx | 2 +- .../components/maps/modals/ConfirmModal.jsx | 20 +++-------- .../components/maps/modals/MetadataModal.jsx | 34 +++++++------------ web/client/components/misc/GridCard.jsx | 3 +- web/client/components/misc/Modal.jsx | 20 +++++++++++ web/client/components/misc/OverlayTrigger.jsx | 12 +++++++ web/client/components/misc/Portal.jsx | 12 +++++++ web/client/components/misc/WithContainer.jsx | 18 ++++++++++ .../components/security/modals/LoginModal.jsx | 19 ++--------- .../security/modals/PasswordResetModal.jsx | 26 ++++---------- .../security/modals/UserDetailsModal.jsx | 25 ++++---------- web/client/components/share/ShareEmbed.jsx | 3 +- web/client/components/share/ShareLink.jsx | 3 +- web/client/components/theme/Theme.jsx | 4 ++- web/client/components/toolbar/MapToolbar.jsx | 3 +- web/client/examples/api/localConfig.json | 3 +- web/client/examples/api/plugins.js | 5 ++- web/client/jsapi/MapStore2.js | 22 ++++++------ web/client/localConfig.json | 1 + web/client/plugins/ScrollTop.jsx | 3 +- web/client/plugins/TOC.jsx | 1 - .../plugins/containers/ToolsContainer.jsx | 3 +- web/client/plugins/drawer/Menu.jsx | 3 +- web/client/plugins/drawer/Section.jsx | 4 ++- .../product/components/viewer/about/About.jsx | 1 - web/client/themes/default/base.less | 2 +- webpack.config.js | 2 +- 64 files changed, 220 insertions(+), 191 deletions(-) rename project/{static => }/localConfig.json (87%) create mode 100644 web/client/components/misc/Modal.jsx create mode 100644 web/client/components/misc/OverlayTrigger.jsx create mode 100644 web/client/components/misc/Portal.jsx create mode 100644 web/client/components/misc/WithContainer.jsx diff --git a/prod-webpack.config.js b/prod-webpack.config.js index 1b9efb377e..c1062d6659 100644 --- 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 b/project/localConfig.json similarity index 87% rename from project/static/localConfig.json rename to project/localConfig.json index 69f12abd8b..8edd4fde76 100644 --- a/project/static/localConfig.json +++ b/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 index d2e7317ffa..1eadfc2f72 100644 --- 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 index 726ed2d9a4..5397c7a83e 100644 --- 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 index ad2dee9ed1..c174d7ae84 100644 --- 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 index 5270fab7ec..b077d05524 100644 --- 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()} - } body={this.props.confirmDeleteMessage} /> + } body={this.props.confirmDeleteMessage} /> ); }, diff --git a/web/client/components/TOC/__tests__/DefaultLayer-test.jsx b/web/client/components/TOC/__tests__/DefaultLayer-test.jsx index 6e4111c99c..6becbf1835 100644 --- 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 index 248e358479..5a31aea30d 100644 --- 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 index f5c6ecc3ce..777bf2d781 100644 --- 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({ ); if (this.props.settings.expanded) { - return this.props.asModal ? ( - - {this.props.titleText} - - {tabs} - - - {footer} - - - ) : ( + return ( {this.props.titleText} diff --git a/web/client/components/app/StandardApp.jsx b/web/client/components/app/StandardApp.jsx index d93163cfe6..d8426a2b3c 100644 --- a/web/client/components/app/StandardApp.jsx +++ b/web/client/components/app/StandardApp.jsx @@ -29,7 +29,8 @@ 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 { @@ -37,7 +38,8 @@ const StandardApp = React.createClass({ initialActions: [], printingEnabled: false, appStore: () => ({dispatch: () => {}}), - appComponent: () => + appComponent: () => , + 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 index f8526585b4..3465f0d54b 100644 --- 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 ? ( - - {this.props.title} - - {this.props.body} - ) : ( + const dialog = ( {this.props.title}
{this.props.body}
diff --git a/web/client/components/buttons/ToggleButton.jsx b/web/client/components/buttons/ToggleButton.jsx index 62d56f57d7..a9a2dd97f9 100644 --- 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 index 085b1f24a6..0df93c6129 100644 --- 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 index 46b411a541..11f66d45c8 100644 --- 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 index fa88fa8021..7589aa8ef7 100644 --- 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(, 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 index 0e4c92ec55..b98747d759 100644 --- 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 index b8c667ca9c..a4d3f4a08a 100644 --- 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 index 132b054b3a..5c256ebcec 100644 --- 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 index 78d542c2d2..d1643a4b57 100644 --- 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 index 593c9dcb47..5c099151b4 100644 --- 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 index a68a7baf64..97cd566aec 100644 --- 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 index 841505ff6a..63979c5d36 100644 --- 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 index d41a8e47e4..f8bd622f9a 100644 --- 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 index 350f49cbd1..e14ff9a8ca 100644 --- 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'); diff --git a/web/client/components/home/Home.jsx b/web/client/components/home/Home.jsx index b9da460b8d..214678a10f 100644 --- a/web/client/components/home/Home.jsx +++ b/web/client/components/home/Home.jsx @@ -7,7 +7,8 @@ */ const React = require('react'); -const {Glyphicon, OverlayTrigger, Tooltip, Button} = require('react-bootstrap'); +const {Glyphicon, Tooltip, Button} = require('react-bootstrap'); +const OverlayTrigger = require('../misc/OverlayTrigger'); const Message = require('../../components/I18N/Message'); const Home = React.createClass({ diff --git a/web/client/components/manager/importer/Import.jsx b/web/client/components/manager/importer/Import.jsx index 51529660bf..9be3589b4a 100644 --- a/web/client/components/manager/importer/Import.jsx +++ b/web/client/components/manager/importer/Import.jsx @@ -10,7 +10,8 @@ const Spinner = require('react-spinkit'); const Message = require('../../I18N/Message'); const TaskProgress = require('./TaskProgress'); const ImporterUtils = require('../../../utils/ImporterUtils'); -const {Grid, Row, Panel, Label, Table, Button, Glyphicon, OverlayTrigger, Tooltip} = require('react-bootstrap'); +const {Grid, Row, Panel, Label, Table, Button, Glyphicon, Tooltip} = require('react-bootstrap'); +const OverlayTrigger = require('../../misc/OverlayTrigger'); require("./style/importer.css"); const Task = React.createClass({ diff --git a/web/client/components/manager/importer/ImportsGrid.jsx b/web/client/components/manager/importer/ImportsGrid.jsx index 2cdfe6f761..f4c33f0f6f 100644 --- a/web/client/components/manager/importer/ImportsGrid.jsx +++ b/web/client/components/manager/importer/ImportsGrid.jsx @@ -9,7 +9,8 @@ const React = require('react'); const Spinner = require('react-spinkit'); const Message = require('../../I18N/Message'); const ImporterUtils = require('../../../utils/ImporterUtils'); -const {Table, Glyphicon, Button, Label, OverlayTrigger, Tooltip} = require('react-bootstrap'); +const {Table, Glyphicon, Button, Label, Tooltip} = require('react-bootstrap'); +const OverlayTrigger = require('../../misc/OverlayTrigger'); const {findIndex} = require('lodash'); const ImportsGrid = React.createClass({ diff --git a/web/client/components/manager/importer/Transform.jsx b/web/client/components/manager/importer/Transform.jsx index 786e9a78b2..0702d7b761 100644 --- a/web/client/components/manager/importer/Transform.jsx +++ b/web/client/components/manager/importer/Transform.jsx @@ -6,9 +6,9 @@ * LICENSE file in the root directory of this source tree. */ const React = require('react'); -const {Panel, Button, Glyphicon, OverlayTrigger, Tooltip} = require('react-bootstrap'); +const {Panel, Button, Glyphicon, Tooltip} = require('react-bootstrap'); +const OverlayTrigger = require('../../misc/OverlayTrigger'); -// const {DropdownList} = require('react-widgets'); const {Message} = require('../../I18N/I18N'); const transforms = require('./transforms'); const Transform = React.createClass({ diff --git a/web/client/components/manager/importer/TransformsGrid.jsx b/web/client/components/manager/importer/TransformsGrid.jsx index 2a1292092c..5511ac64c6 100644 --- a/web/client/components/manager/importer/TransformsGrid.jsx +++ b/web/client/components/manager/importer/TransformsGrid.jsx @@ -8,7 +8,8 @@ const React = require('react'); const Spinner = require('react-spinkit'); const Message = require('../../I18N/Message'); -const {Panel, Table, Button, Glyphicon, OverlayTrigger, Tooltip} = require('react-bootstrap'); +const {Panel, Table, Button, Glyphicon, Tooltip} = require('react-bootstrap'); +const OverlayTrigger = require('../../misc/OverlayTrigger'); const TransformsGrid = React.createClass({ propTypes: { diff --git a/web/client/components/manager/rulesmanager/ActiveRuleModal.jsx b/web/client/components/manager/rulesmanager/ActiveRuleModal.jsx index ff2f322603..d3b77a830f 100644 --- a/web/client/components/manager/rulesmanager/ActiveRuleModal.jsx +++ b/web/client/components/manager/rulesmanager/ActiveRuleModal.jsx @@ -7,7 +7,8 @@ */ const React = require('react'); -const {Modal, Button, Alert} = require('react-bootstrap'); +const {Button, Alert} = require('react-bootstrap'); +const Modal = require('../../misc/Modal'); const Message = require('../../I18N/Message'); const RuleAttributes = require('./RuleAttributes'); diff --git a/web/client/components/manager/rulesmanager/RulesTableControls.jsx b/web/client/components/manager/rulesmanager/RulesTableControls.jsx index 2e5e167ca9..4184f84f2e 100644 --- a/web/client/components/manager/rulesmanager/RulesTableControls.jsx +++ b/web/client/components/manager/rulesmanager/RulesTableControls.jsx @@ -7,7 +7,8 @@ */ const React = require('react'); -const {ButtonGroup, Button, Glyphicon, Modal} = require('react-bootstrap'); +const {ButtonGroup, Button, Glyphicon} = require('react-bootstrap'); +const Modal = require('../../misc/Modal'); const Message = require('../../I18N/Message'); diff --git a/web/client/components/manager/users/UsersTable.jsx b/web/client/components/manager/users/UsersTable.jsx index 110970b8a1..2b508f7e17 100644 --- a/web/client/components/manager/users/UsersTable.jsx +++ b/web/client/components/manager/users/UsersTable.jsx @@ -7,7 +7,8 @@ */ const React = require('react'); -const {Button, Glyphicon, Table, OverlayTrigger, Tooltip} = require('react-bootstrap'); +const {Button, Glyphicon, Table, Tooltip} = require('react-bootstrap'); +const OverlayTrigger = require('../../misc/OverlayTrigger'); const Message = require('../../I18N/Message'); var UsersTable = React.createClass({ propTypes: { diff --git a/web/client/components/mapcontrols/locate/LocateBtn.jsx b/web/client/components/mapcontrols/locate/LocateBtn.jsx index 63e6031969..66e077b261 100644 --- a/web/client/components/mapcontrols/locate/LocateBtn.jsx +++ b/web/client/components/mapcontrols/locate/LocateBtn.jsx @@ -7,7 +7,8 @@ */ var React = require('react'); -var {Button, Glyphicon, OverlayTrigger, Tooltip} = require('react-bootstrap'); +var {Button, Glyphicon, Tooltip} = require('react-bootstrap'); +const OverlayTrigger = require('../../misc/OverlayTrigger'); const defaultIcon = require('../../misc/spinners/InlineSpinner/img/spinner.gif'); require('./css/locate.css'); let checkingGeoLocation = false; diff --git a/web/client/components/mapcontrols/navigationhistory/HistoryBar.jsx b/web/client/components/mapcontrols/navigationhistory/HistoryBar.jsx index 48428461a3..4c1c0ee1fd 100644 --- a/web/client/components/mapcontrols/navigationhistory/HistoryBar.jsx +++ b/web/client/components/mapcontrols/navigationhistory/HistoryBar.jsx @@ -6,7 +6,8 @@ * LICENSE file in the root directory of this source tree. */ var React = require('react'); -var {ButtonGroup, Button, Glyphicon, Tooltip, OverlayTrigger} = require('react-bootstrap'); +var {ButtonGroup, Button, Glyphicon, Tooltip} = require('react-bootstrap'); +const OverlayTrigger = require('../../misc/OverlayTrigger'); var ImageButton = require('../../buttons/ImageButton'); var HistoryBar = React.createClass({ diff --git a/web/client/components/mapcontrols/navigationhistory/RedoButton.jsx b/web/client/components/mapcontrols/navigationhistory/RedoButton.jsx index b78b2b3b85..944712ac14 100644 --- a/web/client/components/mapcontrols/navigationhistory/RedoButton.jsx +++ b/web/client/components/mapcontrols/navigationhistory/RedoButton.jsx @@ -7,7 +7,8 @@ */ var React = require('react'); -var {Button, Glyphicon, OverlayTrigger, Tooltip} = require('react-bootstrap'); +var {Button, Glyphicon, Tooltip} = require('react-bootstrap'); +const OverlayTrigger = require('../../misc/OverlayTrigger'); var RedoBtn = React.createClass({ propTypes: { diff --git a/web/client/components/mapcontrols/navigationhistory/UndoButton.jsx b/web/client/components/mapcontrols/navigationhistory/UndoButton.jsx index 1623f46ae5..c2642ec439 100644 --- a/web/client/components/mapcontrols/navigationhistory/UndoButton.jsx +++ b/web/client/components/mapcontrols/navigationhistory/UndoButton.jsx @@ -7,7 +7,8 @@ */ var React = require('react'); -var {Button, Glyphicon, OverlayTrigger, Tooltip} = require('react-bootstrap'); +var {Button, Glyphicon, Tooltip} = require('react-bootstrap'); +const OverlayTrigger = require('../../misc/OverlayTrigger'); var UndoBtn = React.createClass({ propTypes: { diff --git a/web/client/components/mapcontrols/search/SearchBar.jsx b/web/client/components/mapcontrols/search/SearchBar.jsx index d0059e01fd..41ff892b86 100644 --- a/web/client/components/mapcontrols/search/SearchBar.jsx +++ b/web/client/components/mapcontrols/search/SearchBar.jsx @@ -7,7 +7,8 @@ */ var React = require('react'); -var {FormControl, FormGroup, Glyphicon, OverlayTrigger, Tooltip} = require('react-bootstrap'); +var {FormControl, FormGroup, Glyphicon, Tooltip} = require('react-bootstrap'); +const OverlayTrigger = require('../../misc/OverlayTrigger'); var LocaleUtils = require('../../../utils/LocaleUtils'); var Spinner = require('react-spinkit'); diff --git a/web/client/components/maps/MapItem.jsx b/web/client/components/maps/MapItem.jsx index ab773f50fb..8e720cb631 100644 --- a/web/client/components/maps/MapItem.jsx +++ b/web/client/components/maps/MapItem.jsx @@ -13,7 +13,7 @@ var ListGroupItem = BootstrapReact.ListGroupItem; var Button = BootstrapReact.Button; var Glyphicon = BootstrapReact.Glyphicon; var Tooltip = BootstrapReact.Tooltip; -var OverlayTrigger = BootstrapReact.OverlayTrigger; +const OverlayTrigger = require('../misc/OverlayTrigger'); var {isFunction} = require('lodash'); var MapItem = React.createClass({ diff --git a/web/client/components/maps/modals/ConfirmModal.jsx b/web/client/components/maps/modals/ConfirmModal.jsx index fdf71ee2e3..1ceedc55c5 100644 --- a/web/client/components/maps/modals/ConfirmModal.jsx +++ b/web/client/components/maps/modals/ConfirmModal.jsx @@ -7,12 +7,8 @@ */ const React = require('react'); - -const {Modal, Button, Glyphicon} = require('react-bootstrap'); - -const Dialog = require('../../../components/misc/Dialog'); -const assign = require('object-assign'); - +const {Button} = require('react-bootstrap'); +const Modal = require('../../misc/Modal'); /** * A Modal window to show a confirmation dialog @@ -25,7 +21,6 @@ const ConfirmModal = React.createClass({ options: React.PropTypes.object, onConfirm: React.PropTypes.func, onClose: React.PropTypes.func, - useModal: React.PropTypes.bool, closeGlyph: React.PropTypes.string, style: React.PropTypes.object, buttonSize: React.PropTypes.string, @@ -43,7 +38,6 @@ const ConfirmModal = React.createClass({ animation: false }, className: "", - useModal: true, closeGlyph: "", style: {}, includeCloseButton: true, @@ -74,7 +68,7 @@ const ConfirmModal = React.createClass({ onClick={this.props.onClose}>{this.props.cancelText} : } ); const body = this.props.body; - return this.props.useModal ? ( + return ( @@ -87,13 +81,7 @@ const ConfirmModal = React.createClass({ {footer} - ) : ( - - {this.props.titleText} - {body} - {footer} - - ); + ); } }); diff --git a/web/client/components/maps/modals/MetadataModal.jsx b/web/client/components/maps/modals/MetadataModal.jsx index 889aa1fbda..5f3470fd5b 100644 --- a/web/client/components/maps/modals/MetadataModal.jsx +++ b/web/client/components/maps/modals/MetadataModal.jsx @@ -13,12 +13,10 @@ const PermissionEditor = require('../../security/PermissionEditor'); require('./css/modals.css'); -const {Modal, Button, Glyphicon, Grid, Row, Col} = require('react-bootstrap'); +const {Button, Grid, Row, Col} = require('react-bootstrap'); +const Modal = require('../../misc/Modal'); const Message = require('../../I18N/Message'); -const Dialog = require('../../../components/misc/Dialog'); -const assign = require('object-assign'); - const Spinner = require('react-spinkit'); const LocaleUtils = require('../../../utils/LocaleUtils'); @@ -144,15 +142,6 @@ const MetadataModal = React.createClass({ } } }, - updateThumbnail() { - this.refs.thumbnail.updateThumbnail(); - }, - loadPermissions() { - this.props.loadPermissions(this.props.map.id); - }, - loadAvailableGroups() { - this.props.loadAvailableGroups(this.props.user); - }, onSave() { this.setState({ saving: true @@ -247,7 +236,7 @@ const MetadataModal = React.createClass({ } else { messageIdError = "Default"; } - return this.props.useModal ? ( + return ( {footer} - ) : ( - - - {body} - {footer} - - ); + ); + }, + loadAvailableGroups() { + this.props.loadAvailableGroups(this.props.user); + }, + loadPermissions() { + this.props.loadPermissions(this.props.map.id); + }, + updateThumbnail() { + this.refs.thumbnail.updateThumbnail(); }, isMetadataChanged() { return this.props.map && ( diff --git a/web/client/components/misc/GridCard.jsx b/web/client/components/misc/GridCard.jsx index d147faf022..bea9b0f41b 100644 --- a/web/client/components/misc/GridCard.jsx +++ b/web/client/components/misc/GridCard.jsx @@ -7,7 +7,8 @@ */ const React = require('react'); -const {Glyphicon, Button, Tooltip, OverlayTrigger} = require('react-bootstrap'); +const {Glyphicon, Button, Tooltip} = require('react-bootstrap'); +const OverlayTrigger = require('./OverlayTrigger'); const Spinner = require('react-spinkit'); require('./style/gridcard.css'); diff --git a/web/client/components/misc/Modal.jsx b/web/client/components/misc/Modal.jsx new file mode 100644 index 0000000000..83e2e923f4 --- /dev/null +++ b/web/client/components/misc/Modal.jsx @@ -0,0 +1,20 @@ +/** + * Copyright 2017, GeoSolutions Sas. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root dir + ectory of this source tree. + */ + +const withContainer = require('./WithContainer'); +const {Modal} = require('react-bootstrap'); +const assign = require('object-assign'); + +module.exports = assign(withContainer(Modal), { + Body: Modal.Body, + Dialog: Modal.Dialog, + Footer: Modal.Footer, + Header: Modal.Header, + Title: Modal.Title +}); diff --git a/web/client/components/misc/OverlayTrigger.jsx b/web/client/components/misc/OverlayTrigger.jsx new file mode 100644 index 0000000000..20eabe1f37 --- /dev/null +++ b/web/client/components/misc/OverlayTrigger.jsx @@ -0,0 +1,12 @@ +/** + * Copyright 2017, GeoSolutions Sas. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root dir + ectory of this source tree. + */ + +const withContainer = require('./WithContainer'); + +module.exports = withContainer(require('react-bootstrap').OverlayTrigger); diff --git a/web/client/components/misc/Portal.jsx b/web/client/components/misc/Portal.jsx new file mode 100644 index 0000000000..4d7f6af1a1 --- /dev/null +++ b/web/client/components/misc/Portal.jsx @@ -0,0 +1,12 @@ +/** + * Copyright 2017, GeoSolutions Sas. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root dir + ectory of this source tree. + */ + +const withContainer = require('./WithContainer'); + +module.exports = withContainer(require('react-overlays').Portal); diff --git a/web/client/components/misc/WithContainer.jsx b/web/client/components/misc/WithContainer.jsx new file mode 100644 index 0000000000..93dbe28c3c --- /dev/null +++ b/web/client/components/misc/WithContainer.jsx @@ -0,0 +1,18 @@ +/** + * Copyright 2017, GeoSolutions Sas. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root dir + ectory of this source tree. + */ + +const React = require('react'); + +const ConfigUtils = require('../../utils/ConfigUtils'); + +module.exports = (Component) => { + return (props) => { + return ; + }; +}; diff --git a/web/client/components/security/modals/LoginModal.jsx b/web/client/components/security/modals/LoginModal.jsx index 5300deb6d7..e507c5f03f 100644 --- a/web/client/components/security/modals/LoginModal.jsx +++ b/web/client/components/security/modals/LoginModal.jsx @@ -8,13 +8,12 @@ const React = require('react'); const LoginForm = require('../forms/LoginForm'); -const {Modal, Button, Glyphicon} = require('react-bootstrap'); +const {Button} = require('react-bootstrap'); +const Modal = require('../../misc/Modal'); const Message = require('../../../components/I18N/Message'); -const Dialog = require('../../misc/Dialog'); const LocaleUtils = require('../../../utils/LocaleUtils'); require('../css/security.css'); -const assign = require('object-assign'); /** * A Modal window to show password reset form @@ -32,7 +31,6 @@ const LoginModal = React.createClass({ onSubmit: React.PropTypes.func, onError: React.PropTypes.func, onClose: React.PropTypes.func, - useModal: React.PropTypes.bool, closeGlyph: React.PropTypes.string, style: React.PropTypes.object, buttonSize: React.PropTypes.string, @@ -48,7 +46,6 @@ const LoginModal = React.createClass({ onError: () => {}, onClose: () => {}, options: {}, - useModal: true, closeGlyph: "", style: {}, buttonSize: "large", @@ -84,7 +81,7 @@ const LoginModal = React.createClass({ onClick={this.props.onClose}> : } ); }, - renderModal() { + render() { return ( @@ -97,16 +94,6 @@ const LoginModal = React.createClass({ ); }, - renderDialog() { - return (this.props.show) ? ( - - {this.getForm()} - {this.getFooter()} - ) : null; - }, - render() { - return this.props.useModal ? this.renderModal() : this.renderDialog(); - }, loginSubmit() { this.refs.loginForm.submit(); } diff --git a/web/client/components/security/modals/PasswordResetModal.jsx b/web/client/components/security/modals/PasswordResetModal.jsx index 6807fbc29a..01478268a7 100644 --- a/web/client/components/security/modals/PasswordResetModal.jsx +++ b/web/client/components/security/modals/PasswordResetModal.jsx @@ -9,10 +9,8 @@ const React = require('react'); const PasswordReset = require('../forms/PasswordReset'); const Message = require('../../../components/I18N/Message'); -const {Modal, Button, Glyphicon} = require('react-bootstrap'); - -const Dialog = require('../../misc/Dialog'); -const assign = require('object-assign'); +const {Button} = require('react-bootstrap'); +const Modal = require('../../misc/Modal'); const Spinner = require('react-spinkit'); @@ -31,7 +29,6 @@ const PasswordResetModal = React.createClass({ onPasswordChange: React.PropTypes.func, onPasswordChanged: React.PropTypes.func, onClose: React.PropTypes.func, - useModal: React.PropTypes.bool, closeGlyph: React.PropTypes.string, style: React.PropTypes.object, buttonSize: React.PropTypes.string, @@ -46,7 +43,6 @@ const PasswordResetModal = React.createClass({ onPasswordChanged: () => {}, onClose: () => {}, options: {}, - useModal: true, closeGlyph: "", style: {}, buttonSize: "small", @@ -75,9 +71,6 @@ const PasswordResetModal = React.createClass({ onPasswordChange() { this.props.onPasswordChange(this.props.user, this.state.password); }, - renderLoading() { - return this.state.loading ? : null; - }, getFooter() { return (
{this.renderLoading()}
 - {this.getBody()} - {this.getFooter()} - ) : null; - }, - render() { - return this.props.useModal ? this.renderModal() : this.renderDialog(); } }); diff --git a/web/client/components/security/modals/UserDetailsModal.jsx b/web/client/components/security/modals/UserDetailsModal.jsx index cb15c49647..ce875c3d67 100644 --- a/web/client/components/security/modals/UserDetailsModal.jsx +++ b/web/client/components/security/modals/UserDetailsModal.jsx @@ -7,9 +7,8 @@ */ const React = require('react'); -const {Modal, Button, Table, Alert, Glyphicon} = require('react-bootstrap'); -const Dialog = require('../../../components/misc/Dialog'); -const assign = require('object-assign'); +const {Button, Table, Alert} = require('react-bootstrap'); +const Modal = require('../../../components/misc/Modal'); const SecurityUtils = require('../../../utils/SecurityUtils'); const Message = require('../../../components/I18N/Message'); @@ -24,7 +23,6 @@ const UserDetails = React.createClass({ displayAttributes: React.PropTypes.func, options: React.PropTypes.object, onClose: React.PropTypes.func, - useModal: React.PropTypes.bool, closeGlyph: React.PropTypes.string, style: React.PropTypes.object, buttonSize: React.PropTypes.string, @@ -40,13 +38,15 @@ const UserDetails = React.createClass({ }, onClose: () => {}, options: {}, - useModal: true, closeGlyph: "", style: {}, buttonSize: "large", includeCloseButton: true }; }, + getFooter() { + return (this.props.includeCloseButton ? : ); + }, renderAttributes() { if (this.props.user && this.props.user.attribute) { let userAttributes = SecurityUtils.getUserAttributes(this.props.user); @@ -59,10 +59,7 @@ const UserDetails = React.createClass({ } return ; }, - getFooter() { - return (this.props.includeCloseButton ? : ); - }, - renderModal() { + render() { return ( @@ -74,16 +71,6 @@ const UserDetails = React.createClass({ {this.getFooter()} ); - }, - renderDialog() { - return (this.props.show) ? ( - - {this.renderAttributes()} - {this.getFooter()} - ) : null; - }, - render() { - return this.props.useModal ? this.renderModal() : this.renderDialog(); } }); diff --git a/web/client/components/share/ShareEmbed.jsx b/web/client/components/share/ShareEmbed.jsx index 2a8ac1ac4a..0df7bc398c 100644 --- a/web/client/components/share/ShareEmbed.jsx +++ b/web/client/components/share/ShareEmbed.jsx @@ -15,7 +15,8 @@ const React = require('react'); const CopyToClipboard = require('react-copy-to-clipboard'); const Message = require('../../components/I18N/Message'); -const {Glyphicon, Col, Grid, Row, Tooltip, OverlayTrigger, Button} = require('react-bootstrap'); +const {Glyphicon, Col, Grid, Row, Tooltip, Button} = require('react-bootstrap'); +const OverlayTrigger = require('../misc/OverlayTrigger'); // css required diff --git a/web/client/components/share/ShareLink.jsx b/web/client/components/share/ShareLink.jsx index 7902add551..2ce5c1fe22 100644 --- a/web/client/components/share/ShareLink.jsx +++ b/web/client/components/share/ShareLink.jsx @@ -15,7 +15,8 @@ const React = require('react'); const CopyToClipboard = require('react-copy-to-clipboard'); const Message = require('../../components/I18N/Message'); -const {Glyphicon, FormControl, FormGroup, Tooltip, OverlayTrigger, Button} = require('react-bootstrap'); +const {Glyphicon, FormControl, FormGroup, Tooltip, Button} = require('react-bootstrap'); +const OverlayTrigger = require('../misc/OverlayTrigger'); // css required require('./share.css'); diff --git a/web/client/components/theme/Theme.jsx b/web/client/components/theme/Theme.jsx index ba9d05d0ac..f8653e48b3 100644 --- a/web/client/components/theme/Theme.jsx +++ b/web/client/components/theme/Theme.jsx @@ -7,6 +7,7 @@ */ const React = require('react'); const withSideEffect = require('react-side-effect'); +const ConfigUtils = require('../../utils/ConfigUtils'); const reducePropsToState = (props) => { const innermostProps = props[props.length - 1]; @@ -14,7 +15,7 @@ const reducePropsToState = (props) => { return { theme: innermostProps.theme || 'default', themeElement: innermostProps.themeElement || 'theme_stylesheet', - prefix: innermostProps.prefix || 'ms2', + prefix: innermostProps.prefix || ConfigUtils.getConfigProp('themePrefix') || 'ms2', prefixContainer: innermostProps.prefixContainer && document.querySelector(innermostProps.prefixContainer) || document.body, path: innermostProps.path || 'dist/themes' }; @@ -41,6 +42,7 @@ const handleStateChangeOnClient = (themeCfg) => { if (!prefixContainer.className || prefixContainer.className.indexOf(prefix) === -1) { prefixContainer.className = prefixContainer.className + ' ' + prefix; } + prefixContainer.setAttribute('data-ms2-container', 'ms2'); } }; diff --git a/web/client/components/toolbar/MapToolbar.jsx b/web/client/components/toolbar/MapToolbar.jsx index 4e0527b3e6..9c1d6b60ca 100644 --- a/web/client/components/toolbar/MapToolbar.jsx +++ b/web/client/components/toolbar/MapToolbar.jsx @@ -7,7 +7,8 @@ */ const React = require('react'); -const {Collapse, Panel, Button, ButtonGroup, Tooltip, OverlayTrigger} = require('react-bootstrap'); +const {Collapse, Panel, Button, ButtonGroup, Tooltip} = require('react-bootstrap'); +const OverlayTrigger = require('../misc/OverlayTrigger'); const assign = require('object-assign'); diff --git a/web/client/examples/api/localConfig.json b/web/client/examples/api/localConfig.json index 438804a6f4..7ffc74dfcf 100644 --- a/web/client/examples/api/localConfig.json +++ b/web/client/examples/api/localConfig.json @@ -3,5 +3,6 @@ "geoStoreUrl": "/mapstore/rest/geostore/", "printUrl": "https://demo.geo-solutions.it/geoserver/pdf/info.json", "bingApiKey": "AhuXBu7ipR1gNbBfXhtUAyCZ6rkC5PkWpxs2MnMRZ1ZupxQfivjLCch22ozKSCAn", - "translationsPath": "../../translations" + "translationsPath": "../../translations", + "themePrefix": "ms2" } diff --git a/web/client/examples/api/plugins.js b/web/client/examples/api/plugins.js index f5ab80c48f..57f12bd135 100644 --- a/web/client/examples/api/plugins.js +++ b/web/client/examples/api/plugins.js @@ -38,7 +38,10 @@ module.exports = { ManagerMenuPlugin: require('../../plugins/manager/ManagerMenu'), SharePlugin: require('../../plugins/Share'), SavePlugin: require('../../plugins/Save'), - SaveAsPlugin: require('../../plugins/SaveAs') + SaveAsPlugin: require('../../plugins/SaveAs'), + TOCPlugin: require('../../plugins/TOC'), + BackgroundSwitcherPlugin: require('../../plugins/BackgroundSwitcher'), + MeasurePlugin: require('../../plugins/Measure') }, requires: { ReactSwipe: require('react-swipeable-views').default, diff --git a/web/client/jsapi/MapStore2.js b/web/client/jsapi/MapStore2.js index 1769709982..209e8c8539 100644 --- a/web/client/jsapi/MapStore2.js +++ b/web/client/jsapi/MapStore2.js @@ -197,7 +197,6 @@ function buildPluginsCfg(plugins, cfg) { const actionListeners = {}; let stateChangeListeners = []; -let app; const getInitialActions = (options) => { if (!options.initialState) { @@ -308,17 +307,20 @@ const MapStore2 = { }; const themeCfg = options.theme && assign({}, defaultThemeCfg, options.theme) || defaultThemeCfg; - app = ReactDOM.render(, document.getElementById(container)); - app.store.addActionListener((action) => { - (actionListeners[action.type] || []).concat(actionListeners['*'] || []).forEach((listener) => { - listener.call(null, action); + const onStoreInit = (store) => { + store.addActionListener((action) => { + (actionListeners[action.type] || []).concat(actionListeners['*'] || []).forEach((listener) => { + listener.call(null, action); + }); }); - }); - app.store.subscribe(() => { - stateChangeListeners.forEach(({listener, selector}) => { - listener.call(null, selector(app.store.getState())); + store.subscribe(() => { + stateChangeListeners.forEach(({listener, selector}) => { + listener.call(null, selector(store.getState())); + }); }); - }); + }; + ReactDOM.render(, document.getElementById(container)); + }); }, buildPluginsCfg, diff --git a/web/client/localConfig.json b/web/client/localConfig.json index a37ce1701f..d73a00f044 100644 --- a/web/client/localConfig.json +++ b/web/client/localConfig.json @@ -11,6 +11,7 @@ "initialMapFilter": "", "ignoreMobileCss": true, "useAuthenticationRules": true, + "themePrefix": "ms2", "authenticationRules": [{ "urlPattern": ".*geostore.*", "method": "basic" diff --git a/web/client/plugins/ScrollTop.jsx b/web/client/plugins/ScrollTop.jsx index a7c45d9c9d..7e17262045 100644 --- a/web/client/plugins/ScrollTop.jsx +++ b/web/client/plugins/ScrollTop.jsx @@ -8,7 +8,8 @@ const React = require('react'); const ScrollUp = require('react-scroll-up'); const Message = require('../components/I18N/Message'); -const {Glyphicon, Button, OverlayTrigger, Tooltip} = require('react-bootstrap'); +const {Glyphicon, Button, Tooltip} = require('react-bootstrap'); +const OverlayTrigger = require('../components/misc/OverlayTrigger'); /** * ScrollUp Plugin. Show a button that allows to scroll to the top of the page. Only for full pages. diff --git a/web/client/plugins/TOC.jsx b/web/client/plugins/TOC.jsx index 1efad67275..4214680339 100644 --- a/web/client/plugins/TOC.jsx +++ b/web/client/plugins/TOC.jsx @@ -191,7 +191,6 @@ const LayerTree = React.createClass({ settingsOptions: { includeCloseButton: false, closeGlyph: "1-close", - asModal: false, buttonSize: "small" }, querypanelEnabled: false diff --git a/web/client/plugins/containers/ToolsContainer.jsx b/web/client/plugins/containers/ToolsContainer.jsx index 8bef130ea8..be4a2985b6 100644 --- a/web/client/plugins/containers/ToolsContainer.jsx +++ b/web/client/plugins/containers/ToolsContainer.jsx @@ -21,7 +21,8 @@ const HelpBadge = connect((state) => ({ const Message = require('../../components/I18N/Message'); -const {Button, Tooltip, OverlayTrigger, Panel, Collapse, Glyphicon} = require('react-bootstrap'); +const {Button, Tooltip, Panel, Collapse, Glyphicon} = require('react-bootstrap'); +const OverlayTrigger = require('../../components/misc/OverlayTrigger'); const {setControlProperty, toggleControl} = require('../../actions/controls'); const {partial} = require('lodash'); diff --git a/web/client/plugins/drawer/Menu.jsx b/web/client/plugins/drawer/Menu.jsx index cac1f0a5ec..dcc129da9a 100644 --- a/web/client/plugins/drawer/Menu.jsx +++ b/web/client/plugins/drawer/Menu.jsx @@ -6,7 +6,8 @@ * LICENSE file in the root directory of this source tree. */ var React = require('react'); -var {Glyphicon, Button, OverlayTrigger, Tooltip} = require('react-bootstrap'); +var {Glyphicon, Button, Tooltip} = require('react-bootstrap'); +const OverlayTrigger = require('../../components/misc/OverlayTrigger'); var Sidebar = require('react-sidebar').default; var Message = require('../../components/I18N/Message'); diff --git a/web/client/plugins/drawer/Section.jsx b/web/client/plugins/drawer/Section.jsx index 8ee9bbf739..e1b72cb159 100644 --- a/web/client/plugins/drawer/Section.jsx +++ b/web/client/plugins/drawer/Section.jsx @@ -7,7 +7,9 @@ */ var React = require('react'); -var {Glyphicon, Modal} = require('react-bootstrap'); +var {Glyphicon} = require('react-bootstrap'); +const Modal = require('../../components/misc/Modal'); + const assign = require('object-assign'); var Section = React.createClass({ diff --git a/web/client/product/components/viewer/about/About.jsx b/web/client/product/components/viewer/about/About.jsx index b66e266b17..bb42d01f7d 100644 --- a/web/client/product/components/viewer/about/About.jsx +++ b/web/client/product/components/viewer/about/About.jsx @@ -26,7 +26,6 @@ var About = React.createClass({ margin: "8px" }, modalConfig: { - useModal: false, closeGlyph: "1-close" } }; diff --git a/web/client/themes/default/base.less b/web/client/themes/default/base.less index 9e9f2cc21d..d1c5478b78 100644 --- a/web/client/themes/default/base.less +++ b/web/client/themes/default/base.less @@ -1,4 +1,4 @@ -.ms2 { +[data-ms2-container] { font-family: @font-family-base; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; diff --git a/webpack.config.js b/webpack.config.js index 31d54be37c..905e5ad857 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -28,7 +28,7 @@ module.exports = { options: { postcss: { plugins: [ - require('postcss-prefix-selector')({prefix: '.ms2', exclude: ['.ms2']}) + require('postcss-prefix-selector')({prefix: '.ms2', exclude: ['.ms2', '[data-ms2-container]']}) ] }, context: __dirname