Commit df1e94e2 authored by Jacques's avatar Jacques Committed by Jacques Erasmus

Migrate loading icon to be Pajamas compliant

Migrated the current loading icon to the new `gl-loading-icon`
parent cae1331b
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
import $ from 'jquery'; import $ from 'jquery';
import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown'; import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
import { loadingIconForLegacyJS } from '~/loading_icon_for_legacy_js';
export default class TemplateSelector { export default class TemplateSelector {
constructor({ dropdown, data, pattern, wrapper, editor, $input } = {}) { constructor({ dropdown, data, pattern, wrapper, editor, $input } = {}) {
...@@ -10,10 +11,9 @@ export default class TemplateSelector { ...@@ -10,10 +11,9 @@ export default class TemplateSelector {
this.dropdown = dropdown; this.dropdown = dropdown;
this.$dropdownContainer = wrapper; this.$dropdownContainer = wrapper;
this.$filenameInput = $input || $('#file_name'); this.$filenameInput = $input || $('#file_name');
this.$dropdownIcon = $('.dropdown-menu-toggle-icon', dropdown); this.dropdownIcon = dropdown[0].querySelector('.dropdown-menu-toggle-icon');
this.$loadingIcon = $( this.loadingIcon = loadingIconForLegacyJS({ classes: ['gl-display-none'] });
'<div class="gl-spinner gl-spinner-orange gl-spinner-sm gl-absolute gl-top-3 gl-right-3 gl-display-none"></div>', this.dropdownIcon.parentNode.insertBefore(this.loadingIcon, this.dropdownIcon.nextSibling);
).insertAfter(this.$dropdownIcon);
this.initDropdown(dropdown, data); this.initDropdown(dropdown, data);
this.listenForFilenameInput(); this.listenForFilenameInput();
...@@ -100,12 +100,12 @@ export default class TemplateSelector { ...@@ -100,12 +100,12 @@ export default class TemplateSelector {
} }
startLoadingSpinner() { startLoadingSpinner() {
this.$loadingIcon.removeClass('gl-display-none'); this.loadingIcon.classList.remove('gl-display-none');
this.$dropdownIcon.addClass('gl-display-none'); this.dropdownIcon.classList.add('gl-display-none');
} }
stopLoadingSpinner() { stopLoadingSpinner() {
this.$loadingIcon.addClass('gl-display-none'); this.loadingIcon.classList.add('gl-display-none');
this.$dropdownIcon.removeClass('gl-display-none'); this.dropdownIcon.classList.remove('gl-display-none');
} }
} }
...@@ -68,7 +68,10 @@ export default { ...@@ -68,7 +68,10 @@ export default {
data-toggle="dropdown" data-toggle="dropdown"
> >
<span class="dropdown-toggle-text">{{ __('Choose a template') }}</span> <span class="dropdown-toggle-text">{{ __('Choose a template') }}</span>
<gl-icon name="chevron-down" class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500" /> <gl-icon
name="chevron-down"
class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500 dropdown-menu-toggle-icon"
/>
</button> </button>
<div class="dropdown-menu dropdown-select"> <div class="dropdown-menu dropdown-select">
<div class="dropdown-title gl-display-flex gl-justify-content-center"> <div class="dropdown-title gl-display-flex gl-justify-content-center">
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment