Commit 6ea66cda authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch 'fix-style-lint-errors-pipeline' into 'master'

Fix style-lint errors and warnings for pipeline.scss

See merge request gitlab-org/gitlab-ee!16145
parents 9a784bcf a821b26b
......@@ -20,6 +20,9 @@ export default {
<stage-column-component
v-for="(stage, index) in graph"
:key="stage.name"
:class="{
'append-right-48': shouldAddRightMargin(index),
}"
:title="capitalizeStageName(stage.name)"
:groups="stage.groups"
:stage-connector-class="stageConnectorClass(index, stage)"
......
......@@ -40,5 +40,15 @@ export default {
refreshPipelineGraph() {
this.$emit('refreshPipelineGraph');
},
/**
* CSS class is applied:
* - if pipeline graph contains only one stage column component
*
* @param {number} index
* @returns {boolean}
*/
shouldAddRightMargin(index) {
return !(index === this.graph.length - 1);
},
},
};
......@@ -395,6 +395,7 @@ img.emoji {
.prepend-left-default { margin-left: $gl-padding; }
.prepend-left-20 { margin-left: 20px; }
.prepend-left-32 { margin-left: 32px; }
.prepend-left-64 { margin-left: 64px; }
.append-right-4 { margin-right: 4px; }
.append-right-5 { margin-right: 5px; }
.append-right-8 { margin-right: 8px; }
......@@ -402,6 +403,8 @@ img.emoji {
.append-right-15 { margin-right: 15px; }
.append-right-default { margin-right: $gl-padding; }
.append-right-20 { margin-right: 20px; }
.append-right-32 { margin-right: 32px; }
.append-right-48 { margin-right: 48px; }
.prepend-right-32 { margin-right: 32px; }
.append-bottom-0 { margin-bottom: 0; }
.append-bottom-4 { margin-bottom: $gl-padding-4; }
......
......@@ -476,10 +476,6 @@
display: inline-block;
vertical-align: top;
&:not(:last-child) {
margin-right: 44px;
}
&.left-margin {
&:not(:first-child) {
margin-left: 44px;
......
......@@ -132,7 +132,7 @@ export default {
<ul
v-if="!isLoading"
:class="{
'has-linked-pipelines': hasTriggered || hasTriggeredBy,
'inline js-has-linked-pipelines': hasTriggered || hasTriggeredBy,
}"
class="stage-column-list align-top"
>
......@@ -140,9 +140,10 @@ export default {
v-for="(stage, index) in graph"
:key="stage.name"
:class="{
'has-upstream': index === 0 && hasTriggeredBy,
'has-upstream prepend-left-64': index === 0 && hasTriggeredBy,
'has-downstream': index === graph.length - 1 && hasTriggered,
'has-only-one-job': hasOnlyOneJob(stage),
'append-right-46': shouldAddRightMargin(index),
}"
:title="capitalizeStageName(stage.name)"
:groups="stage.groups"
......
......@@ -52,8 +52,12 @@ export default {
@click="onClickLinkedPipeline"
>
<gl-loading-icon v-if="pipeline.isLoading" class="js-linked-pipeline-loading d-inline" />
<ci-status v-else :status="pipelineStatus" class="js-linked-pipeline-status" />
<ci-status
v-else
:status="pipelineStatus"
css-classes="position-top-0"
class="js-linked-pipeline-status"
/>
<span class="str-truncated align-bottom"> {{ projectName }} &#8226; #{{ pipeline.id }} </span>
</gl-button>
</li>
......
......@@ -21,7 +21,11 @@ export default {
},
computed: {
columnClass() {
return `graph-position-${this.graphPosition}`;
const positionValues = {
right: 'prepend-left-64',
left: 'append-right-32',
};
return `graph-position-${this.graphPosition} ${positionValues[this.graphPosition]}`;
},
},
};
......
......@@ -86,7 +86,7 @@ export default {
'is-upstream': isUpstream,
'is-downstream': isDownstream,
}"
class="linked-pipeline-mini-list"
class="linked-pipeline-mini-list inline-block"
>
<icon v-if="isDownstream" class="arrow-icon" name="long-arrow" />
......
.linked-pipeline-mini-list {
display: inline-block;
&.is-downstream {
margin-left: -4px;
margin-right: 4px;
......@@ -94,10 +92,6 @@
}
}
.has-linked-pipelines.stage-column-list {
display: inline-block;
}
.upstream-pipeline {
margin-right: 84px;
}
......@@ -169,17 +163,11 @@
@include build-content(0);
text-align: inherit;
min-height: 42px;
svg {
top: 0;
}
}
}
}
.stage-column.has-upstream {
margin-left: 60px;
.left-connector {
@include flat-connector-before(60px);
}
......
......@@ -76,8 +76,8 @@ describe('graph component', () => {
expect(firstStageColumnElement.classList.contains('left-margin')).toEqual(true);
});
it('should include the has-linked-pipelines flag', () => {
expect(component.$el.querySelector('.has-linked-pipelines')).not.toBeNull();
it('should include the js-has-linked-pipelines flag', () => {
expect(component.$el.querySelector('.js-has-linked-pipelines')).not.toBeNull();
});
});
......
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