chore: rename alert choice to conflict + CSS vars

umap/static/umap/content.css

@@ -300,7 +300,7 @@ ul.umap-autocomplete {
 }
 
 .messages .error {
-    background-color: #c60f13;
+    background-color: var(--color-red);
 }
 
 

umap/static/umap/js/components/alerts/alert.css

@@ -20,7 +20,7 @@
     min-width: 80%;
 }
 [role="dialog"][data-level="error"] {
-    background-color: #c60f13;
+    background-color: var(--color-red);
 }
 [role="dialog"] a {
     text-decoration: underline;
@@ -93,23 +93,25 @@
 #link-wrapper {
     margin-bottom: 1rem;
 }
-#choice-wrapper form {
+#conflict-wrapper form {
     display: flex;
     justify-content: space-around;
 }
-#choice-wrapper form [type="submit"] {
+#conflict-wrapper form [type="submit"] {
     width: initial;
     background: inherit;
     color: var(--color-light);
+    border: 1px solid var(--color-red);
+    font-weight: bold;
 }
-#choice-wrapper form [type="submit"]:hover {
+#conflict-wrapper form [type="submit"]:hover {
     width: initial;
     background: darkred;
     color: var(--color-light);
     border: 1px solid var(--color-light);
 }
 @media only screen and (max-width:770px) {
-    #choice-wrapper form {
+    #conflict-wrapper form {
         flex-direction: column;
         text-align: center;
     }

umap/static/umap/js/components/alerts/alert.html

@@ -53,11 +53,11 @@
 
 <umap-alert-creation></umap-alert-creation>
 
-<template id="umap-alert-choice-template">
+<template id="umap-alert-conflict-template">
   <div role="dialog" class="dark window">
     <div>
       <p role="alert"></p>
-      <div id="choice-wrapper">
+      <div id="conflict-wrapper">
         <form>
           <a href="#" onclick="document.url" target="_blank">{% translate "See their edits in another tab" %}</a>
           <input id="your-changes" type="submit" value="{% translate "Keep your changes and loose theirs" %}">
@@ -73,16 +73,16 @@
   </div>
 </template>
 
-<umap-alert-choice></umap-alert-choice>
+<umap-alert-conflict></umap-alert-conflict>
 
 <script type="module">
   import { register } from '{% static 'umap/js/components/base.js' %}'
   import {
     uMapAlert,
     uMapAlertCreation,
-    uMapAlertChoice
+    uMapAlertConflict
   } from '{% static 'umap/js/components/alerts/alert.js' %}'
   register(uMapAlert, 'umap-alert')
   register(uMapAlertCreation, 'umap-alert-creation')
-  register(uMapAlertChoice, 'umap-alert-choice')
+  register(uMapAlertConflict, 'umap-alert-conflict')
 </script>

umap/static/umap/js/components/alerts/alert.js

@@ -119,29 +119,29 @@ class uMapAlertCreation extends uMapAlert {
   }
 }
 
-class uMapAlertChoice extends uMapAlert {
+class uMapAlertConflict extends uMapAlert {
   static error(
     message,
     // biome-ignore lint/style/useNumberNamespace: Number.Infinity returns undefined by default
     duration = Infinity
   ) {
-    uMapAlertChoice.emit('alertChoice', { level: 'error', message, duration })
+    uMapAlertConflict.emit('alertConflict', { level: 'error', message, duration })
   }
 
   constructor() {
     super()
-    this.choiceWrapper = this.container.querySelector('#choice-wrapper')
+    this.conflictWrapper = this.container.querySelector('#conflict-wrapper')
   }
 
-  onAlertChoice(event) {
+  onAlertConflict(event) {
     const { level = 'info', duration = 5000, message = '' } = event.detail
     uMapAlert.prototype.onAlert.call(this, { detail: { level, duration, message } })
-    const form = this.choiceWrapper.querySelector('form')
+    const form = this.conflictWrapper.querySelector('form')
     form.addEventListener('submit', (event) => {
       event.preventDefault()
       switch (event.submitter.id) {
         case 'your-changes':
-          uMapAlertChoice.emit('alertChoiceOverride')
+          uMapAlertConflict.emit('alertConflictOverride')
           break
         case 'their-changes':
           window.location.reload()
@@ -153,8 +153,8 @@ class uMapAlertChoice extends uMapAlert {
 
   connectedCallback() {
     this._handleClose()
-    this.listen('alertChoice')
+    this.listen('alertConflict')
   }
 }
 
-export { uMapAlert, uMapAlertCreation, uMapAlertChoice }
+export { uMapAlert, uMapAlertCreation, uMapAlertConflict }

umap/static/umap/js/modules/global.js

@@ -16,7 +16,7 @@ import { SyncEngine } from './sync/engine.js'
 import {
   uMapAlert as Alert,
   uMapAlertCreation as AlertCreation,
-  uMapAlertChoice as AlertChoice,
+  uMapAlertConflict as AlertConflict,
 } from '../components/alerts/alert.js'
 
 // Import modules and export them to the global scope.
@@ -26,7 +26,7 @@ import {
 window.U = {
   Alert,
   AlertCreation,
-  AlertChoice,
+  AlertConflict,
   AjaxAutocomplete,
   AjaxAutocompleteMultiple,
   Browser,

umap/static/umap/js/umap.layer.js

@@ -1707,13 +1707,13 @@ U.DataLayer = L.Evented.extend({
     const [data, response, error] = await this.map.server.post(url, headers, formData)
     if (error) {
       if (response && response.status === 412) {
-        U.AlertChoice.error(
+        U.AlertConflict.error(
           L._(
             'Whoops! Other contributor(s) changed some of the same map elements as you. ' +
               'This situation is tricky, you have to choose carefully which version is pertinent.'
           )
         )
-        document.addEventListener('alertChoiceOverride', async (event) => {
+        document.addEventListener('alertConflictOverride', async (event) => {
           await this._trySave(url, {}, formData)
         })
       }

umap/static/umap/vars.css

@@ -8,6 +8,7 @@
     --color-limeGreen: #b9f5d2;
     --color-brightCyan: #46ece6;
     --color-lightCyan: #d4fbf9;
+    --color-red: #c60f13;
 
     --background-color: var(--color-light);
     --color-accent: var(--color-brightCyan);