From dfb082434611648658ace012d45b7d6914bc70bd Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Wed, 24 Oct 2018 19:17:03 +0000 Subject: Prettify all the things (part 7) --- app/assets/javascripts/breadcrumb.js | 15 +- app/assets/javascripts/build_artifacts.js | 18 +- .../ci_variable_list/ajax_variable_list.js | 56 ++-- .../ci_variable_list/ci_variable_list.js | 37 +-- .../ci_variable_list/native_form_variable_list.js | 5 +- .../javascripts/clusters/stores/clusters_store.js | 8 +- app/assets/javascripts/comment_type_toggle.js | 56 ++-- app/assets/javascripts/commit/image_file.js | 320 ++++++++++++--------- .../commit/pipelines/pipelines_bundle.js | 10 +- .../commit/pipelines/pipelines_table.vue | 122 ++++---- app/assets/javascripts/commit_merge_requests.js | 7 +- app/assets/javascripts/commits.js | 38 ++- app/assets/javascripts/commons/bootstrap.js | 12 +- app/assets/javascripts/confirm_danger_modal.js | 24 +- app/assets/javascripts/contextual_sidebar.js | 7 +- app/assets/javascripts/create_item_dropdown.js | 13 +- app/assets/javascripts/create_label.js | 63 ++-- .../javascripts/deploy_keys/components/app.vue | 6 +- .../javascripts/deploy_keys/service/index.js | 9 +- app/assets/javascripts/diff.js | 14 +- app/assets/javascripts/dropzone_input.js | 41 ++- .../emoji/support/is_emoji_unicode_supported.js | 55 ++-- app/assets/javascripts/experimental_flags.js | 2 +- app/assets/javascripts/files_comment_button.js | 12 +- app/assets/javascripts/filterable_list.js | 25 +- app/assets/javascripts/flash.js | 33 +-- app/assets/javascripts/fly_out_nav.js | 52 ++-- app/assets/javascripts/gl_field_error.js | 3 +- app/assets/javascripts/gl_field_errors.js | 14 +- app/assets/javascripts/gl_form.js | 19 +- app/assets/javascripts/group_avatar.js | 5 +- app/assets/javascripts/group_label_subscription.js | 10 +- .../javascripts/groups/components/item_stats.vue | 72 ++--- .../groups/components/item_stats_value.vue | 86 +++--- app/assets/javascripts/groups/new_group_child.js | 22 +- .../javascripts/groups/store/groups_store.js | 23 +- app/assets/javascripts/groups/transfer_dropdown.js | 2 +- app/assets/javascripts/groups_select.js | 9 +- app/assets/javascripts/helpers/avatar_helper.js | 4 +- app/assets/javascripts/image_diff/image_diff.js | 6 +- .../javascripts/image_diff/init_discussion_tab.js | 3 +- .../javascripts/image_diff/replaced_image_diff.js | 15 +- app/assets/javascripts/importer_status.js | 122 ++++---- app/assets/javascripts/init_changes_dropdown.js | 2 +- app/assets/javascripts/init_notes.js | 8 +- .../integrations/integration_settings_form.js | 5 +- .../issuable/auto_width_dropdown_select.js | 5 +- .../javascripts/issuable_bulk_update_actions.js | 10 +- 48 files changed, 826 insertions(+), 679 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/breadcrumb.js b/app/assets/javascripts/breadcrumb.js index 1474d93dde6..a37838694ec 100644 --- a/app/assets/javascripts/breadcrumb.js +++ b/app/assets/javascripts/breadcrumb.js @@ -1,6 +1,6 @@ import $ from 'jquery'; -export const addTooltipToEl = (el) => { +export const addTooltipToEl = el => { const textEl = el.querySelector('.js-breadcrumb-item-text'); if (textEl && textEl.scrollWidth > textEl.offsetWidth) { @@ -14,17 +14,18 @@ export default () => { const breadcrumbs = document.querySelector('.js-breadcrumbs-list'); if (breadcrumbs) { - const topLevelLinks = [...breadcrumbs.children].filter(el => !el.classList.contains('dropdown')) + const topLevelLinks = [...breadcrumbs.children] + .filter(el => !el.classList.contains('dropdown')) .map(el => el.querySelector('a')) .filter(el => el); const $expander = $('.js-breadcrumbs-collapsed-expander'); topLevelLinks.forEach(el => addTooltipToEl(el)); - $expander.closest('.dropdown') - .on('show.bs.dropdown hide.bs.dropdown', (e) => { - $('.js-breadcrumbs-collapsed-expander', e.currentTarget).toggleClass('open') - .tooltip('hide'); - }); + $expander.closest('.dropdown').on('show.bs.dropdown hide.bs.dropdown', e => { + $('.js-breadcrumbs-collapsed-expander', e.currentTarget) + .toggleClass('open') + .tooltip('hide'); + }); } }; diff --git a/app/assets/javascripts/build_artifacts.js b/app/assets/javascripts/build_artifacts.js index e338376fcaa..97a1645aa51 100644 --- a/app/assets/javascripts/build_artifacts.js +++ b/app/assets/javascripts/build_artifacts.js @@ -12,16 +12,16 @@ export default class BuildArtifacts { } // eslint-disable-next-line class-methods-use-this disablePropagation() { - $('.top-block').on('click', '.download', function (e) { + $('.top-block').on('click', '.download', function(e) { return e.stopPropagation(); }); - return $('.tree-holder').on('click', 'tr[data-link] a', function (e) { + return $('.tree-holder').on('click', 'tr[data-link] a', function(e) { return e.stopImmediatePropagation(); }); } // eslint-disable-next-line class-methods-use-this setupEntryClick() { - return $('.tree-holder').on('click', 'tr[data-link]', function () { + return $('.tree-holder').on('click', 'tr[data-link]', function() { visitUrl(this.dataset.link, convertPermissionToBoolean(this.dataset.externalLink)); }); } @@ -37,11 +37,15 @@ export default class BuildArtifacts { // We want the tooltip to show if you hover anywhere on the row // But be placed below and in the middle of the file name $('.js-artifact-tree-row') - .on('mouseenter', (e) => { - $(e.currentTarget).find('.js-artifact-tree-tooltip').tooltip('show'); + .on('mouseenter', e => { + $(e.currentTarget) + .find('.js-artifact-tree-tooltip') + .tooltip('show'); }) - .on('mouseleave', (e) => { - $(e.currentTarget).find('.js-artifact-tree-tooltip').tooltip('hide'); + .on('mouseleave', e => { + $(e.currentTarget) + .find('.js-artifact-tree-tooltip') + .tooltip('hide'); }); } } diff --git a/app/assets/javascripts/ci_variable_list/ajax_variable_list.js b/app/assets/javascripts/ci_variable_list/ajax_variable_list.js index b33adff609f..1089d0a72d3 100644 --- a/app/assets/javascripts/ci_variable_list/ajax_variable_list.js +++ b/app/assets/javascripts/ci_variable_list/ajax_variable_list.js @@ -7,11 +7,13 @@ import statusCodes from '../lib/utils/http_status'; import VariableList from './ci_variable_list'; function generateErrorBoxContent(errors) { - const errorList = [].concat(errors).map(errorString => ` + const errorList = [].concat(errors).map( + errorString => `
  • ${_.escape(errorString)}
    • - `); + `, + ); return `

    @@ -25,13 +27,7 @@ function generateErrorBoxContent(errors) { // Used for the variable list on CI/CD projects/groups settings page export default class AjaxVariableList { - constructor({ - container, - saveButton, - errorBox, - formField = 'variables', - saveEndpoint, - }) { + constructor({ container, saveButton, errorBox, formField = 'variables', saveEndpoint }) { this.container = container; this.saveButton = saveButton; this.errorBox = errorBox; @@ -58,18 +54,21 @@ export default class AjaxVariableList { // to match it up in `updateRowsWithPersistedVariables` this.variableList.toggleEnableRow(false); - return axios.patch(this.saveEndpoint, { - variables_attributes: this.variableList.getAllData(), - }, { - // We want to be able to process the `res.data` from a 400 error response - // and print the validation messages such as duplicate variable keys - validateStatus: status => ( - status >= statusCodes.OK && - status < statusCodes.MULTIPLE_CHOICES - ) || - status === statusCodes.BAD_REQUEST, - }) - .then((res) => { + return axios + .patch( + this.saveEndpoint, + { + variables_attributes: this.variableList.getAllData(), + }, + { + // We want to be able to process the `res.data` from a 400 error response + // and print the validation messages such as duplicate variable keys + validateStatus: status => + (status >= statusCodes.OK && status < statusCodes.MULTIPLE_CHOICES) || + status === statusCodes.BAD_REQUEST, + }, + ) + .then(res => { loadingIcon.classList.toggle('hide', true); this.variableList.toggleEnableRow(true); @@ -90,18 +89,21 @@ export default class AjaxVariableList { } updateRowsWithPersistedVariables(persistedVariables = []) { - const persistedVariableMap = [].concat(persistedVariables).reduce((variableMap, variable) => ({ - ...variableMap, - [variable.key]: variable, - }), {}); + const persistedVariableMap = [].concat(persistedVariables).reduce( + (variableMap, variable) => ({ + ...variableMap, + [variable.key]: variable, + }), + {}, + ); - this.container.querySelectorAll('.js-row').forEach((row) => { + this.container.querySelectorAll('.js-row').forEach(row => { // If we submitted a row that was destroyed, remove it so we don't try // to destroy it again which would cause a BE error const destroyInput = row.querySelector('.js-ci-variable-input-destroy'); if (convertPermissionToBoolean(destroyInput.value)) { row.remove(); - // Update the ID input so any future edits and `_destroy` will apply on the BE + // Update the ID input so any future edits and `_destroy` will apply on the BE } else { const key = row.querySelector('.js-ci-variable-input-key').value; const persistedVariable = persistedVariableMap[key]; diff --git a/app/assets/javascripts/ci_variable_list/ci_variable_list.js b/app/assets/javascripts/ci_variable_list/ci_variable_list.js index 47efb3a8cee..7bdc18ce03e 100644 --- a/app/assets/javascripts/ci_variable_list/ci_variable_list.js +++ b/app/assets/javascripts/ci_variable_list/ci_variable_list.js @@ -16,10 +16,7 @@ function createEnvironmentItem(value) { } export default class VariableList { - constructor({ - container, - formField, - }) { + constructor({ container, formField }) { this.$container = $(container); this.formField = formField; this.environmentDropdownMap = new WeakMap(); @@ -71,7 +68,7 @@ export default class VariableList { this.initRow(rowEl); }); - this.$container.on('click', '.js-row-remove-button', (e) => { + this.$container.on('click', '.js-row-remove-button', e => { e.preventDefault(); this.removeRow($(e.currentTarget).closest('.js-row')); }); @@ -81,7 +78,7 @@ export default class VariableList { .join(','); // Remove any empty rows except the last row - this.$container.on('blur', inputSelector, (e) => { + this.$container.on('blur', inputSelector, e => { const $row = $(e.currentTarget).closest('.js-row'); if ($row.is(':not(:last-child)') && !this.checkIfRowTouched($row)) { @@ -136,7 +133,7 @@ export default class VariableList { $rowClone.removeAttr('data-is-persisted'); // Reset the inputs to their defaults - Object.keys(this.inputMap).forEach((name) => { + Object.keys(this.inputMap).forEach(name => { const entry = this.inputMap[name]; $rowClone.find(entry.selector).val(entry.default); }); @@ -171,7 +168,7 @@ export default class VariableList { } checkIfRowTouched($row) { - return Object.keys(this.inputMap).some((name) => { + return Object.keys(this.inputMap).some(name => { const entry = this.inputMap[name]; const $el = $row.find(entry.selector); return $el.length && $el.val() !== entry.default; @@ -190,11 +187,14 @@ export default class VariableList { getAllData() { // Ignore the last empty row because we don't want to try persist // a blank variable and run into validation problems. - const validRows = this.$container.find('.js-row').toArray().slice(0, -1); + const validRows = this.$container + .find('.js-row') + .toArray() + .slice(0, -1); - return validRows.map((rowEl) => { + return validRows.map(rowEl => { const resultant = {}; - Object.keys(this.inputMap).forEach((name) => { + Object.keys(this.inputMap).forEach(name => { const entry = this.inputMap[name]; const $input = $(rowEl).find(entry.selector); if ($input.length) { @@ -207,11 +207,16 @@ export default class VariableList { } getEnvironmentValues() { - const valueMap = this.$container.find(this.inputMap.environment_scope.selector).toArray() - .reduce((prevValueMap, envInput) => ({ - ...prevValueMap, - [envInput.value]: envInput.value, - }), {}); + const valueMap = this.$container + .find(this.inputMap.environment_scope.selector) + .toArray() + .reduce( + (prevValueMap, envInput) => ({ + ...prevValueMap, + [envInput.value]: envInput.value, + }), + {}, + ); return Object.keys(valueMap).map(createEnvironmentItem); } diff --git a/app/assets/javascripts/ci_variable_list/native_form_variable_list.js b/app/assets/javascripts/ci_variable_list/native_form_variable_list.js index 7cd5916ac9c..e7111c666a2 100644 --- a/app/assets/javascripts/ci_variable_list/native_form_variable_list.js +++ b/app/assets/javascripts/ci_variable_list/native_form_variable_list.js @@ -2,10 +2,7 @@ import $ from 'jquery'; import VariableList from './ci_variable_list'; // Used for the variable list on scheduled pipeline edit page -export default function setupNativeFormVariableList({ - container, - formField = 'variables', -}) { +export default function setupNativeFormVariableList({ container, formField = 'variables' }) { const $container = $(container); const variableList = new VariableList({ diff --git a/app/assets/javascripts/clusters/stores/clusters_store.js b/app/assets/javascripts/clusters/stores/clusters_store.js index d90db7b103c..106ac3cb516 100644 --- a/app/assets/javascripts/clusters/stores/clusters_store.js +++ b/app/assets/javascripts/clusters/stores/clusters_store.js @@ -76,12 +76,8 @@ export default class ClusterStore { this.state.status = serverState.status; this.state.statusReason = serverState.status_reason; - serverState.applications.forEach((serverAppEntry) => { - const { - name: appId, - status, - status_reason: statusReason, - } = serverAppEntry; + serverState.applications.forEach(serverAppEntry => { + const { name: appId, status, status_reason: statusReason } = serverAppEntry; this.state.applications[appId] = { ...(this.state.applications[appId] || {}), diff --git a/app/assets/javascripts/comment_type_toggle.js b/app/assets/javascripts/comment_type_toggle.js index c74184949df..a259667bb75 100644 --- a/app/assets/javascripts/comment_type_toggle.js +++ b/app/assets/javascripts/comment_type_toggle.js @@ -24,36 +24,44 @@ class CommentTypeToggle { setConfig() { const config = { - InputSetter: [{ - input: this.noteTypeInput, - valueAttribute: 'data-value', - }, - { - input: this.submitButton, - valueAttribute: 'data-submit-text', - }], + InputSetter: [ + { + input: this.noteTypeInput, + valueAttribute: 'data-value', + }, + { + input: this.submitButton, + valueAttribute: 'data-submit-text', + }, + ], }; if (this.closeButton) { - config.InputSetter.push({ - input: this.closeButton, - valueAttribute: 'data-close-text', - }, { - input: this.closeButton, - valueAttribute: 'data-close-text', - inputAttribute: 'data-alternative-text', - }); + config.InputSetter.push( + { + input: this.closeButton, + valueAttribute: 'data-close-text', + }, + { + input: this.closeButton, + valueAttribute: 'data-close-text', + inputAttribute: 'data-alternative-text', + }, + ); } if (this.reopenButton) { - config.InputSetter.push({ - input: this.reopenButton, - valueAttribute: 'data-reopen-text', - }, { - input: this.reopenButton, - valueAttribute: 'data-reopen-text', - inputAttribute: 'data-alternative-text', - }); + config.InputSetter.push( + { + input: this.reopenButton, + valueAttribute: 'data-reopen-text', + }, + { + input: this.reopenButton, + valueAttribute: 'data-reopen-text', + inputAttribute: 'data-alternative-text', + }, + ); } return config; diff --git a/app/assets/javascripts/commit/image_file.js b/app/assets/javascripts/commit/image_file.js index 30d9b656fec..d4ecfa4aa93 100644 --- a/app/assets/javascripts/commit/image_file.js +++ b/app/assets/javascripts/commit/image_file.js @@ -9,44 +9,60 @@ const viewModes = ['two-up', 'swipe']; export default class ImageFile { constructor(file) { this.file = file; - this.requestImageInfo($('.two-up.view .frame.deleted img', this.file), (function(_this) { - return function(deletedWidth, deletedHeight) { - return _this.requestImageInfo($('.two-up.view .frame.added img', _this.file), function(width, height) { - _this.initViewModes(); - - // Load two-up view after images are loaded - // so that we can display the correct width and height information - const $images = $('.two-up.view img', _this.file); - - $images.waitForImages(function() { - _this.initView('two-up'); + this.requestImageInfo( + $('.two-up.view .frame.deleted img', this.file), + (function(_this) { + return function(deletedWidth, deletedHeight) { + return _this.requestImageInfo($('.two-up.view .frame.added img', _this.file), function( + width, + height, + ) { + _this.initViewModes(); + + // Load two-up view after images are loaded + // so that we can display the correct width and height information + const $images = $('.two-up.view img', _this.file); + + $images.waitForImages(function() { + _this.initView('two-up'); + }); }); - }); - }; - })(this)); + }; + })(this), + ); } initViewModes() { const viewMode = viewModes[0]; $('.view-modes', this.file).removeClass('hide'); - $('.view-modes-menu', this.file).on('click', 'li', (function(_this) { - return function(event) { - if (!$(event.currentTarget).hasClass('active')) { - return _this.activateViewMode(event.currentTarget.className); - } - }; - })(this)); + $('.view-modes-menu', this.file).on( + 'click', + 'li', + (function(_this) { + return function(event) { + if (!$(event.currentTarget).hasClass('active')) { + return _this.activateViewMode(event.currentTarget.className); + } + }; + })(this), + ); return this.activateViewMode(viewMode); } activateViewMode(viewMode) { - $('.view-modes-menu li', this.file).removeClass('active').filter("." + viewMode).addClass('active'); - return $(".view:visible:not(." + viewMode + ")", this.file).fadeOut(200, (function(_this) { - return function() { - $(".view." + viewMode, _this.file).fadeIn(200); - return _this.initView(viewMode); - }; - })(this)); + $('.view-modes-menu li', this.file) + .removeClass('active') + .filter('.' + viewMode) + .addClass('active'); + return $('.view:visible:not(.' + viewMode + ')', this.file).fadeOut( + 200, + (function(_this) { + return function() { + $('.view.' + viewMode, _this.file).fadeIn(200); + return _this.initView(viewMode); + }; + })(this), + ); } initView(viewMode) { @@ -63,135 +79,154 @@ export default class ImageFile { $body.css('user-select', 'none'); }); - $body.off('mouseup').off('mousemove').on('mouseup', function() { - dragging = false; - $body.css('user-select', ''); - }) - .on('mousemove', function(e) { - var left; - if (!dragging) return; - - left = e.pageX - ($offsetEl.offset().left + padding); - - callback(e, left); - }); + $body + .off('mouseup') + .off('mousemove') + .on('mouseup', function() { + dragging = false; + $body.css('user-select', ''); + }) + .on('mousemove', function(e) { + var left; + if (!dragging) return; + + left = e.pageX - ($offsetEl.offset().left + padding); + + callback(e, left); + }); } prepareFrames(view) { var maxHeight, maxWidth; maxWidth = 0; maxHeight = 0; - $('.frame', view).each((function(_this) { - return function(index, frame) { - var height, width; - width = $(frame).width(); - height = $(frame).height(); - maxWidth = width > maxWidth ? width : maxWidth; - return maxHeight = height > maxHeight ? height : maxHeight; - }; - })(this)).css({ - width: maxWidth, - height: maxHeight - }); + $('.frame', view) + .each( + (function(_this) { + return function(index, frame) { + var height, width; + width = $(frame).width(); + height = $(frame).height(); + maxWidth = width > maxWidth ? width : maxWidth; + return (maxHeight = height > maxHeight ? height : maxHeight); + }; + })(this), + ) + .css({ + width: maxWidth, + height: maxHeight, + }); return [maxWidth, maxHeight]; } views = { 'two-up': function() { - return $('.two-up.view .wrap', this.file).each((function(_this) { - return function(index, wrap) { - $('img', wrap).each(function() { - var currentWidth; - currentWidth = $(this).width(); - if (currentWidth > availWidth / 2) { - return $(this).width(availWidth / 2); - } - }); - return _this.requestImageInfo($('img', wrap), function(width, height) { - $('.image-info .meta-width', wrap).text(width + "px"); - $('.image-info .meta-height', wrap).text(height + "px"); - return $('.image-info', wrap).removeClass('hide'); - }); - }; - })(this)); + return $('.two-up.view .wrap', this.file).each( + (function(_this) { + return function(index, wrap) { + $('img', wrap).each(function() { + var currentWidth; + currentWidth = $(this).width(); + if (currentWidth > availWidth / 2) { + return $(this).width(availWidth / 2); + } + }); + return _this.requestImageInfo($('img', wrap), function(width, height) { + $('.image-info .meta-width', wrap).text(width + 'px'); + $('.image-info .meta-height', wrap).text(height + 'px'); + return $('.image-info', wrap).removeClass('hide'); + }); + }; + })(this), + ); }, - 'swipe': function() { + swipe() { var maxHeight, maxWidth; maxWidth = 0; maxHeight = 0; - return $('.swipe.view', this.file).each((function(_this) { - return function(index, view) { - var $swipeWrap, $swipeBar, $swipeFrame, wrapPadding, ref; - ref = _this.prepareFrames(view), [maxWidth, maxHeight] = ref; - $swipeFrame = $('.swipe-frame', view); - $swipeWrap = $('.swipe-wrap', view); - $swipeBar = $('.swipe-bar', view); - - $swipeFrame.css({ - width: maxWidth + 16, - height: maxHeight + 28 - }); - $swipeWrap.css({ - width: maxWidth + 1, - height: maxHeight + 2 - }); - // Set swipeBar left position to match image frame - $swipeBar.css({ - left: 1 - }); - - wrapPadding = parseInt($swipeWrap.css('right').replace('px', ''), 10); - - _this.initDraggable($swipeBar, wrapPadding, function(e, left) { - if (left > 0 && left < $swipeFrame.width() - (wrapPadding * 2)) { - $swipeWrap.width((maxWidth + 1) - left); - $swipeBar.css('left', left); - } - }); - }; - })(this)); + return $('.swipe.view', this.file).each( + (function(_this) { + return function(index, view) { + var $swipeWrap, $swipeBar, $swipeFrame, wrapPadding, ref; + (ref = _this.prepareFrames(view)), ([maxWidth, maxHeight] = ref); + $swipeFrame = $('.swipe-frame', view); + $swipeWrap = $('.swipe-wrap', view); + $swipeBar = $('.swipe-bar', view); + + $swipeFrame.css({ + width: maxWidth + 16, + height: maxHeight + 28, + }); + $swipeWrap.css({ + width: maxWidth + 1, + height: maxHeight + 2, + }); + // Set swipeBar left position to match image frame + $swipeBar.css({ + left: 1, + }); + + wrapPadding = parseInt($swipeWrap.css('right').replace('px', ''), 10); + + _this.initDraggable($swipeBar, wrapPadding, function(e, left) { + if (left > 0 && left < $swipeFrame.width() - wrapPadding * 2) { + $swipeWrap.width(maxWidth + 1 - left); + $swipeBar.css('left', left); + } + }); + }; + })(this), + ); }, 'onion-skin': function() { var dragTrackWidth, maxHeight, maxWidth; maxWidth = 0; maxHeight = 0; dragTrackWidth = $('.drag-track', this.file).width() - $('.dragger', this.file).width(); - return $('.onion-skin.view', this.file).each((function(_this) { - return function(index, view) { - var $frame, $track, $dragger, $frameAdded, framePadding, ref, dragging = false; - ref = _this.prepareFrames(view), [maxWidth, maxHeight] = ref; - $frame = $('.onion-skin-frame', view); - $frameAdded = $('.frame.added', view); - $track = $('.drag-track', view); - $dragger = $('.dragger', $track); - - $frame.css({ - width: maxWidth + 16, - height: maxHeight + 28 - }); - $('.swipe-wrap', view).css({ - width: maxWidth + 1, - height: maxHeight + 2 - }); - $dragger.css({ - left: dragTrackWidth - }); - - $frameAdded.css('opacity', 1); - framePadding = parseInt($frameAdded.css('right').replace('px', ''), 10); - - _this.initDraggable($dragger, framePadding, function(e, left) { - var opacity = left / dragTrackWidth; - - if (opacity >= 0 && opacity <= 1) { - $dragger.css('left', left); - $frameAdded.css('opacity', opacity); - } - }); - }; - })(this)); - } - } + return $('.onion-skin.view', this.file).each( + (function(_this) { + return function(index, view) { + var $frame, + $track, + $dragger, + $frameAdded, + framePadding, + ref, + dragging = false; + (ref = _this.prepareFrames(view)), ([maxWidth, maxHeight] = ref); + $frame = $('.onion-skin-frame', view); + $frameAdded = $('.frame.added', view); + $track = $('.drag-track', view); + $dragger = $('.dragger', $track); + + $frame.css({ + width: maxWidth + 16, + height: maxHeight + 28, + }); + $('.swipe-wrap', view).css({ + width: maxWidth + 1, + height: maxHeight + 2, + }); + $dragger.css({ + left: dragTrackWidth, + }); + + $frameAdded.css('opacity', 1); + framePadding = parseInt($frameAdded.css('right').replace('px', ''), 10); + + _this.initDraggable($dragger, framePadding, function(e, left) { + var opacity = left / dragTrackWidth; + + if (opacity >= 0 && opacity <= 1) { + $dragger.css('left', left); + $frameAdded.css('opacity', opacity); + } + }); + }; + })(this), + ); + }, + }; requestImageInfo(img, callback) { const domImg = img.get(0); @@ -199,11 +234,14 @@ export default class ImageFile { if (domImg.complete) { return callback.call(this, domImg.naturalWidth, domImg.naturalHeight); } else { - return img.on('load', (function(_this) { - return function() { - return callback.call(_this, domImg.naturalWidth, domImg.naturalHeight); - }; - })(this)); + return img.on( + 'load', + (function(_this) { + return function() { + return callback.call(_this, domImg.naturalWidth, domImg.naturalHeight); + }; + })(this), + ); } } } diff --git a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js index 3d89bf1316e..340a93e4e66 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js +++ b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js @@ -19,11 +19,13 @@ export default () => { const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view'); if (pipelineTableViewEl) { - // Update MR and Commits tabs - pipelineTableViewEl.addEventListener('update-pipelines-count', (event) => { - if (event.detail.pipelines && + // Update MR and Commits tabs + pipelineTableViewEl.addEventListener('update-pipelines-count', event => { + if ( + event.detail.pipelines && event.detail.pipelines.count && - event.detail.pipelines.count.all) { + event.detail.pipelines.count.all + ) { const badge = document.querySelector('.js-pipelines-mr-count'); badge.textContent = event.detail.pipelines.count.all; diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue index 4849b0fa3db..a2aa3d197e3 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue +++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue @@ -1,77 +1,73 @@