diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-19 10:33:21 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-19 10:33:21 +0300 |
commit | 36a59d088eca61b834191dacea009677a96c052f (patch) | |
tree | e4f33972dab5d8ef79e3944a9f403035fceea43f /app/assets/javascripts/vue_shared/components/ci_icon.vue | |
parent | a1761f15ec2cae7c7f7bbda39a75494add0dfd6f (diff) |
Add latest changes from gitlab-org/gitlab@15-0-stable-eev15.0.0-rc42
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/ci_icon.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/ci_icon.vue | 33 |
1 files changed, 23 insertions, 10 deletions
diff --git a/app/assets/javascripts/vue_shared/components/ci_icon.vue b/app/assets/javascripts/vue_shared/components/ci_icon.vue index 07bd6019b80..9bccc49e894 100644 --- a/app/assets/javascripts/vue_shared/components/ci_icon.vue +++ b/app/assets/javascripts/vue_shared/components/ci_icon.vue @@ -11,17 +11,22 @@ import { GlIcon } from '@gitlab/ui'; * } * * Used in: - * - Pipelines table Badge - * - Pipelines table mini graph - * - Pipeline graph - * - Pipeline show view badge - * - Jobs table + * - Extended MR Popover * - Jobs show view header * - Jobs show view sidebar + * - Jobs table * - Linked pipelines - * - Extended MR Popover + * - Pipeline graph + * - Pipeline mini graph + * - Pipeline show view badge + * - Pipelines table Badge + */ + +/* + * These sizes are defined in gitlab-ui/src/scss/variables.scss + * under '$gl-icon-sizes' */ -const validSizes = [8, 12, 16, 18, 24, 32, 48, 72]; +const validSizes = [8, 12, 14, 16, 24, 32, 48, 72]; export default { components: { @@ -45,6 +50,11 @@ export default { required: false, default: false, }, + isInteractive: { + type: Boolean, + required: false, + default: false, + }, cssClasses: { type: String, required: false, @@ -52,9 +62,9 @@ export default { }, }, computed: { - cssClass() { + wrapperStyleClasses() { const status = this.status.group; - return `ci-status-icon ci-status-icon-${status} js-ci-status-icon-${status}`; + return `ci-status-icon ci-status-icon-${status} js-ci-status-icon-${status} gl-rounded-full gl-justify-content-center`; }, icon() { return this.borderless ? `${this.status.icon}_borderless` : this.status.icon; @@ -63,7 +73,10 @@ export default { }; </script> <template> - <span :class="cssClass"> + <span + :class="[wrapperStyleClasses, { interactive: isInteractive }]" + :style="{ height: `${size}px`, width: `${size}px` }" + > <gl-icon :name="icon" :size="size" :class="cssClasses" :aria-label="status.icon" /> </span> </template> |