diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-11-04 18:08:41 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-11-04 18:08:41 +0300 |
commit | 9ebfef6a3cf7184161c454c7667d151396e89137 (patch) | |
tree | a00337f95d0662c5d4433917ee04172ae82cc2de /app/assets/javascripts/pipelines | |
parent | 8a9cbfa9c56792d8e338c289eb803fb0ebde2083 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/pipelines')
3 files changed, 16 insertions, 10 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipeline_graph/job_pill.vue b/app/assets/javascripts/pipelines/components/pipeline_graph/job_pill.vue index 8eec0110865..a0c35f54c0e 100644 --- a/app/assets/javascripts/pipelines/components/pipeline_graph/job_pill.vue +++ b/app/assets/javascripts/pipelines/components/pipeline_graph/job_pill.vue @@ -57,7 +57,7 @@ export default { <tooltip-on-truncate :title="jobName" truncate-target="child" placement="top"> <div :id="jobId" - class="pipeline-job-pill gl-bg-white gl-text-center gl-text-truncate gl-rounded-pill gl-mb-3 gl-px-5 gl-py-2 gl-relative gl-z-index-1 gl-transition-duration-slow gl-transition-timing-function-ease" + class="gl-w-15 gl-bg-white gl-text-center gl-text-truncate gl-rounded-pill gl-mb-3 gl-px-5 gl-py-2 gl-relative gl-z-index-1 gl-transition-duration-slow gl-transition-timing-function-ease" :class="jobPillClasses" @mouseover="onMouseEnter" @mouseleave="onMouseLeave" diff --git a/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue b/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue index 3a2b8a20bae..42ca2fe41b6 100644 --- a/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue +++ b/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue @@ -97,15 +97,20 @@ export default { this.reportFailure(DRAW_FAILURE); } }, - getStageBackgroundClass(index) { + getStageBackgroundClasses(index) { const { length } = this.pipelineData.stages; - + // It's possible for a graph to have only one stage, in which + // case we concatenate both the left and right rounding classes if (length === 1) { - return 'stage-rounded'; - } else if (index === 0) { - return 'stage-left-rounded'; - } else if (index === length - 1) { - return 'stage-right-rounded'; + return 'gl-rounded-bottom-left-6 gl-rounded-top-left-6 gl-rounded-bottom-right-6 gl-rounded-top-right-6'; + } + + if (index === 0) { + return 'gl-rounded-bottom-left-6 gl-rounded-top-left-6'; + } + + if (index === length - 1) { + return 'gl-rounded-bottom-right-6 gl-rounded-top-right-6'; } return ''; @@ -190,7 +195,8 @@ export default { > <div class="gl-display-flex gl-align-items-center gl-bg-white gl-w-full gl-px-8 gl-py-4 gl-mb-5" - :class="getStageBackgroundClass(index)" + :class="getStageBackgroundClasses(index)" + data-testid="stage-background" > <stage-pill :stage-name="stage.name" :is-empty="stage.groups.length === 0" /> </div> diff --git a/app/assets/javascripts/pipelines/components/pipeline_graph/stage_pill.vue b/app/assets/javascripts/pipelines/components/pipeline_graph/stage_pill.vue index 7b2458db725..df48426f24e 100644 --- a/app/assets/javascripts/pipelines/components/pipeline_graph/stage_pill.vue +++ b/app/assets/javascripts/pipelines/components/pipeline_graph/stage_pill.vue @@ -26,7 +26,7 @@ export default { <template> <tooltip-on-truncate :title="stageName" truncate-target="child" placement="top"> <div - class="gl-px-5 gl-py-2 gl-text-white gl-text-center gl-text-truncate gl-rounded-pill pipeline-stage-pill" + class="gl-px-5 gl-py-2 gl-text-white gl-text-center gl-text-truncate gl-rounded-pill gl-w-20" :class="emptyClass" > {{ stageName }} |