feat: display importers in a dialog instead of direclty in the form

The goal is to keep the form smaller, specifically to keep the submit button visible as much as possible.
umap-project · Dec 2, 2024 · 6264782 · 6264782
1 parent 88ee836
commit 6264782
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 19 deletions.
diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css
@@ -157,6 +157,9 @@ dt {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
 }
+.grid-container.by4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+}
 .grid-container > * {
     text-align: center;
 }

diff --git a/umap/static/umap/css/form.css b/umap/static/umap/css/form.css
@@ -602,3 +602,6 @@ input[type=hidden].blur + [type="button"] {
 input.highlightable:not(:placeholder-shown) {
     border: 1px solid var(--color-brightCyan);
 }
+.umap-upload [type=url] {
+    margin-bottom: 0;
+}
diff --git a/umap/static/umap/css/icon.css b/umap/static/umap/css/icon.css
@@ -110,6 +110,9 @@ html[dir="rtl"] .icon {
 .icon-list {
     background-position: var(--tile) calc(var(--tile) * 4);
 }
+.icon-magic {
+    background-position: calc(var(--tile) * 7) 0;
+}
 .icon-marker {
     background-position: calc(var(--tile) * 3) calc(var(--tile) * 5);
 }

diff --git a/umap/static/umap/js/modules/importer.js b/umap/static/umap/js/modules/importer.js
@@ -11,13 +11,9 @@ const TEMPLATE = `
     <fieldset class="formbox">
       <legend class="counter">${translate('Choose data')}</legend>
       <input type="file" multiple autofocus onchange />
-      <input class="highlightable" type="url" placeholder="${translate('Provide an URL here')}" onchange />
       <textarea onchange placeholder="${translate('Paste your data here')}"></textarea>
-      <div class="importers" hidden>
-        <h4>${translate('Import helpers:')}</h4>
-        <ul class="grid-container">
-        </ul>
-      </div>
+      <input class="highlightable" type="url" placeholder="${translate('Provide an URL here')}" onchange />
+      <button class="flat importers" hidden data-ref="importersButton"><i class="icon icon-16 icon-magic"></i>${translate('Import helpers')}</button>
     </fieldset>
     <fieldset class="formbox">
       <legend class="counter" data-help="importFormats">${translate(
@@ -49,14 +45,22 @@ const TEMPLATE = `
   </div>
     `
 
+const GRID_TEMPLATE = `
+  <div>
+    <h3><i class="icon icon-16 icon-magic"></i>${translate('Import helpers')}</h3>
+    <p>${translate('Import helpers will fill the URL field for you.')}</p>
+    <ul class="grid-container by4" data-ref="grid"></ul>
+  </div>
+`
+
 export default class Importer extends Utils.WithTemplate {
   constructor(umap) {
     super()
     this._umap = umap
     this.TYPES = ['geojson', 'csv', 'gpx', 'kml', 'osm', 'georss', 'umap']
     this.IMPORTERS = []
     this.loadImporters()
-    this.dialog = new Dialog()
+    this.dialog = new Dialog({ className: 'importers dark' })
   }
 
   loadImporters() {
@@ -149,20 +153,26 @@ export default class Importer extends Utils.WithTemplate {
     )
   }
 
+  showImporters() {
+    if (!this.IMPORTERS.length) return
+    const [element, { grid }] = Utils.loadTemplateWithRefs(GRID_TEMPLATE)
+    for (const plugin of this.IMPORTERS.sort((a, b) => (a.id > b.id ? 1 : -1))) {
+      const button = Utils.loadTemplate(
+        `<li><button type="button" class="${plugin.id}">${plugin.name}</button></li>`
+      )
+      button.addEventListener('click', () => plugin.open(this))
+      grid.appendChild(button)
+    }
+    this.dialog.open({ template: element, cancel: false, accept: false })
+  }
+
   build() {
-    this.container = DomUtil.create('div', 'umap-upload')
-    this.container.innerHTML = TEMPLATE
+    this.container = this.loadTemplate(TEMPLATE)
     if (this.IMPORTERS.length) {
-      const parent = this.container.querySelector('.importers ul')
-      for (const plugin of this.IMPORTERS.sort((a, b) => (a.id > b.id ? 1 : -1))) {
-        L.DomUtil.createButton(
-          plugin.id,
-          DomUtil.element({ tagName: 'li', parent }),
-          plugin.name,
-          () => plugin.open(this)
-        )
-      }
-      this.qs('.importers').toggleAttribute('hidden', false)
+      // TODO use this.elements instead of this.qs
+      const button = this.qs('[data-ref=importersButton]')
+      button.addEventListener('click', () => this.showImporters())
+      button.toggleAttribute('hidden', false)
     }
     for (const type of this.TYPES) {
       DomUtil.element({