From 09d089131809f4267446345204d967382646a52c Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 5 Sep 2023 09:36:05 +0200 Subject: [PATCH 1/8] Change link color in dark mode --- umap/static/umap/base.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css index fcb4425a..324a3cec 100644 --- a/umap/static/umap/base.css +++ b/umap/static/umap/base.css @@ -185,6 +185,9 @@ select[multiple="multiple"] { .dark .button:hover, .dark input[type="submit"]:hover { background-color: #2e3436; } +.dark a { + color: #eeeeec; +} .help-text, .helptext { display: block; padding: 7px 7px; From c08e7c5527f335fa211bd50b79e783d22215866a Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 5 Sep 2023 09:36:30 +0200 Subject: [PATCH 2/8] Remove duplicate help text in icon advanced free field --- umap/static/umap/js/umap.forms.js | 1 - 1 file changed, 1 deletion(-) diff --git a/umap/static/umap/js/umap.forms.js b/umap/static/umap/js/umap.forms.js index c401d56f..130398a2 100644 --- a/umap/static/umap/js/umap.forms.js +++ b/umap/static/umap/js/umap.forms.js @@ -518,7 +518,6 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({ }, build: function () { - this.options.helpText = this.builder.map.help.formatIconSymbol L.FormBuilder.BlurInput.prototype.build.call(this) this.parentContainer = L.DomUtil.create( 'div', From bfd36bc0e1a653cd5622dfe33c481ea92e7e1440 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 5 Sep 2023 09:38:07 +0200 Subject: [PATCH 3/8] Do not reset icon list on icon choice cf #1302 --- umap/static/umap/js/umap.forms.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/umap/static/umap/js/umap.forms.js b/umap/static/umap/js/umap.forms.js index 130398a2..415597d5 100644 --- a/umap/static/umap/js/umap.forms.js +++ b/umap/static/umap/js/umap.forms.js @@ -590,8 +590,6 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({ this.sync() this.unselectAll(this.pictogramsContainer) L.DomUtil.addClass(container, 'selected') - this.pictogramsContainer.innerHTML = '' - this.udpatePreview() }, this ) From 91e71eccda422bfdc937893c09ef6e368911e626 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 5 Sep 2023 09:41:09 +0200 Subject: [PATCH 4/8] Change button look in icon form --- umap/static/umap/js/umap.forms.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/umap/static/umap/js/umap.forms.js b/umap/static/umap/js/umap.forms.js index 415597d5..3389bddd 100644 --- a/umap/static/umap/js/umap.forms.js +++ b/umap/static/umap/js/umap.forms.js @@ -561,7 +561,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({ L.DomEvent.on(el, 'click', this.fetchIconList, this) } } - this.button = L.DomUtil.create('a', '', this.buttonsContainer) + this.button = L.DomUtil.create('a', 'button', this.buttonsContainer) this.button.textContent = this.value() ? L._('Change symbol') : L._('Add symbol') this.button.href = '#' L.DomEvent.on(this.button, 'click', L.DomEvent.stop).on( @@ -609,13 +609,13 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({ for (const idx in data.pictogram_list) { this.addIconPreview(data.pictogram_list[idx]) } - const cancelButton = L.DomUtil.create('a', '', this.pictogramsContainer) - cancelButton.textContent = L._('Cancel') - cancelButton.href = '#' - cancelButton.style.display = 'block' - cancelButton.style.clear = 'both' - L.DomEvent.on(cancelButton, 'click', L.DomEvent.stop).on( - cancelButton, + const closeButton = L.DomUtil.create('a', 'button', this.pictogramsContainer) + closeButton.textContent = L._('Close') + closeButton.href = '#' + closeButton.style.display = 'block' + closeButton.style.clear = 'both' + L.DomEvent.on(closeButton, 'click', L.DomEvent.stop).on( + closeButton, 'click', function (e) { this.pictogramsContainer.innerHTML = '' @@ -624,7 +624,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({ this ) const customButton = L.DomUtil.create('a', '', this.pictogramsContainer) - customButton.textContent = L._('Set symbol') + customButton.textContent = "> " + L._('Free content (advanced)') customButton.href = '#' customButton.style.display = 'block' customButton.style.clear = 'both' From c5084c433241d60f37c15de0a01c9bf3bf4773b8 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 5 Sep 2023 10:14:24 +0200 Subject: [PATCH 5/8] Add toggle link to show/hide iconUrl raw input --- umap/static/umap/base.css | 7 ------- umap/static/umap/js/umap.forms.js | 32 +++++++++++-------------------- 2 files changed, 11 insertions(+), 28 deletions(-) diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css index 324a3cec..5522f024 100644 --- a/umap/static/umap/base.css +++ b/umap/static/umap/base.css @@ -501,13 +501,6 @@ i.info { margin-top: -8px; padding: 0 5px; } -.umap-form-iconfield { - position: relative; - overflow: hidden; - padding-bottom: 5px; - padding-top: 5px; - line-height: 30px; -} .umap-icon-list, .umap-pictogram-list { clear: both; } diff --git a/umap/static/umap/js/umap.forms.js b/umap/static/umap/js/umap.forms.js index 3389bddd..5bd309cd 100644 --- a/umap/static/umap/js/umap.forms.js +++ b/umap/static/umap/js/umap.forms.js @@ -513,25 +513,16 @@ L.FormBuilder.BlurInput.include({ }) L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({ - type: function () { - return 'hidden' - }, - build: function () { L.FormBuilder.BlurInput.prototype.build.call(this) - this.parentContainer = L.DomUtil.create( - 'div', - 'umap-form-iconfield', - this.parentNode - ) - this.buttonsContainer = L.DomUtil.create('div', '', this.parentContainer) - this.pictogramsContainer = L.DomUtil.create( - 'div', - 'umap-pictogram-list', - this.parentContainer - ) - this.input.type = 'hidden' + // Try to guess if the icon content has been customized, and if yes + // directly display the field + this.input.type = this.value() && !this.value().startsWith('/') ? 'text' : 'hidden' this.input.placeholder = L._('Symbol or url') + this.buttonsContainer = L.DomUtil.create('div', '') + this.pictogramsContainer = L.DomUtil.create('div', 'umap-pictogram-list') + L.DomUtil.before(this.input, this.buttonsContainer) + L.DomUtil.before(this.input, this.pictogramsContainer) this.udpatePreview() this.on('define', this.fetchIconList) }, @@ -624,7 +615,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({ this ) const customButton = L.DomUtil.create('a', '', this.pictogramsContainer) - customButton.textContent = "> " + L._('Free content (advanced)') + customButton.textContent = L._('Toggle direct input (advanced)') customButton.href = '#' customButton.style.display = 'block' customButton.style.clear = 'both' @@ -633,8 +624,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({ customButton, 'click', function (e) { - this.input.type = 'text' - this.pictogramsContainer.innerHTML = '' + this.input.type = this.input.type === 'text' ? 'hidden' : 'text' }, this ) @@ -691,7 +681,7 @@ L.FormBuilder.FacetSearch = L.FormBuilder.Element.extend({ }, buildLabel: function () { - this.label = L.DomUtil.add('h5', '', this.parentNode, this.options.label); + this.label = L.DomUtil.add('h5', '', this.parentNode, this.options.label) }, buildLi: function (value) { @@ -708,7 +698,7 @@ L.FormBuilder.FacetSearch = L.FormBuilder.Element.extend({ }, toJS: function () { - return [...this.ul.querySelectorAll('input:checked')].map(i => i.dataset.value) + return [...this.ul.querySelectorAll('input:checked')].map((i) => i.dataset.value) }, }) From ce7575c5eb2fbb2b4e314481ff6add193b283e9c Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 5 Sep 2023 10:29:44 +0200 Subject: [PATCH 6/8] But back icon preview --- umap/static/umap/base.css | 1 + umap/static/umap/js/umap.forms.js | 12 ++++++++---- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css index 5522f024..160a279a 100644 --- a/umap/static/umap/base.css +++ b/umap/static/umap/base.css @@ -399,6 +399,7 @@ input.switch:checked ~ label:after { padding-top: 5px; margin-top: 5px; } +.umap-field-iconUrl .action-button, .inheritable .define, .inheritable .undefine { float: right; diff --git a/umap/static/umap/js/umap.forms.js b/umap/static/umap/js/umap.forms.js index 5bd309cd..2597fcfc 100644 --- a/umap/static/umap/js/umap.forms.js +++ b/umap/static/umap/js/umap.forms.js @@ -513,6 +513,10 @@ L.FormBuilder.BlurInput.include({ }) L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({ + type: function () { + return 'hidden' + }, + build: function () { L.FormBuilder.BlurInput.prototype.build.call(this) // Try to guess if the icon content has been customized, and if yes @@ -532,7 +536,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({ }, udpatePreview: function () { - if (L.Util.hasVar(this.value())) { + if (!L.Util.hasVar(this.value())) { // Do not try to render URL with variables if (this.isUrl()) { const img = L.DomUtil.create( @@ -552,8 +556,8 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({ L.DomEvent.on(el, 'click', this.fetchIconList, this) } } - this.button = L.DomUtil.create('a', 'button', this.buttonsContainer) - this.button.textContent = this.value() ? L._('Change symbol') : L._('Add symbol') + this.button = L.DomUtil.create('a', 'button action-button', this.buttonsContainer) + this.button.textContent = this.value() ? L._('Change') : L._('Add') this.button.href = '#' L.DomEvent.on(this.button, 'click', L.DomEvent.stop).on( this.button, @@ -600,7 +604,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({ for (const idx in data.pictogram_list) { this.addIconPreview(data.pictogram_list[idx]) } - const closeButton = L.DomUtil.create('a', 'button', this.pictogramsContainer) + const closeButton = L.DomUtil.create('a', 'button action-button', this.pictogramsContainer) closeButton.textContent = L._('Close') closeButton.href = '#' closeButton.style.display = 'block' From d72ae3fc345c92fa074bf8b6d0d54521efafe079 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 5 Sep 2023 10:55:01 +0200 Subject: [PATCH 7/8] Very minimal search input for icons list fix #1302 --- umap/static/umap/js/umap.forms.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/umap/static/umap/js/umap.forms.js b/umap/static/umap/js/umap.forms.js index 2597fcfc..0d54bc5a 100644 --- a/umap/static/umap/js/umap.forms.js +++ b/umap/static/umap/js/umap.forms.js @@ -575,7 +575,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({ img = L.DomUtil.create('img', '', container) img.src = value if (pictogram.name && pictogram.attribution) { - img.title = `${pictogram.name} — © ${pictogram.attribution}` + container.title = `${pictogram.name} — © ${pictogram.attribution}` } L.DomEvent.on( container, @@ -598,9 +598,22 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({ this.udpatePreview() }, + search: function (e) { + const icons = [...this.parentNode.querySelectorAll('.umap-icon-choice')], + search = this.searchInput.value.toLowerCase() + icons.forEach((el) => { + if (el.title.toLowerCase().indexOf(search) != -1) el.style.display = 'block' + else el.style.display = 'none' + }) + }, + buildIconList: function (data) { this.pictogramsContainer.innerHTML = '' this.buttonsContainer.innerHTML = '' + this.searchInput = L.DomUtil.create('input', '', this.pictogramsContainer) + this.searchInput.type = 'search' + this.searchInput.placeholder = L._('Search') + L.DomEvent.on(this.searchInput, 'input', this.search, this) for (const idx in data.pictogram_list) { this.addIconPreview(data.pictogram_list[idx]) } From 4009e759dca62cf384b48e11347eda9710aa1478 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 5 Sep 2023 11:21:17 +0200 Subject: [PATCH 8/8] Prevent HTML blinking when loading icons list --- umap/static/umap/js/umap.forms.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/umap/static/umap/js/umap.forms.js b/umap/static/umap/js/umap.forms.js index 0d54bc5a..587549a5 100644 --- a/umap/static/umap/js/umap.forms.js +++ b/umap/static/umap/js/umap.forms.js @@ -532,7 +532,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({ }, isUrl: function () { - return this.value().indexOf('/') !== -1 + return this.value() && this.value().indexOf('/') !== -1 }, udpatePreview: function () { @@ -608,8 +608,6 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({ }, buildIconList: function (data) { - this.pictogramsContainer.innerHTML = '' - this.buttonsContainer.innerHTML = '' this.searchInput = L.DomUtil.create('input', '', this.pictogramsContainer) this.searchInput.type = 'search' this.searchInput.placeholder = L._('Search') @@ -648,6 +646,9 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({ }, fetchIconList: function (e) { + // Clean parent element before calling ajax, to prevent blinking + this.pictogramsContainer.innerHTML = '' + this.buttonsContainer.innerHTML = '' this.builder.map.get(this.builder.map.options.urls.pictogram_list_json, { callback: this.buildIconList, context: this,