Merge pull request #1498 from umap-project/align-copy-button

Align copy button to input in share box

umap/static/umap/base.css

@@ -456,8 +456,7 @@ input.switch:checked ~ label:after {
 }
 .umap-field-iconUrl .action-button,
 .inheritable .define,
-.inheritable .undefine,
-.copy-button {
+.inheritable .undefine {
     float: right;
     width: initial;
     min-height: 18px;
@@ -652,6 +651,24 @@ input[type=hidden].blur + .button,
 input[type=hidden].blur + [type="button"] {
     display: none;
 }
+.copiable-input {
+    display: flex;
+    align-items: end;
+}
+.copiable-input input {
+    border-radius: initial;
+}
+.copiable-input button {
+    background-repeat: no-repeat;
+    background-image: url('./img/16.svg');
+    background-position: -45px -140px;
+    display: inline;
+    padding: 0 10px;
+    height: 32px;
+    width: 32px;
+    border: 1px solid #202425;
+    border-radius: initial;
+}
 
 /* *********** */
 /*    Panel    */

umap/static/umap/img/16.svg

@@ -16,7 +16,6 @@
   </rdf:RDF>
  </metadata>
  <g id="layer1" transform="translate(0 -812.36)">
-  <text id="text4457" x="5.7867966" y="897.80786" fill="#000000" font-family="sans-serif" letter-spacing="0px" word-spacing="0px" style="line-height:0%" xml:space="preserve"><tspan id="tspan4459" x="5.7867966" y="897.80786" font-family="sans-serif" font-size="40px" style="line-height:1.25"> </tspan></text>
   <g id="help" transform="translate(-23.256 -119.39)">
    <circle id="path3014" transform="matrix(1.0714 0 0 1.0714 26.684 934.11)" cx="8" cy="9" r="7" fill="none" stroke="#4d4d4d" stroke-width=".93333"/>
    <g id="text3784" transform="translate(27.256 -100.61)" fill="#4d4d4d">
@@ -178,5 +177,6 @@
    <path id="path8303-6" d="m42.545 974.91c0 0.80333-0.65122 1.4546-1.4545 1.4546h-10.182c-0.80332 0-1.4545-0.65122-1.4545-1.4546h13.091z" fill="#464646" stroke-width=".72727"/>
    <path id="path16669" d="m36 963.88v8.3163" fill="none" marker-end="url(#Arrow1)" stroke="#464646" stroke-width="1.5"/>
   </g>
+  <path id="copy" d="m58.25 962.61v3.5h4v4h3.5v-7.5zm-4 4v7.5h7.5v-7.5z" fill="#4d4d4d" style="paint-order:fill markers stroke"/>
  </g>
 </svg>

umap/static/umap/js/umap.core.js

@@ -346,6 +346,24 @@ L.DomUtil.createLink = (className, container, content, url, target, title) => {
   return el
 }
 
+L.DomUtil.createCopiableInput = (parent, label, value) => {
+  const wrapper = L.DomUtil.add('div', 'copiable-input', parent)
+  const labelEl = L.DomUtil.add('label', '', wrapper, label)
+  const input = L.DomUtil.add('input', '', labelEl)
+  input.type = 'text'
+  input.readOnly = true
+  input.value = value
+  const button = L.DomUtil.createButton(
+    '',
+    wrapper,
+    '',
+    () => L.Util.copyToClipboard(input.value),
+    this
+  )
+  button.title = L._('copy')
+  return input
+}
+
 L.DomUtil.classIf = (el, className, bool) => {
   if (bool) L.DomUtil.addClass(el, className)
   else L.DomUtil.removeClass(el, className)

umap/static/umap/js/umap.share.js

@@ -48,38 +48,18 @@ L.U.Share = L.Class.extend({
     this.title = L.DomUtil.create('h3', '', this.container)
     this.title.textContent = L._('Share and download')
 
-    L.DomUtil.createButton(
-      'button copy-button',
+    L.DomUtil.createCopiableInput(
       this.container,
-      L._('copy'),
-      () => navigator.clipboard.writeText(this.mapUrl.value),
-      this
+      L._('Link to view the map'),
+      window.location.protocol + L.Util.getBaseUrl()
     )
-    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',
+      L.DomUtil.createCopiableInput(
         this.container,
-        L._('copy'),
-        () => navigator.clipboard.writeText(this.shortUrl.value),
-        this
+        L._('Short link'),
+        this.map.options.shortUrl
       )
-      const shortUrlLabel = L.DomUtil.create('label', '', 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.create('hr', '', this.container)
@@ -121,9 +101,12 @@ L.U.Share = L.Class.extend({
     const embedTitle = L.DomUtil.add('h4', '', this.container, L._('Embed the map'))
     const iframe = L.DomUtil.create('textarea', 'umap-share-iframe', this.container)
     const urlTitle = L.DomUtil.add('h4', '', this.container, L._('Direct link'))
-    const shortUrlLabel = L.DomUtil.create('label', '', this.container)
-    shortUrlLabel.textContent = L._('Share this link to open a customized map view')
-    const exportUrl = L.DomUtil.create('input', 'umap-share-url', this.container)
+    const exportUrl = L.DomUtil.createCopiableInput(
+      this.container,
+      L._('Share this link to open a customized map view'),
+      ''
+    )
+
     exportUrl.type = 'text'
     const UIFields = [
       ['dimensions.width', { handler: 'Input', label: L._('width') }],