Some improvements to enable automatic theme apply on pages

web/client/components/app/StandardRouter.jsx

@@ -23,14 +23,19 @@ const StandardRouter = React.createClass({
         plugins: React.PropTypes.object,
         locale: React.PropTypes.object,
         pages: React.PropTypes.array,
-        className: React.PropTypes.string
+        className: React.PropTypes.string,
+        themeCfg: React.PropTypes.object
     },
     getDefaultProps() {
         return {
             plugins: {},
             locale: {messages: {}, current: 'en-US'},
             pages: [],
-            className: "ms2 fill"
+            className: "fill",
+            themeCfg: {
+                theme: 'default',
+                path: 'dist/themes'
+            }
         };
     },
     renderPages() {
@@ -47,7 +52,7 @@ const StandardRouter = React.createClass({
         return (
 
             <div className={this.props.className}>
-                <Theme/>
+                <Theme {...this.props.themeCfg}/>
                 <Localized messages={this.props.locale.messages} locale={this.props.locale.current} loadingError={this.props.locale.localeError}>
                     <Router history={hashHistory}>
                         {this.renderPages()}

web/client/components/theme/Theme.jsx

@@ -11,17 +11,35 @@ const withSideEffect = require('react-side-effect');
 const reducePropsToState = (props) => {
     const innermostProps = props[props.length - 1];
     if (innermostProps) {
-        return {theme: innermostProps.theme || 'default', themeElement: innermostProps.themeElement || 'theme_stylesheet'};
+        return {
+          theme: innermostProps.theme || 'default',
+          themeElement: innermostProps.themeElement || 'theme_stylesheet',
+          prefix: innermostProps.prefix || 'ms2',
+          prefixContainer: innermostProps.prefixContainer && document.querySelector(innermostProps.prefixContainer) || document.body,
+          path: innermostProps.path || 'dist/themes'
+        };
     }
     return null;
 };
 
 const handleStateChangeOnClient = (themeCfg) => {
-    if (themeCfg) {
-        const link = document.getElementById(themeCfg.themeElement);
-        if (link && themeCfg.theme) {
-            const basePath = link.href && link.href.substring(0, link.href.lastIndexOf("/"));
-            link.setAttribute('href', basePath + "/" + themeCfg.theme + ".css");
+    if (themeCfg && themeCfg.theme) {
+        let link = document.getElementById(themeCfg.themeElement);
+
+        if (!link) {
+            link = document.createElement('link');
+            link.setAttribute("rel", "stylesheet");
+            link.setAttribute("id", themeCfg.themeElement);
+            document.head.insertBefore(link, document.head.firstChild);
+        }
+        const basePath = link.href && link.href.substring(0, link.href.lastIndexOf("/")) || themeCfg.path;
+        link.setAttribute('href', basePath + "/" + themeCfg.theme + ".css");
+
+        const prefixContainer = themeCfg.prefixContainer;
+        const prefix = themeCfg.prefix;
+
+        if (!prefixContainer.className || prefixContainer.className.indexOf(prefix) === -1) {
+            prefixContainer.className = prefixContainer.className + ' ' + prefix;
         }
     }
 };

web/client/examples/api/index.html

@@ -9,7 +9,6 @@
         <link rel="stylesheet" href="https://rawgit.com/Leaflet/Leaflet.draw/v0.2.4/dist/leaflet.draw.css" />
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.0.1/ol.css" />
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
-        <link rel="stylesheet" href="../../dist/themes/default.css" id="theme_stylesheet"/>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>

web/client/examples/api/init.js

@@ -33,6 +33,9 @@ function init() {
         initialState: cfg && cfg.state && {
             defaultState: cfg.state
         } || null,
-        style: cfg && cfg.customStyle
+        style: cfg && cfg.customStyle,
+        theme: {
+            path: '../../dist/themes'
+        }
     });
 }

web/client/examples/plugins/app.jsx

@@ -242,7 +242,7 @@ const startApp = () => {
                                         <option value="openlayers" key="openlayer">OpenLayers</option>
                                         <option value="cesium" key="cesium">CesiumJS</option>
                                     </FormControl>
-                                    <Theme/>
+                                    <Theme path="../../dist/themes"/>
                                     <label>Choose a theme</label>
                                     <ThemeSwitcher style={{width: "275px", marginTop: "5px"}}/>
                                   </FormGroup>
@@ -260,7 +260,7 @@ const startApp = () => {
                                     {renderPlugins(renderPage)}
                                 </ul>
                             </div>
-                            <div style={{position: "absolute", right: 0, left: "300px", height: "100%"}}>
+                            <div style={{position: "absolute", right: 0, left: "300px", height: "100%", overflow: "hidden"}}>
                                 <PluginsContainer params={{mapType}} plugins={PluginsUtils.getPlugins(getPlugins())} pluginsConfig={getPluginsConfiguration()} mode="standard"/>
                             </div>
                             <Debug/>

web/client/examples/plugins/assets/css/plugins.css

@@ -88,3 +88,7 @@ html, body, #container, #map {
 #plugins-list .form-group {
     padding-left: 0;
 }
+
+#plugins-list {
+  overflow-x: hidden;
+}

web/client/examples/plugins/index.html

@@ -8,7 +8,6 @@
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
         <link rel="stylesheet" href="https://rawgit.com/Leaflet/Leaflet.draw/v0.2.4/dist/leaflet.draw.css" />
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.0.1/ol.css" />
-        <link rel="stylesheet" href="../../dist/themes/default.css" id="theme_stylesheet">
         <script src="https://maps.google.com/maps/api/js?v=3"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
@@ -18,7 +17,7 @@
         <link rel="stylesheet" href="../../libs/Cesium/Build/Cesium/Widgets/widgets.css" />
         <style id="custom_theme"></style>
     </head>
-    <body class="ms2">
+    <body>
         <div id="container"></div>
         <script src="../../dist/plugins.js"></script>
     </body>

web/client/index.html

@@ -18,7 +18,7 @@
         <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.0.1/ol.js"></script>
         <!--<script src="https://www.mapquestapi.com/sdk/leaflet/v2.2/mq-map.js?key=__API_KEY_MAPQUEST__"></script>-->
     </head>
-    <body class="ms2">
+    <body>
         <div id="container"></div>
         <script src="dist/mapstore2.js"></script>
     </body>

web/client/jsapi/MapStore2.js

@@ -18,6 +18,8 @@ const url = require('url');
 
 const ThemeUtils = require('../utils/ThemeUtils');
 
+const assign = require('object-assign');
+
 require('./mapstore2.css');
 
 const defaultConfig = {
@@ -225,7 +227,6 @@ const MapStore2 = {
             appComponent: StandardRouter,
             printingEnabled: false
         };
-        const className = options.className || 'ms2';
         if (options.style) {
             let dom = document.getElementById('custom_theme');
             if (!dom) {
@@ -235,7 +236,13 @@ const MapStore2 = {
             }
             ThemeUtils.renderFromLess(options.style, 'custom_theme', 'themes/default/');
         }
-        ReactDOM.render(<StandardApp className={className + " fill"} {...appConfig}/>, document.getElementById(container));
+        const defaultThemeCfg = {
+          theme: 'default',
+          prefixContainer: '#' + container
+        };
+
+        const themeCfg = options.theme && assign({}, defaultThemeCfg, options.theme) || defaultThemeCfg;
+        ReactDOM.render(<StandardApp themeCfg={themeCfg} className="fill" {...appConfig}/>, document.getElementById(container));
     },
     buildPluginsCfg,
     getMapNameFromRequest,

web/client/plugins/Measure.jsx

@@ -7,6 +7,7 @@
  */
 const React = require('react');
 const {connect} = require('react-redux');
+const {Glyphicon} = require('react-bootstrap');
 
 const Message = require('./locale/Message');
 
@@ -53,7 +54,7 @@ module.exports = {
             wrap: true,
             help: <Message msgId="helptexts.measureComponent"/>,
             tooltip: "measureComponent.tooltip",
-            icon: <img src={lineRuleIcon} />,
+            icon: <Glyphicon glyph="1-stilo"/>,
             title: "measureComponent.title",
             priority: 1
         },

web/client/plugins/TOC.jsx

@@ -288,7 +288,7 @@ module.exports = {
             tooltip: "layers",
             wrap: true,
             title: 'layers',
-            icon: <img src={layersIcon}/>,
+            icon: <Glyphicon glyph="1-layer"/>,
             priority: 1
         },
         DrawerMenu: {

web/client/themes/default/base.less

@@ -3,8 +3,6 @@
     -ms-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
     margin: 0;
-    height:100%;
-    width:100%;
     font-size: @font-size-base;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     line-height: 1.428571429;

web/client/themes/default/bootstrap-theme.less

@@ -2035,6 +2035,7 @@ fieldset[disabled] .btn {
   color: @ms2-color-primary ;
   background-color: @ms2-color-background !important;
   border:@ms2-color-primary 1px solid;
+  background-image: none;
 }
 
 .btn-default:hover,