From 4b0bde5c9079c88dfa6e020becdfe3baf5f89d4d Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 2 Jan 2024 22:14:13 +0100 Subject: [PATCH] Align copy button to input in share box cf #1454 --- umap/static/umap/base.css | 21 +- umap/static/umap/img/16.svg | 2 +- umap/static/umap/img/source/16.svg | 1037 +++++----------------------- umap/static/umap/js/umap.core.js | 18 + umap/static/umap/js/umap.share.js | 41 +- 5 files changed, 213 insertions(+), 906 deletions(-) diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css index 13039fbdc..9dd8bb822 100644 --- a/umap/static/umap/base.css +++ b/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 */ diff --git a/umap/static/umap/img/16.svg b/umap/static/umap/img/16.svg index 1db810b62..10d76ca4c 100644 --- a/umap/static/umap/img/16.svg +++ b/umap/static/umap/img/16.svg @@ -16,7 +16,6 @@ -   @@ -178,5 +177,6 @@ + diff --git a/umap/static/umap/img/source/16.svg b/umap/static/umap/img/source/16.svg index 99554023b..a3df22361 100644 --- a/umap/static/umap/img/source/16.svg +++ b/umap/static/umap/img/source/16.svg @@ -1,912 +1,201 @@ - - - - + + + + - - + + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + - + image/svg+xml - + - -   - - - - + + + + + - - - - - - - - - - - - - - - - - - - -   - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + +   + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + - - - - - - - + + + + + + + - - - + + + - - - - + + + + - - - + + + - - - - - - + + + + + + - - - + + + - - - - - - - - + + + + + + + + - - - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - - - - - + + + + + + + diff --git a/umap/static/umap/js/umap.core.js b/umap/static/umap/js/umap.core.js index 9dd50fa94..5cc776c87 100644 --- a/umap/static/umap/js/umap.core.js +++ b/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) diff --git a/umap/static/umap/js/umap.share.js b/umap/static/umap/js/umap.share.js index 75b1e5eed..a8f4e2b15 100644 --- a/umap/static/umap/js/umap.share.js +++ b/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') }],