Skip to content

G
gitlab-ce
Commit e0b7541b authored by Filipa Lacerda's avatar Filipa Lacerda
Browse files
Options

Cleans up CSS - All pipeline dropdowns use the same CSS to render the action icons

parent 9ff50410
Hide whitespace changes
Inline Side-by-side
Showing with 133 additions and 319 deletions
app/assets/javascripts/pipelines/components/stage.vue
View file @ e0b7541b
<script>
/**
* Renders each stage of the pipeline mini graph.
*
* Given the provided endpoint will make a request to
* fetch the dropdown data when the stage is clicked.
*
* Request is made inside this component to make it reusable between:
* 1. Pipelines main table
* 2. Pipelines table in commit and Merge request views
* 3. Merge request widget
* 4. Commit widget
*/
import $ from 'jquery';
import Flash from '../../flash';
import axios from '../../lib/utils/axios_utils';
import eventHub from '../event_hub';
import Icon from '../../vue_shared/components/icon.vue';
import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
import JobComponent from './graph/job_component.vue';
import tooltip from '../../vue_shared/directives/tooltip';
export default {
components: {
LoadingIcon,
Icon,
JobComponent,
/**
* Renders each stage of the pipeline mini graph.
*
* Given the provided endpoint will make a request to
* fetch the dropdown data when the stage is clicked.
*
* Request is made inside this component to make it reusable between:
* 1. Pipelines main table
* 2. Pipelines table in commit and Merge request views
* 3. Merge request widget
* 4. Commit widget
*/
import $ from 'jquery';
import { _ } from '~/locale';
import Flash from '../../flash';
import axios from '../../lib/utils/axios_utils';
import eventHub from '../event_hub';
import Icon from '../../vue_shared/components/icon.vue';
import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
import JobComponent from './graph/job_component.vue';
import tooltip from '../../vue_shared/directives/tooltip';
export default {
components: {
LoadingIcon,
Icon,
JobComponent,
},
directives: {
tooltip,
},
props: {
stage: {
type: Object,
required: true,
},
directives: {
tooltip,
updateDropdown: {
type: Boolean,
required: false,
default: false,
},
props: {
stage: {
type: Object,
required: true,
},
updateDropdown: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {
isLoading: false,
dropdownContent: '',
};
},
computed: {
dropdownClass() {
return this.dropdownContent.length > 0
? 'js-builds-dropdown-container'
: 'js-builds-dropdown-loading';
},
data() {
return {
isLoading: false,
dropdownContent: '',
};
triggerButtonClass() {
return `ci-status-icon-${this.stage.status.group}`;
},
computed: {
dropdownClass() {
// return this.dropdownContent.length > 0
// ? 'js-builds-dropdown-container'
// : 'js-builds-dropdown-loading';
},
triggerButtonClass() {
return `ci-status-icon-${this.stage.status.group}`;
},
borderlessIcon() {
return `${this.stage.status.icon}_borderless`;
},
borderlessIcon() {
return `${this.stage.status.icon}_borderless`;
},
},
watch: {
updateDropdown() {
if (this.updateDropdown && this.isDropdownOpen() && !this.isLoading) {
this.fetchJobs();
}
},
watch: {
updateDropdown() {
if (this.updateDropdown && this.isDropdownOpen() && !this.isLoading) {
this.fetchJobs();
}
},
updated() {
if (this.dropdownContent.length > 0) {
this.stopDropdownClickPropagation();
},
updated() {
if (this.dropdownContent.length > 0) {
this.stopDropdownClickPropagation();
}
},
methods: {
onClickStage() {
if (!this.isDropdownOpen()) {
eventHub.$emit('clickedDropdown');
this.isLoading = true;
this.fetchJobs();
}
},
methods: {
onClickStage() {
if (!this.isDropdownOpen()) {
eventHub.$emit('clickedDropdown');
this.isLoading = true;
this.fetchJobs();
}
},
fetchJobs() {
axios
.get(this.stage.dropdown_path)
.then(({ data }) => {
// TODO: REMOVE THIS ONCE WE HAVE BACKEND
this.dropdownContent = [
{
id: 966,
name: 'rspec:linux 0 3',
started: false,
build_path: '/twitter/flight/-/jobs/966',
cancel_path: '/twitter/flight/-/jobs/966/cancel',
playable: false,
created_at: '2018-04-18T12:10:14.315Z',
updated_at: '2018-04-18T12:10:14.500Z',
status: {
icon: 'status_pending',
text: 'pending',
label: 'pending',
group: 'pending',
tooltip: 'pending',
has_details: true,
details_path: '/twitter/flight/-/jobs/966',
favicon:
'/assets/ci_favicons/dev/favicon_status_pending-db32e1faf94b9f89530ac519790920d1f18ea8f6af6cd2e0a26cd6840cacf101.ico',
action: {
icon: 'cancel',
title: 'Cancel',
path: '/twitter/flight/-/jobs/966/cancel',
method: 'post',
},
},
},
{
id: 208,
name: 'rspec:linux 1 3',
started: '2018-03-07T06:41:46.233Z',
build_path: '/twitter/flight/-/jobs/208',
retry_path: '/twitter/flight/-/jobs/208/retry',
playable: false,
created_at: '2018-03-07T14:41:57.559Z',
updated_at: '2018-03-07T14:41:57.559Z',
status: {
icon: 'status_success',
text: 'passed',
label: 'passed',
group: 'success',
tooltip: 'passed',
has_details: true,
details_path: '/twitter/flight/-/jobs/208',
favicon:
'/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico',
action: {
icon: 'retry',
title: 'Retry',
path: '/twitter/flight/-/jobs/208/retry',
method: 'post',
},
},
},
{
id: 209,
name: 'rspec:linux 2 3',
started: '2018-03-07T06:41:46.233Z',
build_path: '/twitter/flight/-/jobs/209',
retry_path: '/twitter/flight/-/jobs/209/retry',
playable: false,
created_at: '2018-03-07T14:41:57.605Z',
updated_at: '2018-03-07T14:41:57.605Z',
status: {
icon: 'status_success',
text: 'passed',
label: 'passed',
group: 'success',
tooltip: 'passed',
has_details: true,
details_path: '/twitter/flight/-/jobs/209',
favicon:
'/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico',
action: {
icon: 'retry',
title: 'Retry',
path: '/twitter/flight/-/jobs/209/retry',
method: 'post',
},
},
},
{
id: 63701097,
name: 'spinach-mysql 0 2',
started: false,
build_path: '/gitlab-org/gitlab-ce/-/jobs/63701097',
playable: false,
created_at: '2018-04-18T15:16:52.707Z',
updated_at: '2018-04-18T15:16:52.707Z',
status: {
icon: 'status_created',
text: 'created',
label: 'created',
group: 'created',
tooltip: 'created',
has_details: true,
details_path: '/gitlab-org/gitlab-ce/-/jobs/63701097',
favicon:
'https://assets.gitlab-static.net/assets/ci_favicons/favicon_status_created-e997aa0b7db73165df8a9d6803932b18d7b7cc37d604d2d96e378fea2dba9c5f.ico',
},
},
{
id: 63701098,
name: 'spinach-mysql 1 2',
started: false,
build_path: '/gitlab-org/gitlab-ce/-/jobs/63701098',
playable: false,
created_at: '2018-04-18T15:16:52.808Z',
updated_at: '2018-04-18T15:16:52.808Z',
status: {
icon: 'status_created',
text: 'created',
label: 'created',
group: 'created',
tooltip: 'created',
has_details: true,
details_path: '/gitlab-org/gitlab-ce/-/jobs/63701098',
favicon:
'https://assets.gitlab-static.net/assets/ci_favicons/favicon_status_created-e997aa0b7db73165df8a9d6803932b18d7b7cc37d604d2d96e378fea2dba9c5f.ico',
},
},
];
this.isLoading = false;
})
.catch(() => {
this.closeDropdown();
this.isLoading = false;
Flash('Something went wrong on our end.');
});
},
/**
* When the user right clicks or cmd/ctrl + click in the job name
* the dropdown should not be closed and the link should open in another tab,
* so we stop propagation of the click event inside the dropdown.
*
* Since this component is rendered multiple times per page we need to guarantee we only
* target the click event of this component.
*/
stopDropdownClickPropagation() {
$(
this.$el.querySelectorAll('.js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item'),
).on('click', e => {
e.stopPropagation();
fetchJobs() {
axios
.get(this.stage.dropdown_path)
.then(({ data }) => {
this.dropdownContent = data;
this.isLoading = false;
})
.catch(() => {
this.closeDropdown();
this.isLoading = false;
Flash(_('Something went wrong on our end.'));
});
},
},
closeDropdown() {
if (this.isDropdownOpen()) {
$(this.$refs.dropdown).dropdown('toggle');
}
},
/**
* When the user right clicks or cmd/ctrl + click in the job name
* the dropdown should not be closed and the link should open in another tab,
* so we stop propagation of the click event inside the dropdown.
*
* Since this component is rendered multiple times per page we need to guarantee we only
* target the click event of this component.
*/
stopDropdownClickPropagation() {
$(
this.$el.querySelectorAll('.js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item')
).on('click', e => {
e.stopPropagation();
});
},
closeDropdown() {
if (this.isDropdownOpen()) {
$(this.$refs.dropdown).dropdown('toggle');
}
},
isDropdownOpen() {
return this.$el.classList.contains('open');
},
isDropdownOpen() {
return this.$el.classList.contains('open');
},
};
},
};
</script>
<template>
......
app/assets/stylesheets/pages/pipelines.scss
View file @ e0b7541b
......@@ -22,7 +22,6 @@
}
.ci-table {
.label {
margin-bottom: 3px;
}
......@@ -123,7 +122,6 @@
}
.branch-commit {
.ref-name {
font-weight: $gl-font-weight-bold;
max-width: 100px;
......@@ -505,7 +503,7 @@
}
}
}
}
}
.build {
position: relative;
......@@ -548,7 +546,6 @@
border: 1px solid $dropdown-toggle-active-border-color;
}
// Connect first build in each stage with right horizontal line
&:first-child {
&::after {
......@@ -604,15 +601,18 @@
}
}
/**
Icons inside dropdown
Action icons inside dropdowns:
- mini graph in pipelines table
- dropdown in big graph
- mini graph in MR widget pipeline
- mini graph in Commit widget pipeline
*/
.big-pipeline-graph-dropdown-menu,
.mini-pipeline-graph-dropdown-menu {
// override dropdown.scss
&.dropdown-menu li button {
&.dropdown-menu li button,
&.dropdown-menu li a.ci-action-icon-container {
padding: 0;
text-align: center;
}
......@@ -622,7 +622,6 @@
right: 5px;
top: 5px;
// Action Icons in big pipeline-graph nodes
&.ci-action-icon-wrapper {
height: $ci-action-dropdown-button-size;
width: $ci-action-dropdown-button-size;
......@@ -651,6 +650,11 @@
}
}
}
// SVGs in the commit widget and mr widget
a.ci-action-icon-container.ci-action-icon-wrapper svg {
top: 2px;
}
}
// Triggers the dropdown in the big pipeline graph
......@@ -780,74 +784,6 @@ button.mini-pipeline-graph-dropdown-toggle {
@extend .mini-pipeline-graph-dropdown-item:hover;
}
// Action icon on the right
a.ci-action-icon-wrapper {
border-radius: 50%;
border: 1px solid $border-color;
width: $ci-action-icon-size;
height: $ci-action-icon-size;
padding: 2px 0 0 5px;
font-size: 12px;
background-color: $white-light;
position: absolute;
top: 50%;
right: $gl-padding;
margin-top: -#{$ci-action-icon-size / 2};
&:hover,
&:focus {
background-color: $stage-hover-bg;
border: 1px solid $dropdown-toggle-active-border-color;
}
svg {
fill: $gl-text-color-secondary;
width: #{$ci-action-icon-size - 6};
height: #{$ci-action-icon-size - 6};
left: -3px;
position: relative;
top: -1px;
&.icon-action-stop,
&.icon-action-cancel {
width: 12px;
height: 12px;
top: 1px;
left: -1px;
}
&.icon-action-play {
width: 11px;
height: 11px;
top: 1px;
left: 1px;
}
&.icon-action-retry {
width: 16px;
height: 16px;
top: 0;
left: -3px;
}
}
&:hover svg,
&:focus svg {
fill: $gl-text-color;
}
&.icon-action-retry,
&.icon-action-play {
svg {
width: #{$ci-action-icon-size - 6};
height: #{$ci-action-icon-size - 6};
left: 8px;
}
}
}
// link to the build
.mini-pipeline-graph-dropdown-item {
align-items: center;
......@@ -988,7 +924,7 @@ button.mini-pipeline-graph-dropdown-toggle {
&.dropdown-menu {
transform: translate(-80%, 0);
@media(min-width: $screen-md-min) {
@media (min-width: $screen-md-min) {
transform: translate(-50%, 0);
right: auto;
left: 50%;
......
app/views/ci/status/_dropdown_graph_badge.html.haml
View file @ e0b7541b
......@@ -16,5 +16,5 @@
%span.ci-build-text= subject.name
- if status.has_action?
= link_to status.action_path, class: "ci-action-icon-wrapper js-ci-action-icon", method: status.action_method, data: { toggle: 'tooltip', title: status.action_title, container: 'body' } do
= link_to status.action_path, class: "ci-action-icon-container ci-action-icon-wrapper js-ci-action-icon", method: status.action_method, data: { toggle: 'tooltip', title: status.action_title, container: 'body' } do
= sprite_icon(status.action_icon, css_class: "icon-action-#{status.action_icon}")
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7