Adds loading to improve UX
This commit is contained in:
parent
b1613e5489
commit
34e317d21c
|
@ -18,31 +18,34 @@
|
|||
class MiniPipelineGraph {
|
||||
constructor({ container }) {
|
||||
this.container = container;
|
||||
this.dropdownListSelector = '.js-builds-dropdown-container';
|
||||
this.getBuildsList = this.getBuildsList.bind(this);
|
||||
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds an removes the event listener.
|
||||
* TODO: Remove jQuery when we have a way to handle events properly.
|
||||
* Adds and removes the event listener.
|
||||
*/
|
||||
bindEvents() {
|
||||
$(this.container).off('click', 'button.js-builds-dropdown-button', this.getBuildsList);
|
||||
$(this.container).on('click', 'button.js-builds-dropdown-button', this.getBuildsList);
|
||||
const dropdownButtonSelector = 'button.js-builds-dropdown-button';
|
||||
|
||||
$(this.container).off('click', dropdownButtonSelector, this.getBuildsList);
|
||||
$(this.container).on('click', dropdownButtonSelector, this.getBuildsList);
|
||||
}
|
||||
|
||||
/**
|
||||
* For the clicked stage, renders the received html in the sibiling
|
||||
* element with the `js-builds-dropdown-container` clas
|
||||
* For the clicked stage, renders the given data in the dropdown list.
|
||||
*
|
||||
* @param {Element} stageContainer
|
||||
* @param {HTMLElement} stageContainer
|
||||
* @param {Object} data
|
||||
*/
|
||||
renderBuildsList(stageContainer, data) {
|
||||
const dropdownContainer = stageContainer.parentElement.querySelector('.js-builds-dropdown-container');
|
||||
const dropdownContainer = stageContainer.parentElement.querySelector(
|
||||
`${this.dropdownListSelector} .js-builds-dropdown-list`,
|
||||
);
|
||||
|
||||
dropdownContainer.innerHTML = data.html;
|
||||
dropdownContainer.innerHTML = data;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -58,10 +61,29 @@
|
|||
dataType: 'json',
|
||||
type: 'GET',
|
||||
url: endpoint,
|
||||
success: data => this.renderBuildsList(e.currentTarget, data),
|
||||
beforeSend: () => {
|
||||
this.renderBuildsList(e.currentTarget, '');
|
||||
this.toggleLoading(e.currentTarget);
|
||||
},
|
||||
success: (data) => {
|
||||
this.toggleLoading(e.currentTarget);
|
||||
this.renderBuildsList(e.currentTarget, data.html);
|
||||
},
|
||||
error: () => new Flash('An error occurred while fetching the builds.', 'alert'),
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggles the visibility of the loading icon.
|
||||
*
|
||||
* @param {HTMLElement} stageContainer
|
||||
* @return {type}
|
||||
*/
|
||||
toggleLoading(stageContainer) {
|
||||
stageContainer.parentElement.querySelector(
|
||||
`${this.dropdownListSelector} .js-builds-dropdown-loading`,
|
||||
).classList.toggle('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
window.gl = window.gl || {};
|
||||
|
|
|
@ -753,14 +753,20 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.builds-dropdown-loading {
|
||||
margin: 10px auto;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.grouped-pipeline-dropdown {
|
||||
right: -172px;
|
||||
top: 23px;
|
||||
}
|
||||
min-height: 191px;
|
||||
|
||||
.grouped-pipeline-dropdown a {
|
||||
a {
|
||||
color: $gl-text-color-light;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-up {
|
||||
&::before,
|
||||
|
|
|
@ -53,13 +53,19 @@
|
|||
.stage-container.mini-pipeline-graph
|
||||
- if hasMultipleBuilds
|
||||
.dropdown.inline.build-content
|
||||
%button.has-tooltip.builds-dropdown.js-builds-dropdown-button{ type: 'button', data: { toggle: 'dropdown', title: tooltip, "stage-endpoint" => stage_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline, stage: stage.name)}}
|
||||
%button.has-tooltip.builds-dropdown.js-builds-dropdown-button{ type: 'button', data: { toggle: 'dropdown', title: tooltip, placement: 'top', "stage-endpoint" => stage_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline, stage: stage.name)}}
|
||||
%span{ class: klass }
|
||||
%span.mini-pipeline-graph-icon-container
|
||||
%span{ class: icon_status_klass }= custom_icon(icon_status)
|
||||
= icon('caret-down', class: 'dropdown-caret')
|
||||
|
||||
%div.js-builds-dropdown-container
|
||||
.js-builds-dropdown-container
|
||||
.dropdown-menu.grouped-pipeline-dropdown
|
||||
.arrow-up
|
||||
.js-builds-dropdown-list
|
||||
|
||||
.js-builds-dropdown-loading.builds-dropdown-loading.hidden
|
||||
%span.fa.fa-spinner.fa-spin
|
||||
- else
|
||||
- if detailed_status.has_details?
|
||||
= link_to detailed_status.details_path, class: klass, title: tooltip do
|
||||
|
|
|
@ -1,5 +1,3 @@
|
|||
.dropdown-menu.grouped-pipeline-dropdown
|
||||
.arrow-up
|
||||
%ul
|
||||
- @stage.statuses.each do |status|
|
||||
%li.dropdown-build
|
||||
|
|
Loading…
Reference in New Issue