mirror of
https://github.com/umap-project/umap.git
synced 2025-04-28 19:42:36 +02:00
Merge pull request #1896 from umap-project/better-alerts
chore: overall alerts improvements
This commit is contained in:
David Larlet
GitHub
commit
eda3823b3a
12 changed files with 81 additions and 30 deletions
8
umap/static/umap/img/alert-icon-error.svg
Normal file
8
umap/static/umap/img/alert-icon-error.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 20">
|
||||
<mask id="a" maskUnits="userSpaceOnUse" x="0" y=".072" width="18" height="20" fill="#000">
|
||||
<path fill="#fff" d="M0 .072h18v20H0z"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.708 2.473a2.5 2.5 0 0 1 2.717 0l4.566 2.955a2.5 2.5 0 0 1 1.142 2.1v4.824a2.5 2.5 0 0 1-1.058 2.043l-4.567 3.223a2.5 2.5 0 0 1-2.883 0l-4.567-3.223A2.5 2.5 0 0 1 2 12.352V7.527a2.5 2.5 0 0 1 1.142-2.099l4.566-2.955Zm3.26-.84a3.5 3.5 0 0 0-3.803 0L2.6 4.59A3.5 3.5 0 0 0 1 7.527v4.825a3.5 3.5 0 0 0 1.482 2.86l4.566 3.223a3.5 3.5 0 0 0 4.037 0l4.566-3.223a3.5 3.5 0 0 0 1.482-2.86V7.527a3.5 3.5 0 0 0-1.598-2.938l-4.567-2.955Zm-2.995 9.735h1.919l.3-6.567h-2.52l.3 6.567Zm2.324 2.714a1.357 1.357 0 1 0-2.713.014 1.357 1.357 0 0 0 2.713-.014Z"/>
|
||||
</mask>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.708 2.473a2.5 2.5 0 0 1 2.717 0l4.566 2.955a2.5 2.5 0 0 1 1.142 2.1v4.824a2.5 2.5 0 0 1-1.058 2.043l-4.567 3.223a2.5 2.5 0 0 1-2.883 0l-4.567-3.223A2.5 2.5 0 0 1 2 12.352V7.527a2.5 2.5 0 0 1 1.142-2.099l4.566-2.955Zm3.26-.84a3.5 3.5 0 0 0-3.803 0L2.6 4.59A3.5 3.5 0 0 0 1 7.527v4.825a3.5 3.5 0 0 0 1.482 2.86l4.566 3.223a3.5 3.5 0 0 0 4.037 0l4.566-3.223a3.5 3.5 0 0 0 1.482-2.86V7.527a3.5 3.5 0 0 0-1.598-2.938l-4.567-2.955Zm-2.995 9.735h1.919l.3-6.567h-2.52l.3 6.567Zm2.324 2.714a1.357 1.357 0 1 0-2.713.014 1.357 1.357 0 0 0 2.713-.014Z" fill="#fff"/>
|
||||
<path d="m10.425 2.473.157-.243-.157.243Zm-2.717 0-.157-.243.157.243Zm7.283 2.955-.157.244.157-.244Zm.084 8.967.167.237-.167-.237Zm-4.567 3.223-.167-.237.167.237Zm-2.883 0 .167-.237-.167.237Zm-4.567-3.223-.167.237.167-.237Zm.084-8.967.157.244-.157-.244Zm4.023-3.794-.157-.244.157.244Zm3.803 0 .158-.244-.158.244Zm-8.37 2.955-.157-.244.158.244Zm-.116 10.623-.168.236.168-.236Zm4.566 3.223-.167.237.167-.237Zm4.037 0-.167-.237.167.237Zm4.566-3.223.168.236-.168-.236Zm-.117-10.623-.157.243.157-.243Zm-5.642 6.779v.29h.277l.013-.277-.29-.013Zm-1.92 0-.289.013.013.277h.277v-.29Zm2.22-6.567.29.013.013-.303h-.303v.29Zm-2.52 0v-.29H7.37l.014.303.29-.013Zm2.91-2.571a2.79 2.79 0 0 0-3.031 0l.315.487a2.21 2.21 0 0 1 2.401 0l.315-.487Zm4.567 2.955L10.582 2.23l-.315.487 4.567 2.955.315-.487Zm1.274 2.342a2.79 2.79 0 0 0-1.274-2.342l-.315.487a2.21 2.21 0 0 1 1.01 1.855h.58Zm0 4.825V7.527h-.58v4.825h.58Zm-1.18 2.28a2.79 2.79 0 0 0 1.18-2.28h-.58a2.21 2.21 0 0 1-.935 1.806l.334.474Zm-4.568 3.223 4.567-3.223-.334-.474-4.567 3.223.335.474Zm-3.217 0a2.79 2.79 0 0 0 3.217 0l-.334-.474a2.21 2.21 0 0 1-2.549 0l-.334.474ZM2.89 14.632l4.567 3.223.334-.474-4.566-3.223-.335.474Zm-1.181-2.28c0 .907.44 1.757 1.181 2.28l.335-.474a2.21 2.21 0 0 1-.936-1.806h-.58Zm0-4.825v4.825h.58V7.527h-.58Zm1.274-2.342A2.79 2.79 0 0 0 1.71 7.527h.58c0-.75.38-1.448 1.01-1.855l-.316-.487ZM7.551 2.23 2.984 5.185l.315.487 4.567-2.955-.315-.487Zm-.228-.353a3.21 3.21 0 0 1 3.487 0l.316-.487a3.79 3.79 0 0 0-4.118 0l.315.487ZM2.756 4.832l4.567-2.955-.315-.487L2.44 4.345l.315.487ZM1.29 7.527a3.21 3.21 0 0 1 1.466-2.695l-.315-.487A3.79 3.79 0 0 0 .71 7.527h.58Zm0 4.825V7.527H.71v4.825h.58Zm1.359 2.623a3.21 3.21 0 0 1-1.359-2.623H.71a3.79 3.79 0 0 0 1.604 3.096l.335-.473Zm4.566 3.223L2.65 14.975l-.335.473 4.567 3.224.334-.474Zm3.703 0a3.21 3.21 0 0 1-3.703 0l-.334.474a3.79 3.79 0 0 0 4.371 0l-.334-.474Zm4.566-3.223-4.566 3.223.334.474 4.567-3.224-.335-.473Zm1.36-2.623a3.21 3.21 0 0 1-1.36 2.623l.335.473a3.79 3.79 0 0 0 1.604-3.096h-.58Zm0-4.825v4.825h.58V7.527h-.58Zm-1.467-2.695a3.21 3.21 0 0 1 1.466 2.695h.58a3.79 3.79 0 0 0-1.731-3.182l-.315.487ZM10.81 1.877l4.567 2.955.315-.487-4.566-2.955-.316.487Zm-.918 9.2h-1.92v.58h1.92v-.58Zm.01-6.29-.3 6.568.58.026.3-6.567-.58-.026Zm-2.23.304h2.52v-.58h-2.52v.58Zm.59 6.264-.3-6.567-.579.026.3 6.567.58-.026Zm.67 1.667c.605 0 1.075.485 1.075 1.06h.58c0-.895-.73-1.64-1.655-1.64v.58Zm-1.06 1.06c0-.577.473-1.06 1.06-1.06v-.58c-.912 0-1.64.747-1.64 1.64h.58Zm1.06 1.074c-.585 0-1.06-.48-1.06-1.074h-.58c0 .905.726 1.654 1.64 1.654v-.58Zm1.075-1.074a1.07 1.07 0 0 1-1.075 1.074v.58a1.65 1.65 0 0 0 1.655-1.654h-.58Z" fill="#959595" mask="url(#a)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4 KiB |
4
umap/static/umap/img/alert-icon-info.svg
Normal file
4
umap/static/umap/img/alert-icon-info.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M10.1463 7.28808c.9471 0 1.7149-.76781 1.7149-1.71495s-.7678-1.71495-1.7149-1.71495c-.94719 0-1.715.76781-1.715 1.71495s.76781 1.71495 1.715 1.71495ZM9.00296 9.00308h2.28664v6.85982H9.00296V9.00308Z" fill="#98CDFF" stroke="#959595" stroke-width=".285824"/>
|
||||
<path d="M10.1465 1C5.10181 1 1 5.10195 1 10.1465c0 5.0447 4.10192 9.1465 9.1465 9.1465 5.0446 0 9.1465-4.1019 9.1465-9.1465C19.293 5.10183 15.1911 1 10.1465 1Zm0 1.14365c4.4267 0 8.003 3.57616 8.003 8.00305 0 4.4267-3.5762 8.0029-8.003 8.0029-4.42686 0-8.00298-3.5762-8.00298-8.0029 0-4.42678 3.57612-8.00305 8.00298-8.00305Z" fill="#98CDFF" stroke="#959595" stroke-width=".285824"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 735 B |
3
umap/static/umap/img/alert-icon-success.svg
Normal file
3
umap/static/umap/img/alert-icon-success.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="m2 9 5 5L17 4" stroke="#42ECE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 189 B |
3
umap/static/umap/img/icon-external-link.svg
Normal file
3
umap/static/umap/img/icon-external-link.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M10 3.3H3.2A2.2 2.2 0 0 0 1 5.5v11.3A2.3 2.3 0 0 0 3.3 19h11.2a2.3 2.3 0 0 0 2.3-2.3V10m-8 1.1L19 1m0 0h-5.6M19 1v5.6" stroke="#EFEFEF" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 276 B |
|
|
@ -5,7 +5,7 @@
|
|||
padding: var(--panel-gutter);
|
||||
position: absolute;
|
||||
box-shadow: 0 1px 7px #999999;
|
||||
background: none repeat scroll 0 0 var(--color-darkGray);
|
||||
background: var(--color-darkGray);
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-size: 0.8em;
|
||||
|
|
@ -19,14 +19,47 @@
|
|||
transform: translate(-50%, 0);
|
||||
min-width: 80%;
|
||||
}
|
||||
[role="dialog"] > div {
|
||||
margin: 0 auto;
|
||||
min-width: 60%;
|
||||
background-size: 20px;
|
||||
background-position: 0 15px;
|
||||
padding-left: 28px;
|
||||
}
|
||||
[role="dialog"][data-level="info"] > div {
|
||||
background-image: url('../../../img/alert-icon-info.svg');
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
[role="dialog"][data-level="success"] > div {
|
||||
background-image: url('../../../img/alert-icon-success.svg');
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
[role="dialog"][data-level="error"] > div {
|
||||
background-image: url('../../../img/alert-icon-error.svg');
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
[role="dialog"][data-level="error"] {
|
||||
background-color: var(--color-red);
|
||||
background-color: var(--color-darkRed);
|
||||
}
|
||||
[role="dialog"] a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
[role="dialog"] > div {
|
||||
margin: 0 auto;
|
||||
[role="dialog"] label {
|
||||
font-size: .8rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
[role="dialog"] a[target="_blank"] {
|
||||
background: url('../../../img/icon-external-link.svg') no-repeat right center;
|
||||
padding-right: 14px;
|
||||
background-size: 12px;
|
||||
}
|
||||
h3[role="alert"] {
|
||||
margin-bottom: 0;
|
||||
margin-top: 1rem;
|
||||
line-height: initial;
|
||||
}
|
||||
h3[role="alert"] + p {
|
||||
margin-top: 0;
|
||||
}
|
||||
[role="group"] {
|
||||
display: inline-flex;
|
||||
|
|
@ -48,7 +81,7 @@
|
|||
margin-left: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
width: 33%;
|
||||
width: 45%;
|
||||
}
|
||||
[role="group"] input[type="submit"] {
|
||||
background: var(--color-darkGray);
|
||||
|
|
@ -93,6 +126,10 @@
|
|||
#link-wrapper {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
[role="dialog"] #conflict-wrapper a[target="_blank"] {
|
||||
background-position-y: 16px;
|
||||
}
|
||||
|
||||
#conflict-wrapper form {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
|
@ -101,7 +138,7 @@
|
|||
width: initial;
|
||||
background: inherit;
|
||||
color: var(--color-light);
|
||||
border: 1px solid var(--color-red);
|
||||
border: 1px solid var(--color-light);
|
||||
font-weight: bold;
|
||||
}
|
||||
#conflict-wrapper form [type="submit"]:hover {
|
||||
|
|
|
|||
|
|
@ -22,26 +22,26 @@
|
|||
<template id="umap-alert-creation-template">
|
||||
<div role="dialog" class="dark window">
|
||||
<div>
|
||||
<h3>{% translate "Save the edit link" %}</h3>
|
||||
<p role="alert"></p>
|
||||
<h3 role="alert"></h3>
|
||||
<p><em>{% translate "Pro-tip: to easily find back your maps," %} <a href="{% url "login" %}" target="_blank">{% translate "create an account" %}</a> {% translate " or " %} <a href="{% url "login" %}" target="_blank">{% translate "log in" %}</a>.</em></p>
|
||||
<div id="link-wrapper">
|
||||
<form>
|
||||
<label for="url">Here is your secret link to edit the map, please keep it safe:</label>
|
||||
<fieldset role="group">
|
||||
<input type="url" name="url">
|
||||
<input type="url" name="url" id="url">
|
||||
<input type="button" value="{% translate "Copy link" %}">
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<div id="form-wrapper" hidden>
|
||||
<p>{% translate "You can also receive that URL by email:" %}</p>
|
||||
<form>
|
||||
<label for="email">{% translate "Enter your email address to receive the secret link:" %}</label>
|
||||
<fieldset role="group">
|
||||
<input type="email" name="email" placeholder="{% translate "Email" %}" required>
|
||||
<input type="email" name="email" id="email" placeholder="{% translate "Email" %}" required>
|
||||
<input type="submit" value="{% translate "Send me the link" %}" class="umap-action">
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<p><em>{% translate "Pro-tip: to easily find back your maps," %} <a href="{% url "login" %}" target="_blank">{% translate "create an account" %}</a></em></p>
|
||||
</div>
|
||||
<ul class="buttons">
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@ class uMapAlert extends uMapElement {
|
|||
uMapAlert.emit('alert', { message, duration })
|
||||
}
|
||||
|
||||
static success(message, duration = 5000) {
|
||||
uMapAlert.emit('alert', { level: 'success', message, duration })
|
||||
}
|
||||
|
||||
// biome-ignore lint/style/useNumberNamespace: Number.Infinity returns undefined by default
|
||||
static error(message, duration = Infinity) {
|
||||
uMapAlert.emit('alert', { level: 'error', message, duration })
|
||||
|
|
|
|||
|
|
@ -830,7 +830,7 @@ U.Map = L.Map.extend({
|
|||
|
||||
setCenterAndZoom: function () {
|
||||
this._setCenterAndZoom()
|
||||
U.Alert.info(L._('The zoom and center have been modified.'))
|
||||
U.Alert.success(L._('The zoom and center have been modified.'))
|
||||
},
|
||||
|
||||
_setCenterAndZoom: function () {
|
||||
|
|
@ -1060,10 +1060,7 @@ U.Map = L.Map.extend({
|
|||
})
|
||||
this.once('saved', () => {
|
||||
U.AlertCreation.info(
|
||||
L._(
|
||||
'Your map has been created! As you are not logged in, ' +
|
||||
'here is your secret link to edit the map, please keep it safe:'
|
||||
),
|
||||
L._('Your map has been created with an anonymous account!'),
|
||||
Number.Infinity,
|
||||
data.permissions.anonymous_edit_url,
|
||||
send_edit_link_url
|
||||
|
|
@ -1071,7 +1068,7 @@ U.Map = L.Map.extend({
|
|||
})
|
||||
} else {
|
||||
this.once('saved', () => {
|
||||
U.Alert.info(L._('Congratulations, your map has been created!'))
|
||||
U.Alert.success(L._('Congratulations, your map has been created!'))
|
||||
})
|
||||
}
|
||||
} else {
|
||||
|
|
@ -1082,7 +1079,7 @@ U.Map = L.Map.extend({
|
|||
this.permissions.commit()
|
||||
}
|
||||
this.once('saved', () => {
|
||||
U.Alert.info(data.info || L._('Map has been saved!'))
|
||||
U.Alert.success(data.info || L._('Map has been saved!'))
|
||||
})
|
||||
}
|
||||
// Update URL in case the name has changed.
|
||||
|
|
@ -1119,7 +1116,7 @@ U.Map = L.Map.extend({
|
|||
return
|
||||
}
|
||||
this.options.starred = data.starred
|
||||
U.Alert.info(
|
||||
U.Alert.success(
|
||||
data.starred ? L._('Map has been starred') : L._('Map has been unstarred')
|
||||
)
|
||||
this.renderControls()
|
||||
|
|
|
|||
|
|
@ -138,7 +138,7 @@ U.MapPermissions = L.Class.extend({
|
|||
const [data, response, error] = await this.map.server.post(this.getAttachUrl())
|
||||
if (!error) {
|
||||
this.options.owner = this.map.options.user
|
||||
U.Alert.info(L._('Map has been attached to your account'))
|
||||
U.Alert.success(L._('Map has been attached to your account'))
|
||||
this.map.editPanel.close()
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
--color-brightCyan: #46ece6;
|
||||
--color-lightCyan: #d4fbf9;
|
||||
--color-red: #c60f13;
|
||||
--color-darkRed: #5b2a2a;
|
||||
|
||||
--background-color: var(--color-light);
|
||||
--color-accent: var(--color-brightCyan);
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@
|
|||
|
||||
{% for message in messages %}
|
||||
<script type="module" defer>
|
||||
U.Alert.info("{{ message }}")
|
||||
U.Alert.success("{{ message }}")
|
||||
</script>
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -171,10 +171,7 @@ def test_alert_message_after_create(
|
|||
new_map = Map.objects.last()
|
||||
expect(alert).to_be_visible()
|
||||
expect(
|
||||
alert.get_by_text(
|
||||
"Your map has been created! As you are not logged in, here is your secret "
|
||||
"link to edit the map, please keep it safe:"
|
||||
)
|
||||
alert.get_by_text("Your map has been created with an anonymous account!")
|
||||
).to_be_visible()
|
||||
expect(alert.get_by_role("button", name="Copy")).to_be_visible()
|
||||
expect(alert.get_by_role("button", name="Send me the link")).to_be_visible()
|
||||
|
|
@ -218,10 +215,7 @@ def test_alert_message_after_create_show_link_even_without_mail(
|
|||
alert = page.locator('umap-alert-creation div[role="dialog"]')
|
||||
expect(alert).to_be_visible()
|
||||
expect(
|
||||
alert.get_by_text(
|
||||
"Your map has been created! As you are not logged in, here is your secret "
|
||||
"link to edit the map, please keep it safe:"
|
||||
)
|
||||
alert.get_by_text("Your map has been created with an anonymous account!")
|
||||
).to_be_visible()
|
||||
expect(alert.get_by_role("button", name="Copy")).to_be_visible()
|
||||
expect(alert.get_by_role("button", name="Send me the link")).to_be_hidden()
|
||||
|
|
|
|||
Loading…
Reference in a new issue