Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
李少辉-开发者
gitlab-foss
提交
36d0dc08
G
gitlab-foss
项目概览
李少辉-开发者
/
gitlab-foss
通知
15
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
G
gitlab-foss
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
36d0dc08
编写于
6月 27, 2019
作者:
M
Martin Hanzel
提交者:
Kushal Pandya
6月 27, 2019
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Conform related issues/MRs card to design docs
上级
be099306
变更
4
显示空白变更内容
内联
并排
Showing
4 changed file
with
148 addition
and
93 deletion
+148
-93
app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
...pts/vue_shared/components/issue/related_issuable_item.vue
+92
-59
app/assets/javascripts/vue_shared/mixins/related_issuable_mixin.js
...s/javascripts/vue_shared/mixins/related_issuable_mixin.js
+3
-0
app/assets/stylesheets/components/related_items_list.scss
app/assets/stylesheets/components/related_items_list.scss
+49
-32
spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js
...vue_shared/components/issue/related_issuable_item_spec.js
+4
-2
未找到文件。
app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
浏览文件 @
36d0dc08
<
script
>
import
'
~/commons/bootstrap
'
;
import
{
GlTooltipDirective
}
from
'
@gitlab/ui
'
;
import
{
GlTooltip
,
GlTooltip
Directive
}
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 p
y-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"
>
<!-- 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"
v-tooltip
ref=
"iconElementXL"
:css-classes=
"iconClass"
:name=
"iconName"
:size=
"16"
:title=
"stateTitle"
:aria-label=
"state"
data-html=
"true"
/>
</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"
>
<!-- 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=
"
d-flex align-items-center item-path-id order-md-0 mt-md-0 mt-1 ml-xl-2 mr-xl-auto
"
class=
"
item-meta d-flex flex-wrap-reverse justify-content-start justify-content-md-between
"
>
<!-- 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"
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"
>
{{
</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>
{{
pathIdSeparator
}}{{
itemId
}}
<span>
{{
pathIdSeparator
}}{{
itemId
}}
</span>
</div>
<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"
>
<span
v-if=
"hasPipeline"
class=
"mr-ci-status pr-2"
>
<!-- 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
"
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
浏览文件 @
36d0dc08
...
...
@@ -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
浏览文件 @
36d0dc08
...
...
@@ -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,8 +115,9 @@ $item-weight-max-width: 48px;
.item-weight
{
max-width
:
$item-weight-max-width
;
}
}
.item-assignees
{
.item-assignees
{
.user-avatar-link
{
margin-right
:
-
$gl-padding-4
;
...
...
@@ -134,7 +149,6 @@ $item-weight-max-width: 48px;
padding
:
0
$gl-padding-4
;
line-height
:
$gl-padding
;
}
}
}
.item-path-id
{
...
...
@@ -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
{
...
...
spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js
浏览文件 @
36d0dc08
...
...
@@ -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%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录