Commit f117aa36 authored by Jarek Ostrowski's avatar Jarek Ostrowski

Migrate spinner to use gl-spinner class

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/58706
parent bafa3cbe
......@@ -42,7 +42,7 @@ export default class CreateMergeRequestDropdown {
this.refInput = this.wrapperEl.querySelector('.js-ref');
this.refMessage = this.wrapperEl.querySelector('.js-ref-message');
this.unavailableButton = this.wrapperEl.querySelector('.unavailable');
this.unavailableButtonSpinner = this.unavailableButton.querySelector('.spinner');
this.unavailableButtonSpinner = this.unavailableButton.querySelector('.gl-spinner');
this.unavailableButtonText = this.unavailableButton.querySelector('.text');
this.branchCreated = false;
......
......@@ -1732,7 +1732,7 @@ export default class Notes {
// Submission failed, revert back to original note
$noteBodyText.html(escape(cachedNoteBodyText));
$editingNote.removeClass('being-posted fade-in');
$editingNote.find('.spinner').remove();
$editingNote.find('.gl-spinner').remove();
// Show Flash message about failure
this.updateNoteError();
......
......@@ -223,14 +223,14 @@ export default class UserTabs {
.then((data) => UserTabs.renderActivityCalendar(data, $calendarWrap))
.catch(() => {
const cWrap = $calendarWrap[0];
cWrap.querySelector('.spinner').classList.add('invisible');
cWrap.querySelector('.gl-spinner').classList.add('invisible');
cWrap.querySelector('.user-calendar-error').classList.remove('invisible');
cWrap
.querySelector('.user-calendar-error .js-retry-load')
.addEventListener('click', (e) => {
e.preventDefault();
cWrap.querySelector('.user-calendar-error').classList.add('invisible');
cWrap.querySelector('.spinner').classList.remove('invisible');
cWrap.querySelector('.gl-spinner').classList.remove('invisible');
this.loadActivityCalendar();
});
});
......
......@@ -337,7 +337,7 @@
.btn-loading {
&:not(.disabled) {
.spinner {
.gl-spinner {
display: none;
}
}
......
......@@ -147,7 +147,7 @@
position: absolute;
}
.spinner {
.gl-spinner {
position: absolute;
top: 9px;
right: 8px;
......
......@@ -11,7 +11,7 @@
&::before {
content: '';
@include spinner(32px, 3px);
@include spinner-deprecated(32px, 3px);
@include gl-absolute;
@include gl-z-index-1;
}
......
@mixin spinner-color($color) {
/**
* Do not use these spinner mixins. Rely on GitLab UI
* GlLoadingIcon component instead.
*/
@mixin spinner-color-deprecated($color) {
border-color: rgba($color, 0.25);
border-top-color: $color;
}
@mixin spinner-size($size, $border-width) {
@mixin spinner-size-deprecated($size, $border-width) {
width: $size;
height: $size;
border-width: $border-width;
@include webkit-prefix(transform-origin, 50% 50% calc((#{$size} / 2) + #{$border-width}));
}
@keyframes spinner-rotate {
@keyframes spinner-rotate-deprecated {
0% {
transform: rotate(0);
}
......@@ -20,47 +24,16 @@
}
}
@mixin spinner($size: 16px, $border-width: 2px, $color: $gray-700) {
@mixin spinner-deprecated($size: 16px, $border-width: 2px, $color: $gray-700) {
border-radius: 50%;
position: relative;
margin: 0 auto;
animation-name: spinner-rotate;
animation-name: spinner-rotate-deprecated;
animation-duration: 0.6s;
animation-timing-function: linear;
animation-iteration-count: infinite;
border-style: solid;
display: inline-flex;
@include spinner-size($size, $border-width);
@include spinner-color($color);
}
.spinner {
@include spinner;
&.spinner-md {
@include spinner-size(32px, 3px);
}
&.spinner-lg {
@include spinner-size(64px, 4px);
}
&.spinner-dark {
@include spinner-color($gray-700);
}
&.spinner-light {
@include spinner-color($white);
}
}
.btn {
.spinner,
.gl-spinner {
vertical-align: text-bottom;
}
}
.spin {
animation: spinner-rotate 2s infinite linear;
@include spinner-size-deprecated($size, $border-width);
@include spinner-color-deprecated($color);
}
......@@ -151,7 +151,7 @@
background-color: var(--gray-50, $gray-50);
}
.spinner,
.gl-spinner,
svg {
width: $ci-action-dropdown-svg-size;
height: $ci-action-dropdown-svg-size;
......
......@@ -409,7 +409,7 @@
fill: var(--gray-500, $gray-500);
}
.spinner {
.gl-spinner {
top: 2px;
}
......
......@@ -27,7 +27,7 @@
%p.mb-2= s_('%{usage_ping_link_start}Learn more%{usage_ping_link_end} about what information is shared with GitLab Inc.').html_safe % { usage_ping_link_start: usage_ping_link_start, usage_ping_link_end: '</a>'.html_safe }
%button.gl-button.btn.btn-default.js-payload-preview-trigger{ type: 'button', data: { payload_selector: ".#{payload_class}" } }
.spinner.js-spinner.gl-display-none.gl-mr-2
.gl-spinner.js-spinner.gl-display-none.gl-mr-2
.js-text.d-inline= _('Preview payload')
%pre.usage-data.js-syntax-highlight.code.highlight.mt-2.d-none{ class: payload_class, data: { endpoint: usage_data_admin_application_settings_path(format: :html) } }
- else
......
......@@ -3,7 +3,7 @@
%p.js-error-reason
.hidden.js-cluster-creating.bs-callout.bs-callout-info{ role: 'alert' }
%span.spinner.spinner-dark.spinner-sm{ 'aria-label': 'Loading' }
%span.gl-spinner.gl-spinner-dark{ 'aria-label': 'Loading' }
%span.gl-ml-2= s_('ClusterIntegration|Kubernetes cluster is being created...')
.hidden.row.js-cluster-api-unreachable.gl-alert.gl-alert-warning{ role: 'alert' }
......
......@@ -6,4 +6,4 @@
.content_list
.loading
.spinner.spinner-md
.gl-spinner.gl-spinner-md
.js-groups-list-holder
#js-groups-tree{ data: { hide_projects: 'true', endpoint: dashboard_groups_path(format: :json), path: dashboard_groups_path, form_sel: 'form#group-filter-form', filter_sel: '.js-groups-list-filter', holder_sel: '.js-groups-list-holder', dropdown_sel: '.js-group-filter-dropdown-wrap' } }
.loading-container.text-center.prepend-top-20
.spinner.spinner-md
.gl-spinner.gl-spinner-md
......@@ -50,12 +50,12 @@
.todo-actions
= link_to dashboard_todo_path(todo), method: :delete, class: 'gl-button btn btn-default btn-loading d-flex align-items-center js-done-todo', data: { href: dashboard_todo_path(todo) } do
Done
%span.spinner.ml-1
%span.gl-spinner.ml-1
= link_to restore_dashboard_todo_path(todo), method: :patch, class: 'gl-button btn btn-default btn-loading d-flex align-items-center js-undo-todo hidden', data: { href: restore_dashboard_todo_path(todo) } do
Undo
%span.spinner.ml-1
%span.gl-spinner.ml-1
- else
.todo-actions
= link_to restore_dashboard_todo_path(todo), method: :patch, class: 'gl-button btn btn-default btn-loading d-flex align-items-center js-add-todo', data: { href: restore_dashboard_todo_path(todo) } do
Add a to do
%span.spinner.ml-1
%span.gl-spinner.ml-1
......@@ -29,10 +29,10 @@
.gl-mr-3
= link_to destroy_all_dashboard_todos_path(todos_filter_params), class: 'gl-button btn btn-default btn-loading align-items-center js-todos-mark-all', method: :delete, data: { href: destroy_all_dashboard_todos_path(todos_filter_params) } do
Mark all as done
%span.spinner.ml-1
%span.gl-spinner.ml-1
= link_to bulk_restore_dashboard_todos_path, class: 'gl-button btn btn-default btn-loading align-items-center js-todos-undo-all hidden', method: :patch , data: { href: bulk_restore_dashboard_todos_path(todos_filter_params) } do
Undo mark all as done
%span.spinner.ml-1
%span.gl-spinner.ml-1
.todos-filters
.issues-details-filters.row-content-block.second-block
......
.js-groups-list-holder
#js-groups-tree{ data: { hide_projects: 'true', endpoint: explore_groups_path(format: :json), path: explore_groups_path, form_sel: 'form#group-filter-form', filter_sel: '.js-groups-list-filter', holder_sel: '.js-groups-list-holder', dropdown_sel: '.js-group-filter-dropdown-wrap' } }
.loading-container.text-center.prepend-top-20
.spinner.spinner-md
.gl-spinner.gl-spinner-md
......@@ -6,4 +6,4 @@
.content_list
.loading
.spinner.spinner-md
.gl-spinner.gl-spinner-md
......@@ -5,4 +5,4 @@
%ul.content-list{ data: { hide_projects: 'false', group_id: group.id, path: group_path(group) } }
.js-groups-list-holder
.loading-container.text-center.prepend-top-20
.spinner.spinner-md
.gl-spinner.gl-spinner-md
......@@ -5,4 +5,4 @@
%ul.content-list{ data: { hide_projects: 'false', group_id: group.id, path: group_path(group) } }
.js-groups-list-holder
.loading-container.text-center.prepend-top-20
.spinner.spinner-md
.gl-spinner.gl-spinner-md
......@@ -5,4 +5,4 @@
%section{ data: { hide_projects: 'false', group_id: group.id, path: group_path(group) } }
.js-groups-list-holder{ data: { show_schema_markup: 'true'} }
.loading-container.text-center.prepend-top-20
.spinner.spinner-md
.gl-spinner.gl-spinner-md
......@@ -64,19 +64,19 @@
#tab-members.tab-pane{ class: ('active' unless invited_active) }
.js-group-members-list{ data: group_members_list_data_attributes(@group, @members, { param_name: :page, params: { invited_members_page: nil, search_invited: nil } }) }
.loading
.spinner.spinner-md
.gl-spinner.gl-spinner-md
- if @group.shared_with_group_links.any?
#tab-groups.tab-pane
.js-group-group-links-list{ data: group_group_links_list_data_attributes(@group) }
.loading
.spinner.spinner-md
.gl-spinner.gl-spinner-md
- if show_invited_members
#tab-invited-members.tab-pane{ class: ('active' if invited_active) }
.js-group-invited-members-list{ data: group_members_list_data_attributes(@group, @invited_members, { param_name: :invited_members_page, params: { page: nil } }) }
.loading
.spinner.spinner-md
.gl-spinner.gl-spinner-md
- if show_access_requests
#tab-access-requests.tab-pane
.js-group-access-requests-list{ data: group_members_list_data_attributes(@group, @requesters) }
.loading
.spinner.spinner-md
.gl-spinner.gl-spinner-md
......@@ -4,7 +4,7 @@
.save-group-loader
.center
%h2
%i.loading.spinner.spinner-sm
%i.loading.gl-spinner
= page_title
%p
= s_('GroupImport|Please wait while we import the group for you. Refresh at will.')
......@@ -6,5 +6,5 @@
#ide.ide-loading{ data: ide_data }
.text-center
.spinner.spinner-md
.gl-spinner.gl-spinner-md
%h2.clgray= _('Loading the GitLab IDE...')
......@@ -11,4 +11,4 @@
.content_list.project-activity{ :"data-href" => activity_project_path(@project) }
.loading
.spinner.spinner-md
.gl-spinner.gl-spinner-md
......@@ -21,7 +21,7 @@
.form-actions
= button_tag class: 'btn gl-button btn-confirm btn-upload-file', id: 'submit-all', type: 'button' do
.spinner.spinner-sm.gl-mr-2.js-loading-icon.hidden
.gl-spinner.gl-mr-2.js-loading-icon.hidden
= button_title
= link_to _("Cancel"), '#', class: "btn gl-button btn-default btn-cancel", "data-dismiss" => "modal"
......
......@@ -37,13 +37,13 @@
- @commit.parents.each do |parent|
= link_to parent.short_id, project_commit_path(@project, parent), class: "commit-sha"
.commit-info.branches
.spinner.vertical-align-middle
.gl-spinner.vertical-align-middle
.well-segment.merge-request-info
.icon-container
= custom_icon('mr_bold')
%span.commit-info.merge-requests{ 'data-project-commit-path' => merge_requests_project_commit_path(@project, @commit.id, format: :json) }
.spinner.vertical-align-middle
.gl-spinner.vertical-align-middle
- if can?(current_user, :read_pipeline, @last_pipeline)
.well-segment.pipeline-info
......
......@@ -34,7 +34,7 @@
- url = url_for(safe_params.merge(action: 'diff_files'))
.js-diffs-batch{ data: { diff_files_path: url } }
.text-center
%span.spinner.spinner-md
%span.gl-spinner.gl-spinner-md
- else
= render partial: 'projects/diffs/file', collection: diff_files, as: :diff_file, locals: { project: diffs.project, environment: environment, diff_page_context: diff_page_context }
......
......@@ -106,7 +106,7 @@
.save-project-loader.hide
.center
%h2
.spinner.spinner-md.align-text-bottom
.gl-spinner.gl-spinner-md.align-text-bottom
= _('Saving project.')
%p= _('Please wait a moment, this page will automatically refresh when ready.')
......
......@@ -13,13 +13,13 @@
.create-mr-dropdown-wrap.d-inline-block.full-width-mobile.js-create-mr{ data: { project_path: @project.full_path, project_id: @project.id, can_create_path: can_create_path, create_mr_path: create_mr_path, create_branch_path: create_branch_path, refs_path: refs_path, is_confidential: can_create_confidential_merge_request?.to_s } }
.btn-group.unavailable
%button.gl-button.btn{ type: 'button', disabled: 'disabled' }
.spinner.align-text-bottom.gl-button-icon.hide
.gl-spinner.align-text-bottom.gl-button-icon.hide
%span.text
Checking branch availability…
.btn-group.available.hidden
%button.gl-button.btn.js-create-merge-request.btn-confirm{ type: 'button', data: { action: data_action } }
.spinner.js-spinner.gl-mr-2.gl-display-none
.gl-spinner.js-spinner.gl-mr-2.gl-display-none
= value
%button.gl-button.btn.btn-confirm.btn-icon.dropdown-toggle.create-merge-request-dropdown-toggle.js-dropdown-toggle{ type: 'button', data: { dropdown: { trigger: '#create-merge-request-dropdown' }, display: 'static' } }
......
......@@ -30,7 +30,7 @@
= dropdown_loading
.card-footer
.text-center
.js-source-loading.mt-1.spinner.spinner-sm
.js-source-loading.mt-1.gl-spinner
%ul.list-unstyled.mr_source_commit
.col-lg-6
......@@ -59,7 +59,7 @@
= dropdown_loading
.card-footer
.text-center
.js-target-loading.mt-1.spinner.spinner-sm
.js-target-loading.mt-1.gl-spinner
%ul.list-unstyled.mr_target_commit
- if @merge_request.errors.any?
......
......@@ -48,4 +48,4 @@
.mr-loading-status
.loading.hide
.spinner.spinner-md
.gl-spinner.gl-spinner-md
......@@ -85,7 +85,7 @@
.mr-loading-status
.loading.hide
.spinner.spinner-md
.gl-spinner.gl-spinner-md
= render 'shared/issuable/sidebar', issuable_sidebar: @issuable_sidebar, assignees: @merge_request.assignees, reviewers: @merge_request.reviewers, source_branch: @merge_request.source_branch
......
......@@ -4,7 +4,7 @@
.form-group.js-ssh-host-keys-section{ class: ('collapse' unless mirror.ssh_mirror_url?) }
%button.btn.gl-button.btn-inverted.btn-secondary.inline.js-detect-host-keys.gl-mr-3{ type: 'button', data: { qa_selector: 'detect_host_keys' } }
.js-spinner.d-none.spinner.mr-1
.js-spinner.d-none.gl-spinner.mr-1
= _('Detect host keys')
.fingerprint-ssh-info.js-fingerprint-ssh-info.gl-mt-3.gl-mb-3{ class: ('collapse' unless mirror.ssh_mirror_url?) }
%label.label-bold
......
......@@ -17,4 +17,4 @@
- if @commit
.network-graph.gl-bg-white.gl-overflow-scroll.gl-overflow-x-hidden{ data: { url: @url, commit_url: @commit_url, ref: @ref, commit_id: @commit.id } }
.text-center.gl-mt-3
.spinner.spinner-md
.gl-spinner.gl-spinner-md
......@@ -75,7 +75,7 @@
.save-project-loader.d-none
.center
%h2
.spinner.spinner-md.align-text-bottom
.gl-spinner.gl-spinner-md.align-text-bottom
= s_('ProjectsNew|Creating project & repository.')
%p
= s_('ProjectsNew|Please wait a moment, this page will automatically refresh when ready.')
......@@ -81,19 +81,19 @@
#tab-members.tab-pane{ class: ('active' unless groups_tab_active?) }
.js-project-members-list{ data: project_members_list_data_attributes(@project, @project_members, { param_name: :page, params: { search_groups: nil } }) }
.loading
.spinner.spinner-md
.gl-spinner.gl-spinner-md
- if show_groups?(@group_links)
#tab-groups.tab-pane{ class: ('active' if groups_tab_active?) }
.js-project-group-links-list{ data: project_group_links_list_data_attributes(@project, @group_links) }
.loading
.spinner.spinner-md
.gl-spinner.gl-spinner-md
- if show_invited_members?(@project, @invited_members)
#tab-invited-members.tab-pane
.js-project-invited-members-list{ data: project_members_list_data_attributes(@project, @invited_members) }
.loading
.spinner.spinner-md
.gl-spinner.gl-spinner-md
- if show_access_requests?(@project, @requesters)
#tab-access-requests.tab-pane
.js-project-access-requests-list{ data: project_members_list_data_attributes(@project, @requesters) }
.loading
.spinner.spinner-md
.gl-spinner.gl-spinner-md
......@@ -7,6 +7,6 @@
milestone_merge_request_count: @milestone.merge_requests.count },
disabled: true }
= _('Delete')
.spinner.js-loading-icon.hidden
.gl-spinner.js-loading-icon.hidden
#js-delete-milestone-modal
.text-center.gl-mt-3
.spinner.spinner-md
.gl-spinner.gl-spinner-md
......@@ -3,7 +3,7 @@
.row.d-none.d-sm-flex
.col-12.calendar-block.gl-my-3
.user-calendar.light{ data: { calendar_path: user_calendar_path(@user, :json), calendar_activities_path: user_calendar_activities_path, utc_offset: Time.zone.utc_offset } }
.spinner.spinner-md.gl-my-8
.gl-spinner.gl-spinner-md.gl-my-8
.user-calendar-error.invisible
= _('There was an error loading users activity calendar.')
%a.js-retry-load{ href: '#' }
......@@ -20,7 +20,7 @@
= link_to s_('UserProfile|View all'), user_activity_path, class: "hide js-view-all"
.overview-content-list{ data: { href: user_activity_path } }
.center.light.loading
.spinner.spinner-md
.gl-spinner.gl-spinner-md
- unless Feature.enabled?(:security_auto_fix) && @user.bot?
.col-md-12.col-lg-6
......@@ -32,4 +32,4 @@
= link_to s_('UserProfile|View all'), user_projects_path, class: "hide js-view-all"
.overview-content-list{ data: { href: user_projects_path } }
.center.light.loading
.spinner.spinner-md
.gl-spinner.gl-spinner-md
......@@ -169,7 +169,7 @@
= s_('UserProfile|Most Recent Activity')
.content_list{ data: { href: user_activity_path } }
.loading
.spinner.spinner-md
.gl-spinner.gl-spinner-md
- unless @user.bot?
- if profile_tab?(:groups)
#groups.tab-pane
......@@ -200,7 +200,7 @@
-# This tab is always loaded via AJAX
.loading.hide
.spinner.spinner-md
.gl-spinner.gl-spinner-md
- if profile_tabs.empty?
.svg-content
......
......@@ -19,7 +19,7 @@
%p.mb-2= s_('%{link_start}Learn more%{link_end} about what information is shared with GitLab Inc.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
%button.btn.gl-button.btn-default.js-payload-preview-trigger{ type: 'button', data: { payload_selector: ".#{payload_class}" } }
.spinner.js-spinner.gl-display-none.gl-mr-2
.gl-spinner.js-spinner.gl-display-none.gl-mr-2
.js-text.d-inline= _('Preview payload')
%pre.usage-data.js-syntax-highlight.code.highlight.mt-2.d-none{ class: payload_class, data: { endpoint: seat_link_payload_admin_application_settings_path(format: :html) } }
- else
......
......@@ -16,4 +16,4 @@
.well-segment.borderless.col-12.col-lg-9.p-0
= render 'scim_row', value: @scim_token_url, field: 'scim_endpoint_url', label_text: s_('GroupSAML|SCIM API endpoint URL'), show_clipboard: true
.gl-mt-3.text-center.js-scim-loading-container.d-none
.spinner
.gl-spinner
......@@ -23,10 +23,10 @@
= render partial: 'projects/project_templates/template', collection: Gitlab::ProjectTemplate.all + Gitlab::SampleDataTemplate.all
.project-templates-buttons.import-buttons.tab-pane.js-custom-instance-project-templates-tab-content#custom-instance-project-templates{ data: {initial_templates: user_available_project_templates_path(current_user)} }
.text-center.m-4
.spinner.spinner-md
.gl-spinner.gl-spinner-md
.project-templates-buttons.import-buttons.tab-pane.js-custom-group-project-templates-tab-content#custom-group-project-templates{ data: {initial_templates: user_available_group_templates_path(current_user, group_id: group_id)} }
.text-center.m-4
.spinner.spinner-md
.gl-spinner.gl-spinner-md
.project-fields-form
= render 'projects/project_templates/project_fields_form'
......
......@@ -16,7 +16,7 @@
.footer-block.row-content-block
%button.btn.gl-button.btn-confirm{ type: 'submit' }
.spinner.spinner-light
.gl-spinner.gl-spinner-light
%span
Save changes
&nbsp;
......
---
title: Migrate spinner class to gl-spinner class
merge_request: 58706
author:
type: changed
......@@ -30,7 +30,7 @@ RSpec.describe 'project commit pipelines', :js do
wait_for_requests
page.within('.merge-request-info') do
expect(page).not_to have_selector '.spinner'
expect(page).not_to have_selector '.gl-spinner'
expect(page).to have_content 'No related merge requests found'
end
end
......
......@@ -15,7 +15,7 @@ describe('CreateMergeRequestDropdown', () => {
<div id="dummy-wrapper-element">
<div class="available"></div>
<div class="unavailable">
<div class="spinner"></div>
<div class="gl-spinner"></div>
<div class="text"></div>
</div>
<div class="js-ref"></div>
......
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