mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 21:19:37 +08:00
Code Issues Actions 22 Packages Projects Releases Wiki Activity

👌 update code after pr review

Browse Source
This commit is contained in:
Ilan 2018-10-24 15:17:37 +02:00 committed by 偏右
parent 5c095b8c1e
commit 3b01ed3b53
4 changed files with 125 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

188
components/comment/__tests__/__snapshots__/demo.test.js.snap
View File

@ -137,128 +137,112 @@ exports[`renders ./components/comment/demo/list.md correctly 1`] = `
class="ant-spin-container"
>
<div
class="ant-list-item"
class="ant-comment"
>
<div
class="ant-list-item-content ant-list-item-content-single"
class="ant-comment-inner"
>
<div
class="ant-comment"
class="ant-comment-header"
>
<span
class="ant-comment-header-avatar"
>
<img
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
/>
</span>
<div
class="ant-comment-header-author"
>
<span
class="ant-comment-header-author-name"
>
Han Solo
</span>
<span
class="ant-comment-header-author-time ant-comment-header-author-time-tooltip"
>
a day ago
</span>
</div>
</div>
<div
class="ant-comment-content"
>
<div
class="ant-comment-inner"
class="ant-comment-content-detail"
>
<div
class="ant-comment-header"
>
<span
class="ant-comment-header-avatar"
>
<img
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
/>
</span>
<div
class="ant-comment-header-author"
>
<span
class="ant-comment-header-author-name"
>
Han Solo
</span>
<span
class="ant-comment-header-author-time ant-comment-header-author-time-tooltip"
>
a day ago
</span>
</div>
</div>
<div
class="ant-comment-content"
>
<div
class="ant-comment-content-detail"
>
<p>
Nisl nisi scelerisque eu ultrices vitae auctor eu augue. Nulla at volutpat diam ut venenatis tellus in metus vulputate.
</p>
</div>
<ul
class="ant-comment-actions"
>
<li>
<span>
<span>
Reply to
</span>
</span>
</li>
</ul>
</div>
<p>
Nisl nisi scelerisque eu ultrices vitae auctor eu augue. Nulla at volutpat diam ut venenatis tellus in metus vulputate.
</p>
</div>
<ul
class="ant-comment-actions"
>
<li>
<span>
<span>
Reply to
</span>
</span>
</li>
</ul>
</div>
</div>
</div>
<div
class="ant-list-item"
class="ant-comment"
>
<div
class="ant-list-item-content ant-list-item-content-single"
class="ant-comment-inner"
>
<div
class="ant-comment"
class="ant-comment-header"
>
<span
class="ant-comment-header-avatar"
>
<img
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
/>
</span>
<div
class="ant-comment-header-author"
>
<span
class="ant-comment-header-author-name"
>
Stormtrooper
</span>
<span
class="ant-comment-header-author-time ant-comment-header-author-time-tooltip"
>
2 days ago
</span>
</div>
</div>
<div
class="ant-comment-content"
>
<div
class="ant-comment-inner"
class="ant-comment-content-detail"
>
<div
class="ant-comment-header"
>
<span
class="ant-comment-header-avatar"
>
<img
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
/>
</span>
<div
class="ant-comment-header-author"
>
<span
class="ant-comment-header-author-name"
>
Stormtrooper
</span>
<span
class="ant-comment-header-author-time ant-comment-header-author-time-tooltip"
>
2 days ago
</span>
</div>
</div>
<div
class="ant-comment-content"
>
<div
class="ant-comment-content-detail"
>
<p>
Sed turpis tincidunt id aliquet risus feugiat in ante metus. Faucibus nisl tincidunt eget nullam non.
</p>
</div>
<ul
class="ant-comment-actions"
>
<li>
<span>
<span>
Reply to
</span>
</span>
</li>
</ul>
</div>
<p>
Sed turpis tincidunt id aliquet risus feugiat in ante metus. Faucibus nisl tincidunt eget nullam non.
</p>
</div>
<ul
class="ant-comment-actions"
>
<li>
<span>
<span>
Reply to
</span>
</span>
</li>
</ul>
</div>
</div>
</div>

20
components/comment/demo/list.md
View File

@ -51,17 +51,15 @@ ReactDOM.render(
itemLayout="horizontal"
dataSource={data}
renderItem={item => (
<List.Item>
<Comment
actions={item.actions}
author={item.author}
avatar={item.avatar}
time={item.time}
tooltipTime={item.tooltipTime}
>
{item.children}
</Comment>
</List.Item>
<Comment
actions={item.actions}
author={item.author}
avatar={item.avatar}
time={item.time}
tooltipTime={item.tooltipTime}
>
{item.children}
</Comment>
)}
/>,
mountNode);

47
components/comment/style/index.less
View File

@ -5,28 +5,33 @@
.@{comment-prefix-cls} {
position: relative;
&-inner {
padding: @comment-padding-base;
}
&-header {
&-header {
margin-bottom: @comment-header-margin;
padding-bottom: @comment-header-padding;
&-avatar {
&-avatar {
position: relative;
float: left;
margin-right: 12px;
cursor: pointer;
img {
img {
width: 32px;
height: 32px;
border-radius: 16px;
}
}
&-author {
&-author {
padding-left: 12px;
flex: auto;
font-size: 14px;
& > a,
& > a,
& > span {
display: inline-block;
height: 18px;
@ -35,21 +40,24 @@
padding-right: 8px;
cursor: pointer;
}
&-name {
&-name {
transition: color 0.3s ease;
font-size: 14px;
color: @comment-author-name-color;
* > {
> * {
color: @comment-author-name-color;
&:hover {
&:hover {
color: @comment-author-name-color;
}
}
}
&-time {
&-time {
cursor: auto;
color: @comment-author-time-color;
white-space: nowrap;
&-tooltip {
cursor: pointer;
&:hover {
@ -59,31 +67,34 @@
}
}
}
&-content {
&-content {
position: relative;
padding-left: @comment-pusher;
padding-left: @comment-indent;
font-size: 14px;
}
&-actions {
&-actions {
margin-top: 12px;
& > li {
float: left;
& > li {
display: inline-block;
color: @comment-action-color;
& > span {
> span {
padding-right: 10px;
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;
font-size: 12px;
color: @comment-action-color;
cursor: pointer;
user-select: none;
&:hover {
&:hover {
color: @comment-action-hover-color;
}
}
}
}
&-nested {
margin-left: @comment-pusher;
margin-left: @comment-indent;
}
}

2
components/style/themes/default.less
View File

@ -399,7 +399,7 @@
@comment-padding-base: 16px 0;
@comment-header-margin: 4px;
@comment-header-padding: 8px;
@comment-pusher: 44px;
@comment-indent: 44px;
@comment-author-name-color: #8c8c8c;
@comment-author-time-color: #ccc;
@comment-action-color: #8c8c8c;