Skip to content

G
gitlab-ce
Commit 30978764 authored by Florie Guibert's avatar Florie Guibert
Browse files
Options

Cards in Epic Tree have two lines of content 

- Epic tree cards on two lines
- Styles changes for related issues and MRs
parent 13ee246a
Show 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 @ 30978764
......@@ -54,22 +54,23 @@ export default {
'issuable-info-container': !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">
<!-- Title area: Status icon (XL) and title -->
<div class="item-title d-flex align-items-center mb-xl-0">
<span ref="iconElementXL">
<div class="item-title d-flex align-items-xl-center mb-xl-0">
<div ref="iconElementXL">
<icon
v-if="hasState"
ref="iconElementXL"
class="mr-2"
:class="iconClass"
:name="iconName"
:size="16"
:title="stateTitle"
:aria-label="state"
/>
</span>
</div>
<gl-tooltip :target="() => $refs.iconElementXL">
<span v-html="stateTitle"></span>
</gl-tooltip>
......@@ -97,17 +98,6 @@ export default {
<div
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">
<span v-html="stateTitle"></span>
</gl-tooltip>
......@@ -159,7 +149,7 @@ export default {
v-gl-tooltip
:disabled="removeDisabled"
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"
:title="__('Remove')"
:aria-label="__('Remove')"
......
app/assets/stylesheets/components/related_items_list.scss
View file @ 30978764
$item-path-max-width: 160px;
$item-milestone-max-width: 120px;
$item-weight-max-width: 48px;
$item-remove-button-space: 42px;
.related-items-list {
padding: $gl-padding-4;
padding-right: $gl-padding-6;
&,
.list-item:last-child {
......@@ -11,16 +13,16 @@ $item-weight-max-width: 48px;
}
}
.sortable-link {
max-width: 85%;
}
.related-items-tree {
.card-header {
.gl-label {
line-height: $gl-line-height;
}
}
.sortable-link {
white-space: normal;
}
}
.item-body {
......@@ -48,17 +50,12 @@ $item-weight-max-width: 48px;
cursor: help;
}
.issue-token-state-icon-open,
.issue-token-state-icon-closed {
margin-right: $gl-padding-4;
}
.confidential-icon {
color: $orange-600;
}
.item-title-wrapper {
max-width: 100%;
max-width: calc(100% - #{$item-remove-button-space});
}
.item-title {
......@@ -88,13 +85,6 @@ $item-weight-max-width: 48px;
.health-label-short {
display: none;
}
@include media-breakpoint-down(lg) {
.issue-count-badge {
padding: 0;
padding-right: 8px;
}
}
}
.item-body,
......@@ -232,25 +222,28 @@ $item-weight-max-width: 48px;
font-weight: $gl-font-weight-bold;
max-width: $item-path-max-width;
}
.issue-token-state-icon-open,
.issue-token-state-icon-closed {
display: block;
}
}
.btn-item-remove {
position: absolute;
right: 0;
top: $gl-padding-4 / 2;
right: 0;
padding: $gl-padding-4;
margin-right: $gl-padding-4 / 2;
line-height: 0;
border-color: transparent;
color: $gl-text-color-secondary;
.related-items-tree & {
position: relative;
top: initial;
padding: $btn-sm-side-margin;
margin-right: initial;
}
&:hover {
color: $gl-text-color;
border-color: $border-color;
}
}
......@@ -283,6 +276,15 @@ $item-weight-max-width: 48px;
/* Small devices (landscape phones, 768px and up) */
@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 {
text-overflow: ellipsis;
overflow: hidden;
......@@ -294,24 +296,6 @@ $item-weight-max-width: 48px;
.item-contents {
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 {
......@@ -348,25 +332,10 @@ $item-weight-max-width: 48px;
@include media-breakpoint-up(xl) {
.item-body {
.item-title {
min-width: 0;
width: auto;
flex-basis: auto;
flex-shrink: 1;
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;
overflow: hidden;
}
.item-meta {
flex: 1;
}
.item-assignees {
.avatar {
height: $gl-padding-24;
width: $gl-padding-24;
}
.avatar-counter {
height: $gl-padding-24;
min-width: $gl-padding-24;
......@@ -399,12 +359,8 @@ $item-weight-max-width: 48px;
.btn-item-remove {
position: relative;
top: initial;
right: 0;
padding: $btn-sm-side-margin;
&:hover {
border-color: $border-color;
}
margin-right: $gl-padding-4 / 2;
}
.sortable-link {
......@@ -422,10 +378,4 @@ $item-weight-max-width: 48px;
display: initial;
}
}
.item-body {
.item-title-wrapper {
max-width: calc(100% - 640px);
}
}
}
app/assets/stylesheets/framework/variables.scss
View file @ 30978764
......@@ -398,6 +398,7 @@ $tooltip-font-size: 12px;
* Padding
*/
$gl-padding-4: 4px;
$gl-padding-6: 6px;
$gl-padding-8: 8px;
$gl-padding-12: 12px;
$gl-padding: 16px;
......@@ -447,6 +448,7 @@ $breadcrumb-min-height: 48px;
$home-panel-title-row-height: 64px;
$home-panel-avatar-mobile-size: 24px;
$gl-line-height: 16px;
$gl-line-height-18: 18px;
$gl-line-height-20: 20px;
$gl-line-height-24: 24px;
$gl-line-height-14: 14px;
......
ee/app/assets/javascripts/related_items_tree/components/related_items_tree_header.vue
View file @ 30978764
......@@ -90,16 +90,14 @@ export default {
</span>
</p>
</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">
<gl-icon name="epic" class="mr-1" />
{{ totalEpicsCount }}
<span class="ml-2 bullet-separator">&bull;</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" />
{{ totalIssuesCount }}
<span v-if="showHealthStatus" class="ml-2 bullet-separator">&bull;</span>
</span>
</div>
<epic-health-status v-if="showHealthStatus" :health-status="healthStatus" />
......
ee/app/assets/javascripts/related_items_tree/components/tree_item.vue
View file @ 30978764
......@@ -89,11 +89,11 @@ export default {
<div class="list-item-body d-flex align-items-center">
<gl-deprecated-button
v-if="!childrenFetchInProgress && hasChildren"
v-gl-tooltip.hover
v-gl-tooltip.viewport.hover
:title="chevronTooltip"
:class="chevronType"
variant="link"
class="btn-svg btn-tree-item-chevron"
class="btn-svg btn-tree-item-chevron align-self-start"
@click="handleChevronClick"
>
<icon :name="chevronType" />
......
ee/app/assets/javascripts/related_items_tree/components/tree_item_body.vue
View file @ 30978764
......@@ -143,18 +143,18 @@ export default {
<template>
<div class="card card-slim sortable-row flex-grow-1">
<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="{
'p-xl-1': userSignedIn,
'item-logged-out pt-xl-2 pb-xl-2': !userSignedIn,
'item-logged-out': !userSignedIn,
'item-closed': isClosed,
}"
>
<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 d-flex align-items-center mb-2 mb-xl-0">
<div class="item-title-wrapper flex-grow-1 mr-2">
<div class="item-title d-flex mb-0 pt-1 pb-2">
<gl-icon
ref="stateIconMd"
class="d-block mr-2"
:class="stateIconClass"
:name="stateIconName"
:aria-label="stateText"
......@@ -180,15 +180,15 @@ export default {
:aria-label="item.title"
:title="item.title"
:href="computedPath"
class="sortable-link"
class="sortable-link ws-normal"
>{{ item.title }}</gl-link
>
</div>
</div>
<div
class="item-meta d-flex flex-wrap mt-xl-0 justify-content-xl-end flex-xl-nowrap 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"
>
<span class="mr-3">{{ itemHierarchy }}</span>
<gl-tooltip v-if="isEpic" :target="() => $refs.countBadge">
<p v-if="allowSubEpics" class="font-weight-bold m-0">
{{ __('Epics') }} &#8226;
......@@ -214,84 +214,64 @@ export default {
</p>
</gl-tooltip>
<div v-if="isEpic" ref="countBadge" class="issue-count-badge text-secondary">
<span v-if="allowSubEpics" class="d-inline-flex align-items-center">
<div
v-if="isEpic"
ref="countBadge"
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="ml-2 bullet-separator">&bull;</span>
<span class="d-inline-flex align-items-center" :class="{ 'ml-2': allowSubEpics }">
<span
class="d-inline-flex align-items-center mr-2"
:class="{ 'ml-2': allowSubEpics }"
>
<gl-icon name="issues" class="mr-1" />
{{ totalIssuesCount }}
</span>
<span v-if="showHealthStatus" class="ml-2 bullet-separator">&bull;</span>
</div>
<div v-if="showHealthStatus" class="item-health-status mr-2">
<epic-health-status v-if="isEpic" :health-status="item.healthStatus" />
<issue-health-status v-else-if="isIssue" :health-status="item.healthStatus" />
</div>
<div class="item-meta-child d-flex align-items-center order-0 flex-wrap flex-xl-nowrap">
<!-- This bullet is for Milestone -->
<span v-if="showHealthStatus && hasMilestone" class="bullet-separator mr-2"
>&bull;</span
>
<item-milestone
v-if="hasMilestone"
: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
v-if="item.dueDate"
:date="item.dueDate"
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
v-if="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"
/>
</div>
<!-- This bullet is for Assignees -->
<span
v-if="(item.dueDate || hasMilestone || showHealthStatus || item.weight) && hasAssignees"
class="mr-2 bullet-separator"
>&bull;</span
>
<item-assignees
v-if="hasAssignees"
:assignees="item.assignees"
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"
class="item-assignees d-inline-flex align-items-center mr-3 mb-md-0 flex-xl-grow-0"
/>
<div v-if="showHealthStatus" class="item-health-status">
<epic-health-status v-if="isEpic" :health-status="item.healthStatus" />
<issue-health-status v-else-if="isIssue" :health-status="item.healthStatus" />
</div>
</div>
</div>
<gl-deprecated-button
v-if="parentItem.userPermissions.adminEpic"
v-gl-tooltip.hover
v-gl-modal-directive="$options.itemRemoveModalId"
:title="__('Remove')"
: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"
>
<gl-icon name="close" class="btn-item-remove-icon" />
......
ee/app/assets/stylesheets/components/related_items_tree.scss
View file @ 30978764
......@@ -34,6 +34,10 @@
}
}
.item-meta {
line-height: $gl-line-height-18;
}
.btn-tree-item-chevron {
margin-bottom: $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 @ 30978764
---
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