Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix #1496 Support to include theme 2.0 #1521

Closed
Closed
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
First version of theme integration and switcher
offtherailz committed Mar 8, 2017
commit df872d9de879788d95565dda6e57b148ba40cda8
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
5 changes: 3 additions & 2 deletions prod-webpack.config.js
Original file line number Diff line number Diff line change
@@ -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;

23 changes: 23 additions & 0 deletions themes.js
Original file line number Diff line number Diff line change
@@ -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
};
26 changes: 26 additions & 0 deletions web/client/actions/__tests__/theme-test.js
Original file line number Diff line number Diff line change
@@ -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);

});
});
20 changes: 20 additions & 0 deletions web/client/actions/theme.js
Original file line number Diff line number Diff line change
@@ -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
};
4 changes: 1 addition & 3 deletions web/client/examples/plugins/index.html
Original file line number Diff line number Diff line change
@@ -9,9 +9,7 @@
<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="https://rawgit.com/geosolutions-it/MapStore2-theme/master/theme/default/css/css.css">
<link rel="stylesheet" href="https://rawgit.com/geosolutions-it/MapStore2-theme/master/theme/default/css/ms2-theme.css">
<link rel="stylesheet" href="https://rawgit.com/geosolutions-it/MapStore2-theme/master/theme/default/css/font.css">
<link rel="stylesheet" href="../../dist/themes/default.css"/>
<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>
4 changes: 1 addition & 3 deletions web/client/index.html
Original file line number Diff line number Diff line change
@@ -10,9 +10,7 @@
<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="https://rawgit.com/geosolutions-it/MapStore2-theme/master/theme/default/css/css.css">
<link rel="stylesheet" href="https://rawgit.com/geosolutions-it/MapStore2-theme/master/theme/default/css/ms2-theme.css">
<link rel="stylesheet" href="https://rawgit.com/geosolutions-it/MapStore2-theme/master/theme/default/css/font.css">
<link rel="stylesheet" href="dist/themes/default.css" id="theme_stylesheet">
<link rel="shortcut icon" type="image/png" href="https://raw.githubusercontent.com/geosolutions-it/MapStore2/master/web/client/product/assets/img/favicon.ico" />
<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>
2 changes: 1 addition & 1 deletion web/client/localConfig.json
Original file line number Diff line number Diff line change
@@ -284,7 +284,7 @@
"className": "navbar shadow navbar-home"
}
}, "ManagerMenu", "Login", "Language", "Attribution"],
"maps": ["Header", "Fork", "MapSearch", "HomeDescription", "MapType", "CreateNewMap", "Maps", "Examples", "Footer"],
"maps": ["Header", "Fork", "MapSearch", "HomeDescription", "MapType", "ThemeSwitcher", "CreateNewMap", "Maps", "Examples", "Footer"],
"manager": ["Header", "Redirect", "Manager", "Home", "UserManager", "GroupManager", "Footer"]
}
}
70 changes: 70 additions & 0 deletions web/client/plugins/ThemeSwitcher.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
/**
* 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 React = require('react');
const {connect} = require('react-redux');
const Message = require('../components/I18N/Message');
const {FormGroup, FormControl, Label} = require('react-bootstrap');
const {selectTheme} = require('../actions/theme');
const ThemeSwitcher = React.createClass({
propTypes: {
themes: React.PropTypes.array,
selectedTheme: React.PropTypes.object,
defaultSelectedTheme: React.PropTypes.string,
onThemeSelected: React.PropTypes.func
},
getDefaultProps() {
return {
onThemeSelected: () => {},
themes: [{
id: "default"
}, {
id: "console"
}, {
id: "wasabi"
}, {
id: "dark"
}, {
id: "geosolutions"
}],
defaultSelectedTheme: "default"
};
},

onChangeTheme(themeId) {
let theme = this.props.themes.reduce((prev, curr) => curr.id === themeId ? curr : prev);
let link = document.getElementById('theme_stylesheet');
if (link) {
let basePath = link.href && link.href.substring(0, link.href.lastIndexOf("/"));
link.setAttribute('href', basePath + "/" + theme.id + ".css");
}
this.props.onThemeSelected(theme);
},
render() {
return (<FormGroup className="theme-switcher" style={{ width: "300px", margin: "20px auto"}} bsSize="small">
<Label><Message msgId="manager.theme_combo"/></Label>
<FormControl
value={ (this.props.selectedTheme && this.props.selectedTheme.id) || this.props.defaultSelectedTheme}
componentClass="select" ref="mapType" onChange={(e) => this.onChangeTheme(e.target.value)}>
{this.props.themes.map( (t) => <option key={t.id} value={t.id}>{t.label || t.id}</option>)}
</FormControl>
</FormGroup>);
}
});

const ThemeSwitcherPlugin = connect((s) => ({
selectedTheme: s && s.theme && s.theme.selectedTheme
}), {
onThemeSelected: selectTheme
})(ThemeSwitcher);

module.exports = {
ThemeSwitcherPlugin: ThemeSwitcherPlugin,
reducers: {
theme: require('../reducers/theme')
}
};
3 changes: 2 additions & 1 deletion web/client/product/plugins.js
Original file line number Diff line number Diff line change
@@ -61,7 +61,8 @@ module.exports = {
CreateNewMapPlugin: require('../plugins/CreateNewMap'),
QueryPanelPlugin: require('../plugins/QueryPanel'),
FeatureGridPlugin: require('../plugins/FeatureGrid'),
TutorialPlugin: require('../plugins/Tutorial')
TutorialPlugin: require('../plugins/Tutorial'),
ThemeSwitchePluginr: require('../plugins/ThemeSwitcher')
},
requires: {
ReactSwipe: require('react-swipeable-views').default,
22 changes: 22 additions & 0 deletions web/client/reducers/__tests__/theme-test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@

/**
* 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 expect = require('expect');

const theme = require('../theme');
const {selectTheme} = require('../../actions/theme');


describe('Test the theme reducer', () => {
it('should maange the THEME_SELECTED action', () => {
var state = theme({}, selectTheme({id: "default"}));
expect(state.selectedTheme).toExist();
expect(state.selectedTheme.id).toBe("default");
});

});
23 changes: 23 additions & 0 deletions web/client/reducers/theme.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
/**
* Copyright 2016, 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} = require('../actions/theme');
const assign = require('object-assign');

function controls(state = {}, action) {
switch (action.type) {
case THEME_SELECTED:
return assign({}, state, {
selectedTheme: action.theme
});
default:
return state;
}
}

module.exports = controls;
6 changes: 6 additions & 0 deletions web/client/themes/console/theme.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@

@import "../default/icons.less";
@import "../default/bootstrap-theme.less";
@import "../default/ms2-theme.less";
@import "../default/variables.less";
@import "variables.less";
25 changes: 25 additions & 0 deletions web/client/themes/console/variables.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@

@ms2-color-background: #0a0b30;

@ms2-color-text-primary: #ffffff;
@ms2-color-text: #f2f2f2;

@ms2-color-disabled: #aea79f;
@ms2-color-text-disabled: #eeeeee;

@ms2-color-primary: #E95420;
@ms2-color-info: #7e64a5;
@ms2-color-success: #8ae234;
@ms2-color-warning: #ffd700;
@ms2-color-danger: #bb384b;

@ms2-color-shade: #555555;
@ms2-color-shade-darker: darken(@ms2-color-shade, 10%);
@ms2-color-shade-dark: darken(@ms2-color-shade, 5%);
@ms2-color-shade-light: lighten(@ms2-color-shade, 5%);
@ms2-color-shade-lighter: lighten(@ms2-color-shade, 10%);

@font-family-base: monospace;

@icon-margin-ratio: 5;
@icon-size: 36px;
5 changes: 5 additions & 0 deletions web/client/themes/dark/theme.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@import "../default/icons.less";
@import "../default/bootstrap-theme.less";
@import "../default/ms2-theme.less";
@import "../default/variables.less";
@import "variables.less";
23 changes: 23 additions & 0 deletions web/client/themes/dark/variables.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@

@ms2-color-background: #111111;

@ms2-color-text-primary: #333333;
@ms2-color-text: #b29600;

@ms2-color-disabled: #555555;
@ms2-color-text-disabled: #aaaaaa;

@ms2-color-primary: #998100;
@ms2-color-info: #7e64a5;
@ms2-color-success: #4abdac;
@ms2-color-warning: #ffd700;
@ms2-color-danger: #bb384b;

@ms2-color-shade: #333333;
@ms2-color-shade-darker: darken(@ms2-color-shade, 5%);
@ms2-color-shade-dark: darken(@ms2-color-shade, 2%);
@ms2-color-shade-light: lighten(@ms2-color-shade, 2%);
@ms2-color-shade-lighter: lighten(@ms2-color-shade, 5%);

@icon-margin-ratio: 5;
@icon-size: 36px;
Loading