diff --git a/.travis.yml b/.travis.yml index 62a95590..6e36ca8e 100644 --- a/.travis.yml +++ b/.travis.yml @@ -18,4 +18,5 @@ script: - mkdir public - node --stack_size=100000 $(which npm) run build - npm run lint + - npm run lint-styles - npm run test diff --git a/package.json b/package.json index 98b776eb..974e3854 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,8 @@ "test": "karma start --single-run", "test-watch": "karma start", "start": "webpack-dev-server --progress --profile --colors --watch-poll", - "lint": "eslint --ext js --ext jsx {src,test}" + "lint": "eslint --ext js --ext jsx {src,test}", + "lint-styles": "stylelint 'src/styles/*.scss'" }, "repository": { "type": "git", @@ -27,12 +28,11 @@ "lodash.clonedeep": "^4.5.0", "lodash.isequal": "^4.4.0", "lodash.throttle": "^4.1.1", - "lodash.topairs": "^4.3.0", - "mapbox-gl": "^0.29.0", - "mapbox-gl-inspect": "^1.0.9", + "mapbox-gl": "^0.31.0", + "mapbox-gl-inspect": "^1.1.1", "mapbox-gl-style-spec": "^8.11.0", "mousetrap": "^1.6.0", - "ol-mapbox-style": "0.0.14", + "ol-mapbox-style": "1.0.1", "openlayers": "^3.19.1", "randomcolor": "^0.4.4", "react": "^15.4.0", @@ -64,6 +64,9 @@ "jshintConfig": { "esversion": 6 }, + "stylelint": { + "extends": "stylelint-config-standard" + }, "eslintConfig": { "plugins": [ "react" @@ -88,18 +91,18 @@ } }, "devDependencies": { - "babel-core": "6.14.0", - "babel-eslint": "^6.1.2", - "babel-loader": "6.2.4", + "babel-core": "6.21.0", + "babel-eslint": "^7.1.1", + "babel-loader": "6.2.10", "babel-plugin-transform-class-properties": "^6.11.5", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-flow-strip-types": "^6.21.0", "babel-plugin-transform-object-rest-spread": "^6.8.0", "babel-plugin-transform-runtime": "^6.15.0", - "babel-preset-es2015": "6.14.0", - "babel-preset-react": "6.11.1", + "babel-preset-es2015": "6.18.0", + "babel-preset-react": "6.16.0", "babel-runtime": "^6.11.6", - "css-loader": "0.25.0", + "css-loader": "0.26.1", "eslint": "^3.5.0", "eslint-plugin-react": "^6.2.0", "extract-text-webpack-plugin": "^1.0.1", @@ -110,18 +113,19 @@ "karma-chrome-launcher": "^2.0.0", "karma-firefox-launcher": "^1.0.0", "karma-mocha": "^1.3.0", - "karma-webpack": "^1.8.0", + "karma-webpack": "^2.0.1", "mocha": "^3.1.2", "mocha-loader": "^1.0.0", - "node-sass": "^3.9.2", + "node-sass": "^4.2.0", "react-hot-loader": "^3.0.0-beta.6", "sass-loader": "^4.0.1", "style-loader": "0.13.1", + "stylelint": "^7.7.1", + "stylelint-config-standard": "^15.0.1", "transform-loader": "^0.2.3", "url-loader": "0.5.7", - "webpack": "1.13.2", - "webpack-cleanup-plugin": "^0.3.0", - "webpack-dev-server": "1.15.1", - "webworkify-webpack": "^1.1.3" + "webpack": "1.14.0", + "webpack-cleanup-plugin": "^0.4.1", + "webpack-dev-server": "1.16.2" } } diff --git a/src/components/modals/AddModal.jsx b/src/components/modals/AddModal.jsx index eb2dd7b3..d08a539c 100644 --- a/src/components/modals/AddModal.jsx +++ b/src/components/modals/AddModal.jsx @@ -31,7 +31,7 @@ class AddModal extends React.Component { if(this.state.type !== 'background') { layer.source = this.state.source - if(this.state.type !== 'raster') { + if(this.state.type !== 'raster' && this.state['source-layer']) { layer['source-layer'] = this.state['source-layer'] } } diff --git a/src/config/empty-style.json b/src/config/empty-style.json new file mode 100644 index 00000000..5179ccd3 --- /dev/null +++ b/src/config/empty-style.json @@ -0,0 +1,15 @@ +{ + "version": 8, + "name": "Empty Style", + "metadata": { + "mapbox:autocomposite": false, + "mapbox:type": "template", + "maputnik:renderer": "mbgljs", + "openmaptiles:version": "3.x" + }, + "sources": { }, + "glyphs": "https://demo.tileserver.org/fonts/{fontstack}/{range}.pbf", + "sprites": "https://demo.tileserver.org/fonts/{fontstack}/{range}.pbf", + "layers": [], + "id": "empty-style" +} diff --git a/src/config/styles.json b/src/config/styles.json index 6078b54d..736c7cc0 100644 --- a/src/config/styles.json +++ b/src/config/styles.json @@ -30,9 +30,9 @@ "thumbnail": "https://cdn.rawgit.com/lukasmartinelli/osm-liberty/gh-pages/thumbnail.png" }, { - "id": "fiord-color", - "title": "Fiord Color", - "url": "https://rawgit.com/openmaptiles/fiord-color-gl-style/gh-pages/style-cdn.json", - "thumbnail": "https://camo.githubusercontent.com/d884dbd7b8c531c58788eac3857dc4ebf79b7729/68747470733a2f2f6170692e6d6170626f782e636f6d2f7374796c65732f76312f6f70656e6d617074696c65732f6369776775693378353030317732706e7668633063327767302f7374617469632f382e3534303538372c34372e3337303535352c31342e30382c302e30302c302e30302f363030783430303f6163636573735f746f6b656e3d706b2e65794a31496a6f696233426c626d3168634852706247567a4969776959534936496d4e70646e593365544a785a7a41774d474d796233427064574a6d616a63784e7a636966512e685031427863786c644968616b4d6350534a4c513151" + "id": "empty-style", + "title": "Empty Style", + "url": "https://rawgit.com/maputnik/editor/master/src/config/empty-style.json", + "thumbnail": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAQAAAAHDYbIAAAAEUlEQVR42mP8/58BDhiJ4wAA974H/U5Xe1oAAAAASUVORK5CYII=" } ] diff --git a/src/config/tilesets.json b/src/config/tilesets.json index 1096f750..e4cd4b95 100644 --- a/src/config/tilesets.json +++ b/src/config/tilesets.json @@ -4,6 +4,11 @@ "url": "mapbox://mapbox.mapbox-streets-v7", "title": "Mapbox Streets" }, + "openmaptiles": { + "type": "vector", + "url": "https://free.tilehosting.com/data/v3.json?key=25ItXg7aI5wurYDtttD", + "title": "OpenMapTiles" + }, "tilezen": { "type": "vector", "tiles": [ @@ -12,15 +17,5 @@ "minZoom": 0, "maxZoom": 15, "title": "Mapzen Vector Tile Service" - }, - "openmaptiles": { - "type": "vector", - "url": "https://free.tilehosting.com/data/v3.json?key=25ItXg7aI5wurYDtttD", - "title": "OpenMapTiles CDN" - }, - "naturalearth-airports": { - "type": "geojson", - "data": "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson", - "title": "NaturalEarth Airports GeoJSON" } } diff --git a/src/styles/_base.scss b/src/styles/_base.scss index ce81d9f1..0261d8e3 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -18,7 +18,9 @@ html { box-sizing: border-box; } -*, *:before, *:after { +*, +*::before, +*::after { box-sizing: inherit; } @@ -53,7 +55,8 @@ h4 { margin-bottom: $margin-3; } -input:focus, select:focus { +input:focus, +select:focus { color: $color-white !important; outline: #8e8e8e auto 1px !important; } @@ -63,7 +66,7 @@ label:hover { } .clearfix { - &:after { + &::after { content: ""; display: table; clear: both; diff --git a/src/styles/_components.scss b/src/styles/_components.scss index 1250163d..67447e40 100644 --- a/src/styles/_components.scss +++ b/src/styles/_components.scss @@ -2,9 +2,9 @@ .maputnik-map { position: fixed !important; top: 40px; - right: 0px; - bottom: 0px; - height: 100%; + right: 0; + bottom: 0; + height: calc(100% - $toolbar-height); width: 75%; } @@ -14,7 +14,7 @@ cursor: help; } - &-wrapper{ + &-wrapper { display: inline-block; box-sizing: border-box; font-size: $font-size-6; @@ -32,7 +32,7 @@ font-size: 10px; position: absolute; top: 20px; - left: 0px; + left: 0; width: 120px; z-index: 3; } @@ -68,11 +68,15 @@ .maputnik-icon-button { background-color: transparent; + &:hover { background-color: transparent; - label, svg { + + label, + svg { cursor: pointer; } + svg { fill: $color-white; } @@ -102,6 +106,7 @@ display: inline-block; width: 43%; } + .maputnik-input-block-action { vertical-align: top; display: inline-block; @@ -111,15 +116,14 @@ // SPACE HELPER .maputnik-space { - flex-grow: 1; + @include vendor-prefix(flex-grow, 1); } // MESSAGE PANEL .maputnik-message-panel { padding: $margin-2; - &-error { + &-error { color: $color-red; } } - diff --git a/src/styles/_filtereditor.scss b/src/styles/_filtereditor.scss index 9a5c572e..411ff68e 100644 --- a/src/styles/_filtereditor.scss +++ b/src/styles/_filtereditor.scss @@ -2,6 +2,10 @@ padding: $margin-3; } +.maputnik-filter-editor { + color: $color-lowgray; +} + .maputnik-filter-editor-property { display: inline-block; width: '22%'; @@ -54,6 +58,7 @@ margin-top: $margin-2; margin-bottom: $margin-2; } + .maputnik-filter-editor-block-action { display: inline-block; width: 6%; @@ -73,6 +78,7 @@ .maputnik-filter-editor-operator { display: inline-block; width: 17%; + .maputnik-select { width: 100%; } @@ -82,7 +88,8 @@ display: inline-block; width: 54%; - .maputnik-string, .maputnik-number { + .maputnik-string, + .maputnik-number { width: 100%; } } diff --git a/src/styles/_input.scss b/src/styles/_input.scss index 55080d0a..49757e96 100644 --- a/src/styles/_input.scss +++ b/src/styles/_input.scss @@ -24,20 +24,15 @@ //COLOR PICKER .maputnik-color { @extend .maputnik-input; + height: 26px; } + .maputnik-color-wrapper { position: relative; display: inline; } -.maputnik-color-picker-offset { - -} -.maputnik-color-picker-overlay { - -} - // ARRAY .maputnik-array { @@ -49,6 +44,7 @@ // SELECT .maputnik-select { @extend .maputnik-input; + height: 24px; } @@ -76,6 +72,7 @@ &-wrapper { @extend .maputnik-input; + padding-left: 0; padding-right: 0; position: relative; @@ -116,7 +113,7 @@ overflow: auto; max-height: 50%; background: $color-gray; - z-index: 3, + z-index: 3; } &-menu-item { diff --git a/src/styles/_layer.scss b/src/styles/_layer.scss index b0492e1b..be4812d7 100644 --- a/src/styles/_layer.scss +++ b/src/styles/_layer.scss @@ -1,13 +1,9 @@ // LAYER LIST -.maputnik-add-layer { -} - .maputnik-layer-list { - &-header{ + &-header { padding: $margin-2; - display: flex; - display: -ms-flexbox; - @include vendor-prefix(flex-direction, row) + + @include flex-row; > * { vertical-align: middle; @@ -32,7 +28,7 @@ font-weight: 400; color: $color-lowgray; font-size: $font-size-6; - border-width: 0px 0px 1px; + border-width: 0 0 1px; border-style: solid; border-color: lighten($color-black, 0.1); user-select: none; @@ -43,24 +39,24 @@ padding: 5px 10px; line-height: 1.3; max-height: 50px; - display: flex; - display: -ms-flexbox; - @include vendor-prefix(flex-direction, row); - opacity: 1; - + opacity: 1; -webkit-transition: opacity 600ms, visibility 600ms; transition: opacity 600ms, visibility 600ms; + + @include flex-row; } &-icon-action svg { fill: $color-black; } - .maputnik-layer-list-item:hover, .maputnik-layer-list-item-selected { + .maputnik-layer-list-item:hover, + .maputnik-layer-list-item-selected { background-color: lighten($color-black, 2); .maputnik-layer-list-icon-action svg { fill: darken($color-lowgray, 0.5); + &:hover { fill: $color-white; } @@ -73,9 +69,9 @@ &-item-collapsed { position: absolute; - max-height: 0px; + max-height: 0; overflow: hidden; - padding: 0px; + padding: 0; opacity: 0; visibility: hidden; } @@ -91,10 +87,6 @@ text-overflow: ellipsis; } - &-group { - //border-bottom: 2px solid $color-gray; - } - &-group-header { font-size: $font-size-6; color: $color-lowgray; @@ -102,9 +94,8 @@ cursor: pointer; user-select: none; padding: $margin-2; - display: flex; - display: -ms-flexbox; - @include vendor-prefix(flex-direction, row) + + @include flex-row; svg { width: 14px; @@ -121,7 +112,6 @@ } } - // FILTER EDITOR .maputnik-layer-editor-group { font-weight: bold; @@ -131,11 +121,10 @@ cursor: pointer; user-select: none; padding: $margin-2; - display: flex; - display: -ms-flexbox; - @include vendor-prefix(flex-direction, row) line-height: 20px; + @include flex-row; + &:hover { background-color: $color-gray; } diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss index 9db9a1e9..2a886093 100644 --- a/src/styles/_layout.scss +++ b/src/styles/_layout.scss @@ -2,9 +2,9 @@ .maputnik-scroll-container { overflow-x: visible; overflow-y: scroll; - bottom: 0px; - left: 0px; - right: 0px; + bottom: 0; + left: 0; + right: 0; top: 1px; position: absolute; } @@ -16,29 +16,31 @@ &-list { position: fixed; - bottom: 0px; - height: 100%; + bottom: 0; + height: calc(100% - $toolbar-height); top: 40px; - left: 0px; + left: 0; z-index: 3; width: 200px; overflow: hidden; background-color: $color-black; } + &-drawer { position: fixed; - bottom: 0px; - height: 100%; + bottom: 0; + height: calc(100% - $toolbar-height); top: 40px; left: 200px; z-index: 1; width: 350px; background-color: $color-black; } + &-bottom { position: fixed; height: 50px; - bottom: 0px; + bottom: 0; left: 550px; z-index: 1; width: 100%; diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index bfd57631..4ea68322 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -5,3 +5,10 @@ -o-#{$name}: #{$argument}; #{$name}: #{$argument}; } + +@mixin flex-row { + display: flex; + display: -ms-flexbox; + + @include vendor-prefix(flex-direction, row); +} diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index cf436e3a..1cd84143 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -3,20 +3,22 @@ min-width: 350px; max-width: 600px; background-color: $color-black; - box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3); z-index: 3; } + .maputnik-modal-section { padding-top: $margin-3; padding-bottom: $margin-3; } + .maputnik-modal-header { background-color: $color-gray; - display: flex; - display: -ms-flexbox; - @include vendor-prefix(flex-direction, row) padding: $margin-3; + + @include flex-row; } + .maputnik-modal-header-title { font-size: $font-size-5; margin: 0; @@ -25,6 +27,7 @@ .maputnik-modal-header-toggle { cursor: pointer; } + .maputnik-modal-content { padding: $margin-3; } @@ -35,33 +38,33 @@ //OVERLAY .maputnik-overlay-viewport { - position: fixed; - top: 0px; - right: 0px; - bottom: 0px; - left: 0px; - z-index: 2; - opacity: 0.875; - background-color: rgb(28, 31, 36); + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 2; + opacity: 0.875; + background-color: rgb(28, 31, 36); } .maputnik-overlay { - top: 0px; - right: 0px; - bottom: 0px; - left: 0px; - position: fixed; - display: -ms-flexbox; - display: flex; - @include vendor-prefix(flex-direction, column) - align-items: center; - justify-content: center; + top: 0; + right: 0; + bottom: 0; + left: 0; + position: fixed; + align-items: center; + justify-content: center; + + @include flex-row; } //OPEN MODAL .maputnik-upload-button { @extend .maputnik-big-button; } + .maputnik-public-style { vertical-align: top; margin-top: 10px; @@ -72,6 +75,7 @@ font-size: $font-size-2; color: $color-lowgray; } + .maputnik-public-style-button { background-color: $color-gray; padding: $margin-3; @@ -81,50 +85,50 @@ background-color: $color-midgray; } } + .maputnik-public-style-header { - display: flex; - display: -ms-flexbox; - @include vendor-prefix(flex-direction, row) + @include flex-row; } .maputnik-public-style-thumbnail { display: block; margin-top: $margin-2; - max-width: 100%; + width: 100%; } -.maputnik-add-layer{ +.maputnik-add-layer { @extend .clearfix; } + //ADD MODAL .maputnik-add-layer-button { + @extend .maputnik-big-button; + margin-right: $margin-3; float: right; display: inline-block; margin-top: 3; margin-bottom: $margin-3; text-align: right; - @extend .maputnik-big-button; } //SOURCE MODAL .maputnik-public-source { - vertical-align: top; - margin-top: 1.5%; - margin-right: 1.5%; - background-color: $color-gray; - width: 48.5%; + vertical-align: top; + margin-top: 1.5%; + margin-right: 1.5%; + background-color: $color-gray; + width: 48.5%; display: inline-block; } .maputnik-public-source-select { padding: $margin-3; - font-size: $font-size-5; - color: $color-lowgray; - display: flex; - display: -ms-flexbox; - @include vendor-prefix(flex-direction, row) + font-size: $font-size-5; + color: $color-lowgray; background-color: transparent; + + @include flex-row; } .maputnik-public-source-name { @@ -138,14 +142,15 @@ .maputnik-active-source-type-editor { min-width: 500px; } + .maputnik-active-source-type-editor-header { background-color: $color-gray; color: $color-lowgray; padding: $margin-2; - display: flex; - display: -ms-flexbox; - @include vendor-prefix(flex-direction, row) + + @include flex-row; } + .maputnik-active-source-type-editor-header-id { font-weight: 700; line-height: 2; @@ -153,10 +158,10 @@ } .maputnik-active-source-type-editor-content { - border-color: $color-gray; - border-width: 2px; - border-style: solid; - padding: $margin-2; + border-color: $color-gray; + border-width: 2px; + border-style: solid; + padding: $margin-2; } .maputnik-add-source { @@ -165,6 +170,7 @@ .maputnik-add-source-button { @extend .maputnik-big-button; + display: inline-block; margin-top: 0; margin-right: $margin-3; diff --git a/src/styles/_popup.scss b/src/styles/_popup.scss index 87738303..75a4dcd3 100644 --- a/src/styles/_popup.scss +++ b/src/styles/_popup.scss @@ -1,12 +1,11 @@ .maputnik-popup-layer { - display: inline-block; + display: block; color: $color-lowgray; user-select: none; - padding-left: 0; - padding-right: $margin-1; line-height: 1.2; - padding-left: $margin-2; - padding-right: $margin-2; + padding: $margin-2; + padding-top: $margin-1; + padding-bottom: $margin-1; } .maputnik-popup-layer-id { @@ -16,9 +15,6 @@ color: $color-white; } -.maputnik-property-layer-popup { -} - .maputnik-feature-property-popup { .maputnik-input-block { margin: 0; diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index 6e3e66ce..397b0a37 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -1,3 +1,4 @@ +/* stylelint-disable */ html { background-color: rgb(28, 31, 36); } diff --git a/src/styles/_scrollbar.scss b/src/styles/_scrollbar.scss index 7f9f9d6c..c3058791 100644 --- a/src/styles/_scrollbar.scss +++ b/src/styles/_scrollbar.scss @@ -1,12 +1,12 @@ ::-webkit-scrollbar { - background-color: #26282e; - width: 5px; + background-color: #26282e; + width: 5px; } ::-webkit-scrollbar-thumb { - border-radius: 6px; - -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); - background-color: #666; - padding-left: 2px; - padding-right: 2px; + border-radius: 6px; + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + background-color: #666; + padding-left: 2px; + padding-right: 2px; } diff --git a/src/styles/_toolbar.scss b/src/styles/_toolbar.scss index 870699eb..9b4c2080 100644 --- a/src/styles/_toolbar.scss +++ b/src/styles/_toolbar.scss @@ -17,7 +17,7 @@ height: $toolbar-height; h1 { - display: inline; + display: inline; } img { @@ -37,6 +37,7 @@ cursor: pointer; color: $color-white; text-decoration: none; + &:hover { background-color: $color-midgray; } diff --git a/src/styles/_zoomproperty.scss b/src/styles/_zoomproperty.scss index 5c36a193..22984961 100644 --- a/src/styles/_zoomproperty.scss +++ b/src/styles/_zoomproperty.scss @@ -2,9 +2,10 @@ .maputnik-make-zoom-function { background-color: transparent; display: inline-block; - padding-bottom: 0px; - padding-top: 0px; + padding-bottom: 0; + padding-top: 0; vertical-align: middle; + @extend .maputnik-icon-button; } @@ -28,6 +29,7 @@ vertical-align: top; width: 16%; margin-right: 3%; + > * { width: 100%; } @@ -36,6 +38,7 @@ .maputnik-zoom-spec-property-stop-value { display: inline-block; width: 81%; + > * { width: 100%; } @@ -43,11 +46,13 @@ .maputnik-delete-stop { @extend .maputnik-icon-button; + vertical-align: top; .maputnik-doc-wrapper { width: auto; } + .maputnik-doc-target { cursor: pointer; } diff --git a/src/styles/index.scss b/src/styles/index.scss index 5be0e7a6..8b7e47ae 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -22,7 +22,6 @@ $toolbar-height: 40px; @import 'mixins'; @import 'reset'; @import 'base'; - @import 'components'; @import 'scrollbar'; @import 'picker'; diff --git a/webpack.production.config.js b/webpack.production.config.js index acedbdcb..218b109b 100644 --- a/webpack.production.config.js +++ b/webpack.production.config.js @@ -17,7 +17,6 @@ module.exports = { "randomcolor", "lodash.clonedeep", "lodash.throttle", - "lodash.topairs", 'color', 'react', "react-dom",