Skip to content

G
gitlab-ce
Commit fb754a86 authored by Phil Hughes's avatar Phil Hughes
Browse files
Options

Merge branch '61613-spacing-mr-widgets' into 'master' 

Align merge request icons and text

Closes #61613

See merge request gitlab-org/gitlab-ce!28561
parents ff2837c6 7a796c76
Hide whitespace changes
Inline Side-by-side
Showing with 58 additions and 41 deletions
app/assets/javascripts/reports/components/issue_status_icon.vue
View file @ fb754a86
......@@ -16,7 +16,7 @@ export default {
statusIconSize: {
type: Number,
required: false,
default: 32,
default: 24,
},
},
computed: {
......
app/assets/javascripts/reports/components/report_item.vue
View file @ fb754a86
......@@ -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" />
......
app/assets/javascripts/reports/components/report_section.vue
View file @ fb754a86
......@@ -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>
......
app/assets/javascripts/reports/components/summary_row.vue
View file @ fb754a86
......@@ -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">
......
app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue
View file @ fb754a86
......@@ -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>
app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
View file @ fb754a86
......@@ -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">
......
app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
View file @ fb754a86
......@@ -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" />
......
app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue
View file @ fb754a86
......@@ -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" />
......
app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
View file @ fb754a86
......@@ -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">
......
app/assets/stylesheets/framework/icons.scss
View file @ fb754a86
......@@ -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;
}
app/assets/stylesheets/pages/merge_requests.scss
View file @ fb754a86
......@@ -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) {
......
app/assets/stylesheets/pages/pipelines.scss
View file @ fb754a86
......@@ -588,8 +588,8 @@
}
.ci-status-icon svg {
height: 20px;
width: 20px;
height: 24px;
width: 24px;
}
.dropdown-menu-toggle {
......
app/assets/stylesheets/pages/reports.scss
View file @ fb754a86
......@@ -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,
......
changelogs/unreleased/61613-spacing-mr-widgets.yml 0 → 100644
View file @ fb754a86
---
title: Left align mr widget icons and text
merge_request: 28561
author:
type: fixed
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7