refactor share dialog for better usability

* ordering is now short URL - download - backup - embed ordered by easier use cases for everyone to complex iframe code for web experts * show available formats as buttons instead of hiding them in a dropdown * add explaining labels * change the dark options fieldset to light gray
umap-project · Dec 15, 2023 · 670c56d · 670c56d
1 parent b25bb16
commit 670c56d
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 59 deletions.
diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css
@@ -152,13 +152,15 @@ textarea {
     padding: 7px;
 }
 select {
+    border: 1px solid #222;
     width: 100%;
     height: 28px;
     line-height: 28px;
+    margin-top: 5px;
+}
+.dark select {
     color: #efefef;
-    border: 1px solid #222;
     background-color: #393F3F;
-    margin-top: 5px;
 }
 select[multiple="multiple"] {
     height: auto;
@@ -215,7 +217,8 @@ button.flat,
     font-size: 10px;
     border-radius: 0 2px;
 }
-.content .helptext {
+.content .helptext,
+#umap-ui-container .help-text {
     background-color: #eee;
     color: #000;
 }
@@ -284,28 +287,34 @@ input[type="file"] + .error {
     text-align: left;
     display: block;
     cursor: pointer;
-    background-color: #232729;
+    background-color: #eee;
     height: 30px;
     line-height: 30px;
-    color: #fff;
     margin: 0;
     font-family: fira_sans;
     font-weight: normal;
     font-size: 1.2em;
     padding: 0 5px;
 }
+.dark .fieldset.toggle .legend {
+    background-color: #232729;
+    color: #fff;
+}
 .fieldset.toggle .legend:before {
     background-repeat: no-repeat;
     text-indent: 24px;
     height: 24px;
     width: 24px;
     line-height: 24px;
     display: inline-block;
-    background-image: url('./img/16-white.svg');
+    background-image: url('./img/16.svg');
     vertical-align: bottom;
     content: " ";
     background-position: -144px -76px;
 }
+.dark .fieldset.toggle .legend:before {
+    background-image: url('./img/16-white.svg');
+}
 .fieldset.toggle.on .legend:before {
     background-position: -144px -51px;
 }
