diff --git a/umap/static/umap/css/form.css b/umap/static/umap/css/form.css index e2f536eef..1d61cab72 100644 --- a/umap/static/umap/css/form.css +++ b/umap/static/umap/css/form.css @@ -78,8 +78,7 @@ input[type="submit"] { border-radius: 2px; font-weight: normal; cursor: pointer; - padding: 7px; - width: 100%; + padding: 7px 14px; min-height: 32px; line-height: 32px; border: none; @@ -92,6 +91,12 @@ input[type="submit"] { color: var(--text-color); border: 1px solid #1b1f20; } +.dark .button.primary:not([disabled]), +.dark [type="button"].primary:not([disabled]) { + background-color: var(--color-brightCyan); + color: var(--color-dark); + border: 1px solid #1b1f20; +} .dark .button:hover, .dark [type="button"]:hover, .dark input[type="submit"]:hover { @@ -100,6 +105,11 @@ input[type="submit"] { .dark a { color: var(--text-color); } +.dark [type="button"][disabled], +.dark input[type="submit"][disabled] { + background-color: var(--color-mediumGray); + cursor: not-allowed; +} button.flat, [type="button"].flat, .dark [type="button"].flat { diff --git a/umap/static/umap/js/modules/importer.js b/umap/static/umap/js/modules/importer.js index 43560e3d7..3a9542fbc 100644 --- a/umap/static/umap/js/modules/importer.js +++ b/umap/static/umap/js/modules/importer.js @@ -33,15 +33,15 @@ const TEMPLATE = `
- + ` @@ -121,6 +121,11 @@ export default class Importer extends Utils.WithTemplate { return this.qs('textarea').value } + set raw(value) { + this.qs('textarea').value = value + this.onChange() + } + get clear() { return Boolean(this.qs('[name=clear]').checked) } @@ -198,6 +203,7 @@ export default class Importer extends Utils.WithTemplate { ) this.qs('[name=layer-name]').toggleAttribute('hidden', Boolean(this.layerId)) this.qs('#clear').toggleAttribute('hidden', !this.layerId) + this.qs('[name=submit').toggleAttribute('disabled', !this.isValid()) } onFileChange(e) { @@ -219,6 +225,7 @@ export default class Importer extends Utils.WithTemplate { this.url = null this.format = undefined this.layerName = null + this.raw = null const layerSelect = this.qs('[name="layer-id"]') layerSelect.innerHTML = '' this._umap.eachDataLayerReverse((datalayer) => { @@ -251,6 +258,17 @@ export default class Importer extends Utils.WithTemplate { this.qs('[type=file]').showPicker() } + isValid() { + if (!this.format) return false + const hasFiles = Boolean(this.files.length) + const hasRaw = Boolean(this.raw) + const hasUrl = Boolean(this.url) + const hasAction = Boolean(this.action) + if (!hasFiles && !hasRaw && !hasUrl) return false + if (this.url) return hasAction + return true + } + submit() { let hasErrors if (this.format === 'umap') {