Merge remote-tracking branch 'upstream/master' into feature/ui-errors-and-expressions

This commit is contained in:
orangemug 2020-02-23 13:34:05 +00:00
commit 97a61afc24
21 changed files with 3547 additions and 2350 deletions

View file

@ -18,8 +18,8 @@ templates:
- run: mkdir -p /tmp/artifacts/logs
- run: npm run build
- run: npm run lint
- run: npm run lint-styles
- run: npm run lint-js
- run: npm run lint-css
- store_artifacts:
path: /tmp/artifacts
destination: /artifacts
@ -42,8 +42,8 @@ templates:
- run: mkdir -p /tmp/artifacts/logs
- run: npm run build
- run: npm run profiling-build
- run: npm run lint
- run: npm run lint-styles
- run: npm run lint-js
- run: npm run lint-css
- run: DOCKER_HOST=localhost npm test
- run: ./node_modules/.bin/istanbul report --include /tmp/artifacts/coverage/coverage.json --dir /tmp/artifacts/coverage html lcov
- store_artifacts:

View file

@ -22,5 +22,5 @@ install:
build_script:
- npm run build
test_script:
- npm run lint
- npm run lint-styles
- npm run lint-js
- npm run lint-css

View file

@ -97,7 +97,7 @@ exports.config = {
//
screenshotPath: SCREENSHOT_PATH,
// Note: This is here because @orangemug currently runs Maputnik inside a docker container.
host: process.env.DOCKER_HOST || "0.0.0.0",
hostname: process.env.DOCKER_HOST || "0.0.0.0",
// Set a base URL in order to shorten url command calls. If your `url` parameter starts
// with `/`, the base url gets prepended, not including the path portion of your baseUrl.
// If your `url` parameter starts without a scheme or `/` (like `some/path`), the base url
@ -118,7 +118,6 @@ exports.config = {
// Services take over a specific job you don't want to take care of. They enhance
// your test setup with almost no effort. Unlike plugins, they don't add new
// commands. Instead, they hook themselves up into the test process.
services: ['selenium-standalone'],
//
// Framework you want to run your specs with.
// The following are supported: Mocha, Jasmine, and Cucumber
@ -147,12 +146,16 @@ exports.config = {
onPrepare: function (config, capabilities) {
return new Promise(function(resolve, reject) {
var compiler = webpack(webpackConfig);
const serverHost = isDocker() ? "0.0.0.0" : "localhost";
server = new WebpackDevServer(compiler, {
host: serverHost,
stats: {
colors: true
}
});
server.listen(testConfig.port, (isDocker() ? "0.0.0.0" : "localhost"), function(err) {
server.listen(testConfig.port, serverHost, function(err) {
if(err) {
reject(err);
}

View file

@ -3,6 +3,7 @@ var webpack = require('webpack');
var path = require('path');
var rules = require('./webpack.rules');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
const HOST = process.env.HOST || "127.0.0.1";
@ -61,6 +62,9 @@ module.exports = {
title: 'Maputnik',
template: './src/template.html'
}),
new HtmlWebpackInlineSVGPlugin({
runPreEmit: true,
}),
new CopyWebpackPlugin([
{
from: './src/manifest.json',

View file

@ -2,6 +2,7 @@ var webpack = require('webpack');
var path = require('path');
var rules = require('./webpack.rules');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');
var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
var CopyWebpackPlugin = require('copy-webpack-plugin');
@ -44,6 +45,9 @@ module.exports = {
template: './src/template.html',
title: 'Maputnik'
}),
new HtmlWebpackInlineSVGPlugin({
runPreEmit: true,
}),
new CopyWebpackPlugin([
{
from: './src/manifest.json',

View file

@ -17,9 +17,15 @@ module.exports = [
use: 'file-loader?name=[name].[ext]'
},
{
test: /\.(svg|gif|jpg|png)$/,
test: /\.(gif|jpg|png)$/,
use: 'file-loader?name=img/[name].[ext]'
},
{
test: /\.svg$/,
use: [
'svg-inline-loader'
]
},
{
test: /[\/\\](node_modules|global|src)[\/\\].*\.scss$/,
use: [

5638
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -10,8 +10,9 @@
"test": "cross-env NODE_ENV=test wdio config/wdio.conf.js",
"test-watch": "cross-env NODE_ENV=test wdio config/wdio.conf.js --watch",
"start": "webpack-dev-server --progress --profile --colors --config config/webpack.config.js",
"lint": "eslint --ext js --ext jsx src test",
"lint-styles": "stylelint \"src/styles/*.scss\""
"lint-js": "eslint --ext js --ext jsx src test",
"lint-css": "stylelint \"src/styles/*.scss\"",
"lint": "npm run lint-js && npm run lint-css"
},
"repository": {
"type": "git",
@ -21,11 +22,11 @@
"license": "MIT",
"homepage": "https://github.com/maputnik/editor#readme",
"dependencies": {
"@babel/runtime": "^7.8.3",
"@babel/runtime": "^7.8.4",
"@mapbox/mapbox-gl-rtl-text": "^0.2.3",
"@mapbox/mapbox-gl-style-spec": "^13.10.2",
"@mapbox/mapbox-gl-style-spec": "^13.12.0",
"classnames": "^2.2.6",
"codemirror": "^5.49.0",
"codemirror": "^5.52.0",
"color": "^3.1.2",
"detect-browser": "^4.8.0",
"file-saver": "^2.0.2",
@ -37,14 +38,14 @@
"lodash.get": "^4.4.2",
"lodash.isequal": "^4.5.0",
"lodash.throttle": "^4.1.1",
"mapbox-gl": "^1.6.1",
"mapbox-gl": "^1.8.0",
"mapbox-gl-inspect": "^1.3.1",
"maputnik-design": "github:maputnik/design",
"ol": "^6.1.1",
"ol-mapbox-style": "^5.0.2",
"maputnik-design": "github:maputnik/design#f7a2b4d",
"ol": "^6.2.1",
"ol-mapbox-style": "^6.0.1",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-aria-menubutton": "^6.2.0",
"react-aria-menubutton": "^6.3.0",
"react-aria-modal": "^4.0.0",
"react-autobind": "^1.0.6",
"react-autocomplete": "^1.8.1",
@ -53,10 +54,10 @@
"react-dom": "^16.12.0",
"react-file-reader-input": "^2.0.0",
"react-icon-base": "^2.1.2",
"react-icons": "^3.8.0",
"react-icons": "^3.9.0",
"react-motion": "^0.5.2",
"react-sortable-hoc": "^1.10.1",
"reconnecting-websocket": "^4.2.0",
"react-sortable-hoc": "^1.11.0",
"reconnecting-websocket": "^4.4.0",
"slugify": "^1.3.6",
"url": "^0.11.0"
},
@ -101,12 +102,13 @@
}
},
"devDependencies": {
"@babel/core": "^7.6.3",
"@babel/core": "^7.8.4",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-transform-runtime": "^7.6.2",
"@babel/preset-env": "^7.6.3",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.6.3",
"@mdi/js": "^4.9.95",
"@wdio/cli": "^5.14.5",
"@wdio/local-runner": "^5.14.5",
"@wdio/mocha-framework": "^5.14.4",
@ -115,37 +117,39 @@
"@wdio/sync": "^5.14.4",
"babel-eslint": "^10.0.3",
"babel-loader": "8.0.6",
"babel-plugin-istanbul": "^5.2.0",
"babel-plugin-istanbul": "^6.0.0",
"babel-plugin-static-fs": "^3.0.0",
"copy-webpack-plugin": "^5.0.4",
"copy-webpack-plugin": "^5.1.1",
"cors": "^2.8.5",
"cross-env": "^6.0.3",
"css-loader": "^3.2.0",
"eslint": "^6.5.1",
"eslint-plugin-react": "^7.16.0",
"cross-env": "^7.0.0",
"css-loader": "^3.4.2",
"eslint": "^6.8.0",
"eslint-plugin-react": "^7.18.3",
"express": "^4.17.1",
"file-loader": "^4.2.0",
"file-loader": "^5.1.0",
"html-webpack-inline-svg-plugin": "^1.3.0",
"html-webpack-plugin": "^3.2.0",
"is-docker": "^2.0.0",
"istanbul": "^0.4.5",
"istanbul-lib-coverage": "^2.0.5",
"mkdirp": "^0.5.1",
"mocha": "^6.2.1",
"node-sass": "^4.12.0",
"react-hot-loader": "^4.12.15",
"sass-loader": "^8.0.0",
"selenium-standalone": "^6.16.0",
"style-loader": "^1.0.0",
"stylelint": "^11.0.0",
"stylelint-config-recommended-scss": "^4.0.0",
"stylelint-scss": "^3.11.1",
"istanbul-lib-coverage": "^3.0.0",
"mkdirp": "^1.0.3",
"mocha": "^7.0.1",
"node-sass": "^4.13.1",
"react-hot-loader": "^4.12.19",
"sass-loader": "^8.0.2",
"selenium-standalone": "^6.17.0",
"style-loader": "^1.1.3",
"stylelint": "^13.2.0",
"stylelint-config-recommended-scss": "^4.2.0",
"stylelint-scss": "^3.14.2",
"svg-inline-loader": "^0.8.2",
"transform-loader": "^0.2.4",
"uuid": "^3.3.3",
"webdriverio": "^5.14.5",
"webpack": "^4.41.0",
"webpack-bundle-analyzer": "^3.5.2",
"uuid": "^3.4.0",
"webdriverio": "^5.18.7",
"webpack": "^4.41.6",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-cleanup-plugin": "^0.5.1",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.2"
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}

View file

@ -226,7 +226,8 @@ export default class App extends React.Component {
open: false,
shortcuts: false,
export: false,
survey: localStorage.hasOwnProperty('survey') ? false : true,
// TODO: Disabled for now, this should be opened on the Nth visit to the editor
survey: false,
debug: false,
},
mapboxGlDebugOptions: {

View file

@ -182,7 +182,7 @@ export default class Toolbar extends React.Component {
target="_blank"
className="maputnik-toolbar-logo"
>
<img src={logoImage} alt="Maputnik" />
<span dangerouslySetInnerHTML={{__html: logoImage}} />
<h1>
<span className="maputnik-toolbar-name">{pkgJson.name}</span>
<span className="maputnik-toolbar-version">v{pkgJson.version}</span>

View file

@ -3,11 +3,15 @@ import PropTypes from 'prop-types'
class CheckboxInput extends React.Component {
static propTypes = {
value: PropTypes.bool.isRequired,
value: PropTypes.bool,
style: PropTypes.object,
onChange: PropTypes.func,
}
static defaultProps = {
value: false,
}
render() {
return <label className="maputnik-checkbox-wrapper">
<input

View file

@ -158,7 +158,7 @@ export default class OpenLayersMap extends React.Component {
/>
</div>
<div className="maputnik-ol-zoom">
Zoom level: {this.state.zoom}
Zoom: {this.state.zoom}
</div>
{this.props.debugToolbox &&
<div className="maputnik-ol-debug">

View file

@ -80,7 +80,7 @@ class ExportModal extends React.Component {
Download a JSON style to your computer.
</p>
<p>
<div>
<InputBlock
label={fieldSpecAdditional.maputnik.mapbox_access_token.label}
fieldSpec={fieldSpecAdditional.maputnik.mapbox_access_token}
@ -108,7 +108,7 @@ class ExportModal extends React.Component {
onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
/>
</InputBlock>
</p>
</div>
<Button onClick={this.downloadStyle.bind(this)}>
<MdFileDownload />

View file

@ -26,7 +26,7 @@ class SurveyModal extends React.Component {
title="Maputnik Survey"
>
<div className="maputnik-modal-survey">
<img className="maputnik-modal-survey__logo" src={logoImage} alt="" width="128" />
<div className="maputnik-modal-survey__logo" dangerouslySetInnerHTML={{__html: logoImage}} />
<h1>You + Maputnik = Maputnik better for you</h1>
<p className="maputnik-modal-survey__description">We dont track you, so we dont know how you use Maputnik. Help us make Maputnik better for you by completing a 7minute survey carried out by our contributing designer.</p>
<Button onClick={this.onClick} className="maputnik-big-button maputnik-white-button maputnik-wide-button">Take the Maputnik Survey</Button>

View file

@ -12,3 +12,6 @@ ReactDOM.render(
</IconContext.Provider>,
document.querySelector("#app")
);
// Hide the loader.
document.querySelector(".loading").style.display = "none";

View file

@ -3,6 +3,10 @@ export default class ZoomControl {
this._map = map;
this._container = document.createElement('div');
this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group mapboxgl-ctrl-zoom';
this._container.innerHTML = `
Zoom: <span></span>
`;
this._textEl = this._container.querySelector("span");
this.addEventListeners();
@ -10,7 +14,7 @@ export default class ZoomControl {
}
updateZoomLevel() {
this._container.innerHTML = `Zoom level: ${this._map.getZoom().toFixed(2)}`;
this._textEl.innerHTML = this._map.getZoom().toFixed(2);
}
addEventListeners (){

View file

@ -32,7 +32,6 @@
.mapboxgl-popup-content {
background-color: rgb(28, 31, 36);
border-radius: 0px;
box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 5px 0px;
padding: 0px;
}
@ -57,20 +56,29 @@
border-color: rgb(28, 31, 36);
}
.mapboxgl-ctrl-group > button:hover {
.mapboxgl-ctrl button:not(:disabled):hover {
background-color: rgb(86, 83, 83);
}
.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
.mapboxgl-ctrl-zoom-in {
border-radius: 4px 4px 0 0;
}
.mapboxgl-ctrl-compass {
border-radius: 0 0 4px 4px;
}
.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23a4a4a4%3B%27%20d%3D%27M%2010%206%20C%209.446%206%209%206.4459904%209%207%20L%209%209%20L%207%209%20C%206.446%209%206%209.446%206%2010%20C%206%2010.554%206.446%2011%207%2011%20L%209%2011%20L%209%2013%20C%209%2013.55401%209.446%2014%2010%2014%20C%2010.554%2014%2011%2013.55401%2011%2013%20L%2011%2011%20L%2013%2011%20C%2013.554%2011%2014%2010.554%2014%2010%20C%2014%209.446%2013.554%209%2013%209%20L%2011%209%20L%2011%207%20C%2011%206.4459904%2010.554%206%2010%206%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A")
}
.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23a4a4a4%3B%27%20d%3D%27m%207%2C9%20c%20-0.554%2C0%20-1%2C0.446%20-1%2C1%200%2C0.554%200.446%2C1%201%2C1%20l%206%2C0%20c%200.554%2C0%201%2C-0.446%201%2C-1%200%2C-0.554%20-0.446%2C-1%20-1%2C-1%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A")
}
.mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > .mapboxgl-ctrl-compass-arrow {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%0A%09%3Cpolygon%20fill%3D%27%23a4a4a4%27%20points%3D%276%2C9%2010%2C1%2014%2C9%27%2F%3E%0A%09%3Cpolygon%20fill%3D%27%23f0f0f0%27%20points%3D%276%2C11%2010%2C19%2014%2C11%20%27%2F%3E%0A%3C%2Fsvg%3E")
.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%0A%09%3Cpolygon%20fill%3D%27%23a4a4a4%27%20points%3D%276%2C9%2010%2C1%2014%2C9%27%2F%3E%0A%09%3Cpolygon%20fill%3D%27%23545454%27%20points%3D%276%2C11%2010%2C19%2014%2C11%20%27%2F%3E%0A%3C%2Fsvg%3E");
background-size: 18px;
}
.mapboxgl-ctrl-inspect {

View file

@ -280,6 +280,7 @@
display: block;
margin: 0 auto;
height: 128px;
width: 128px;
}
.maputnik-modal-survey__description {

View file

@ -30,7 +30,7 @@
line-height: 26px;
}
img {
svg {
width: 30px;
padding-right: $margin-2;
vertical-align: top;

View file

@ -9,63 +9,32 @@
html {
background-color: rgb(28, 31, 36);
}
#loader,
#loader:before,
#loader:after {
border-radius: 50%;
width: 2.5em;
height: 2.5em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: pulseload 1.8s infinite ease-in-out;
animation: pulseload 1.8s infinite ease-in-out;
}
#loader {
color: #ffffff;
font-size: 10px;
margin: 80px auto;
position: relative;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
#loader:before,
#loader:after {
content: '';
.loading {
text-align: center;
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#loader:before {
left: -3.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
.loading__logo svg {
width: 200px;
height: 200px;
}
#loader:after {
left: 3.5em;
}
@-webkit-keyframes pulseload {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
@keyframes pulseload {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
.loading__text {
font-family: sans-serif;
color: white;
font-size: 1.2em;
padding-bottom: 2em;
}
</style>
</head>
<body>
@ -150,8 +119,13 @@
</defs>
</svg>
<div id="app">
<div id="loader">Loading...</div>
<div id="app"></div>
<div class="loading">
<div class="loading__logo">
<!-- replaced by 'html-webpack-inline-svg-plugin' -->
<img inline src="node_modules/maputnik-design/logos/logo-loading.svg" />
</div>
<div class="loading__text">Loading&hellip;</div>
</div>
</body>
</html>

View file

@ -6,8 +6,10 @@ var helper = require("../helper");
function closeModal(wdKey) {
const selector = wd.$(wdKey);
browser.waitUntil(function() {
const elem = $(wdKey);
const elem = $(selector);
return elem.isDisplayedInViewport();
});
@ -15,8 +17,9 @@ function closeModal(wdKey) {
closeBtnSelector.click();
browser.waitUntil(function() {
const elem = $(wdKey);
return !elem.isDisplayed();
return browser.execute((selector) => {
return !document.querySelector(selector);
}, selector);
});
}