Fix #1496 Support to include theme 2.0

package.json

@@ -22,8 +22,9 @@
     "eslint-plugin-react": "3.0.0",
     "exists-file": "1.0.2",
     "expect": "1.13.4",
-    "extract-text-webpack-plugin": "2.0.0-rc.3",
+    "extract-text-webpack-plugin": "2.1.0",
     "file-loader": "0.8.5",
+    "glob": "7.1.1",
     "html-webpack-plugin": "2.17.0",
     "istanbul-instrumenter-loader": "2.0.0",
     "karma": "1.5.0",

prod-webpack.config.js

@@ -4,7 +4,7 @@ var LoaderOptionsPlugin = require("webpack/lib/LoaderOptionsPlugin");
 var ParallelUglifyPlugin = require("webpack-parallel-uglify-plugin");
 var DefinePlugin = require("webpack/lib/DefinePlugin");
 var NormalModuleReplacementPlugin = require("webpack/lib/NormalModuleReplacementPlugin");
-
+const extractThemesPlugin = require('./themes.js').extractThemesPlugin;
 var assign = require('object-assign');
 
 assign(webpackConfig.entry, require('./examples.js'));
@@ -30,7 +30,8 @@ webpackConfig.plugins = [
             compress: {warnings: false},
             mangle: true
         }
-    })
+    }),
+    extractThemesPlugin
 ];
 webpackConfig.devtool = undefined;
 

themes.js

@@ -0,0 +1,23 @@
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+var path = require("path");
+const glob = require('glob');
+const extractThemesPlugin = new ExtractTextPlugin({
+    filename: '[name].css',
+    disable: process.env.NODE_ENV === "development"
+});
+
+
+const themeEntries = () => {
+    const globPath = path.join(__dirname, "web", "client", "themes", "*");
+    var files = glob.sync(globPath);
+    return files.reduce((res, curr) => {
+        var finalRes = res || {};
+        finalRes["themes/" + path.basename(curr, path.extname(curr))] = `${curr}/theme.less`;
+        return finalRes;
+    }, {});
+
+}();
+module.exports = {
+    themeEntries,
+    extractThemesPlugin
+};

web/client/actions/__tests__/theme-test.js

@@ -0,0 +1,26 @@
+/**
+ * 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 directory of this source tree.
+ */
+
+var expect = require('expect');
+var {
+    THEME_SELECTED,
+    selectTheme
+} = require('../theme');
+
+describe('Test theme related actions', () => {
+    it('test theme selection action', () => {
+        let theme = {id: "newtheme"};
+        let e = selectTheme(theme);
+
+        expect(e).toExist();
+        expect(e.type).toBe(THEME_SELECTED);
+        expect(e.theme).toExist();
+        expect(e.theme).toBe(theme);
+
+    });
+});

web/client/actions/theme.js

@@ -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 directory of this source tree.
+ */
+const THEME_SELECTED = 'THEME_SELECTED';
+
+
+function selectTheme(theme) {
+    return {
+        type: THEME_SELECTED,
+        theme
+    };
+}
+module.exports = {
+    THEME_SELECTED,
+    selectTheme
+};

web/client/components/TOC/DefaultLayer.jsx

