feat: highlight importer URL field when it is fulfilled

cf #2302
umap-project · Dec 2, 2024 · 0ab194e · 0ab194e
1 parent f6f42f5
commit 0ab194e
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/umap/static/umap/css/form.css b/umap/static/umap/css/form.css
@@ -599,3 +599,6 @@ input[type=hidden].blur + [type="button"] {
     border: 1px solid #202425;
     border-radius: initial;
 }
+input.highlightable:not(:placeholder-shown) {
+    border: 1px solid var(--color-brightCyan);
+}
diff --git a/umap/static/umap/js/modules/importer.js b/umap/static/umap/js/modules/importer.js
@@ -10,7 +10,7 @@ const TEMPLATE = `
     <fieldset class="formbox">
       <legend class="counter">${translate('Choose data')}</legend>
       <input type="file" multiple autofocus onchange />
-      <input type="url" placeholder="${translate('Provide an URL here')}" onchange />
+      <input class="highlightable" type="url" placeholder="${translate('Provide an URL here')}" onchange />
       <textarea onchange placeholder="${translate('Paste your data here')}"></textarea>
       <div class="importers" hidden>
         <h4>${translate('Import helpers:')}</h4>