Skip to content

G
gitlab-ce
Commit fb2d7b3e authored by Simon Knox's avatar Simon Knox
Browse files
Options

Merge branch '291043-css-the-graph' into 'master' 

Pipeline Graph Structural Update: Code Cleanup List: CSS Part 1

See merge request gitlab-org/gitlab!69656
parents 00a771a3 a7618a54
Hide whitespace changes
Inline Side-by-side
Showing with 34 additions and 515 deletions
app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
View file @ fb2d7b3e
......@@ -23,6 +23,11 @@ export default {
required: false,
default: -1,
},
cssClassJobName: {
type: [String, Array],
required: false,
default: '',
},
stageName: {
type: String,
required: false,
......@@ -59,7 +64,8 @@ export default {
type="button"
data-toggle="dropdown"
data-display="static"
class="dropdown-menu-toggle build-content gl-build-content gl-pipeline-job-width! gl-pr-4!"
:class="cssClassJobName"
class="dropdown-menu-toggle gl-pipeline-job-width! gl-pr-4!"
>
<div class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
<job-item
......
app/assets/javascripts/pipelines/components/graph/job_item.vue
View file @ fb2d7b3e
......@@ -52,7 +52,7 @@ export default {
required: true,
},
cssClassJobName: {
type: String,
type: [String, Array],
required: false,
default: '',
},
......@@ -220,11 +220,11 @@ export default {
<div class="ci-job-name-component gl-display-flex gl-align-items-center">
<ci-icon :size="24" :status="job.status" class="gl-line-height-0" />
<div class="gl-pl-3 gl-display-flex gl-flex-direction-column gl-w-full">
<div class="gl-text-truncate mw-70p gl-line-height-normal">{{ job.name }}</div>
<div class="gl-text-truncate gl-w-70p gl-line-height-normal">{{ job.name }}</div>
<div
v-if="showStageName"
data-testid="stage-name-in-job"
class="gl-text-truncate mw-70p gl-font-sm gl-text-gray-500 gl-line-height-normal"
class="gl-text-truncate gl-w-70p gl-font-sm gl-text-gray-500 gl-line-height-normal"
>
{{ stageName }}
</div>
......
app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue
View file @ fb2d7b3e
......@@ -124,9 +124,8 @@ export default {
<div
ref="linkedPipeline"
v-gl-tooltip
class="linked-pipeline build gl-pipeline-job-width"
class="gl-pipeline-job-width"
:title="tooltipText"
:class="{ 'downstream-pipeline': isDownstream }"
data-qa-selector="child_pipeline"
@mouseover="onDownstreamHovered"
@mouseleave="onDownstreamHoverLeave"
......
app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue
View file @ fb2d7b3e
......@@ -195,7 +195,7 @@ export default {
<template>
<div class="gl-display-flex">
<div :class="columnClass" class="linked-pipelines-column">
<div data-testid="linked-column-title" class="stage-name" :class="computedTitleClasses">
<div data-testid="linked-column-title" :class="computedTitleClasses">
{{ columnTitle }}
</div>
<ul class="gl-pl-0">
......@@ -224,7 +224,7 @@ export default {
<pipeline-graph
v-if="isExpanded(pipeline.id)"
:type="type"
class="d-inline-block gl-mt-n2"
class="gl-inline-block gl-mt-n2"
:config-paths="configPaths"
:pipeline="currentPipeline"
:computed-pipeline-info="getPipelineLayers(pipeline.id)"
......
app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
View file @ fb2d7b3e
......@@ -63,6 +63,21 @@ export default {
required: true,
},
},
jobClasses: [
'gl-py-3',
'gl-px-4',
'gl-border-gray-100',
'gl-border-solid',
'gl-border-1',
'gl-bg-white',
'gl-rounded-7',
'gl-hover-bg-gray-50',
'gl-focus-bg-gray-50',
'gl-hover-text-gray-900',
'gl-focus-text-gray-900',
'gl-hover-border-gray-200',
'gl-focus-border-gray-200',
],
titleClasses: [
'gl-font-weight-bold',
'gl-pipeline-job-width',
......@@ -132,7 +147,7 @@ export default {
:action-icon="action.icon"
:tooltip-text="action.title"
:link="action.path"
class="js-stage-action stage-action rounded"
class="js-stage-action"
@pipelineActionRequestComplete="$emit('refreshPipelineGraph')"
/>
</div>
......@@ -155,7 +170,7 @@ export default {
:pipeline-expanded="pipelineExpanded"
:pipeline-id="pipelineId"
:stage-name="showStageName ? group.stageName : ''"
css-class-job-name="gl-build-content"
:css-class-job-name="$options.jobClasses"
:class="[
{ 'gl-opacity-3': isFadedOut(group.name) },
'gl-transition-duration-slow gl-transition-timing-function-ease',
......@@ -167,6 +182,7 @@ export default {
:group="group"
:stage-name="showStageName ? group.stageName : ''"
:pipeline-id="pipelineId"
:css-class-job-name="$options.jobClasses"
/>
</div>
</div>
......
app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
View file @ fb2d7b3e
@mixin flat-connector-before($length: 44px) {
&::before {
content: '';
position: absolute;
top: 48%;
left: -$length;
border-top: 2px solid var(--border-color, $border-color);
width: $length;
height: 1px;
}
}
@mixin build-content($border-radius: 30px) {
display: inline-block;
padding: 8px 10px 9px;
......
app/assets/stylesheets/page_bundles/pipeline.scss
View file @ fb2d7b3e
......@@ -120,17 +120,10 @@
}
}
.pipeline-tab-content {
display: flex;
width: 100%;
min-height: $dropdown-max-height-lg;
background-color: var(--gray-50, $gray-50);
padding: $gl-padding 0;
overflow: auto;
}
// These are single-value classes to use with utility-class style CSS
// but to still access this variable. Do not add other styles.
// These are single-value classes to use with utility-class style CSS.
// They are here to still access a variable or because they use magic values.
// scoped to the graph. Do not add other styles.
.gl-pipeline-min-h {
min-height: $dropdown-max-height-lg;
}
......@@ -147,22 +140,6 @@
padding-right: 120px;
}
.gl-build-content {
display: inline-block;
padding: 8px 10px 9px;
width: 100%;
border: 1px solid var(--border-color, $border-color);
border-radius: 30px;
background-color: var(--white, $white);
&:hover,
&:focus {
background-color: var(--gray-50, $gray-50);
border: 1px solid $dropdown-toggle-active-border-color;
color: var(--gl-text-color, $gl-text-color);
}
}
.gl-ci-action-icon-container {
position: absolute;
right: 5px;
......@@ -180,259 +157,6 @@
}
}
// Pipeline graph, used at
// app/assets/javascripts/pipelines/components/graph/graph_component.vue
.pipeline-graph {
white-space: nowrap;
transition: max-height 0.3s, padding 0.3s;
.stage-column-list,
.builds-container > ul {
padding: 0;
}
a {
text-decoration: none;
color: var(--gl-text-color, $gl-text-color);
}
svg {
vertical-align: middle;
}
.stage-column {
display: inline-block;
vertical-align: top;
&.left-margin {
&:not(:first-child) {
margin-left: 44px;
.left-connector {
@include flat-connector-before;
}
}
}
&.no-margin {
margin: 0;
}
li {
list-style: none;
}
// when downstream pipelines are present, the last stage isn't the last column
&:last-child:not(.has-downstream) {
.build {
// Remove right connecting horizontal line from first build in last stage
&:first-child::after {
border: 0;
}
// Remove right curved connectors from all builds in last stage
&:not(:first-child)::after {
border: 0;
}
// Remove opposite curve
.curve::before {
display: none;
}
}
}
// when upstream pipelines are present, the first stage isn't the first column
&:first-child:not(.has-upstream) {
.build {
// Remove left curved connectors from all builds in first stage
&:not(:first-child)::before {
border: 0;
}
// Remove opposite curve
.curve::after {
display: none;
}
}
}
// Curve first child connecting lines in opposite direction
.curve {
display: none;
&::before,
&::after {
content: '';
width: 21px;
height: 25px;
position: absolute;
top: -31px;
border-top: 2px solid var(--border-color, $border-color);
}
&::after {
left: -44px;
border-right: 2px solid var(--border-color, $border-color);
border-radius: 0 20px;
}
&::before {
right: -44px;
border-left: 2px solid var(--border-color, $border-color);
border-radius: 20px 0 0;
}
}
}
.stage-name {
margin: 0 0 15px 10px;
font-weight: $gl-font-weight-bold;
width: 176px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 2.2em;
}
.build {
position: relative;
width: 186px;
margin-bottom: 10px;
white-space: normal;
.ci-job-dropdown-container {
// override dropdown.scss
.dropdown-menu li button {
padding: 0;
text-align: center;
}
}
.ci-status-icon svg {
height: 24px;
width: 24px;
}
.dropdown-menu-toggle {
background-color: transparent;
border: 0;
padding: 0;
&:focus {
outline: none;
}
}
.build-content {
@include build-content();
}
.ci-job-dropdown-container:hover .build-content,
a.build-content:hover,
button.build-content:hover {
background-color: var(--gray-100, $gray-100);
border: 1px solid $dropdown-toggle-active-border-color;
}
// Connect first build in each stage with right horizontal line
&:first-child {
&::after {
content: '';
position: absolute;
top: 48%;
right: -48px;
border-top: 2px solid var(--border-color, $border-color);
width: 48px;
height: 1px;
}
}
// Connect each build (except for first) with curved lines
&:not(:first-child) {
&::after,
&::before {
content: '';
top: -49px;
position: absolute;
border-bottom: 2px solid var(--border-color, $border-color);
width: 25px;
height: 69px;
}
// Right connecting curves
&::after {
right: -25px;
border-right: 2px solid var(--border-color, $border-color);
border-radius: 0 0 20px;
}
// Left connecting curves
&::before {
left: -25px;
border-left: 2px solid var(--border-color, $border-color);
border-radius: 0 0 0 20px;
}
}
// Connect second build to first build with smaller curved line
&:nth-child(2) {
&::after,
&::before {
height: 29px;
top: -9px;
}
.curve {
display: block;
}
}
}
.ci-action-icon-container {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
// Action Icons in big pipeline-graph nodes
&.ci-action-icon-wrapper {
height: 30px;
width: 30px;
border-radius: 100%;
display: block;
padding: 0;
line-height: 0;
svg {
fill: var(--gray-500, $gray-500);
}
.gl-spinner {
top: 2px;
}
&.play {
svg {
left: 1px;
top: 1px;
}
}
}
}
.stage-action svg {
left: 1px;
top: -2px;
}
}
// Triggers the dropdown in the big pipeline graph
.dropdown-counter-badge {
font-weight: 100;
font-size: 15px;
position: absolute;
right: 13px;
top: 8px;
}
.split-report-section {
border-bottom: 1px solid var(--gray-50, $gray-50);
......@@ -480,34 +204,6 @@
left: 100%;
top: -10px;
box-shadow: 0 1px 5px $black-transparent;
/**
* Top arrow in the dropdown in the big pipeline graph
*/
&::before,
&::after {
content: '';
display: inline-block;
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
top: 18px;
}
&::before {
left: -6px;
margin-top: 3px;
border-width: 7px 5px 7px 0;
border-right-color: var(--border-color, $border-color);
}
&::after {
left: -5px;
border-width: 10px 7px 10px 0;
border-right-color: var(--white, $white);
}
}
.codequality-report {
......
ee/app/assets/stylesheets/page_bundles/pipeline.scss deleted 100644 → 0
View file @ 00a771a3
@import '../../../../../app/assets/stylesheets/page_bundles/pipeline';
@import '../components/vulnerability_list';
@import '../components/generic_vulnerability_report';
/**
* Cross-project pipelines (applied conditionally to pipeline graph)
*/
.upstream-pipeline {
margin-right: 84px;
}
.linked-pipelines-column.stage-column {
position: relative;
> ul {
padding: 0;
}
&.graph-position-left {
margin-right: 36px;
.cross-project-triangle {
right: -42px;
}
}
&.graph-position-right {
margin-left: 60px;
.cross-project-triangle {
left: -64px;
}
// reset connectors for the downstream pipeline
.linked-pipeline.build {
.curve::before,
&::after {
content: '';
width: 0;
border: 0;
}
}
}
.linked-pipeline.build {
height: 42px;
&::before {
content: none;
}
// apply custom dimensions to connector before and after for triangle arrow
&.flat-connector-before {
@include flat-connector-before($linked-project-column-margin);
}
&.active {
.linked-pipeline-content,
.linked-pipeline-content:hover,
.linked-pipeline-content:focus {
background-color: $blue-100;
}
&.left-connector {
@include flat-connector-before(88px);
}
&::after {
content: '';
position: absolute;
top: 48%;
right: -88px;
border-top: 2px solid $border-color;
width: 88px;
height: 1px;
}
}
&.downstream-pipeline {
height: 86px;
}
.linked-pipeline-content {
@include build-content(0);
text-align: inherit;
min-height: 42px;
}
}
}
.stage-column.has-upstream {
.left-connector {
@include flat-connector-before(60px);
}
&.has-only-one-job {
margin-left: 30px;
margin-right: 0;
.left-connector {
@include flat-connector-before;
}
}
}
.stage-column.has-downstream {
margin-right: $linked-project-column-margin;
&.has-only-one-job:not(:first-child) {
margin-right: 36px;
.left-connector {
@include flat-connector-before;
}
}
.build {
&:first-child {
&::after {
right: -$linked-project-column-margin;
width: $linked-project-column-margin;
}
}
}
}
.cross-project-triangle {
position: absolute;
top: 50px;
width: 0;
height: 0;
border-bottom: 7px solid transparent;
border-top: 7px solid transparent;
border-left: 7px solid $gray-darkest;
font-size: 0;
line-height: 0;
z-index: 10;
}
.project-name-pipeline-id-separator {
display: inline-block;
margin: 4px 2px 0;
font-size: 10px;
vertical-align: top;
}
spec/frontend/fixtures/static/pipeline_graph.html deleted 100644 → 0
View file @ 00a771a3
<div class="pipeline-visualization js-pipeline-graph">
<ul class="stage-column-list">
<li class="stage-column">
<div class="stage-name">
<a href="/">
Test
<div class="builds-container">
<ul>
<li class="build">
<div class="curve"></div>
<a>
<svg></svg>
<div>
stop_review
</div>
</a>
</li>
</ul>
</div>
</a>
</div>
</li>
</ul>
</div>
spec/frontend/pipelines_spec.js deleted 100644 → 0
View file @ 00a771a3
import Pipelines from '~/pipelines';
describe('Pipelines', () => {
beforeEach(() => {
loadFixtures('static/pipeline_graph.html');
});
it('should be defined', () => {
expect(Pipelines).toBeDefined();
});
it('should create a `Pipelines` instance without options', () => {
expect(() => {
new Pipelines(); // eslint-disable-line no-new
}).not.toThrow();
});
});
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