From 4a2d92dc64cf6af142534e767ec547fc6f3f6623 Mon Sep 17 00:00:00 2001 From: Mauro Bartolomeoli Date: Fri, 17 Mar 2017 14:04:55 +0100 Subject: [PATCH] Some improvements to enable automatic theme apply on pages --- web/client/components/app/StandardRouter.jsx | 11 +++++-- web/client/components/theme/Theme.jsx | 30 +++++++++++++++---- web/client/examples/api/index.html | 1 - web/client/examples/api/init.js | 5 +++- web/client/examples/plugins/app.jsx | 4 +-- .../examples/plugins/assets/css/plugins.css | 4 +++ web/client/examples/plugins/index.html | 3 +- web/client/index.html | 2 +- web/client/jsapi/MapStore2.js | 11 +++++-- web/client/plugins/Measure.jsx | 3 +- web/client/plugins/TOC.jsx | 2 +- web/client/themes/default/base.less | 2 -- .../themes/default/bootstrap-theme.less | 1 + 13 files changed, 57 insertions(+), 22 deletions(-) diff --git a/web/client/components/app/StandardRouter.jsx b/web/client/components/app/StandardRouter.jsx index 17e27e8e51..96be2b8d48 100644 --- a/web/client/components/app/StandardRouter.jsx +++ b/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 (
- + {this.renderPages()} diff --git a/web/client/components/theme/Theme.jsx b/web/client/components/theme/Theme.jsx index 06dfc55d0b..ba9d05d0ac 100644 --- a/web/client/components/theme/Theme.jsx +++ b/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; } } }; diff --git a/web/client/examples/api/index.html b/web/client/examples/api/index.html index 65a2a7164f..df1a1dab72 100644 --- a/web/client/examples/api/index.html +++ b/web/client/examples/api/index.html @@ -9,7 +9,6 @@ - diff --git a/web/client/examples/api/init.js b/web/client/examples/api/init.js index d28e8fede2..13283ab611 100644 --- a/web/client/examples/api/init.js +++ b/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' + } }); } diff --git a/web/client/examples/plugins/app.jsx b/web/client/examples/plugins/app.jsx index ac65e3486f..5a12732283 100644 --- a/web/client/examples/plugins/app.jsx +++ b/web/client/examples/plugins/app.jsx @@ -242,7 +242,7 @@ const startApp = () => { - + @@ -260,7 +260,7 @@ const startApp = () => { {renderPlugins(renderPage)}
-
+
diff --git a/web/client/examples/plugins/assets/css/plugins.css b/web/client/examples/plugins/assets/css/plugins.css index 1ea8e4acc4..62d597d99d 100644 --- a/web/client/examples/plugins/assets/css/plugins.css +++ b/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; +} diff --git a/web/client/examples/plugins/index.html b/web/client/examples/plugins/index.html index 78c22960a3..f7f2c4436b 100644 --- a/web/client/examples/plugins/index.html +++ b/web/client/examples/plugins/index.html @@ -8,7 +8,6 @@ - @@ -18,7 +17,7 @@ - +
diff --git a/web/client/index.html b/web/client/index.html index df1007c487..5b7e481437 100644 --- a/web/client/index.html +++ b/web/client/index.html @@ -18,7 +18,7 @@ - +
diff --git a/web/client/jsapi/MapStore2.js b/web/client/jsapi/MapStore2.js index d7671631f0..ad2b66fabf 100644 --- a/web/client/jsapi/MapStore2.js +++ b/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(, document.getElementById(container)); + const defaultThemeCfg = { + theme: 'default', + prefixContainer: '#' + container + }; + + const themeCfg = options.theme && assign({}, defaultThemeCfg, options.theme) || defaultThemeCfg; + ReactDOM.render(, document.getElementById(container)); }, buildPluginsCfg, getMapNameFromRequest, diff --git a/web/client/plugins/Measure.jsx b/web/client/plugins/Measure.jsx index f375e9b35a..06f0a99cfe 100644 --- a/web/client/plugins/Measure.jsx +++ b/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: , tooltip: "measureComponent.tooltip", - icon: , + icon: , title: "measureComponent.title", priority: 1 }, diff --git a/web/client/plugins/TOC.jsx b/web/client/plugins/TOC.jsx index 0d91c8e267..d342f76453 100644 --- a/web/client/plugins/TOC.jsx +++ b/web/client/plugins/TOC.jsx @@ -288,7 +288,7 @@ module.exports = { tooltip: "layers", wrap: true, title: 'layers', - icon: , + icon: , priority: 1 }, DrawerMenu: { diff --git a/web/client/themes/default/base.less b/web/client/themes/default/base.less index da85eb7b11..9e9f2cc21d 100644 --- a/web/client/themes/default/base.less +++ b/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; diff --git a/web/client/themes/default/bootstrap-theme.less b/web/client/themes/default/bootstrap-theme.less index 1d49574a30..9224d79eeb 100644 --- a/web/client/themes/default/bootstrap-theme.less +++ b/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,