@@ -391,6 +400,7 @@ input.switch:checked ~ label:after {
 .umap-multiplechoice.by5 {
     grid-template-columns: 1fr 1fr 1fr;
 }
+.button-bar.by4,
 .umap-multiplechoice.by4 {
     grid-template-columns: 1fr 1fr 1fr 1fr;
 }
@@ -438,7 +448,8 @@ input.switch:checked ~ label:after {
 }
 .umap-field-iconUrl .action-button,
 .inheritable .define,
-.inheritable .undefine {
+.inheritable .undefine,
+.copy-button {
     float: right;
     width: initial;
     min-height: 18px;

diff --git a/umap/static/umap/img/16.svg b/umap/static/umap/img/16.svg
diff --git a/umap/static/umap/img/source/16.svg b/umap/static/umap/img/source/16.svg
diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js
@@ -1080,12 +1080,77 @@ L.U.Map.include({
     const container = L.DomUtil.create('div', 'umap-share')
     const title = L.DomUtil.create('h3', '', container)
     title.textContent = L._('Share, download and embed this map')
+    if (this.options.shortUrl) {
+      L.DomUtil.createButton(
+        'button copy-button',
+        container,
+        L._('copy'),
+        () => navigator.clipboard.writeText(this.options.shortUrl),
+        this
+      )
+      L.DomUtil.add('h4', '', container, L._('Short URL'))
+      const shortUrlLabel = L.DomUtil.create('label', '', container)
+      shortUrlLabel.textContent = L._('Share this link to view the map')
+      const shortUrl = L.DomUtil.create('input', 'umap-short-url', container)
+      shortUrl.type = 'text'
+      shortUrl.value = this.options.shortUrl
+      L.DomUtil.create('hr', '', container)
+    }
+
+    L.DomUtil.add('h4', '', container, L._('Download data'))
+    const downloadLabel = L.DomUtil.create('label', '', container)
+    downloadLabel.textContent = L._('Choose the format of the data to export')
+    const exportCaveat = L.DomUtil.add(
+      'small',
+      'help-text',
+      container,
+      L._('Only visible features will be downloaded.')
+    )
+    console.log(this.EXPORT_TYPES)
+    const typeInput = L.DomUtil.create(
+      'div',
+      `button-bar by${Object.keys(this.EXPORT_TYPES).length}`,
+      container
+    )
+    let option
+    for (const key in this.EXPORT_TYPES) {
+      if (this.EXPORT_TYPES.hasOwnProperty(key)) {
+        L.DomUtil.createButton(
+          'button',
+          typeInput,
+          this.EXPORT_TYPES[key].name || key,
+          () => this.download(key),
+          this
+        )
+      }
+    }
+    L.DomUtil.create('hr', '', container)
+
+    L.DomUtil.add('h4', '', container, L._('Backup data'))
+    const backupLabel = L.DomUtil.create('label', '', container)
+    backupLabel.textContent = L._('Download all data and settings of the map')
+    const downloadUrl = L.Util.template(this.options.urls.map_download, {
+      map_id: this.options.umap_id,
+    })
+    const link = L.DomUtil.createLink(
+      'button',
+      container,
+      L._('Download full backup'),
+      downloadUrl
+    )
+    let name = this.options.name || 'data'
+    name = name.replace(/[^a-z0-9]/gi, '_').toLowerCase()
+    link.setAttribute('download', `${name}.umap`)
+    L.DomUtil.create('hr', '', container)
 
     const embedTitle = L.DomUtil.add('h4', '', container, L._('Embed the map'))
     const iframe = L.DomUtil.create('textarea', 'umap-share-iframe', container)
     const urlTitle = L.DomUtil.add('h4', '', container, L._('Direct link'))
+    const shortUrlLabel = L.DomUtil.create('label', '', container)
+    shortUrlLabel.textContent = L._(
+      'Share this link to open a customized map view'
+    )
     const exportUrl = L.DomUtil.create('input', 'umap-share-url', container)
-    let option
     exportUrl.type = 'text'
     const UIFields = [
       ['dimensions.width', { handler: 'Input', label: L._('width') }],
@@ -1126,54 +1191,12 @@ L.U.Map.include({
     const builder = new L.U.FormBuilder(iframeExporter, UIFields, {
       callback: buildIframeCode,
     })
-    const iframeOptions = L.DomUtil.createFieldset(container, L._('Export options'))
-    iframeOptions.appendChild(builder.build())
-    if (this.options.shortUrl) {
-      L.DomUtil.create('hr', '', container)
-      L.DomUtil.add('h4', '', container, L._('Short URL'))
-      const shortUrl = L.DomUtil.create('input', 'umap-short-url', container)
-      shortUrl.type = 'text'
-      shortUrl.value = this.options.shortUrl
-    }
-    L.DomUtil.create('hr', '', container)
-    L.DomUtil.add('h4', '', container, L._('Backup data'))
-    const downloadUrl = L.Util.template(this.options.urls.map_download, {
-      map_id: this.options.umap_id,
-    })
-    const link = L.DomUtil.createLink(
-      'button',
-      container,
-      L._('Download full data'),
-      downloadUrl
-    )
-    let name = this.options.name || 'data'
-    name = name.replace(/[^a-z0-9]/gi, '_').toLowerCase()
-    link.setAttribute('download', `${name}.umap`)
-    L.DomUtil.create('hr', '', container)
-    L.DomUtil.add('h4', '', container, L._('Download data'))
-    const typeInput = L.DomUtil.create('select', '', container)
-    typeInput.name = 'format'
-    const exportCaveat = L.DomUtil.add(
-      'small',
-      'help-text',
-      container,
-      L._('Only visible features will be downloaded.')
-    )
-    for (const key in this.EXPORT_TYPES) {
-      if (this.EXPORT_TYPES.hasOwnProperty(key)) {
-        option = L.DomUtil.create('option', '', typeInput)
-        option.value = key
-        option.textContent = this.EXPORT_TYPES[key].name || key
-        if (this.EXPORT_TYPES[key].selected) option.selected = true
-      }
-    }
-    L.DomUtil.createButton(
-      'button',
+    const iframeOptions = L.DomUtil.createFieldset(
       container,
-      L._('Download data'),
-      () => this.download(typeInput.value),
-      this
+      L._('Embed and link options')
     )
+    iframeOptions.appendChild(builder.build())
+
     this.ui.openPanel({ data: { html: container } })
   },
 })