Skip to content

G
gitlab-ce
Commit 25a12351 authored by Constance Okoghenun's avatar Constance Okoghenun
Browse files
Options

Redesigned related merge requests in issue page 

Updated the markup and styles for related merge requests in
issues page
parent 6b2f81f6
Hide whitespace changes
Inline Side-by-side
Showing with 422 additions and 46 deletions
app/assets/stylesheets/components/related_items_list.scss 0 → 100644
View file @ 25a12351
$item-path-max-width: 160px;
$item-milestone-max-width: 120px;
$item-weight-max-width: 48px;
.related-items-list {
padding: $gl-padding-4;
&,
.list-item:last-child {
margin-bottom: 0;
}
}
.item-body {
display: flex;
position: relative;
align-items: center;
padding: $gl-padding-8;
line-height: $gl-line-height;
.item-contents {
display: flex;
align-items: center;
flex-wrap: wrap;
flex-grow: 1;
}
.issue-token-state-icon-open,
.issue-token-state-icon-closed,
.confidential-icon,
.item-milestone .icon,
.item-weight .board-card-info-icon {
min-width: $gl-padding;
cursor: help;
}
.issue-token-state-icon-open,
.issue-token-state-icon-closed {
margin-right: $gl-padding-4;
}
.confidential-icon {
align-self: baseline;
color: $orange-600;
margin-right: $gl-padding-4;
}
.item-title {
flex-basis: 100%;
margin-bottom: $gl-padding-8;
font-size: $gl-font-size-small;
&.mr-title {
font-weight: $gl-font-weight-bold;
}
.sortable-link {
max-width: 85%;
}
.issue-token-state-icon-open,
.issue-token-state-icon-closed {
display: none;
}
}
.item-meta {
display: flex;
flex-wrap: wrap;
flex-basis: 100%;
font-size: $gl-font-size-small;
color: $gl-text-color-secondary;
.item-meta-child {
order: 0;
display: flex;
flex-wrap: wrap;
flex-basis: 100%;
.item-due-date,
.item-weight {
margin-left: $gl-padding-8;
}
.item-milestone,
.item-weight {
cursor: help;
}
.item-milestone {
text-decoration: none;
max-width: $item-milestone-max-width;
}
.item-due-date {
margin-right: 0;
}
.item-weight {
margin-right: 0;
max-width: $item-weight-max-width;
}
}
.item-path-id .path-id-text,
.item-milestone .milestone-title,
.item-due-date,
.item-weight .board-card-info-text {
color: $gl-text-color-secondary;
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.item-path-id {
margin-top: $gl-padding-4;
font-size: $gl-font-size-xs;
white-space: nowrap;
.path-id-text {
font-weight: $gl-font-weight-bold;
max-width: $item-path-max-width;
}
.issue-token-state-icon-open,
.issue-token-state-icon-closed {
display: block;
}
&:not(.mr-item-path) {
order: 1;
}
}
.item-milestone .ic-clock {
color: $gl-text-color-tertiary;
margin-right: $gl-padding-4;
}
.item-assignees {
order: 2;
align-self: flex-end;
align-items: center;
margin-left: auto;
.user-avatar-link {
margin-right: -$gl-padding-4;
&:nth-of-type(1) {
z-index: 2;
}
&:nth-of-type(2) {
z-index: 1;
}
&:last-child {
margin-right: 0;
}
}
.avatar {
height: $gl-padding;
width: $gl-padding;
margin-right: 0;
vertical-align: bottom;
}
.avatar-counter {
height: $gl-padding;
border: 1px solid transparent;
background-color: $gl-text-color-tertiary;
font-weight: $gl-font-weight-bold;
padding: 0 $gl-padding-4;
line-height: $gl-padding;
}
}
}
.btn-item-remove {
position: absolute;
right: 0;
top: $gl-padding-4 / 2;
padding: $gl-padding-4;
margin-right: $gl-padding-4 / 2;
line-height: 0;
border-color: transparent;
color: $gl-text-color-secondary;
&:hover {
color: $gl-text-color;
}
}
}
@include media-breakpoint-up(sm) {
.item-body {
.item-contents .item-title .sortable-link {
max-width: 90%;
}
}
}
/* Small devices (landscape phones, 768px and up) */
@include media-breakpoint-up(md) {
.item-body {
.item-contents {
min-width: 0;
.item-title {
flex-basis: unset;
// 98% because we compensate
// for remove button which is
// positioned absolutely
width: 95%;
margin-bottom: $gl-padding-4;
.sortable-link {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 100%;
}
}
.item-meta {
.item-path-id {
order: 0;
margin-top: 0;
}
.item-meta-child {
flex-basis: unset;
margin-left: auto;
margin-right: $gl-padding-4;
~ .item-assignees {
margin-left: $gl-padding-4;
}
}
.item-assignees {
margin-bottom: 0;
margin-left: 0;
order: 2;
}
}
}
.btn-item-remove {
order: 1;
}
}
}
/* Medium devices (desktops, 992px and up) */
@include media-breakpoint-up(lg) {
.item-body {
padding: $gl-padding;
.item-title {
font-size: $gl-font-size;
}
.item-meta .item-path-id {
font-size: inherit; // Base size given to `item-meta` is `$gl-font-size-small`
}
.issue-token-state-icon-open,
.issue-token-state-icon-closed {
margin-right: $gl-padding-4;
}
}
}
/* Large devices (large desktops, 1200px and up) */
@include media-breakpoint-up(xl) {
.item-body {
padding: $gl-padding-8;
padding-left: $gl-padding;
.item-contents {
flex-wrap: nowrap;
overflow: hidden;
.item-title {
display: flex;
margin-bottom: 0;
min-width: 0;
width: auto;
flex-basis: unset;
font-weight: $gl-font-weight-normal;
.sortable-link {
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.issue-token-state-icon-open,
.issue-token-state-icon-closed {
display: block;
margin-right: $gl-padding-8;
}
.confidential-icon {
align-self: auto;
margin-top: 0;
}
}
.item-meta {
margin-top: 0;
justify-content: flex-end;
flex: 1;
flex-wrap: nowrap;
.item-path-id {
order: 0;
margin-top: 0;
margin-left: $gl-padding-8;
margin-right: auto;
.issue-token-state-icon-open,
.issue-token-state-icon-closed {
display: none;
}
}
.item-meta-child {
margin-left: $gl-padding-8;
flex-wrap: nowrap;
}
.item-assignees {
flex-grow: 0;
margin-top: 0;
margin-right: $gl-padding-4;
.avatar {
height: $gl-padding-24;
width: $gl-padding-24;
}
.avatar-counter {
height: $gl-padding-24;
min-width: $gl-padding-24;
line-height: $gl-padding-24;
border-radius: $gl-padding-24;
}
}
}
}
.btn-item-remove {
position: relative;
align-self: center;
top: initial;
right: 0;
margin-right: 0;
padding: $btn-sm-side-margin;
&:hover {
border-color: $border-color;
}
}
}
}
app/assets/stylesheets/pages/issues.scss
View file @ 25a12351
...@@ -80,7 +80,6 @@ ul.related-merge-requests > li { ...@@ -80,7 +80,6 @@ ul.related-merge-requests > li {
} }
} }
.merge-requests-title,
.related-branches-title { .related-branches-title {
font-size: 16px; font-size: 16px;
font-weight: $gl-font-weight-bold; font-weight: $gl-font-weight-bold;
...@@ -91,23 +90,16 @@ ul.related-merge-requests > li { ...@@ -91,23 +90,16 @@ ul.related-merge-requests > li {
} }
.merge-request-status { .merge-request-status {
font-size: 13px;
padding: 0 5px;
color: $white-light;
height: 20px;
border-radius: 3px;
line-height: 18px;
&.merged { &.merged {
background: $blue-500; color: $blue-500;
} }
&.closed { &.closed {
background: $red-500; color: $red-500;
} }
&.open { &.open {
background: $green-500; color: $green-500;
} }
} }
......
app/assets/stylesheets/pages/issues/issue_count_badge.scss
View file @ 25a12351
.issue-count-badge { .issue-count-badge,
.mr-count-badge {
display: inline-flex; display: inline-flex;
border-radius: $border-radius-base; border-radius: $border-radius-base;
border: 1px solid $border-color; border: 1px solid $border-color;
padding: 5px $gl-padding-8; padding: 5px $gl-padding-8;
} }
.issue-count-badge-count { .issue-count-badge-count,
.mr-count-badge-count {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
} }
app/views/projects/issues/_merge_requests.html.haml
View file @ 25a12351
- if @merge_requests.any? - if @merge_requests.any?
%h2.merge-requests-title .card-slim.mt-3
= pluralize(@merge_requests.count, 'Related Merge Request') .card-header
%ul.unstyled-list.related-merge-requests %h2.card-title.mt-0.mb-0.h5.merge-requests-title
- has_any_head_pipeline = @merge_requests.any?(&:head_pipeline_id) %span.mr-1.bold
- @merge_requests.each do |merge_request| = pluralize(@merge_requests.count, 'Related Merge Request')
%li .d-inline-flex.lh-100.align-middle
%span.merge-request-ci-status .mr-count-badge
- if merge_request.head_pipeline .mr-count-badge-count
= render_pipeline_status(merge_request.head_pipeline) = sprite_icon('merge-request', size: 16, css_class: 'mr-1 text-secondary')
- elsif has_any_head_pipeline = @merge_requests.count
= icon('blank fw') %ul.content-list.related-items-list
%span.merge-request-id - has_any_head_pipeline = @merge_requests.any?(&:head_pipeline_id)
= merge_request.to_reference - @merge_requests.each do |merge_request|
%span.merge-request-info %li.list-item.py-0.px-0
%strong .item-body.issuable-info-container.py-md-3.px-md-3
= link_to merge_request.title, merge_request_path(merge_request), class: "row_title" .item-contents
- unless @issue.project.id == merge_request.target_project.id .item-title.d-flex.align-items-center.mr-title
in = render partial: 'projects/issues/merge_requests_status', locals: { merge_request: merge_request, css_class: 'd-none d-lg-block append-right-8' }
- project = merge_request.target_project = link_to merge_request.title, merge_request_path(merge_request)
= link_to project.full_name, project_path(project) .item-meta
= render partial: 'projects/issues/merge_requests_status', locals: { merge_request: merge_request, css_class: 'd-lg-none d-md-block append-right-5' }
%span.d-flex.align-items-center.append-right-8.mr-item-path.item-path-id.mt-0
%span.path-id-text.bold.text-truncate{ data: { toggle: 'tooltip'}, title: merge_request.target_project.full_name }
= merge_request.target_project.full_name
= merge_request.to_reference
%span.merge-request-ci-status.flex-md-grow-1.justify-content-end.d-flex
- if merge_request.head_pipeline
= render_pipeline_status(merge_request.head_pipeline, tooltip_placement: 'bottom')
- elsif has_any_head_pipeline
= icon('blank fw')
- if merge_request.merged? - if @closed_by_merge_requests.present?
%span.merge-request-status.prepend-left-10.merged %p
Merged = render partial: 'projects/issues/closed_by_box', locals: {merge_request_count: @merge_requests.count}
- elsif merge_request.closed?
%span.merge-request-status.prepend-left-10.closed
Closed
- else
%span.merge-request-status.prepend-left-10.open
Open
- if @closed_by_merge_requests.present?
%li
= render partial: 'projects/issues/closed_by_box', locals: {merge_request_count: @merge_requests.count}
app/views/projects/issues/_merge_requests_status.html.haml 0 → 100644
View file @ 25a12351
- if merge_request.merged?
= sprite_icon('merge', size: 16, css_class: "merge-request-status merged #{css_class}")
- elsif merge_request.closed?
= sprite_icon('issue-close', size: 16, css_class: "merge-request-status closed #{css_class}")
- else
= sprite_icon('issue-open-m', size: 16, css_class: "merge-request-status open #{css_class}")
changelogs/unreleased/47007-related-merge-requests-in-issue-design-restyle.yml 0 → 100644
View file @ 25a12351
---
title: Redesigned related merge requests in issue page.
merge_request: 24270
author:
type: changed
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