diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/jobs_shared/job_name_component.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/jobs_shared/job_name_component.vue | 38 |
1 files changed, 38 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipelines/components/jobs_shared/job_name_component.vue b/app/assets/javascripts/pipelines/components/jobs_shared/job_name_component.vue new file mode 100644 index 00000000000..fffd8e1818a --- /dev/null +++ b/app/assets/javascripts/pipelines/components/jobs_shared/job_name_component.vue @@ -0,0 +1,38 @@ +<script> +import ciIcon from '../../../vue_shared/components/ci_icon.vue'; + +/** + * Component that renders both the CI icon status and the job name. + * Used in + * - Badge component + * - Dropdown badge components + */ +export default { + components: { + ciIcon, + }, + props: { + name: { + type: String, + required: true, + }, + status: { + type: Object, + required: true, + }, + iconSize: { + type: Number, + required: false, + default: 16, + }, + }, +}; +</script> +<template> + <span class="ci-job-name-component mw-100 gl-display-flex gl-align-items-center"> + <ci-icon :size="iconSize" :status="status" class="gl-line-height-0" /> + <span class="gl-text-truncate mw-70p gl-pl-3 gl-display-inline-block"> + {{ name }} + </span> + </span> +</template> |