diff --git a/app/assets/javascripts/notifications_form.js b/app/assets/javascripts/notifications_form.js index 0d1b95f75f87fa7db6a5bdde868ed16563be46b0..1b12fece23a465850d76809bbc523210d34245dd 100644 --- a/app/assets/javascripts/notifications_form.js +++ b/app/assets/javascripts/notifications_form.js @@ -22,12 +22,8 @@ export default class NotificationsForm { // eslint-disable-next-line class-methods-use-this showCheckboxLoadingSpinner($parent) { - $parent - .addClass('is-loading') - .find('.custom-notification-event-loading') - .removeClass('fa-check') - .addClass('spinner align-middle') - .removeClass('is-done'); + $parent.find('.is-loading').removeClass('gl-display-none'); + $parent.find('.is-done').addClass('gl-display-none'); } saveEvent($checkbox, $parent) { @@ -39,14 +35,11 @@ export default class NotificationsForm { .then(({ data }) => { $checkbox.enable(); if (data.saved) { - $parent - .find('.custom-notification-event-loading') - .toggleClass('spinner fa-check is-done align-middle'); + $parent.find('.is-loading').addClass('gl-display-none'); + $parent.find('.is-done').removeClass('gl-display-none'); + setTimeout(() => { - $parent - .removeClass('is-loading') - .find('.custom-notification-event-loading') - .toggleClass('spinner fa-check is-done align-middle'); + $parent.find('.is-done').addClass('gl-display-none'); }, 2000); } }) diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 9f80d7b57ab4cefe8e74614e91db6bd512d190df..09501d3713d9b8780e9c8df0077e4f7687b6107c 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -993,23 +993,6 @@ pre.light-well { } } -.custom-notifications-form { - .is-loading { - .custom-notification-event-loading { - display: inline-block; - } - } -} - -.custom-notification-event-loading { - display: none; - margin-left: 5px; - - &.is-done { - color: $green-600; - } -} - .project-refs-form .dropdown-menu, .dropdown-menu-projects { width: 300px; diff --git a/app/views/shared/notifications/_custom_notifications.html.haml b/app/views/shared/notifications/_custom_notifications.html.haml index 51b7da7dee8db5caf28e403bd9b379aeb58b2c33..946e3c67dcf11dd23cc75dc625910b402d28006d 100644 --- a/app/views/shared/notifications/_custom_notifications.html.haml +++ b/app/views/shared/notifications/_custom_notifications.html.haml @@ -30,4 +30,5 @@ %label.form-check-label{ for: field_id } %strong = notification_event_name(event) - .fa.custom-notification-event-loading.spinner + %span.spinner.is-loading.gl-vertical-align-middle.gl-display-none + = sprite_icon('check', css_class: 'is-done gl-display-none gl-vertical-align-middle gl-text-green-600') diff --git a/changelogs/unreleased/mw-replace-fa-icons-custom-notifications.yml b/changelogs/unreleased/mw-replace-fa-icons-custom-notifications.yml new file mode 100644 index 0000000000000000000000000000000000000000..573a72950fb5892d03b53eb1dda5064cc3516e52 --- /dev/null +++ b/changelogs/unreleased/mw-replace-fa-icons-custom-notifications.yml @@ -0,0 +1,5 @@ +--- +title: Replace fa-check icon in custom notifications +merge_request: 47288 +author: +type: changed