@@ -145,7 +145,7 @@ var DefaultLayer = React.createClass({
                 <VisibilityCheck key="visibilitycheck"
                    checkType={this.props.visibilityCheckType}
                    propertiesChangeHandler={this.props.propertiesChangeHandler}
-                   style={{"float": "right", cursor: "pointer", marginLeft: 0, marginRight: 0, left: "-3px", fontSize: "29px"}}/>
+                   style={{"float": "right", cursor: "pointer"}}/>
             );
         }
         if (this.props.activateLegendTool) {

web/client/components/TOC/fragments/SettingsModal.jsx

@@ -66,8 +66,7 @@ const SettingsModal = React.createClass({
                 position: "absolute",
                 // overflow: "auto",
                 top: "100px",
-                left: "calc(50% - 150px)",
-                backgroundColor: "white"
+                left: "calc(50% - 150px)"
             },
             panelClassName: "toolbar-panel",
             includeCloseButton: true,

web/client/components/TOC/fragments/VisibilityCheck.jsx

@@ -23,7 +23,7 @@ const VisibilityCheck = React.createClass({
     },
     getDefaultProps() {
         return {
-            style: {left: "-3px"},
+            style: {},
             checkType: "glyph",
             glyphChecked: "eye-open",
             tooltip: "toc.toggleLayerVisibility",

web/client/components/TOC/fragments/css/grouptitle.css

@@ -5,7 +5,4 @@
 }
 .toc-default-group .visibility-check{
     float: left;
-    margin-right: 2px;
-    margin-top: 5px;
-    margin-left: 2px;
 }

web/client/components/TOC/fragments/css/visibilitycheck.css

@@ -8,9 +8,6 @@ input[type="checkbox"].visibility-check,input[type="radio"].visibility-check {
 .visibility-check.glyphicon {
     float: left;
     overflow: hidden;
-    margin-left: 5px;
-    margin-right: 5px;
-    margin-top: 5px;
 }
 button.clayer_removal_button.btn.btn-default {
     border: transparent;

web/client/components/TOC/fragments/settings/WMSStyle.jsx

@@ -78,7 +78,7 @@ const WMSStyle = React.createClass({
                 <br />
                 {this.renderLegend()}
                 {this.renderError()}
-                <Button bsStyle="primary" style={{"float": "right"}} onClick={() => this.props.retrieveLayerData(this.props.element)}><Glyphicon glyph="refresh" /><Message msgId="layerProperties.stylesRefreshList" /></Button>
+                <Button bsStyle="primary" style={{"float": "right"}} onClick={() => this.props.retrieveLayerData(this.props.element)}><Glyphicon glyph="refresh" />&nbsp;<Message msgId="layerProperties.stylesRefreshList" /></Button>
                 <br />
             </form>);
     },

web/client/components/data/featuregrid/featuregrid.css

@@ -1,20 +1,6 @@
-.ag-fresh .ag-header, .ag-fresh .ag-tool-panel-container {
-    background: #078AA3;
-    color: white;
-    font-family: Raleway;
-}
-.ag-fresh .ag-tool-panel-container .ag-list-selection{
-    color: black;
-}
 .ag-fresh .ag-paging-button {
-    color: #078aa3;
-    background-color: #ffffff;
-    border: #078aa3 1px solid;
     padding: 5px;
 }
-.ag-fresh .ag-paging-page-summary-panel {
-    color: #078aa3;
-}
 .featuregrid-tools {
     position: absolute;
     right: 0;

web/client/components/data/identify/css/identify.css

@@ -17,7 +17,6 @@
 }
 
 #mapstore-getfeatureinfo .swipeable-view .panel-heading {
-    background-color: white;
     border: none;
     height: 60px;
     padding: 0;

web/client/components/data/query/queryform.css

@@ -14,10 +14,6 @@
     float: left;
 }
 
-#mapstore-drawermenu #toc-query-container {
-    background-color: #f7f7f7;
-}
-
 /*****************************/
 /* END - TOC *****************/
 /*****************************/
@@ -41,35 +37,16 @@
     border: none;
 }
 
-#mapstore-drawermenu #query-form-panel .glyphicon {
-    font-size: 22px;
-}
-
 #query-form-panel .btn-default {
     background-color: transparent;
     border-radius: 0;
-    color: #078aa3;
-    border-color: #078aa3;
-}
-
-#query-form-panel .btn-default:hover {
-    background-color: #dedede;
 }
 
 #query-form-panel input.form-control {
     height: 32px;
-    border: 1px solid #dedede;
-}
-
-#query-form-panel button:disabled {
-    color: #ffffff;
-    background-color: #abc8cd;
-    border-color: transparent;
 }
 
 #query-form-panel button:disabled {
-    color: #ffffff;
-    background-color: #abc8cd;
     border-color: transparent;
 }
 
@@ -88,32 +65,17 @@
 }
 
 #query-form-panel .filter-buttons {
-    background-color: #f7f7f7;
     border: none;
     margin-left: 4px;
 }
 
-#query-form-panel .filter-buttons:hover {
-    background-color: #dedede;
-}
-
 #query-form-panel .remove-filter-button {
-    height: 32px;
-    width: 32px;
     padding: 0;
     margin: 2px;
     border: none;
     float: right;
 }
 
-#mapstore-drawermenu #query-form-panel .remove-filter-button .glyphicon {
-    font-size: 32px;
-}
-
-#mapstore-drawermenu #query-form-panel .remove-filter-button span {
-    line-height: 32px;
-}
-
 #query-form-panel .close {
     display: none;
 }
@@ -123,7 +85,6 @@
 }
 
 #query-form-panel input {
-    border: 1px solid #dedede;
     border-radius: 4px;
     padding: 0 4px 0 8px;
 }
@@ -143,17 +104,13 @@
 
 #query-form-panel .query-toolbar {
     padding: 0;
-    height: 50px;
-    /*border-bottom: 2px dotted #dedede;*/
     overflow: hidden;
-    background-color: #ffffff;
 }
 
 #query-form-panel #query-toolbar-title {
     float: left;
     font-size: 20px;
     margin: 11px 11px 11px 20px;
-    color: #078aa3;
 }
 
 #query-form-panel .queryFormToolbar {
@@ -170,30 +127,16 @@
 /* BODY QUERY ****************/
 /*****************************/
 
-#query-form-panel .querypanel {
-    background-color: #f7f7f7;
-}
-
 #query-form-panel .querypanel .panel-heading {
     border: none;
-    color: #333333;
     text-decoration: underline;
     padding-left: 11px;
     background-color: transparent;
     font-weight: bold;
 }
 
-#query-form-panel .querypanel .panel-heading span {
-    font-size: 14px;
-}
-
-#query-form-panel .querypanel .panel-heading .panel-title:hover {
-    color: #777777;
-}
-
 #query-form-panel .query-content > .container-fluid {
     margin: 4px 0 4px 0;
-    border-top: 1px dashed #dedede;
 }
 
 #query-form-panel .filter-field-row > div {
@@ -225,16 +168,9 @@
 #query-form-panel .querypanel > .query-filter-container {
     margin: 0 30px 20px 20px;
     background-color: transparent;
-    border-bottom: 1px solid #dedede;
     padding-bottom: 10px;
 }
 
-#mapstore-drawermenu #query-form-panel .querypanel > .query-filter-container {
-    margin-right: 60px;
-    margin-left: 10px;
-}
-
-/* nested groups */
 #query-form-panel .panel .panel .panel {
     margin-left: 10px;
 }
@@ -243,23 +179,9 @@
     -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
     -moz-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
     box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
-    background-color: #ffffff;
     margin-bottom: 20px;
 }
 
-#query-form-panel .panel  .panel .filter-group-panel button {
-    background-color: #ffffff;
-}
-
-#query-form-panel .panel  .panel .filter-group-panel button:hover {
-    background-color: #dedede;
-}
-/* end - nested groups */
-
-#query-form-panel hr {
-    border-top: 1px dashed #dedede;
-}
-
 #query-form-panel h5 {
     font-family: Georgia, serif;
     font-style: italic;
@@ -286,7 +208,6 @@
 /*****************************/
 
 #query-form-panel div.details-panel {
-    background-color: #ffffff;
     -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
     -moz-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
     box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
@@ -302,25 +223,19 @@
 
 #query-form-panel .details-panel .detail-title span {
     text-decoration: none;
-    line-height: 32px;
     font-weight: normal;
 }
 
 #query-form-panel .details-panel button {
     float: right;
     border: none;
     margin-top: 8px;
-    background-color: #ffffff;
 }
 
 #query-form-panel .details-panel button.remove-filter-button {
     margin-top: 0;
 }
 
-#query-form-panel .details-panel button.remove-filter-button:hover {
-    background-color: #dedede;
-}
-
 #query-form-panel .details-panel button.remove-filter-button span {
     cursor: pointer;
 }