Align merge request icons and text
Align icons left Align text left Adjust padding to be consistent Make icons same 24 size Add changelog mr number Add right margin to widget status container Add left margin inside widget icon container Prepend left padding for error message Only give button left margin, some have buttons Prettify Adjust test summary icons Prettify Fix empty line before lint Remove author Switch to use gl-padding Use utility classes instead Prettify Change loading icon size to md Update summary_row.vue
This commit is contained in:
parent
ff2837c611
commit
7a796c76c2
|
@ -16,7 +16,7 @@ export default {
|
|||
statusIconSize: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 32,
|
||||
default: 24,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
|
|
|
@ -27,7 +27,7 @@ export default {
|
|||
statusIconSize: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 32,
|
||||
default: 24,
|
||||
},
|
||||
isNew: {
|
||||
type: Boolean,
|
||||
|
@ -43,12 +43,15 @@ export default {
|
|||
};
|
||||
</script>
|
||||
<template>
|
||||
<li :class="{ 'is-dismissed': issue.isDismissed }" class="report-block-list-issue">
|
||||
<li
|
||||
:class="{ 'is-dismissed': issue.isDismissed }"
|
||||
class="report-block-list-issue justify-content-center align-items-center"
|
||||
>
|
||||
<issue-status-icon
|
||||
v-if="showReportSectionStatusIcon"
|
||||
:status="status"
|
||||
:status-icon-size="statusIconSize"
|
||||
class="append-right-5"
|
||||
class="append-right-default"
|
||||
/>
|
||||
|
||||
<component :is="component" v-if="component" :issue="issue" :status="status" :is-new="isNew" />
|
||||
|
|
|
@ -165,8 +165,8 @@ export default {
|
|||
<template>
|
||||
<section class="media-section">
|
||||
<div class="media">
|
||||
<status-icon :status="statusIconName" />
|
||||
<div class="media-body d-flex flex-align-self-center">
|
||||
<status-icon :status="statusIconName" :size="24" />
|
||||
<div class="media-body d-flex flex-align-self-center prepend-left-default">
|
||||
<span class="js-code-text code-text">
|
||||
{{ headerText }}
|
||||
<slot :name="slotName"></slot>
|
||||
|
|
|
@ -44,10 +44,16 @@ export default {
|
|||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="report-block-list-issue report-block-list-issue-parent">
|
||||
<div class="report-block-list-icon append-right-10 prepend-left-5">
|
||||
<gl-loading-icon v-if="statusIcon === 'loading'" css-class="report-block-list-loading-icon" />
|
||||
<ci-icon v-else :status="iconStatus" />
|
||||
<div
|
||||
class="report-block-list-issue report-block-list-issue-parent justify-content-center align-items-center"
|
||||
>
|
||||
<div class="report-block-list-icon append-right-default">
|
||||
<gl-loading-icon
|
||||
v-if="statusIcon === 'loading'"
|
||||
css-class="report-block-list-loading-icon"
|
||||
size="md"
|
||||
/>
|
||||
<ci-icon v-else :status="iconStatus" :size="24" />
|
||||
</div>
|
||||
|
||||
<div class="report-block-list-issue-description">
|
||||
|
|
|
@ -14,6 +14,6 @@ export default {
|
|||
|
||||
<template>
|
||||
<div class="circle-icon-container append-right-default align-self-start align-self-lg-center">
|
||||
<icon :name="name" />
|
||||
<icon :name="name" :size="24" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -96,16 +96,14 @@ export default {
|
|||
<template>
|
||||
<div class="ci-widget media js-ci-widget">
|
||||
<template v-if="!hasPipeline || hasCIError">
|
||||
<div
|
||||
class="add-border ci-status-icon ci-status-icon-failed ci-error js-ci-error append-right-default"
|
||||
>
|
||||
<icon :size="32" name="status_failed_borderless" />
|
||||
<div class="add-border ci-status-icon ci-status-icon-failed ci-error js-ci-error">
|
||||
<icon :size="24" name="status_failed_borderless" />
|
||||
</div>
|
||||
<div class="media-body" v-html="errorText"></div>
|
||||
<div class="media-body prepend-left-default" v-html="errorText"></div>
|
||||
</template>
|
||||
<template v-else-if="hasPipeline">
|
||||
<a :href="status.details_path" class="align-self-start append-right-default">
|
||||
<ci-icon :status="status" :size="32" :borderless="true" class="add-border" />
|
||||
<ci-icon :status="status" :size="24" :borderless="true" class="add-border" />
|
||||
</a>
|
||||
<div class="ci-widget-container d-flex">
|
||||
<div class="ci-widget-content">
|
||||
|
|
|
@ -32,8 +32,8 @@ export default {
|
|||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="space-children d-flex append-right-10 widget-status-icon">
|
||||
<div v-if="isLoading" class="mr-widget-icon"><gl-loading-icon size="md" /></div>
|
||||
<div class="d-flex widget-status-icon">
|
||||
<div v-if="isLoading" class="mr-widget-icon"><gl-loading-icon size="sm" /></div>
|
||||
|
||||
<ci-icon v-else :status="statusObj" :size="24" />
|
||||
|
||||
|
|
|
@ -83,7 +83,7 @@ export default {
|
|||
<gl-button
|
||||
:aria-label="ariaLabel"
|
||||
variant="blank"
|
||||
class="commit-edit-toggle square s24 mr-2"
|
||||
class="commit-edit-toggle square s24 append-right-default"
|
||||
@click.stop="toggle()"
|
||||
>
|
||||
<icon :name="collapseIcon" :size="16" />
|
||||
|
|
|
@ -18,7 +18,9 @@ export default {
|
|||
<template>
|
||||
<div class="mr-widget-body mr-widget-empty-state">
|
||||
<div class="row">
|
||||
<div class="artwork col-md-5 order-md-last col-12 text-center">
|
||||
<div
|
||||
class="artwork col-md-5 order-md-last col-12 text-center d-flex justify-content-center align-items-center"
|
||||
>
|
||||
<span v-html="emptyStateSVG"></span>
|
||||
</div>
|
||||
<div class="text col-md-7 order-md-first col-12">
|
||||
|
|
|
@ -88,8 +88,5 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: $border-size solid $gray-400;
|
||||
border-radius: 50%;
|
||||
padding: $gl-padding-8 - $border-size;
|
||||
color: $gray-700;
|
||||
}
|
||||
|
|
|
@ -10,8 +10,8 @@
|
|||
float: left;
|
||||
}
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
> *:not(:first-child) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -69,7 +69,7 @@
|
|||
content: '';
|
||||
border-left: 1px solid $gray-200;
|
||||
position: absolute;
|
||||
left: 32px;
|
||||
left: 28px;
|
||||
top: -17px;
|
||||
height: 16px;
|
||||
}
|
||||
|
@ -114,7 +114,7 @@
|
|||
padding: $gl-padding;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding-left: $gl-padding-50;
|
||||
padding-left: $gl-padding-8 * 7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -264,6 +264,10 @@
|
|||
|
||||
.widget-status-icon {
|
||||
align-self: flex-start;
|
||||
|
||||
button {
|
||||
margin-left: $gl-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.mr-widget-body {
|
||||
|
@ -271,8 +275,8 @@
|
|||
|
||||
@include clearfix;
|
||||
|
||||
&.media > *:first-child {
|
||||
margin-right: 10px;
|
||||
button {
|
||||
margin-left: $gl-padding;
|
||||
}
|
||||
|
||||
.approve-btn {
|
||||
|
@ -312,6 +316,7 @@
|
|||
.bold {
|
||||
font-weight: $gl-font-weight-bold;
|
||||
color: $gl-gray-light;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.state-label {
|
||||
|
@ -377,9 +382,13 @@
|
|||
|
||||
&.mr-widget-empty-state {
|
||||
line-height: 20px;
|
||||
padding: $gl-padding;
|
||||
|
||||
.artwork {
|
||||
margin-bottom: $gl-padding;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
margin-bottom: $gl-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
|
@ -395,7 +404,7 @@
|
|||
}
|
||||
|
||||
.mr-widget-help {
|
||||
padding: 10px 16px 10px $gl-padding-50;
|
||||
padding: 10px 16px 10px ($gl-padding-8 * 7);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
@ -913,7 +922,7 @@
|
|||
.media-body {
|
||||
min-width: 0;
|
||||
font-size: 12px;
|
||||
margin-left: 48px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
|
|
|
@ -588,8 +588,8 @@
|
|||
}
|
||||
|
||||
.ci-status-icon svg {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.dropdown-menu-toggle {
|
||||
|
|
|
@ -57,7 +57,7 @@
|
|||
|
||||
.report-block-container {
|
||||
border-top: 1px solid $border-color;
|
||||
padding: $gl-padding-top;
|
||||
padding: $gl-padding - 2;
|
||||
background-color: $gray-light;
|
||||
|
||||
// Clean MR widget CSS
|
||||
|
@ -96,17 +96,14 @@
|
|||
|
||||
.ci-status-icon {
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
left: -2px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.report-block-list-issue {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.is-dismissed .report-block-list-issue-description,
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Left align mr widget icons and text
|
||||
merge_request: 28561
|
||||
author:
|
||||
type: fixed
|
Loading…
Reference in New Issue