re-style download panel

according to suggestion by @Aurelie-Jallut in #1454 (comment)
umap-project · Dec 19, 2023 · 3f6c705 · 3f6c705
1 parent aec4330
commit 3f6c705
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 34 deletions.
diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js
@@ -409,7 +409,7 @@ L.Control.Embed = L.Control.extend({
     const shareButton = L.DomUtil.createButton(
       '',
       container,
-      L._('Share, download and embed this map'),
+      L._('Share and download'),
       map.share.open,
       map.share
     )

diff --git a/umap/static/umap/js/umap.share.js b/umap/static/umap/js/umap.share.js
@@ -46,61 +46,59 @@ L.U.Share = L.Class.extend({
   build: function () {
     this.container = L.DomUtil.create('div', 'umap-share')
     this.title = L.DomUtil.create('h3', '', this.container)
-    this.title.textContent = L._('Share, download and embed this map')
+    this.title.textContent = L._('Share and download')
+
+    L.DomUtil.createButton(
+      'button copy-button',
+      this.container,
+      L._('copy'),
+      () => navigator.clipboard.writeText(this.mapUrl.value),
+      this
+    )
+    const mapUrlLabel = L.DomUtil.add('label', '', this.container, L._('Link to view the map'))
+    this.mapUrl = L.DomUtil.create('input', 'umap-share-url', mapUrlLabel)
+    this.mapUrl.type = 'text'
+    this.mapUrl.readOnly = true
+    this.mapUrl.value = window.location.protocol + L.Util.getBaseUrl()
+
     if (this.map.options.shortUrl) {
       L.DomUtil.createButton(
         'button copy-button',
         this.container,
         L._('copy'),
-        () => navigator.clipboard.writeText(this.map.options.shortUrl),
+        () => navigator.clipboard.writeText(this.shortUrl.value),
         this
       )
-      L.DomUtil.add('h4', '', this.container, L._('Short URL'))
       const shortUrlLabel = L.DomUtil.create('label', '', this.container)
-      shortUrlLabel.textContent = L._('Share this link to view the map')
-      const shortUrl = L.DomUtil.create('input', 'umap-short-url', this.container)
-      shortUrl.type = 'text'
-      shortUrl.value = this.map.options.shortUrl
-      L.DomUtil.create('hr', '', this.container)
+      shortUrlLabel.textContent = L._('Short link')
+      this.shortUrl = L.DomUtil.create('input', 'umap-share-url', shortUrlLabel)
+      this.shortUrl.type = 'text'
+      this.shortUrl.readOnly = true
+      this.shortUrl.value = this.map.options.shortUrl
     }
 
-    L.DomUtil.add('h4', '', this.container, L._('Download data'))
-    const downloadLabel = L.DomUtil.create('label', '', this.container)
-    downloadLabel.textContent = L._('Choose the format of the data to export')
-    const exportCaveat = L.DomUtil.add(
-      'small',
-      'help-text',
-      this.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}`,
-      this.container
-    )
-    let option
+    L.DomUtil.create('hr', '', this.container)
+
+    L.DomUtil.add('h4', '', this.container, L._('Download'))
+    L.DomUtil.add('small', 'label', this.container, L._('Only visible layers'))
     for (const key in this.EXPORT_TYPES) {
       if (this.EXPORT_TYPES.hasOwnProperty(key)) {
         L.DomUtil.createButton(
-          'button',
-          typeInput,
-          this.EXPORT_TYPES[key].name || key,
+          'download-file',
+          this.container,
+          this.EXPORT_TYPES[key].name || key + ' data',
           () => this.download(key),
           this
         )
       }
     }
-    L.DomUtil.create('hr', '', this.container)
-
-    L.DomUtil.add('h4', '', this.container, L._('Backup data'))
-    const backupLabel = L.DomUtil.create('label', '', this.container)
-    backupLabel.textContent = L._('Download all data and properties of the map')
+    L.DomUtil.create('div', 'vspace', this.container)
+    L.DomUtil.add('small', 'label', this.container, L._('All data and settings of the map'))
     const downloadUrl = L.Util.template(this.map.options.urls.map_download, {
       map_id: this.map.options.umap_id,
     })
     const link = L.DomUtil.createLink(
-      'button',
+      'download-backup',
       this.container,
       L._('Download full backup'),
       downloadUrl

diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css
@@ -239,6 +239,39 @@ ul.photon-autocomplete {
 
 
 
+/* ***************************** */
+/*    Share and download panel   */
+/* ***************************** */
+.download-file {
+    height: 1.2em;
+    min-height: 1.2em;
+    padding: 0;
+    text-align: left;
+    vertical-align: bottom;
+}
+.download-file:before,
+.download-backup:before {
+    height: 24px;
+    width: 24px;
+    background-repeat: no-repeat;
+    background-image: url('./img/16.svg');
+    background-size: auto auto;
+    background-position: -4px -145px;
+    content: " ";
+    vertical-align: bottom;
+    display: inline-block;
+}
+.download-backup:before {
+    background-position: -27px -144px;
+}
+.leaflet-container .download-backup {
+    color: black;
+    display: block;
+}
+.vspace {
+    height: 32px;
+}
+
 /* *********** */
 /*    Draw     */
 /* *********** */