Commit f64a7da5 authored by Martin Wortschack's avatar Martin Wortschack

Merge branch 'tz-replace-jquery-fadeout' into 'master'

Replaced all jquery fade functions

See merge request gitlab-org/gitlab!48806
parents 9c3bfcb4 95adeb66
......@@ -27,7 +27,7 @@ export default class ImageFile {
initViewModes() {
const viewMode = viewModes[0];
$('.view-modes', this.file).removeClass('hide');
$('.view-modes', this.file).removeClass('gl-display-none');
$('.view-modes-menu', this.file).on('click', 'li', event => {
if (!$(event.currentTarget).hasClass('active')) {
return this.activateViewMode(event.currentTarget.className);
......@@ -42,12 +42,10 @@ export default class ImageFile {
.filter(`.${viewMode}`)
.addClass('active');
// eslint-disable-next-line no-jquery/no-fade
return $(`.view:visible:not(.${viewMode})`, this.file).fadeOut(200, () => {
// eslint-disable-next-line no-jquery/no-fade
$(`.view.${viewMode}`, this.file).fadeIn(200);
$(`.view:visible:not(.${viewMode})`, this.file).addClass('gl-display-none');
$(`.view.${viewMode}`, this.file).removeClass('gl-display-none');
return this.initView(viewMode);
});
}
initView(viewMode) {
......@@ -120,7 +118,7 @@ export default class ImageFile {
return this.requestImageInfo($('img', wrap), (width, height) => {
$('.image-info .meta-width', wrap).text(`${width}px`);
$('.image-info .meta-height', wrap).text(`${height}px`);
return $('.image-info', wrap).removeClass('hide');
return $('.image-info', wrap).removeClass('gl-display-none');
});
});
},
......
......@@ -119,20 +119,18 @@ class DueDateSelect {
}
updateIssueBoardIssue() {
// eslint-disable-next-line no-jquery/no-fade
this.$loading.fadeIn();
this.$loading.removeClass('gl-display-none');
this.$dropdown.trigger('loading.gl.dropdown');
this.$selectbox.hide();
this.$value.css('display', '');
const fadeOutLoader = () => {
// eslint-disable-next-line no-jquery/no-fade
this.$loading.fadeOut();
const hideLoader = () => {
this.$loading.addClass('gl-display-none');
};
boardsStore.detail.issue
.update(this.$dropdown.attr('data-issue-update'))
.then(fadeOutLoader)
.catch(fadeOutLoader);
.then(hideLoader)
.catch(hideLoader);
}
submitSelectedDate(isDropdown) {
......@@ -140,8 +138,7 @@ class DueDateSelect {
const hasDueDate = this.displayedDate !== __('None');
const displayedDateStyle = hasDueDate ? 'bold' : 'no-value';
// eslint-disable-next-line no-jquery/no-fade
this.$loading.removeClass('hidden').fadeIn();
this.$loading.removeClass('gl-display-none');
if (isDropdown) {
this.$dropdown.trigger('loading.gl.dropdown');
......@@ -164,8 +161,7 @@ class DueDateSelect {
}
this.$sidebarCollapsedValue.attr('data-original-title', tooltipText);
// eslint-disable-next-line no-jquery/no-fade
return this.$loading.fadeOut();
return this.$loading.addClass('gl-display-none');
});
}
}
......@@ -211,7 +207,8 @@ export default class DueDateSelectors {
initIssuableSelect() {
const $loading = $('.js-issuable-update .due_date')
.find('.block-loading')
.hide();
.removeClass('hidden')
.addClass('gl-display-none');
$('.js-due-date-select').each((i, dropdown) => {
const $dropdown = $(dropdown);
......
......@@ -64,8 +64,7 @@ export default class FilterableList {
return false;
}
// eslint-disable-next-line no-jquery/no-fade
$(this.listHolderElement).fadeTo(250, 0.5);
$(this.listHolderElement).addClass('gl-opacity-5');
this.isBusy = true;
......@@ -99,7 +98,6 @@ export default class FilterableList {
onFilterComplete() {
this.isBusy = false;
// eslint-disable-next-line no-jquery/no-fade
$(this.listHolderElement).fadeTo(250, 1);
$(this.listHolderElement).removeClass('gl-opacity-5');
}
}
......@@ -45,8 +45,7 @@ export default class LabelsSelect {
const $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon span');
const $value = $block.find('.value');
const $dropdownMenu = $dropdown.parent().find('.dropdown-menu');
// eslint-disable-next-line no-jquery/no-fade
const $loading = $block.find('.block-loading').fadeOut();
const $loading = $block.find('.block-loading').addClass('gl-display-none');
const fieldName = $dropdown.data('fieldName');
let initialSelected = $selectbox
.find(`input[name="${$dropdown.data('fieldName')}"]`)
......@@ -83,15 +82,13 @@ export default class LabelsSelect {
if (!selected.length) {
data[abilityName].label_ids = [''];
}
// eslint-disable-next-line no-jquery/no-fade
$loading.removeClass('hidden').fadeIn();
$loading.removeClass('gl-display-none');
$dropdown.trigger('loading.gl.dropdown');
axios
.put(issueUpdateURL, data)
.then(({ data }) => {
let template;
// eslint-disable-next-line no-jquery/no-fade
$loading.fadeOut();
$loading.addClass('gl-display-none');
$dropdown.trigger('loaded.gl.dropdown');
$selectbox.hide();
data.issueUpdateURL = issueUpdateURL;
......@@ -340,9 +337,8 @@ export default class LabelsSelect {
const { $el, e, isMarking } = clickEvent;
const label = clickEvent.selectedObj;
const fadeOutLoader = () => {
// eslint-disable-next-line no-jquery/no-fade
$loading.fadeOut();
const hideLoader = () => {
$loading.addClass('gl-display-none');
};
const page = $('body').attr('data-page');
......@@ -403,8 +399,7 @@ export default class LabelsSelect {
boardsStore.detail.issue.labels = labels;
}
// eslint-disable-next-line no-jquery/no-fade
$loading.fadeIn();
$loading.removeClass('gl-display-none');
const oldLabels = boardsStore.detail.issue.labels;
boardsStore.detail.issue
......@@ -420,8 +415,8 @@ export default class LabelsSelect {
.removeClass('is-active');
}
})
.then(fadeOutLoader)
.catch(fadeOutLoader);
.then(hideLoader)
.catch(hideLoader);
} else if (handleClick) {
e.preventDefault();
handleClick(label);
......
......@@ -136,10 +136,9 @@ function deferredInitialisation() {
$('.remove-row').on('ajax:success', function removeRowAjaxSuccessCallback() {
tooltips.dispose(this);
// eslint-disable-next-line no-jquery/no-fade
$(this)
.closest('li')
.fadeOut();
.addClass('gl-display-none!');
});
$('.js-remove-tr').on('ajax:before', function removeTRAjaxBeforeCallback() {
......@@ -147,10 +146,9 @@ function deferredInitialisation() {
});
$('.js-remove-tr').on('ajax:success', function removeTRAjaxSuccessCallback() {
// eslint-disable-next-line no-jquery/no-fade
$(this)
.closest('tr')
.fadeOut();
.addClass('gl-display-none!');
});
const glTooltipDelay = localStorage.getItem('gl-tooltip-delay');
......
......@@ -53,8 +53,7 @@ export default class MilestoneSelect {
const $block = $selectBox.closest('.block');
const $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon');
const $value = $block.find('.value');
// eslint-disable-next-line no-jquery/no-fade
const $loading = $block.find('.block-loading').fadeOut();
const $loading = $block.find('.block-loading').addClass('gl-display-none');
selectedMilestoneDefault = showAny ? '' : null;
selectedMilestoneDefault =
showNo && defaultNo ? __('No milestone') : selectedMilestoneDefault;
......@@ -255,34 +254,29 @@ export default class MilestoneSelect {
}
$dropdown.trigger('loading.gl.dropdown');
// eslint-disable-next-line no-jquery/no-fade
$loading.removeClass('hidden').fadeIn();
$loading.removeClass('gl-display-none');
boardsStore.detail.issue
.update($dropdown.attr('data-issue-update'))
.then(() => {
$dropdown.trigger('loaded.gl.dropdown');
// eslint-disable-next-line no-jquery/no-fade
$loading.fadeOut();
$loading.addClass('gl-display-none');
})
.catch(() => {
// eslint-disable-next-line no-jquery/no-fade
$loading.fadeOut();
$loading.addClass('gl-display-none');
});
} else {
selected = $selectBox.find('input[type="hidden"]').val();
data = {};
data[abilityName] = {};
data[abilityName].milestone_id = selected != null ? selected : null;
// eslint-disable-next-line no-jquery/no-fade
$loading.removeClass('hidden').fadeIn();
$loading.removeClass('gl-display-none');
$dropdown.trigger('loading.gl.dropdown');
return axios
.put(issueUpdateURL, data)
.then(({ data }) => {
$dropdown.trigger('loaded.gl.dropdown');
// eslint-disable-next-line no-jquery/no-fade
$loading.fadeOut();
$loading.addClass('gl-display-none');
$selectBox.hide();
$value.css('display', '');
if (data.milestone != null) {
......@@ -313,8 +307,7 @@ export default class MilestoneSelect {
.text(__('None'));
})
.catch(() => {
// eslint-disable-next-line no-jquery/no-fade
$loading.fadeOut();
$loading.addClass('gl-display-none');
});
}
},
......
......@@ -63,8 +63,7 @@ function UsersSelect(currentUser, els, options = {}) {
const abilityName = $dropdown.data('abilityName');
let $value = $block.find('.value');
const $collapsedSidebar = $block.find('.sidebar-collapsed-user');
// eslint-disable-next-line no-jquery/no-fade
const $loading = $block.find('.block-loading').fadeOut();
const $loading = $block.find('.block-loading').addClass('gl-display-none');
const selectedIdDefault = defaultNullUser && showNullUser ? 0 : null;
let selectedId = $dropdown.data('selected');
let assignTo;
......@@ -205,16 +204,14 @@ function UsersSelect(currentUser, els, options = {}) {
const data = {};
data[abilityName] = {};
data[abilityName].assignee_id = selected != null ? selected : null;
// eslint-disable-next-line no-jquery/no-fade
$loading.removeClass('hidden').fadeIn();
$loading.removeClass('gl-display-none');
$dropdown.trigger('loading.gl.dropdown');
return axios.put(issueURL, data).then(({ data }) => {
let user = {};
let tooltipTitle = user.name;
$dropdown.trigger('loaded.gl.dropdown');
// eslint-disable-next-line no-jquery/no-fade
$loading.fadeOut();
$loading.addClass('gl-display-none');
if (data.assignee) {
user = {
name: data.assignee.name,
......
......@@ -14,7 +14,7 @@
.wrap
.frame.deleted
= image_tag(old_blob_raw_url, alt: diff_file.old_path, lazy: false)
%p.image-info.hide
%p.image-info.gl-display-none
%span.meta-filesize= number_to_human_size(old_blob.size)
|
%strong W:
......@@ -24,7 +24,7 @@
%span.meta-height
.wrap
= render partial: "projects/diffs/image_diff_frame", locals: { class_name: "added js-image-frame #{class_name}", position: position, note_type: DiffNote.name, image_path: blob_raw_url, alt: diff_file.new_path }
%p.image-info.hide
%p.image-info.gl-display-none
%span.meta-filesize= number_to_human_size(blob.size)
|
%strong W:
......@@ -33,7 +33,7 @@
%strong H:
%span.meta-height
.swipe.view.hide
.swipe.view.gl-display-none
.swipe-frame
.frame.deleted.old-diff
= image_tag(old_blob_raw_url, alt: diff_file.old_path, lazy: false)
......@@ -43,7 +43,7 @@
%span.top-handle
%span.bottom-handle
.onion-skin.view.hide
.onion-skin.view.gl-display-none
.onion-skin-frame
.frame.deleted
= image_tag(old_blob_raw_url, alt: diff_file.old_path, lazy: false)
......@@ -54,7 +54,7 @@
.dragger{ :style => "left: 0px;" }
.opaque
.view-modes.hide
.view-modes.gl-display-none
%ul.view-modes-menu
%li.two-up{ data: { mode: 'two-up' } } 2-up
%li.swipe{ data: { mode: 'swipe' } } Swipe
......
......@@ -11,8 +11,7 @@ function WeightSelect(els, options = {}) {
const $selectbox = $dropdown.closest('.selectbox');
const $block = $selectbox.closest('.block');
const $value = $block.find('.value');
// eslint-disable-next-line no-jquery/no-fade
$block.find('.block-loading').fadeOut();
$block.find('.block-loading').addClass('gl-display-none');
const fieldName = options.fieldName || $dropdown.data('fieldName');
const inputField = $dropdown.closest('.selectbox').find(`input[name='${fieldName}']`);
......
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