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

Better styles for buttons and tooltips

Browse source
This commit is contained in:
David Larlet 2023-10-16 14:48:20 -04:00
parent 79117f2a66
commit 9c7269eabc
No known key found for this signature in database
GPG key ID: 3E2953A359E7E7BD
6 changed files with 261 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
umap/static/umap/base.css
View file

@ -735,6 +735,7 @@ input:invalid {
.umap-alert input { .umap-alert input {
padding: 5px; padding: 5px;
border-radius: 4px; border-radius: 4px;
width: 100%;
} }
/* *********** */ /* *********** */
@ -771,6 +772,20 @@ input:invalid {
border-width: 11px; border-width: 11px;
margin-left: calc(-50% + 21px); margin-left: calc(-50% + 21px);
} }
#umap-tooltip-container.tooltip-bottom:before {
top: -22px;
left: calc(50% - 11px);
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: rgba(30, 30, 30, 0.7);
border-width: 11px;
margin-left: calc(-50% + 21px);
transform: rotate(180deg);
}
#umap-tooltip-container.tooltip.tooltip-left:after { #umap-tooltip-container.tooltip.tooltip-left:after {
left: 100%; left: 100%;
top: 50%; top: 50%;
@ -816,10 +831,22 @@ input:invalid {
color: #fff; color: #fff;
float: right; float: right;
padding-right: 10px; padding-right: 10px;
width: 100px;
line-height: 1;
margin: .5rem;
background-color: #666;
font-size: .7rem;
} }
#umap-alert-container .umap-close-icon { #umap-alert-container .umap-close-icon {
background-position: -74px -55px; background-position: -74px -55px;
} }
#umap-alert-container .umap-alert-actions {
display: flex;
margin: 1rem;
}
#umap-alert-container .umap-alert-actions .umap-action {
margin-bottom: 0;
}
/* *********** */ /* *********** */

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

