jeff/umap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

re-style download panel

Browse source 
according to suggestion by @Aurelie-Jallut in
https://github.com/umap-project/umap/pull/1454#issuecomment-1858062371
This commit is contained in:
Joachim Schleicher 2023-12-19 17:27:27 +01:00
parent aec4330df6
commit 3f6c705d2e
3 changed files with 65 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
umap/static/umap/js/umap.controls.js
View file

@ -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
)

64
umap/static/umap/js/umap.share.js
View file

@ -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

33
umap/static/umap/map.css
View file

@ -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 */
/* *********** */