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
This commit is contained in:
Joachim Schleicher
parent
396cbd34b4
commit
931ac7442d
4 changed files with 116 additions and 61 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
|
@ -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:cy="100.88505"
|
||||
inkscape:cx="69.29038"
|
||||
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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 47 KiB |
|
|
@ -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 } })
|
||||
},
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in a new issue