Commit 2c835eec authored by Filipa Lacerda's avatar Filipa Lacerda

Renders json endpoint + updates CSS to render the same between pipelines table and pipeline graph

parent fd972f9f
/* eslint-disable no-new */
import $ from 'jquery';
import flash from './flash';
import axios from './lib/utils/axios_utils';
......@@ -62,7 +60,7 @@ export default class MiniPipelineGraph {
*/
renderBuildsList(stageContainer, data) {
const dropdownContainer = stageContainer.parentElement.querySelector(
`${this.dropdownListSelector} .js-builds-dropdown-list`,
`${this.dropdownListSelector} .js-builds-dropdown-list ul`,
);
dropdownContainer.innerHTML = data;
......
......@@ -95,6 +95,7 @@
axios
.get(this.stage.dropdown_path)
.then(({ data }) => {
// TODO: REMOVE THIS ONCE WE HAVE BACKEND
this.dropdownContent = [
{
id: 966,
......
......@@ -686,6 +686,8 @@ $stage-hover-bg: $gray-darker;
$ci-action-icon-size: 22px;
$pipeline-dropdown-line-height: 20px;
$pipeline-dropdown-status-icon-size: 18px;
$ci-action-dropdown-button-size: 24px;
$ci-action-dropdown-svg-size: 12px;
/*
CI variable lists
......
......@@ -462,12 +462,6 @@
text-overflow: ellipsis;
}
.build {
position: relative;
width: 186px;
margin-bottom: 10px;
white-space: normal;
.ci-job-dropdown-container {
// override dropdown.scss
.dropdown-menu li button {
......@@ -476,11 +470,6 @@
}
}
// ensure .build-content has hover style when action-icon is hovered
.ci-job-dropdown-container:hover .build-content {
@extend .build-content:hover;
}
.ci-action-icon-container {
position: absolute;
right: 5px;
......@@ -518,6 +507,17 @@
}
}
.build {
position: relative;
width: 186px;
margin-bottom: 10px;
white-space: normal;
// ensure .build-content has hover style when action-icon is hovered
.ci-job-dropdown-container:hover .build-content {
@extend .build-content:hover;
}
.ci-status-icon svg {
height: 20px;
width: 20px;
......@@ -604,6 +604,55 @@
}
}
/**
Icons inside dropdown
*/
.big-pipeline-graph-dropdown-menu,
.mini-pipeline-graph-dropdown-menu {
// override dropdown.scss
&.dropdown-menu li button {
padding: 0;
text-align: center;
}
.ci-action-icon-container {
position: absolute;
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;
background: $white-light;
border: 1px solid $border-color;
border-radius: 50%;
display: block;
&:hover {
background-color: $stage-hover-bg;
border: 1px solid $dropdown-toggle-active-border-color;
svg {
fill: $gl-text-color;
}
}
svg {
width: $ci-action-dropdown-svg-size;
height: $ci-action-dropdown-svg-size;
fill: $gl-text-color-secondary;
position: relative;
top: 0px;
vertical-align: initial;
}
}
}
}
// Triggers the dropdown in the big pipeline graph
.dropdown-counter-badge {
font-weight: 100;
......
......@@ -12,6 +12,7 @@
%ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container
%li.js-builds-dropdown-list.scrollable-menu
%ul
%li.js-builds-dropdown-loading.hidden
.text-center
......
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