diff options
author | Fatih Acet <acetfatih@gmail.com> | 2019-03-01 01:26:34 +0000 |
---|---|---|
committer | Fatih Acet <acetfatih@gmail.com> | 2019-03-01 01:26:34 +0000 |
commit | f455aeebea7eac3376a1d57c5aef113ed8448c26 (patch) | |
tree | 32b0ec1db5b51e51760427d40475b85a631fb5bd /app/assets | |
parent | 165e0cfb214047249640ef5c3ca22c1b26035943 (diff) | |
parent | c5c4b62b28dec900beb039ff4724c60609afa557 (diff) | |
download | gitlab-ce-f455aeebea7eac3376a1d57c5aef113ed8448c26.tar.gz |
Merge branch '57734-improve-label-dropdown-selection-performance' into 'master'
Improve labels select rendering
Closes #48230 and #57734
See merge request gitlab-org/gitlab-ce!25281
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/gl_dropdown.js | 18 | ||||
-rw-r--r-- | app/assets/javascripts/labels_select.js | 32 |
2 files changed, 21 insertions, 29 deletions
diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js index a8ac2f510a4..27d8669b256 100644 --- a/app/assets/javascripts/gl_dropdown.js +++ b/app/assets/javascripts/gl_dropdown.js @@ -656,23 +656,7 @@ GitLabDropdown = (function() { if (this.options.renderMenu) { return this.options.renderMenu(html); } else { - var ul = document.createElement('ul'); - - for (var i = 0; i < html.length; i += 1) { - var el = html[i]; - - if (el instanceof $) { - el = el.get(0); - } - - if (typeof el === 'string') { - ul.innerHTML += el; - } else { - ul.appendChild(el); - } - } - - return ul; + return $('<ul>').append(html); } }; diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js index f7a611fbca0..cca4927c115 100644 --- a/app/assets/javascripts/labels_select.js +++ b/app/assets/javascripts/labels_select.js @@ -199,8 +199,8 @@ export default class LabelsSelect { .catch(() => flash(__('Error fetching labels.'))); }, renderRow: function(label, instance) { - var $a, - $li, + var linkEl, + listItemEl, color, colorEl, indeterminate, @@ -209,12 +209,11 @@ export default class LabelsSelect { spacing, i, marked, - dropdownName, dropdownValue; - $li = $('<li>'); - $a = $('<a href="#">'); + selectedClass = []; removesAll = label.id <= 0 || label.id == null; + if ($dropdown.hasClass('js-filter-bulk-update')) { indeterminate = $dropdown.data('indeterminate') || []; marked = $dropdown.data('marked') || []; @@ -233,7 +232,6 @@ export default class LabelsSelect { } } else { if (this.id(label)) { - dropdownName = $dropdown.data('fieldName'); dropdownValue = this.id(label) .toString() .replace(/'/g, "\\'"); @@ -241,7 +239,7 @@ export default class LabelsSelect { if ( $form.find( "input[type='hidden'][name='" + - dropdownName + + this.fieldName + "'][value='" + dropdownValue + "']", @@ -251,24 +249,34 @@ export default class LabelsSelect { } } - if ($dropdown.hasClass('js-multiselect') && removesAll) { + if (this.multiSelect && removesAll) { selectedClass.push('dropdown-clear-active'); } } + if (label.color) { colorEl = "<span class='dropdown-label-box' style='background: " + label.color + "'></span>"; } else { colorEl = ''; } + + linkEl = document.createElement('a'); + linkEl.href = '#'; + // We need to identify which items are actually labels if (label.id) { selectedClass.push('label-item'); - $a.attr('data-label-id', label.id); + linkEl.dataset.labelId = label.id; } - $a.addClass(selectedClass.join(' ')).html(`${colorEl} ${_.escape(label.title)}`); - // Return generated html - return $li.html($a).prop('outerHTML'); + + linkEl.className = selectedClass.join(' '); + linkEl.innerHTML = `${colorEl} ${_.escape(label.title)}`; + + listItemEl = document.createElement('li'); + listItemEl.appendChild(linkEl); + + return listItemEl; }, search: { fields: ['title'], |