Move modals and rename classes to match file names (#1367)

## Launch Checklist I've created a folder for modals and moved them all inside. I removed the icons which were small files with no real benefit and moved the icons to where they were used. I fixed an issue with the close button position in modal. I've added missing translation to "Links" in debug modal. Before: <img width="610" height="81" alt="image" src="https://github.com/user-attachments/assets/dd7520f6-9634-4ff1-a83d-99ceae7c9144" /> After: <img width="610" height="81" alt="image" src="https://github.com/user-attachments/assets/fe3a2ccf-6c09-42ab-bf6f-dd30d3c68e13" /> - [x] Briefly describe the changes in this PR. - [x] Include before/after visuals or gifs if this PR includes visual changes. - [ ] Add an entry to `CHANGELOG.md` under the `## main` section.
2026-07-14 01:47:27 +00:00 · 2025-09-10 14:37:23 +03:00
parent 3725f83b48
commit 9c85883b8a
36 changed files with 133 additions and 187 deletions
@@ -0,0 +1,83 @@
+import React from 'react'
+import { Trans, WithTranslation, withTranslation } from 'react-i18next';
+
+import Modal from './Modal'
+
+
+type ModalDebugInternalProps = {
+  isOpen: boolean
+  renderer: string
+  onChangeMaplibreGlDebug(key: string, checked: boolean): unknown
+  onChangeOpenlayersDebug(key: string, checked: boolean): unknown
+  onOpenToggle(value: boolean): unknown
+  maplibreGlDebugOptions?: object
+  openlayersDebugOptions?: object
+  mapView: {
+    zoom: number
+    center: {
+      lng: number
+      lat: number
+    }
+  }
+} & WithTranslation;
+
+
+class ModalDebugInternal extends React.Component<ModalDebugInternalProps> {
+  render() {
+    const {t, mapView} = this.props;
+
+    const osmZoom = Math.round(mapView.zoom)+1;
+    const osmLon = +(mapView.center.lng).toFixed(5);
+    const osmLat = +(mapView.center.lat).toFixed(5);
+
+    return <Modal
+      data-wd-key="modal:debug"
+      isOpen={this.props.isOpen}
+      onOpenToggle={this.props.onOpenToggle}
+      title={t('Debug')}
+    >
+      <section className="maputnik-modal-section maputnik-modal-shortcuts">
+        <h1>{t("Options")}</h1>
+        {this.props.renderer === 'mlgljs' &&
+          <ul>
+            {Object.entries(this.props.maplibreGlDebugOptions!).map(([key, val]) => {
+              return <li key={key}>
+                <label>
+                  <input type="checkbox" checked={val} onChange={(e) => this.props.onChangeMaplibreGlDebug(key, e.target.checked)} /> {key}
+                </label>
+              </li>
+            })}
+          </ul>
+        }
+        {this.props.renderer === 'ol' &&
+          <ul>
+            {Object.entries(this.props.openlayersDebugOptions!).map(([key, val]) => {
+              return <li key={key}>
+                <label>
+                  <input type="checkbox" checked={val} onChange={(e) => this.props.onChangeOpenlayersDebug(key, e.target.checked)} /> {key}
+                </label>
+              </li>
+            })}
+          </ul>
+        }
+      </section>
+      <section className="maputnik-modal-section">
+        <h1>{t("Links")}</h1>
+        <p>
+          <Trans t={t}>
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href={`https://www.openstreetmap.org/#map=${osmZoom}/${osmLat}/${osmLon}`}
+            >
+              Open in OSM
+            </a>. Opens the current view on openstreetmap.org
+          </Trans>
+        </p>
+      </section>
+    </Modal>
+  }
+}
+
+const ModalDebug = withTranslation()(ModalDebugInternal);
+export default ModalDebug;