Skip to content

G
gitlab-ce
Commit 0f3c3c97 authored by Martin Hanzel's avatar Martin Hanzel Committed by Kushal Pandya
Browse files
Options

Make related issue cards conform to the UI design 

Original design available here:
https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/12493
parent 090a9b83
Hide whitespace changes
Inline Side-by-side
Showing with 163 additions and 107 deletions
app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
View file @ 0f3c3c97
<script>
import '~/commons/bootstrap';
import { GlTooltipDirective } from '@gitlab/ui';
import { GlTooltip, GlTooltipDirective } from '@gitlab/ui';
import { sprintf } from '~/locale';
import IssueMilestone from '../../components/issue/issue_milestone.vue';
import IssueAssignees from '../../components/issue/issue_assignees.vue';
......@@ -13,6 +13,7 @@ export default {
IssueMilestone,
IssueAssignees,
CiIcon,
GlTooltip,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -24,11 +25,6 @@ export default {
required: false,
default: false,
},
greyLinkWhenMerged: {
type: Boolean,
required: false,
default: false,
},
},
computed: {
stateTitle() {
......@@ -41,10 +37,12 @@ export default {
},
);
},
issueableLinkClass() {
return this.greyLinkWhenMerged
? `sortable-link ${this.state === 'merged' ? ' text-secondary' : ''}`
: 'sortable-link';
heightStyle() {
return {
minHeight: '32px',
width: '0px',
visibility: 'hidden',
};
},
},
};
......@@ -56,20 +54,25 @@ export default {
'issuable-info-container': !canReorder,
'card-body': canReorder,
}"
class="item-body d-flex align-items-center p-2 p-lg-3 p-xl-2 pl-xl-3"
class="item-body d-flex align-items-center p-2 p-lg-3 py-xl-2 px-xl-3"
>
<div class="item-contents d-flex align-items-center flex-wrap flex-grow-1 flex-xl-nowrap">
<div class="item-title d-flex align-items-center mb-1 mb-xl-0">
<icon
v-if="hasState"
v-tooltip
:css-classes="iconClass"
:name="iconName"
:size="16"
:title="stateTitle"
:aria-label="state"
data-html="true"
/>
<!-- Title area: Status icon (XL) and title -->
<div class="item-title d-flex align-items-center mb-xl-0">
<span ref="iconElementXL">
<icon
v-if="hasState"
ref="iconElementXL"
:css-classes="iconClass"
:name="iconName"
:size="16"
:title="stateTitle"
:aria-label="state"
/>
</span>
<gl-tooltip :target="() => $refs.iconElementXL">
<span v-html="stateTitle"></span>
</gl-tooltip>
<icon
v-if="confidential"
v-gl-tooltip
......@@ -79,55 +82,81 @@ export default {
class="confidential-icon append-right-4 align-self-baseline align-self-md-auto mt-xl-0"
:aria-label="__('Confidential')"
/>
<a :href="computedPath" :class="issueableLinkClass">{{ title }}</a>
<a :href="computedPath" class="sortable-link">{{ title }}</a>
</div>
<div class="item-meta d-flex flex-wrap mt-xl-0 justify-content-xl-end flex-xl-nowrap">
<div
class="d-flex align-items-center item-path-id order-md-0 mt-md-0 mt-1 ml-xl-2 mr-xl-auto"
>
<icon
v-if="hasState"
v-tooltip
:css-classes="iconClass"
:name="iconName"
:size="16"
:title="stateTitle"
:aria-label="state"
data-html="true"
class="d-xl-none"
/>
<span v-tooltip :title="itemPath" class="path-id-text d-inline-block">{{
itemPath
}}</span>
{{ pathIdSeparator }}{{ itemId }}
</div>
<!-- Info area: meta, path, and assignees -->
<div class="item-info-area d-flex flex-xl-grow-1 flex-shrink-0">
<!-- Meta area: path and attributes -->
<!-- If there is no room beside the path, meta attributes are put ABOVE it (flex-wrap-reverse). -->
<!-- See design: https://gitlab-org.gitlab.io/gitlab-design/hosted/pedro/%2383-issue-mr-rows-cards-spec-previews/#artboard16 -->
<div
class="item-meta-child d-flex align-items-center order-0 flex-wrap mr-md-1 ml-md-auto ml-xl-2 flex-xl-nowrap"
class="item-meta d-flex flex-wrap-reverse justify-content-start justify-content-md-between"
>
<span v-if="hasPipeline" class="mr-ci-status pr-2">
<a :href="pipelineStatus.details_path">
<ci-icon v-gl-tooltip :status="pipelineStatus" :title="pipelineStatusTooltip" />
</a>
</span>
<issue-milestone
v-if="hasMilestone"
:milestone="milestone"
class="d-flex align-items-center item-milestone"
/>
<slot name="dueDate"></slot>
<slot name="weight"></slot>
<!-- Path area: status icon (<XL), path, issue # -->
<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"
:css-classes="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>
<span v-gl-tooltip :title="itemPath" class="path-id-text d-inline-block">{{
itemPath
}}</span>
<span>{{ pathIdSeparator }}{{ itemId }}</span>
</div>
<!-- Attributes area: CI, epic count, weight, milestone -->
<!-- They have a different order on large screen sizes -->
<div class="item-attributes-area d-flex align-items-center mt-2 mt-xl-0">
<span v-if="hasPipeline" class="mr-ci-status order-md-last">
<a :href="pipelineStatus.details_path">
<ci-icon v-gl-tooltip :status="pipelineStatus" :title="pipelineStatusTooltip" />
</a>
</span>
<issue-milestone
v-if="hasMilestone"
:milestone="milestone"
class="d-flex align-items-center item-milestone order-md-first ml-md-0"
/>
<!-- Flex order for slots is defined in the parent component: e.g. related_issues_block.vue -->
<slot name="dueDate"></slot>
<slot name="weight"></slot>
<issue-assignees
v-if="hasAssignees"
:assignees="assignees"
class="item-assignees align-items-center align-self-end flex-shrink-0 order-md-2 d-none d-md-flex"
/>
</div>
</div>
<!-- Assignees. On small layouts, these are put here, at the end of the card. -->
<issue-assignees
v-if="assignees.length"
v-if="assignees.length !== 0"
:assignees="assignees"
class="item-assignees d-inline-flex align-items-center align-self-end ml-auto ml-md-0 mb-md-0 order-2 flex-xl-grow-0 mt-xl-0 mr-xl-1"
class="item-assignees d-flex align-items-center align-self-end flex-shrink-0 d-md-none ml-2"
/>
</div>
</div>
<button
v-if="canRemove"
ref="removeButton"
v-tooltip
v-gl-tooltip
:disabled="removeDisabled"
type="button"
class="btn btn-default btn-svg btn-item-remove js-issue-item-remove-button qa-remove-issue-button mr-xl-0 align-self-xl-center"
......@@ -137,5 +166,9 @@ export default {
>
<icon :size="16" class="btn-item-remove-icon" name="close" />
</button>
<!-- This element serves to set the issue card's height at a minimum of 32 px. -->
<!-- It fixes #59594: when the remove button is missing, issues have inconsistent heights. -->
<span :style="heightStyle"></span>
</div>
</template>
app/assets/javascripts/vue_shared/mixins/related_issuable_mixin.js
View file @ 0f3c3c97
......@@ -126,6 +126,9 @@ const mixins = {
hasTitle() {
return this.title.length > 0;
},
hasAssignees() {
return this.assignees.length > 0;
},
hasMilestone() {
return !_.isEmpty(this.milestone);
},
......
app/assets/stylesheets/components/related_items_list.scss
View file @ 0f3c3c97
......@@ -83,6 +83,20 @@ $item-weight-max-width: 48px;
flex-basis: 100%;
}
.item-attributes-area {
> * {
margin-left: 8px;
}
.board-card-info {
margin-right: 0;
}
@include media-breakpoint-down(sm) {
margin-left: -8px;
}
}
.item-milestone,
.item-weight {
cursor: help;
......@@ -101,39 +115,39 @@ $item-weight-max-width: 48px;
.item-weight {
max-width: $item-weight-max-width;
}
}
.item-assignees {
.user-avatar-link {
margin-right: -$gl-padding-4;
&:nth-of-type(1) {
z-index: 2;
}
.item-assignees {
.user-avatar-link {
margin-right: -$gl-padding-4;
&:nth-of-type(2) {
z-index: 1;
}
&:nth-of-type(1) {
z-index: 2;
}
&:last-child {
margin-right: 0;
}
&:nth-of-type(2) {
z-index: 1;
}
.avatar {
height: $gl-padding;
width: $gl-padding;
&:last-child {
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;
}
.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;
}
}
......@@ -150,12 +164,6 @@ $item-weight-max-width: 48px;
.issue-token-state-icon-closed {
display: block;
}
@include media-breakpoint-down(sm) {
&:not(.mr-item-path) {
order: 1;
}
}
}
.btn-item-remove {
......@@ -179,6 +187,10 @@ $item-weight-max-width: 48px;
}
@include media-breakpoint-up(sm) {
.item-info-area {
flex-basis: 100%;
}
.sortable-link {
max-width: 90%;
}
......@@ -241,7 +253,8 @@ $item-weight-max-width: 48px;
.item-title {
min-width: 0;
width: auto;
flex-basis: unset;
flex-basis: auto;
flex-shrink: 1;
font-weight: $gl-font-weight-normal;
.issue-token-state-icon-open,
......@@ -250,6 +263,10 @@ $item-weight-max-width: 48px;
margin-right: $gl-padding-8;
}
}
.item-info-area {
flex-basis: auto;
}
}
.item-contents {
......
ee/app/assets/javascripts/related_issues/components/related_issues_block.vue
View file @ 0f3c3c97
......@@ -260,20 +260,21 @@ export default {
event-namespace="relatedIssue"
@relatedIssueRemoveRequest="$emit('relatedIssueRemoveRequest', $event)"
>
<issue-weight
v-if="issue.weight"
slot="weight"
:weight="issue.weight"
class="item-weight d-flex align-items-center ml-2 mr-0"
tag-name="span"
/>
<issue-due-date
v-if="issue.due_date"
slot="dueDate"
:date="issue.due_date"
tooltip-placement="top"
css-class="item-due-date d-flex align-items-center ml-2 mr-0"
/>
<span v-if="issue.weight" slot="weight" class="order-md-1">
<issue-weight
:weight="issue.weight"
class="item-weight d-flex align-items-center"
tag-name="span"
/>
</span>
<span v-if="issue.due_date" slot="dueDate" class="order-md-1">
<issue-due-date
:date="issue.due_date"
tooltip-placement="top"
css-class="item-due-date d-flex align-items-center"
/>
</span>
</related-issuable-item>
</li>
</ul>
......
spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js
View file @ 0f3c3c97
......@@ -88,7 +88,7 @@ describe('RelatedIssuableItem', () => {
});
it('renders state title', () => {
const stateTitle = tokenState.attributes('data-original-title');
const stateTitle = tokenState.attributes('title');
const formatedCreateDate = formatDate(props.createdAt);
expect(stateTitle).toContain('<span class="bold">Opened</span>');
......@@ -155,7 +155,9 @@ describe('RelatedIssuableItem', () => {
describe('token assignees', () => {
it('renders assignees avatars', () => {
expect(wrapper.findAll('.item-assignees .user-avatar-link').length).toBe(2);
// Expect 2 times 2 because assignees are rendered twice, due to layout issues
expect(wrapper.findAll('.item-assignees .user-avatar-link').length).toBeDefined();
expect(wrapper.find('.item-assignees .avatar-counter').text()).toContain('+2');
});
});
......
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