Fixed plugins example (#2580)

geosolutions-it · Mar 7, 2018 · 417ed4e · 417ed4e
1 parent 779d321
commit 417ed4e
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 24 deletions.
diff --git a/buildConfig.js b/buildConfig.js
@@ -21,6 +21,9 @@ module.exports = (bundles, themeEntries, paths, extractThemesPlugin, prod, publi
     plugins: [
         new CopyWebpackPlugin([
             { from: path.join(paths.base, 'node_modules', 'bootstrap', 'less'), to: path.join(paths.dist, "bootstrap", "less") }
+        ]),
+		new CopyWebpackPlugin([
+            { from: path.join(paths.base, 'node_modules', 'react-nouislider', 'example'), to: path.join(paths.dist, "react-nouislider", "example") }
         ]),
         new LoaderOptionsPlugin({
             debug: !prod,

diff --git a/.../components/theme/__test__/Theme-test.jsx → ...components/theme/__tests__/Theme-test.jsx b/.../components/theme/__test__/Theme-test.jsx → ...components/theme/__tests__/Theme-test.jsx
diff --git a/web/client/examples/plugins/app.jsx b/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 path="../../dist/themes"/>
+                                    <Theme path="../../dist/themes" version="no_version"/>
                                     <label>Choose a theme</label>
                                     <ThemeSwitcher style={{width: "275px", marginTop: "5px"}}/>
                                   </FormGroup>

diff --git a/web/client/examples/plugins/index.html b/web/client/examples/plugins/index.html
@@ -16,7 +16,6 @@
         <script src="https://cesiumjs.org/releases/1.17/Build/Cesium/Cesium.js"></script>
         <link rel="stylesheet" href="https://cesiumjs.org/releases/1.17/Build/Cesium/Widgets/widgets.css" />
         <style id="custom_theme"></style>
-        <link rel="stylesheet" id="theme_stylesheet" href="../../dist/themes/default.css">
     </head>
     <body class=" ms2" data-ms2-container="ms2">
         <div id="container"></div>

diff --git a/web/client/examples/plugins/sample.less.raw b/web/client/examples/plugins/sample.less.raw
@@ -6,6 +6,7 @@
   @import "../../themes/default/bootstrap-theme.less";
   @import "../../themes/default/ms2-theme.less";
 }
+/* mapstore2 variables */
 
 @ms2-color-background: #ffffff;
 @ms2-color-code: #c7254e;
@@ -23,11 +24,11 @@
 @ms2-color-warning: #ebbc35;
 @ms2-color-danger: #bb4940;
 
-@ms2-color-primary-hover: lighten(@ms2-color-primary, 10%);
-@ms2-color-info-hover: lighten(@ms2-color-info, 10%);
-@ms2-color-success-hover: lighten(@ms2-color-success, 10%);
-@ms2-color-warning-hover: lighten(@ms2-color-warning, 10%);
-@ms2-color-danger-hover: lighten(@ms2-color-danger, 10%);
+@ms2-color-primary-hover: @ms2-color-primary;
+@ms2-color-info-hover: @ms2-color-info;
+@ms2-color-success-hover: @ms2-color-success;
+@ms2-color-warning-hover: @ms2-color-warning;
+@ms2-color-danger-hover: @ms2-color-danger;
 
 @ms2-color-primary-light: lighten(@ms2-color-primary, 40%);
 @ms2-color-info-light: lighten(@ms2-color-info, 40%);
@@ -36,28 +37,19 @@
 @ms2-color-danger-light: lighten(@ms2-color-danger, 40%);
 
 @ms2-color-primary-active: darken(@ms2-color-primary, 20%);
+@ms2-color-info-active: darken(@ms2-color-info, 20%);
+@ms2-color-success-active: darken(@ms2-color-success, 20%);
+@ms2-color-warning-active: darken(@ms2-color-warning, 20%);
+@ms2-color-danger-active: darken(@ms2-color-danger, 20%);
 
 @ms2-color-shade: #555555;
 @ms2-color-shade-darker: #222222;
 @ms2-color-shade-dark: #333333;
 @ms2-color-shade-light: #999999;
-@ms2-color-shade-lighter: #eeeeee;
-
-@font-family-base: 'Raleway', sans-serif;
-@font-size-base: 14px;
-@font-size-large: ceil(@font-size-base * 1.25);
-@font-size-small: ceil(@font-size-base * 0.85);
-@font-size-h1: floor((@font-size-base * 1.9));
-@font-size-h2: floor((@font-size-base * 1.7));
-@font-size-h3: floor((@font-size-base * 1.5));
-@font-size-h4: floor((@font-size-base * 1.25));
-@font-size-h5: @font-size-base;
-@font-size-h6: floor((@font-size-base * 0.85));
-@line-height-computed: floor(@font-size-base * 1.428571429);
-
-@btn-font-weight: normal;
+@ms2-color-shade-lighter: #dddddd;
+
 @icon-margin-ratio: 2;
-@icon-resize-ratio: 1.5;
+@icon-resize-ratio: 1.6;
 
 @icon-size: 26px;
 @padding-left-square: floor(@icon-size/@icon-margin-ratio);
@@ -74,3 +66,7 @@
 @grid-icon-size: 18px;
 @grid-btn-padding-left: 6px;
 @grid-btn-size: @grid-btn-padding-left * 2 + @grid-icon-size;
+
+/* override bootstrap variables */
+
+@import "../../themes/default/bootstrap-variables.less";
diff --git a/web/client/utils/ThemeUtils.js b/web/client/utils/ThemeUtils.js
@@ -8,7 +8,7 @@ function NodeProcessor(options) {
 
 NodeProcessor.prototype = {
     process: function(src, extra) {
-        const basePath = extra.fileInfo.currentDirectory.replace(this.options.path, '');
+        const [basePath] = extra.fileInfo.currentDirectory.split(this.options.path);
         return src.replace(/\"~(.*)\"/g, '"' + basePath + 'dist/$1"');
     }
 };