@ -320,13 +320,28 @@ L.U.EditControl = L.Control.extend({
onAdd: function (map) { onAdd: function (map) {
const container = L.DomUtil.create('div', 'leaflet-control-edit-enable') const container = L.DomUtil.create('div', 'leaflet-control-edit-enable')
L.DomUtil.createButton( const enableEditing = L.DomUtil.createButton(
'', '',
container, container,
`${L._('Enable editing')} (Ctrl+E)`, L._('Enable editing'),
map.enableEdit, map.enableEdit,
map map
) )
L.DomEvent.on(
enableEditing,
'mouseover',
function () {
map.ui.tooltip({
content: `${L._('Edit map')} (<kbd>Ctrl+E</kbd>)`,
anchor: enableEditing,
position: 'bottom',
delay: 750,
duration: 5000,
})
},
this
)
return container return container
}, },
}) })
@ -864,22 +879,52 @@ L.U.Map.include({
'umap-main-edit-toolbox with-transition dark', 'umap-main-edit-toolbox with-transition dark',
this._controlContainer this._controlContainer
) )
const logo = L.DomUtil.create('div', 'logo', container) const leftContainer = L.DomUtil.create('div', 'umap-left-edit-toolbox', container)
const rightContainer = L.DomUtil.create('div', 'umap-right-edit-toolbox', container)
const logo = L.DomUtil.create('div', 'logo', leftContainer)
L.DomUtil.createLink('', logo, 'uMap', '/', null, L._('Go to the homepage')) L.DomUtil.createLink('', logo, 'uMap', '/', null, L._('Go to the homepage'))
const nameButton = L.DomUtil.createButton( const nameButton = L.DomUtil.createButton(
'map-name', 'map-name',
container, leftContainer,
'', '',
this.edit, this.edit,
this this
) )
L.DomEvent.on(
nameButton,
'mouseover',
function () {
this.ui.tooltip({
content: L._('Edit the title of the map'),
anchor: nameButton,
position: 'bottom',
delay: 500,
duration: 5000,
})
},
this
)
const shareStatusButton = L.DomUtil.createButton( const shareStatusButton = L.DomUtil.createButton(
'share-status', 'share-status',
container, leftContainer,
'', '',
this.permissions.edit, this.permissions.edit,
this.permissions this.permissions
) )
L.DomEvent.on(
shareStatusButton,
'mouseover',
function () {
this.ui.tooltip({
content: L._('Update who can see and edit the map'),
anchor: shareStatusButton,
position: 'bottom',
delay: 500,
duration: 5000,
})
},
this
)
const update = () => { const update = () => {
const status = this.permissions.getShareStatusDisplay() const status = this.permissions.getShareStatusDisplay()
nameButton.textContent = this.getDisplayName() nameButton.textContent = this.getDisplayName()
@ -897,39 +942,81 @@ L.U.Map.include({
L.DomEvent.on(shareStatusButton, 'click', this.permissions.edit, this.permissions) L.DomEvent.on(shareStatusButton, 'click', this.permissions.edit, this.permissions)
} }
this.on('postsync', L.bind(update, this)) this.on('postsync', L.bind(update, this))
L.DomUtil.createButton( if (this.options.user) {
'leaflet-control-edit-save button', L.DomUtil.createLink(
container, 'umap-user',
`${L._('Save current edits')} (Ctrl+S)`, rightContainer,
this.save, L._(`My Dashboard ({username})`, { username: this.options.user.name }),
this this.options.user.url
) )
L.DomUtil.createButton( }
this.help.link(rightContainer, 'edit')
const controlEditCancel = L.DomUtil.createButton(
'leaflet-control-edit-cancel', 'leaflet-control-edit-cancel',
container, rightContainer,
`${L._('Cancel edits')} (Ctrl+Z)`, L._('Cancel edits'),
this.askForReset, this.askForReset,
this this
) )
L.DomUtil.createButton( L.DomEvent.on(
controlEditCancel,
'mouseover',
function () {
this.ui.tooltip({
content: `${L._('Cancel')} (<kbd>Ctrl+Z</kbd>)`,
anchor: controlEditCancel,
position: 'bottom',
delay: 500,
duration: 5000,
})
},
this
)
const controlEditDisable = L.DomUtil.createButton(
'leaflet-control-edit-disable', 'leaflet-control-edit-disable',
container, rightContainer,
`${L._('Disable editing')} (Ctrl+E)`, L.DomUtil.add('span', '', null, L._('Disable editing')),
function (e) { function (e) {
this.disableEdit(e) this.disableEdit(e)
this.ui.closePanel() this.ui.closePanel()
}, },
this this
) )
this.help.link(container, 'edit') L.DomEvent.on(
if (this.options.user) { controlEditDisable,
L.DomUtil.createLink( 'mouseover',
'umap-user', function () {
container, this.ui.tooltip({
L._(`My Dashboard ({username})`, { username: this.options.user.name }), content: `${L._('Disable editing')} (<kbd>Ctrl+E</kbd>)`,
this.options.user.url anchor: controlEditDisable,
position: 'bottom',
delay: 500,
duration: 5000,
})
},
this
)
const controlEditSave = L.DomUtil.createButton(
'leaflet-control-edit-save button',
rightContainer,
L.DomUtil.add('span', '', null, L._('Save current edits')),
this.save,
this
)
L.DomEvent.on(
controlEditSave,
'mouseover',
function () {
this.ui.tooltip({
content: `${L._('Save')} (<kbd>Ctrl+S</kbd>)`,
anchor: controlEditSave,
position: 'bottom',
delay: 500,
duration: 5000,
})
},
this
) )
}
}, },
renderShareBox: function () { renderShareBox: function () {

4
umap/static/umap/js/umap.core.js
View file

@ -287,7 +287,6 @@ L.Util.copyToClipboard = function (textToCopy) {
} }
} }
L.DomUtil.add = (tagName, className, container, content) => { L.DomUtil.add = (tagName, className, container, content) => {
const el = L.DomUtil.create(tagName, className, container) const el = L.DomUtil.create(tagName, className, container)
if (content) { if (content) {
@ -317,9 +316,6 @@ L.DomUtil.createFieldset = (container, legend, options) => {
} }
L.DomUtil.createButton = (className, container, content, callback, context) => { L.DomUtil.createButton = (className, container, content, callback, context) => {
// TODO: actually switch to buttons’ elements.
// const el = L.DomUtil.add('a', className, container, content)
// el.href = '#'
const el = L.DomUtil.add('button', className, container, content) const el = L.DomUtil.add('button', className, container, content)
el.type = 'button' el.type = 'button'
if (callback) { if (callback) {

46
umap/static/umap/js/umap.ui.js
View file

@ -106,18 +106,19 @@ L.U.UI = L.Evented.extend({
L.DomUtil.add('div', '', this._alert, e.content) L.DomUtil.add('div', '', this._alert, e.content)
if (e.actions) { if (e.actions) {
let action, el, input let action, el, input
const form = L.DomUtil.add('div', 'umap-alert-actions', this._alert)
for (let i = 0; i < e.actions.length; i++) { for (let i = 0; i < e.actions.length; i++) {
action = e.actions[i] action = e.actions[i]
if (action.input) { if (action.input) {
input = L.DomUtil.element( input = L.DomUtil.element(
'input', 'input',
{ className: 'umap-alert-input', placeholder: action.input }, { className: 'umap-alert-input', placeholder: action.input },
this._alert form
) )
} }
el = L.DomUtil.createButton( el = L.DomUtil.createButton(
{ className: 'umap-action' }, 'umap-action',
this._alert, form,
action.label, action.label,
action.callback, action.callback,
action.callbackContext || this.map action.callbackContext || this.map
@ -133,20 +134,32 @@ L.U.UI = L.Evented.extend({
} }
}, },
tooltip: function (e) { tooltip: function (opts) {
this.TOOLTIP_ID = Math.random() this.TOOLTIP_ID = Math.random()
const id = this.TOOLTIP_ID const id = this.TOOLTIP_ID
function showIt() {
if (opts.anchor && opts.position === 'top') {
this.anchorTooltipTop(opts.anchor)
} else if (opts.anchor && opts.position === 'left') {
this.anchorTooltipLeft(opts.anchor)
} else if (opts.anchor && opts.position === 'bottom') {
this.anchorTooltipBottom(opts.anchor)
} else {
this.anchorTooltipAbsolute()
}
L.DomUtil.addClass(this.parent, 'umap-tooltip') L.DomUtil.addClass(this.parent, 'umap-tooltip')
if (e.anchor && e.position === 'top') this.anchorTooltipTop(e.anchor) this._tooltip.innerHTML = opts.content
else if (e.anchor && e.position === 'left') this.anchorTooltipLeft(e.anchor) }
else this.anchorTooltipAbsolute()
this._tooltip.innerHTML = e.content
function closeIt() { function closeIt() {
this.closeTooltip(id) this.closeTooltip(id)
} }
if (e.anchor) L.DomEvent.once(e.anchor, 'mouseout', closeIt, this) window.setTimeout(L.bind(showIt, this), opts.delay || 0)
if (e.duration !== Infinity) if (opts.anchor) {
window.setTimeout(L.bind(closeIt, this), e.duration || 3000) L.DomEvent.once(opts.anchor, 'mouseout', closeIt, this)
}
if (opts.duration !== Infinity) {
window.setTimeout(L.bind(closeIt, this), opts.duration || 3000)
}
}, },
anchorTooltipAbsolute: function () { anchorTooltipAbsolute: function () {
@ -168,6 +181,15 @@ L.U.UI = L.Evented.extend({
}) })
}, },
anchorTooltipBottom: function (el) {
this._tooltip.className = 'tooltip-bottom'
const coords = this.getPosition(el)
this.setTooltipPosition({
left: coords.left + 30,
bottom: this.getDocHeight() - coords.top - 76,
})
},
anchorTooltipLeft: function (el) { anchorTooltipLeft: function (el) {
this._tooltip.className = 'tooltip-left' this._tooltip.className = 'tooltip-left'
const coords = this.getPosition(el) const coords = this.getPosition(el)
@ -179,7 +201,9 @@ L.U.UI = L.Evented.extend({
closeTooltip: function (id) { closeTooltip: function (id) {
if (id && id !== this.TOOLTIP_ID) return if (id && id !== this.TOOLTIP_ID) return
this._tooltip.className = ''
this._tooltip.innerHTML = '' this._tooltip.innerHTML = ''
this.setTooltipPosition({})
L.DomUtil.removeClass(this.parent, 'umap-tooltip') L.DomUtil.removeClass(this.parent, 'umap-tooltip')
}, },

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

@ -379,10 +379,6 @@ ul.photon-autocomplete {
.dark .umap-help-button { .dark .umap-help-button {
background-image: url('./img/16-white.svg'); background-image: url('./img/16-white.svg');
} }
.umap-help-link {
float: right;
margin-right: 20px;
}
.umap-help-on .umap-help-box { .umap-help-on .umap-help-box {
visibility: visible; visibility: visible;
top: 100px; top: 100px;
@ -423,27 +419,37 @@ ul.photon-autocomplete {
/* ********************************* */ /* ********************************* */
/* Edit main toolbox */ /* Edit main toolbox */
/* ********************************* */ /* ********************************* */
.umap-main-edit-toolbox [type="button"] {
color: #fff;
font-size: 1.2em;
border: none;
background-color: #323737;
width: auto;
margin-bottom: 0;
}
.umap-main-edit-toolbox [type="button"]:hover {
text-decoration: underline;
}
.leaflet-container a.leaflet-control-edit-save, .leaflet-container .umap-help-link {
.leaflet-container a.leaflet-control-edit-cancel, font-size: 12px;
.leaflet-container a.leaflet-control-edit-disable { }
.leaflet-container .leaflet-control-edit-save,
.leaflet-container .leaflet-control-edit-cancel,
.leaflet-container .leaflet-control-edit-disable {
display: block; display: block;
border: none; border: none;
font-size: 11px; font-size: 12px;
margin-left: 10px;
float: right;
border-radius: 20px; border-radius: 20px;
color: #f8f8f8; color: #f8f8f8;
width: auto;
height: 36px; height: 36px;
line-height: 36px; line-height: 36px;
min-height: 36px; min-height: 36px;
padding: 0 20px; padding: 0 20px;
min-width: 100px;
} }
.leaflet-container a.leaflet-control-edit-disable:before, .leaflet-container .leaflet-control-edit-disable:before,
.leaflet-container a.leaflet-control-edit-save:before, .leaflet-container .leaflet-control-edit-save:before,
.leaflet-container a.leaflet-control-edit-cancel:before { .leaflet-container .leaflet-control-edit-cancel:before {
display: inline-block; display: inline-block;
width: 24px; width: 24px;
height: 24px; height: 24px;
@ -453,37 +459,37 @@ ul.photon-autocomplete {
vertical-align: middle; vertical-align: middle;
content: ' '; content: ' ';
} }
.leaflet-container a.leaflet-control-edit-save:before { .leaflet-container .leaflet-control-edit-save:before {
background-position: -2px -25px; background-position: -2px -25px;
} }
.leaflet-container a.leaflet-control-edit-disable:before { .leaflet-container .leaflet-control-edit-disable:before {
background-position: -26px -1px; background-position: -26px -1px;
} }
.leaflet-container a.leaflet-control-edit-cancel, .leaflet-container .leaflet-control-edit-cancel,
.leaflet-container a.leaflet-control-edit-disable { .leaflet-container .leaflet-control-edit-disable {
border: 1px solid #555; border: 1px solid #555;
} }
.leaflet-container a.leaflet-control-edit-save { .leaflet-container .leaflet-control-edit-save {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
background-color: #215d9c; background-color: #215d9c;
} }
.umap-is-dirty a.leaflet-control-edit-save { .umap-is-dirty .leaflet-control-edit-save {
opacity: 1; opacity: 1;
cursor: pointer; cursor: pointer;
} }
.leaflet-container a.leaflet-control-edit-save, .leaflet-container .leaflet-control-edit-save,
.leaflet-container a.leaflet-control-edit-cancel, .leaflet-container .leaflet-control-edit-cancel,
.leaflet-container a.leaflet-control-edit-disable, .leaflet-container .leaflet-control-edit-disable,
.umap-edit-enabled .leaflet-control-edit-enable { .umap-edit-enabled .leaflet-control-edit-enable {
display: none; display: none;
} }
.umap-edit-enabled a.leaflet-control-edit-save, .umap-edit-enabled .leaflet-control-edit-save,
.umap-edit-enabled a.leaflet-control-edit-disable, .umap-edit-enabled .leaflet-control-edit-disable,
.umap-edit-enabled .umap-is-dirty a.leaflet-control-edit-cancel { .umap-edit-enabled .umap-is-dirty .leaflet-control-edit-cancel {
display: inline-block; display: inline-block;
} }
.umap-is-dirty a.leaflet-control-edit-disable { .umap-is-dirty .leaflet-control-edit-disable {
display: none; display: none;
} }
.umap-caption-bar { .umap-caption-bar {
@ -506,7 +512,17 @@ ul.photon-autocomplete {
opacity: 0.98; opacity: 0.98;
color: #fff; color: #fff;
display: flex; display: flex;
justify-content: space-between;
} }
.umap-left-edit-toolbox,
.umap-right-edit-toolbox {
display: flex;
column-gap: 10px;
}
.umap-right-edit-toolbox {
align-items: baseline;
}
.umap-main-edit-toolbox .logo { .umap-main-edit-toolbox .logo {
width: 39px; width: 39px;
height: 100%; height: 100%;
@ -521,24 +537,21 @@ ul.photon-autocomplete {
vertical-align: middle; vertical-align: middle;
text-indent: -9999px; text-indent: -9999px;
} }
.umap-main-edit-toolbox [type="button"] {
color: #fff;
font-size: 1.2em;
border: none;
background-color: #323737;
}
.umap-main-edit-toolbox [type="button"]:hover {
text-decoration: underline;
}
.umap-main-edit-toolbox .map-name { .umap-main-edit-toolbox .map-name {
display: inline-block; display: inline-block;
max-width: 200px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
margin-right: 5px;
font-weight: bold; font-weight: bold;
text-align: left;
} }
.umap-main-edit-toolbox .share-status {
font-size: 1em;
font-style: italic;
overflow: hidden;
text-overflow: ellipsis;
}
.map-name:after { .map-name:after {
content: '\00a0'; content: '\00a0';
padding-left: 3px; padding-left: 3px;
@ -548,9 +561,6 @@ ul.photon-autocomplete {
.umap-is-dirty .map-name:after { .umap-is-dirty .map-name:after {
content: '*'; content: '*';
} }
.umap-main-edit-toolbox .share-status {
margin: 0 20px;
}
.umap-edit-enabled .umap-main-edit-toolbox { .umap-edit-enabled .umap-main-edit-toolbox {
top: 0; top: 0;
} }
@ -1532,14 +1542,11 @@ a.add-datalayer:hover,
@media all and (max-width: 980px) { @media all and (max-width: 980px) {
.leaflet-container a.leaflet-control-edit-save, .leaflet-container .leaflet-control-edit-save span,
.leaflet-container a.leaflet-control-edit-disable, .leaflet-container .leaflet-control-edit-disable span,
.leaflet-container a.leaflet-control-edit-cancel { .leaflet-container .leaflet-control-edit-cancel span {
text-indent: calc(100% - 10px); display: none;
width: 35px;
min-width: initial;
} }
.umap-main-edit-toolbox .umap-help-button { .umap-main-edit-toolbox .umap-help-button {
display: none; display: none;
} }
@ -1549,7 +1556,11 @@ a.add-datalayer:hover,
.umap-main-edit-toolbox .umap-user:after { .umap-main-edit-toolbox .umap-user:after {
display: none; display: none;
} }
}
@media all and (max-width: 640px) {
.umap-main-edit-toolbox .map-name {
max-width: 150px;
}
} }
@media all and (max-width: 480px) { @media all and (max-width: 480px) {

4
umap/static/umap/test/_pre.js
View file

@ -47,10 +47,10 @@ var enableEdit = function () {
happen.click(qs('div.leaflet-control-edit-enable a')) happen.click(qs('div.leaflet-control-edit-enable a'))
} }
var disableEdit = function () { var disableEdit = function () {
happen.click(qs('a.leaflet-control-edit-disable')) happen.click(qs('.leaflet-control-edit-disable'))
} }
var clickSave = function () { var clickSave = function () {
happen.click(qs('a.leaflet-control-edit-save')) happen.click(qs('.leaflet-control-edit-save'))
} }
var clickCancel = function () { var clickCancel = function () {
var _confirm = window.confirm var _confirm = window.confirm