diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/pipeline_graph/job_pill.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/pipeline_graph/job_pill.vue | 46 |
1 files changed, 45 insertions, 1 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 19d41b166c3..8eec0110865 100644 --- a/app/assets/javascripts/pipelines/components/pipeline_graph/job_pill.vue +++ b/app/assets/javascripts/pipelines/components/pipeline_graph/job_pill.vue @@ -10,13 +10,57 @@ export default { type: String, required: true, }, + jobId: { + type: String, + required: true, + }, + isHighlighted: { + type: Boolean, + required: false, + default: false, + }, + isFadedOut: { + type: Boolean, + required: false, + default: false, + }, + handleMouseOver: { + type: Function, + required: false, + default: () => {}, + }, + handleMouseLeave: { + type: Function, + required: false, + default: () => {}, + }, + }, + computed: { + jobPillClasses() { + return [ + { 'gl-opacity-3': this.isFadedOut }, + this.isHighlighted ? 'gl-shadow-blue-200-x0-y0-b4-s2' : 'gl-inset-border-2-green-400', + ]; + }, + }, + methods: { + onMouseEnter() { + this.$emit('on-mouse-enter', this.jobId); + }, + onMouseLeave() { + this.$emit('on-mouse-leave'); + }, }, }; </script> <template> <tooltip-on-truncate :title="jobName" truncate-target="child" placement="top"> <div - class="gl-bg-white gl-text-center gl-text-truncate gl-rounded-pill gl-inset-border-1-green-600 gl-mb-3 gl-px-5 gl-py-2 pipeline-job-pill " + :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="jobPillClasses" + @mouseover="onMouseEnter" + @mouseleave="onMouseLeave" > {{ jobName }} </div> |