Merge pull request #617 from orangemug/fix/map-controls-and-improve-zoom-styling

Improved map control zoom styling
2025-01-29 00:40:23 +01:00 · 2020-02-22 18:41:05 +00:00 · 2020-02-22 18:41:05 +00:00 · 449d8e7665
commit 449d8e7665
parent 5be7e0c7ec 874c6460f6
11 changed files with 58 additions and 13 deletions
--- a/config/webpack.rules.js
+++ b/config/webpack.rules.js
@ -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: [
--- a/package-lock.json
+++ b/package-lock.json
@ -1144,6 +1144,12 @@
      "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
      "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q=="
    },
+    "@mdi/js": {
+      "version": "4.9.95",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-4.9.95.tgz",
+      "integrity": "sha512-6zKTCqZUCuDWJThdRcjdFTqp2BXfYwXI1UlYa68A1/kmCcy1ijpbpRbrJcUdZ+9WojencCh1DOGFqhj/x8I/eQ==",
+      "dev": true
+    },
    "@nodelib/fs.scandir": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
@ -11100,6 +11106,12 @@
      "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
      "dev": true
    },
+    "simple-html-tokenizer": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz",
+      "integrity": "sha1-BcLuxXn//+FFoDCsJs/qYbmA+r4=",
+      "dev": true
+    },
    "simple-swizzle": {
      "version": "0.2.2",
      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
@ -12147,6 +12159,17 @@
        "has-flag": "^3.0.0"
      }
    },
+    "svg-inline-loader": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/svg-inline-loader/-/svg-inline-loader-0.8.2.tgz",
+      "integrity": "sha512-kbrcEh5n5JkypaSC152eGfGcnT4lkR0eSfvefaUJkLqgGjRQJyKDvvEE/CCv5aTSdfXuc+N98w16iAojhShI3g==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "object-assign": "^4.0.1",
+        "simple-html-tokenizer": "^0.1.1"
+      }
+    },
    "svg-tags": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -108,6 +108,7 @@
    "@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",
@ -141,6 +142,7 @@
    "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.4.0",
    "webdriverio": "^5.18.7",
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@ -225,7 +225,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: {
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@ -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>
--- a/src/components/map/OpenLayersMap.jsx
+++ b/src/components/map/OpenLayersMap.jsx
@ -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">
--- a/src/components/modals/SurveyModal.jsx
+++ b/src/components/modals/SurveyModal.jsx
@ -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 don’t track you, so we don’t know how you use Maputnik. Help us make Maputnik better for you by completing a 7–minute 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>
--- a/src/libs/zoomcontrol.js
+++ b/src/libs/zoomcontrol.js
@ -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 (){
--- a/src/mapboxgl.css
+++ b/src/mapboxgl.css
@ -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 {
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@ -280,6 +280,7 @@
  display: block;
  margin: 0 auto;
  height: 128px;
+  width: 128px;
 }

 .maputnik-modal-survey__description {
--- a/src/styles/_toolbar.scss
+++ b/src/styles/_toolbar.scss
@ -30,7 +30,7 @@
    line-height: 26px;
  }

-  img {
+  svg {
    width: 30px;
    padding-right: $margin-2;
    vertical-align: top;