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/static/umap/base.css

@@ -162,14 +162,16 @@ textarea {
     padding: 7px;
 }
 select {
+    border: 1px solid #222;
     width: 100%;
     height: 28px;
     line-height: 28px;
-    color: #efefef;
-    border: 1px solid #222;
-    background-color: #393F3F;
     margin-top: 5px;
 }
+.dark select {
+    color: #efefef;
+    background-color: #393F3F;
+}
 select[multiple="multiple"] {
     height: auto;
 }
@@ -225,7 +227,8 @@ button.flat,
     font-size: 10px;
     border-radius: 0 2px;
 }
-.content .helptext {
+.content .helptext,
+#umap-ui-container .help-text {
     background-color: #eee;
     color: #000;
 }
@@ -294,16 +297,19 @@ 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;
@@ -311,11 +317,14 @@ input[type="file"] + .error {
     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;
 }
@@ -401,6 +410,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;
 }
@@ -448,7 +458,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;

umap/static/umap/img/16.svg

@@ -1,4 +1,4 @@
-<svg id="svg2" width="144" height="168" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+<svg id="svg2" width="168" height="168" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
  <defs id="defs4">
   <mask id="mask0_181_11898" x="2" y="2" width="15" height="15" maskUnits="userSpaceOnUse">
    <path id="path2351" d="m16.04 2.3158h-14.035v14.035h14.035z" fill="#fff"/>
@@ -168,5 +168,7 @@
    </g>
    <path id="path2378" d="m25.147 1.8521h-4.2439c-0.07035 0-0.13782 0.027946-0.18756 0.077689-0.04974 0.049744-0.07769 0.11721-0.07769 0.18756v4.2439c0 0.070353 0.02795 0.13782 0.07769 0.18756 0.04974 0.049742 0.11721 0.077682 0.18756 0.077682h4.2439c0.07035 0 0.13782-0.02794 0.18756-0.077682 0.04974-0.049742 0.07768-0.11721 0.07768-0.18756v-4.2439c0-0.070349-0.02794-0.13782-0.07768-0.18756-0.04974-0.049743-0.11721-0.077689-0.18756-0.077689zm-0.26524 4.1591h-3.7135v-3.5463h3.7135z" fill="#464646" stroke-width=".26458"/>
   </g>
+  <path id="arrow-down" d="m156 875.36 6-6h-12z" fill="#4d4d4d" fill-rule="evenodd"/>
+  <path id="arrow-right" d="m159 896.36-6-6v12z" fill="#4d4d4d" fill-rule="evenodd"/>
  </g>
 </svg>

umap/static/umap/img/source/16.svg

@@ -2,7 +2,7 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   width="144"
+   width="168"
    height="168"
    id="svg2"
    version="1.1"
@@ -41,8 +41,8 @@
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
      inkscape:zoom="4.5893817"
-     inkscape:cx="68.418802"
+     inkscape:cx="69.29038"
-     inkscape:cy="100.88505"
+     inkscape:cy="81.928248"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="true"
@@ -127,7 +127,7 @@
        inkscape:label=""
        inkscape:color="rgb(0,134,229)" />
     <sodipodi:guide
-       position="120,96"
+       position="120,168"
        orientation="-1,0"
        id="guide4869"
        inkscape:label=""
@@ -145,6 +145,13 @@
        inkscape:label=""
        inkscape:locked="false"
        inkscape:color="rgb(0,134,229)" />
+    <sodipodi:guide
+       position="144,168"
+       orientation="-1,0"
+       id="guide10571"
+       inkscape:label=""
+       inkscape:locked="false"
+       inkscape:color="rgb(0,0,255)" />
   </sodipodi:namedview>
   <metadata
      id="metadata7">
@@ -852,5 +859,17 @@
          id="path2378"
          style="stroke-width:0.264583" />
     </g>
+    <path
+       id="arrow-down"
+       d="m 156,875.36218 6,-6 h -12 z"
+       fill="#f2f2f2"
+       fill-rule="evenodd"
+       style="fill:#4d4d4d;fill-opacity:1" />
+    <path
+       id="arrow-right"
+       d="m 159,896.36218 -6,-6 v 12 z"
+       fill="#f2f2f2"
+       fill-rule="evenodd"
+       style="fill:#4d4d4d;fill-opacity:1" />
   </g>
 </svg>

umap/static/umap/js/umap.controls.js

@@ -1086,12 +1086,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') }],
@@ -1132,54 +1197,12 @@ L.U.Map.include({
     const builder = new L.U.FormBuilder(iframeExporter, UIFields, {
       callback: buildIframeCode,
     })
-    const iframeOptions = L.DomUtil.createFieldset(container, L._('Export options'))
+    const iframeOptions = L.DomUtil.createFieldset(
+      container,
+      L._('Embed and link 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',
-      container,
-      L._('Download data'),
-      () => this.download(typeInput.value),
-      this
-    )
     this.ui.openPanel({ data: { html: container } })
   },
 })