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

2026-01-03 20:10:02 +00:00 · 2020-02-23 13:34:05 +00:00
parent 3b5ba6c59e d1f6bc95db
commit 97a61afc24
21 changed files with 3547 additions and 2350 deletions
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -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: {
--- 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/inputs/CheckboxInput.jsx
+++ b/src/components/inputs/CheckboxInput.jsx
@@ -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
--- 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/ExportModal.jsx
+++ b/src/components/modals/ExportModal.jsx
@@ -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 />
--- 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/index.jsx
+++ b/src/index.jsx
@@ -12,3 +12,6 @@ ReactDOM.render(
  </IconContext.Provider>,
  document.querySelector("#app")
 );
+
+// Hide the loader.
+document.querySelector(".loading").style.display = "none";
--- 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;
--- a/src/template.html
+++ b/src/template.html
@@ -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>