chore: use template for map advanced buttons

This commit is contained in:
Yohan Boniface 2025-02-24 17:05:54 +01:00
parent 0e12efbca6
commit a70e608e42
2 changed files with 36 additions and 36 deletions

View file

@ -65,6 +65,9 @@ html[dir="rtl"] .icon {
.icon-center { .icon-center {
background-position: calc(var(--tile) * 4) calc(var(--tile) * 2); background-position: calc(var(--tile) * 4) calc(var(--tile) * 2);
} }
.icon-clone {
background-position: calc(var(--tile) * 7) calc(var(--tile) * 2);
}
.icon-close { .icon-close {
background-position: var(--tile) 0px; background-position: var(--tile) 0px;
} }
@ -95,6 +98,9 @@ html[dir="rtl"] .icon {
cursor: move; cursor: move;
float: inline-end; float: inline-end;
} }
.icon-empty {
background-position: calc(var(--tile) * 7) calc(var(--tile) * 3);
}
.icon-eye { .icon-eye {
background-position: calc(var(--tile) * 2) var(--tile); background-position: calc(var(--tile) * 2) var(--tile);
} }

View file

@ -1096,44 +1096,38 @@ export default class Umap extends ServerStored {
container, container,
translate('Advanced actions') translate('Advanced actions')
) )
const advancedButtons = DomUtil.create('div', 'button-bar half', advancedActions) const tpl = `
if (this.permissions.isOwner()) { <div class="button-bar half">
const deleteButton = Utils.loadTemplate(` <button class="button" type="button" data-ref=del hidden>
<button class="button" type="button">
<i class="icon icon-24 icon-delete"></i>${translate('Delete')} <i class="icon icon-24 icon-delete"></i>${translate('Delete')}
</button>`) </button>
deleteButton.addEventListener('click', () => this.del()) <button class="button" type="button" data-ref=clear hidden>
advancedButtons.appendChild(deleteButton) <i class="icon icon-24 icon-empty"></i>${translate('Clear data')}
</button>
DomUtil.createButton( <button class="button" type="button" data-ref=empty hidden>
'button umap-empty', <i class="icon icon-24 icon-empty"></i>${translate('Remove layers')}
advancedButtons, </button>
translate('Clear data'), <button class="button" type="button" data-ref=clone>
this.emptyDataLayers, <i class="icon icon-24 icon-clone"></i>${translate('Clone this map')}
this </button>
) <button class="button" type="button" data-ref=download>
DomUtil.createButton( <i class="icon icon-24 icon-download"></i>${translate('Open share & download panel')}
'button umap-empty', </button>
advancedButtons, </div>
translate('Remove layers'), `
this.removeDataLayers, const [bar, { del, clear, empty, clone, download }] =
this Utils.loadTemplateWithRefs(tpl)
) advancedActions.appendChild(bar)
if (this.permissions.isOwner()) {
del.hidden = false
del.addEventListener('click', () => this.del())
clear.hidden = false
clear.addEventListener('click', () => this.emptyDataLayers())
empty.hidden = false
empty.addEventListener('click', () => this.removeDataLayers())
} }
DomUtil.createButton( clone.addEventListener('click', () => this.clone())
'button umap-clone', download.addEventListener('click', () => this.share.open())
advancedButtons,
translate('Clone this map'),
this.clone,
this
)
DomUtil.createButton(
'button umap-download',
advancedButtons,
translate('Open share & download panel'),
this.share.open,
this.share
)
} }
edit() { edit() {