Skip to content

G
gitlab-ce
Commit 8fbef813 authored by Martin Wortschack's avatar Martin Wortschack
Browse files
Options

Merge branch '215042-issue-cards-in-epic-tree-have-two-lines-of-content' into 'master' 

Cards in Epic Tree have two lines of content

See merge request gitlab-org/gitlab!31300
parents 90bf205b 30978764
Hide whitespace changes
Inline Side-by-side
Showing with 113 additions and 184 deletions
app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
View file @ 8fbef813
...@@ -54,22 +54,23 @@ export default { ...@@ -54,22 +54,23 @@ export default {
'issuable-info-container': !canReorder, 'issuable-info-container': !canReorder,
'card-body': canReorder, 'card-body': canReorder,
}" }"
class="item-body d-flex align-items-center p-2 p-lg-3 py-xl-2 px-xl-3" class="item-body d-flex align-items-center py-2 px-3"
> >
<div class="item-contents d-flex align-items-center flex-wrap flex-grow-1 flex-xl-nowrap"> <div class="item-contents d-flex align-items-center flex-wrap flex-grow-1 flex-xl-nowrap">
<!-- Title area: Status icon (XL) and title --> <!-- Title area: Status icon (XL) and title -->
<div class="item-title d-flex align-items-center mb-xl-0"> <div class="item-title d-flex align-items-xl-center mb-xl-0">
<span ref="iconElementXL"> <div ref="iconElementXL">
<icon <icon
v-if="hasState" v-if="hasState"
ref="iconElementXL" ref="iconElementXL"
class="mr-2"
:class="iconClass" :class="iconClass"
:name="iconName" :name="iconName"
:size="16" :size="16"
:title="stateTitle" :title="stateTitle"
:aria-label="state" :aria-label="state"
/> />
</span> </div>
<gl-tooltip :target="() => $refs.iconElementXL"> <gl-tooltip :target="() => $refs.iconElementXL">
<span v-html="stateTitle"></span> <span v-html="stateTitle"></span>
</gl-tooltip> </gl-tooltip>
...@@ -97,17 +98,6 @@ export default { ...@@ -97,17 +98,6 @@ export default {
<div <div
class="item-path-area item-path-id d-flex align-items-center mr-2 mt-2 mt-xl-0 ml-xl-2" class="item-path-area item-path-id d-flex align-items-center mr-2 mt-2 mt-xl-0 ml-xl-2"
> >
<span ref="iconElement">
<icon
v-if="hasState"
:class="iconClass"
:name="iconName"
:title="stateTitle"
:aria-label="state"
data-html="true"
class="d-xl-none"
/>
</span>
<gl-tooltip :target="() => this.$refs.iconElement"> <gl-tooltip :target="() => this.$refs.iconElement">
<span v-html="stateTitle"></span> <span v-html="stateTitle"></span>
</gl-tooltip> </gl-tooltip>
...@@ -159,7 +149,7 @@ export default { ...@@ -159,7 +149,7 @@ export default {
v-gl-tooltip v-gl-tooltip
:disabled="removeDisabled" :disabled="removeDisabled"
type="button" type="button"
class="btn btn-default btn-svg btn-item-remove js-issue-item-remove-button mr-xl-0 align-self-xl-center" class="btn btn-default btn-svg btn-item-remove js-issue-item-remove-button"
data-qa-selector="remove_related_issue_button" data-qa-selector="remove_related_issue_button"
:title="__('Remove')" :title="__('Remove')"
:aria-label="__('Remove')" :aria-label="__('Remove')"
......
app/assets/stylesheets/components/related_items_list.scss
View file @ 8fbef813
$item-path-max-width: 160px; $item-path-max-width: 160px;
$item-milestone-max-width: 120px; $item-milestone-max-width: 120px;
$item-weight-max-width: 48px; $item-weight-max-width: 48px;
$item-remove-button-space: 42px;
.related-items-list { .related-items-list {
padding: $gl-padding-4; padding: $gl-padding-4;
padding-right: $gl-padding-6;
&, &,
.list-item:last-child { .list-item:last-child {
...@@ -11,16 +13,16 @@ $item-weight-max-width: 48px; ...@@ -11,16 +13,16 @@ $item-weight-max-width: 48px;
} }
} }
.sortable-link {
max-width: 85%;
}
.related-items-tree { .related-items-tree {
.card-header { .card-header {
.gl-label { .gl-label {
line-height: $gl-line-height; line-height: $gl-line-height;
} }
} }
.sortable-link {
white-space: normal;
}
} }
.item-body { .item-body {
...@@ -48,17 +50,12 @@ $item-weight-max-width: 48px; ...@@ -48,17 +50,12 @@ $item-weight-max-width: 48px;
cursor: help; cursor: help;
} }
.issue-token-state-icon-open,
.issue-token-state-icon-closed {
margin-right: $gl-padding-4;
}
.confidential-icon { .confidential-icon {
color: $orange-600; color: $orange-600;
} }
.item-title-wrapper { .item-title-wrapper {
max-width: 100%; max-width: calc(100% - #{$item-remove-button-space});
} }
.item-title { .item-title {
...@@ -88,13 +85,6 @@ $item-weight-max-width: 48px; ...@@ -88,13 +85,6 @@ $item-weight-max-width: 48px;
.health-label-short { .health-label-short {
display: none; display: none;
} }
@include media-breakpoint-down(lg) {
.issue-count-badge {
padding: 0;
padding-right: 8px;
}
}
} }
.item-body, .item-body,
...@@ -232,25 +222,28 @@ $item-weight-max-width: 48px; ...@@ -232,25 +222,28 @@ $item-weight-max-width: 48px;
font-weight: $gl-font-weight-bold; font-weight: $gl-font-weight-bold;
max-width: $item-path-max-width; max-width: $item-path-max-width;
} }
.issue-token-state-icon-open,
.issue-token-state-icon-closed {
display: block;
}
} }
.btn-item-remove { .btn-item-remove {
position: absolute; position: absolute;
right: 0;
top: $gl-padding-4 / 2; top: $gl-padding-4 / 2;
right: 0;
padding: $gl-padding-4; padding: $gl-padding-4;
margin-right: $gl-padding-4 / 2; margin-right: $gl-padding-4 / 2;
line-height: 0; line-height: 0;
border-color: transparent; border-color: transparent;
color: $gl-text-color-secondary; color: $gl-text-color-secondary;
.related-items-tree & {
position: relative;
top: initial;
padding: $btn-sm-side-margin;
margin-right: initial;
}
&:hover { &:hover {
color: $gl-text-color; color: $gl-text-color;
border-color: $border-color;
} }
} }
...@@ -283,6 +276,15 @@ $item-weight-max-width: 48px; ...@@ -283,6 +276,15 @@ $item-weight-max-width: 48px;
/* Small devices (landscape phones, 768px and up) */ /* Small devices (landscape phones, 768px and up) */
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
.item-body .item-contents {
max-width: 95%;
}
.related-items-tree .item-contents,
.item-body .item-title {
max-width: 100%;
}
.sortable-link { .sortable-link {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
...@@ -294,24 +296,6 @@ $item-weight-max-width: 48px; ...@@ -294,24 +296,6 @@ $item-weight-max-width: 48px;
.item-contents { .item-contents {
min-width: 0; min-width: 0;
} }
.item-title {
flex-basis: unset;
// 95% because we compensate
// for remove button which is
// positioned absolutely
width: 95%;
}
.btn-item-remove {
order: 1;
}
}
.item-meta {
.item-meta-child {
flex-basis: unset;
}
} }
.card-header { .card-header {
...@@ -348,25 +332,10 @@ $item-weight-max-width: 48px; ...@@ -348,25 +332,10 @@ $item-weight-max-width: 48px;
@include media-breakpoint-up(xl) { @include media-breakpoint-up(xl) {
.item-body { .item-body {
.item-title { .item-title {
min-width: 0;
width: auto; width: auto;
flex-basis: auto; flex-basis: auto;
flex-shrink: 1; flex-shrink: 1;
font-weight: $gl-font-weight-normal; font-weight: $gl-font-weight-normal;
.issue-token-state-icon-open,
.issue-token-state-icon-closed {
display: block;
margin-right: $gl-padding-8;
}
}
.item-title-wrapper {
max-width: calc(100% - 500px);
}
.item-info-area {
flex-basis: auto;
} }
} }
...@@ -378,16 +347,7 @@ $item-weight-max-width: 48px; ...@@ -378,16 +347,7 @@ $item-weight-max-width: 48px;
overflow: hidden; overflow: hidden;
} }
.item-meta {
flex: 1;
}
.item-assignees { .item-assignees {
.avatar {
height: $gl-padding-24;
width: $gl-padding-24;
}
.avatar-counter { .avatar-counter {
height: $gl-padding-24; height: $gl-padding-24;
min-width: $gl-padding-24; min-width: $gl-padding-24;
...@@ -399,12 +359,8 @@ $item-weight-max-width: 48px; ...@@ -399,12 +359,8 @@ $item-weight-max-width: 48px;
.btn-item-remove { .btn-item-remove {
position: relative; position: relative;
top: initial; top: initial;
right: 0;
padding: $btn-sm-side-margin; padding: $btn-sm-side-margin;
margin-right: $gl-padding-4 / 2;
&:hover {
border-color: $border-color;
}
} }
.sortable-link { .sortable-link {
...@@ -422,10 +378,4 @@ $item-weight-max-width: 48px; ...@@ -422,10 +378,4 @@ $item-weight-max-width: 48px;
display: initial; display: initial;
} }
} }
.item-body {
.item-title-wrapper {
max-width: calc(100% - 640px);
}
}
} }
app/assets/stylesheets/framework/variables.scss
View file @ 8fbef813
...@@ -398,6 +398,7 @@ $tooltip-font-size: 12px; ...@@ -398,6 +398,7 @@ $tooltip-font-size: 12px;
* Padding * Padding
*/ */
$gl-padding-4: 4px; $gl-padding-4: 4px;
$gl-padding-6: 6px;
$gl-padding-8: 8px; $gl-padding-8: 8px;
$gl-padding-12: 12px; $gl-padding-12: 12px;
$gl-padding: 16px; $gl-padding: 16px;
...@@ -447,6 +448,7 @@ $breadcrumb-min-height: 48px; ...@@ -447,6 +448,7 @@ $breadcrumb-min-height: 48px;
$home-panel-title-row-height: 64px; $home-panel-title-row-height: 64px;
$home-panel-avatar-mobile-size: 24px; $home-panel-avatar-mobile-size: 24px;
$gl-line-height: 16px; $gl-line-height: 16px;
$gl-line-height-18: 18px;
$gl-line-height-20: 20px; $gl-line-height-20: 20px;
$gl-line-height-24: 24px; $gl-line-height-24: 24px;
$gl-line-height-14: 14px; $gl-line-height-14: 14px;
......
ee/app/assets/javascripts/related_items_tree/components/related_items_tree_header.vue
View file @ 8fbef813
...@@ -90,16 +90,14 @@ export default { ...@@ -90,16 +90,14 @@ export default {
</span> </span>
</p> </p>
</gl-tooltip> </gl-tooltip>
<div ref="countBadge" class="issue-count-badge text-secondary p-0 pr-2"> <div ref="countBadge" class="issue-count-badge text-secondary p-0 pr-3">
<span v-if="allowSubEpics" class="d-inline-flex align-items-center"> <span v-if="allowSubEpics" class="d-inline-flex align-items-center">
<gl-icon name="epic" class="mr-1" /> <gl-icon name="epic" class="mr-1" />
{{ totalEpicsCount }} {{ totalEpicsCount }}
<span class="ml-2 bullet-separator">&bull;</span>
</span> </span>
<span class="d-inline-flex align-items-center" :class="{ 'ml-2': allowSubEpics }"> <span class="d-inline-flex align-items-center" :class="{ 'ml-3': allowSubEpics }">
<gl-icon name="issues" class="mr-1" /> <gl-icon name="issues" class="mr-1" />
{{ totalIssuesCount }} {{ totalIssuesCount }}
<span v-if="showHealthStatus" class="ml-2 bullet-separator">&bull;</span>
</span> </span>
</div> </div>
<epic-health-status v-if="showHealthStatus" :health-status="healthStatus" /> <epic-health-status v-if="showHealthStatus" :health-status="healthStatus" />
......
ee/app/assets/javascripts/related_items_tree/components/tree_item.vue
View file @ 8fbef813
...@@ -89,11 +89,11 @@ export default { ...@@ -89,11 +89,11 @@ export default {
<div class="list-item-body d-flex align-items-center"> <div class="list-item-body d-flex align-items-center">
<gl-deprecated-button <gl-deprecated-button
v-if="!childrenFetchInProgress && hasChildren" v-if="!childrenFetchInProgress && hasChildren"
v-gl-tooltip.hover v-gl-tooltip.viewport.hover
:title="chevronTooltip" :title="chevronTooltip"
:class="chevronType" :class="chevronType"
variant="link" variant="link"
class="btn-svg btn-tree-item-chevron" class="btn-svg btn-tree-item-chevron align-self-start"
@click="handleChevronClick" @click="handleChevronClick"
> >
<icon :name="chevronType" /> <icon :name="chevronType" />
......
ee/app/assets/javascripts/related_items_tree/components/tree_item_body.vue
View file @ 8fbef813
...@@ -143,18 +143,18 @@ export default { ...@@ -143,18 +143,18 @@ export default {
<template> <template>
<div class="card card-slim sortable-row flex-grow-1"> <div class="card card-slim sortable-row flex-grow-1">
<div <div
class="item-body card-body d-flex align-items-center p-2 pl-xl-3" class="item-body card-body d-flex align-items-center pr-1 pl-2 py-1"
:class="{ :class="{
'p-xl-1': userSignedIn, 'item-logged-out': !userSignedIn,
'item-logged-out pt-xl-2 pb-xl-2': !userSignedIn,
'item-closed': isClosed, 'item-closed': isClosed,
}" }"
> >
<div class="item-contents d-flex align-items-center flex-wrap flex-grow-1 flex-xl-nowrap"> <div class="item-contents d-flex align-items-center flex-wrap flex-grow-1 flex-xl-nowrap">
<div class="d-flex flex-column flex-grow-1 item-title-wrapper"> <div class="item-title-wrapper flex-grow-1 mr-2">
<div class="item-title d-flex align-items-center mb-2 mb-xl-0"> <div class="item-title d-flex mb-0 pt-1 pb-2">
<gl-icon <gl-icon
ref="stateIconMd" ref="stateIconMd"
class="d-block mr-2"
:class="stateIconClass" :class="stateIconClass"
:name="stateIconName" :name="stateIconName"
:aria-label="stateText" :aria-label="stateText"
...@@ -180,118 +180,98 @@ export default { ...@@ -180,118 +180,98 @@ export default {
:aria-label="item.title" :aria-label="item.title"
:title="item.title" :title="item.title"
:href="computedPath" :href="computedPath"
class="sortable-link" class="sortable-link ws-normal"
>{{ item.title }}</gl-link >{{ item.title }}</gl-link
> >
</div> </div>
</div>
<div
class="item-meta d-flex flex-wrap mt-xl-0 justify-content-xl-end flex-xl-nowrap align-items-center"
>
<gl-tooltip v-if="isEpic" :target="() => $refs.countBadge">
<p v-if="allowSubEpics" class="font-weight-bold m-0">
{{ __('Epics') }} &#8226;
<span class="text-secondary-400 font-weight-normal"
>{{
sprintf(__('%{openedEpics} open, %{closedEpics} closed'), {
openedEpics: item.descendantCounts && item.descendantCounts.openedEpics,
closedEpics: item.descendantCounts && item.descendantCounts.closedEpics,
})
}}
</span>
</p>
<p class="font-weight-bold m-0">
{{ __('Issues') }} &#8226;
<span class="text-secondary-400 font-weight-normal"
>{{
sprintf(__('%{openedIssues} open, %{closedIssues} closed'), {
openedIssues: item.descendantCounts && item.descendantCounts.openedIssues,
closedIssues: item.descendantCounts && item.descendantCounts.closedIssues,
})
}}
</span>
</p>
</gl-tooltip>
<div v-if="isEpic" ref="countBadge" class="issue-count-badge text-secondary"> <div
<span v-if="allowSubEpics" class="d-inline-flex align-items-center"> class="item-meta d-flex flex-wrap mt-xl-0 flex-xl-nowrap align-items-center border-top pb-1 pt-2 ml-4"
<gl-icon name="epic" class="mr-1" /> >
{{ totalEpicsCount }} <span class="mr-3">{{ itemHierarchy }}</span>
</span> <gl-tooltip v-if="isEpic" :target="() => $refs.countBadge">
<span class="ml-2 bullet-separator">&bull;</span> <p v-if="allowSubEpics" class="font-weight-bold m-0">
<span class="d-inline-flex align-items-center" :class="{ 'ml-2': allowSubEpics }"> {{ __('Epics') }} &#8226;
<gl-icon name="issues" class="mr-1" /> <span class="text-secondary-400 font-weight-normal"
{{ totalIssuesCount }} >{{
</span> sprintf(__('%{openedEpics} open, %{closedEpics} closed'), {
<span v-if="showHealthStatus" class="ml-2 bullet-separator">&bull;</span> openedEpics: item.descendantCounts && item.descendantCounts.openedEpics,
</div> closedEpics: item.descendantCounts && item.descendantCounts.closedEpics,
})
<div v-if="showHealthStatus" class="item-health-status mr-2"> }}
<epic-health-status v-if="isEpic" :health-status="item.healthStatus" /> </span>
<issue-health-status v-else-if="isIssue" :health-status="item.healthStatus" /> </p>
</div> <p class="font-weight-bold m-0">
{{ __('Issues') }} &#8226;
<span class="text-secondary-400 font-weight-normal"
>{{
sprintf(__('%{openedIssues} open, %{closedIssues} closed'), {
openedIssues: item.descendantCounts && item.descendantCounts.openedIssues,
closedIssues: item.descendantCounts && item.descendantCounts.closedIssues,
})
}}
</span>
</p>
</gl-tooltip>
<div class="item-meta-child d-flex align-items-center order-0 flex-wrap flex-xl-nowrap"> <div
<!-- This bullet is for Milestone --> v-if="isEpic"
<span v-if="showHealthStatus && hasMilestone" class="bullet-separator mr-2" ref="countBadge"
>&bull;</span class="issue-count-badge text-secondary py-0 p-lg-0"
> >
<span v-if="allowSubEpics" class="d-inline-flex align-items-center mr-2">
<gl-icon name="epic" class="mr-1" />
{{ totalEpicsCount }}
</span>
<span
class="d-inline-flex align-items-center mr-2"
:class="{ 'ml-2': allowSubEpics }"
>
<gl-icon name="issues" class="mr-1" />
{{ totalIssuesCount }}
</span>
</div>
<item-milestone <item-milestone
v-if="hasMilestone" v-if="hasMilestone"
:milestone="item.milestone" :milestone="item.milestone"
class="d-flex align-items-center item-milestone mr-2" class="d-flex align-items-center item-milestone mr-3"
/> />
<!-- This bullet is for Due Date -->
<span
v-if="(hasMilestone || showHealthStatus) && item.dueDate"
class="mr-2 bullet-separator"
>&bull;</span
>
<item-due-date <item-due-date
v-if="item.dueDate" v-if="item.dueDate"
:date="item.dueDate" :date="item.dueDate"
tooltip-placement="top" tooltip-placement="top"
css-class="item-due-date d-flex align-items-center mr-2" css-class="item-due-date d-flex align-items-center mr-3"
/> />
<!-- This bullet is for Weight -->
<span
v-if="(item.dueDate || hasMilestone || showHealthStatus) && item.weight"
class="mr-2 bullet-separator"
>&bull;</span
>
<item-weight <item-weight
v-if="item.weight" v-if="item.weight"
:weight="item.weight" :weight="item.weight"
class="item-weight d-flex align-items-center mr-2" class="item-weight d-flex align-items-center mr-3"
tag-name="span" tag-name="span"
/> />
</div>
<!-- This bullet is for Assignees --> <item-assignees
<span v-if="hasAssignees"
v-if="(item.dueDate || hasMilestone || showHealthStatus || item.weight) && hasAssignees" :assignees="item.assignees"
class="mr-2 bullet-separator" class="item-assignees d-inline-flex align-items-center mr-3 mb-md-0 flex-xl-grow-0"
>&bull;</span />
>
<item-assignees <div v-if="showHealthStatus" class="item-health-status">
v-if="hasAssignees" <epic-health-status v-if="isEpic" :health-status="item.healthStatus" />
:assignees="item.assignees" <issue-health-status v-else-if="isIssue" :health-status="item.healthStatus" />
class="item-assignees d-inline-flex align-items-center align-self-end mr-2 mr-xl-1 mb-md-0 order-2 flex-xl-grow-0" </div>
/> </div>
</div> </div>
<gl-deprecated-button <gl-deprecated-button
v-if="parentItem.userPermissions.adminEpic" v-if="parentItem.userPermissions.adminEpic"
v-gl-tooltip.hover v-gl-tooltip.hover
v-gl-modal-directive="$options.itemRemoveModalId" v-gl-modal-directive="$options.itemRemoveModalId"
:title="__('Remove')" :title="__('Remove')"
:disabled="itemActionInProgress" :disabled="itemActionInProgress"
class="btn-svg btn-item-remove js-issue-item-remove-button qa-remove-issue-button" class="btn-svg btn-item-remove js-issue-item-remove-button qa-remove-issue-button align-self-start"
@click="handleRemoveClick" @click="handleRemoveClick"
> >
<gl-icon name="close" class="btn-item-remove-icon" /> <gl-icon name="close" class="btn-item-remove-icon" />
......
ee/app/assets/stylesheets/components/related_items_tree.scss
View file @ 8fbef813
...@@ -34,6 +34,10 @@ ...@@ -34,6 +34,10 @@
} }
} }
.item-meta {
line-height: $gl-line-height-18;
}
.btn-tree-item-chevron { .btn-tree-item-chevron {
margin-bottom: $gl-padding-4; margin-bottom: $gl-padding-4;
margin-right: $gl-padding-4; margin-right: $gl-padding-4;
......
ee/changelogs/unreleased/215042-issue-cards-in-epic-tree-have-two-lines-of-content.yml 0 → 100644
View file @ 8fbef813
---
title: Cards in Epic Tree have two lines of content
merge_request: 31300
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