修改了评论

This commit is contained in:
sylor_huang@126.com 2020-06-09 14:13:53 +08:00
parent 75768cf8b0
commit 029d882b53
5 changed files with 315 additions and 301 deletions

View File

@ -204,100 +204,103 @@ class Detail extends Component {
return (
<div className="ProjectListIndex">
<div className="list-right">
<div className="grid-item pd20 border-1f">
<Link
to={`/users/${data && data.author_login}`}
className="show-user-link"
>
<img
className="user_img"
src={getImageUrl(`images/${data && data.author_picture}`)}
alt=""
width="50"
height="50"
/>
</Link>
<div className="ml10">
<div className="ver-middle">
<span className="mr10 ver-middle">
<span className="font-16">
{data && data.issue_classify === "issue"
? data.tracker
<div className="item-list-right">
<div className="background-f boder-4">
<div className="grid-item border-1f pd20 ">
<Link
to={`/users/${data && data.author_login}`}
className="show-user-link"
>
<img
className="user_img"
src={getImageUrl(`images/${data && data.author_picture}`)}
alt=""
width="50"
height="50"
/>
</Link>
<div className="ml10">
<div className="ver-middle">
<span className="mr10 ver-middle">
<span className="font-16">
{data && data.issue_classify === "issue"
? data.tracker
: "缺陷"
: "合并请求"}
? data.tracker
: "缺陷"
: "合并请求"}
</span>
<span className="font-16 fwb">{data && data.subject}</span>
</span>
<span className="font-16 fwb">{data && data.subject}</span>
</span>
{data && data.priority && (
<Tag color={get_color(data.priority)}>{data.priority}</Tag>
)}
</div>
<div className="mt10">
<span className="color-grey-9 mr5"></span>
<Link
to={`/users/${data && data.author_login}`}
className="show-user-link color-blue"
>
{data && data.author_name}
</Link>
<span className="color-grey-9 ml5">
添加于 {data && data.created_at}
</span>
{data && data.user_permission ? (
<span className="pull-right">
<a className="color-blue fr" onClick={this.copydetail}>
复制
</a>
<Popconfirm
placement="bottom"
title={"您确定要删除吗"}
okText="是"
cancelText="否"
onConfirm={() => this.deletedetail(orderId)}
>
<a
className="color-blue fr"
style={{ marginLeft: 20, marginRight: 20 }}
>
删除
{data && data.priority && (
<Tag color={get_color(data.priority)}>{data.priority}</Tag>
)}
</div>
<div className="mt10">
<span className="color-grey-9 mr5"></span>
<Link
to={`/users/${data && data.author_login}`}
className="show-user-link color-blue"
>
{data && data.author_name}
</Link>
<span className="color-grey-9 ml5">
添加于 {data && data.created_at}
</span>
{data && data.user_permission ? (
<span className="pull-right">
<a className="color-blue fr" onClick={this.copydetail}>
复制
</a>
</Popconfirm>
<Popconfirm
placement="bottom"
title={"您确定要删除吗"}
okText="是"
cancelText="否"
onConfirm={() => this.deletedetail(orderId)}
>
<a
className="color-blue fr"
style={{ marginLeft: 20, marginRight: 20 }}
>
删除
</a>
</Popconfirm>
<Link
to={`/projects/${projectsId}/orders/${orderId}/updatedetail`}
className="color-blue fr"
>
编辑
</Link>
</span>
) : (
""
)}
<Link
to={`/projects/${projectsId}/orders/${orderId}/updatedetail`}
className="color-blue fr"
>
编辑
</Link>
</span>
) : (
""
)}
</div>
</div>
</div>
</div>
<div className="pd20">
<div className="detail_p">
{data && data.description && data.description.length > 0 ? (
this.commentCtx(data.description)
<div className="pd20">
<div className="detail_p">
{data && data.description && data.description.length > 0 ? (
this.commentCtx(data.description)
) : (
<span className="color-grey-9 ml3 mr3">没有描述</span>
)}
</div>
{data && data.attachments && data.attachments.length > 0 ? (
<Attachments
attachments={data.attachments}
showNotification={this.props.showNotification}
/>
) : (
<span className="color-grey-9 ml3 mr3">没有描述</span>
""
)}
</div>
{data && data.attachments && data.attachments.length > 0 ? (
<Attachments
attachments={data.attachments}
showNotification={this.props.showNotification}
/>
) : (
""
)}
</div>
<Comments
order_id={orderId}
showNotification={this.props.showNotification}
@ -305,7 +308,7 @@ class Detail extends Component {
/>
</div>
<div className="list-left list-left-padding">
<div className="list-right-item-padding background-f">
<div className="list-right-item-padding background-f boder-4">
<p className="grid-item-left pb15">
<span className="issue_detail_info">分支:</span>
<span>{data && data.branch_name ? data.branch_name : "--"}</span>

View File

@ -568,7 +568,7 @@ a.issue-type-button.active:hover {
}
.item-list-right {
width: 74%;
padding: 0px 15px 10px 0;
/* padding: 10px; */
}
.detail_edit_action {
padding: 10px;
@ -608,6 +608,12 @@ a.issue-type-button.active:hover {
align-items: center;
grid-template-columns: 1fr max-content;
}
.grid-item-top {
display: grid;
align-items: center;
grid-template-columns: max-content 1fr;
align-items: flex-start;
}
.fwb {
font-weight: bold;
}
@ -655,15 +661,27 @@ a.issue-type-button.active:hover {
padding: 0 0 0 20px !important;
}
.comment-background {
background: rgba(250, 250, 250, 1);
/* padding: 15px; */
border: 1px solid #f4f4f4;
background: #fff;
border-radius: 4px;
padding: 0 15px 15px;
/* border: 1px solid #f4f4f4; */
}
.border-bottom-comment {
border-bottom: 1px solid #eee;
}
.comment-background .ant-list-header {
padding: 20px;
.custom-comment-tabs .ant-tabs-top-bar{
border-bottom: none;
padding: 15px 0;
}
.custom-comment-tabs .search-count-button{
line-height: 18px;
margin-left: 8px;
background-color: rgba(235,244,254,1);
color: #1890ff;
font-size: 12px;
padding: 2px 8px;
border-radius: 9px;
}
.comment-background .ant-list-item {
padding: 16px;
@ -684,8 +702,7 @@ a.issue-type-button.active:hover {
box-shadow: none;
}
.children-comment-bg {
background: rgba(241, 248, 255, 1);
border: 1px solid rgba(238, 238, 238, 1);
background:rgba(250,250,250,1);
}
.display-in{
@ -706,4 +723,6 @@ a.issue-type-button.active:hover {
border-radius: 4px;
margin-right: 5px;
vertical-align: middle;
}
}
.boder-4{border-radius: 4px;}
.pbt20{padding: 20px 0;}

View File

@ -47,7 +47,7 @@ class Attachment extends Component{
<div>
{
attachments ?
<div className="attachmentsList mt20">
<div className="attachmentsList mt5">
{
attachments.map((item,key)=>{
return(

View File

@ -121,7 +121,7 @@ class children_comments extends Component {
const renderList = (item) => {
return (
<div className="width100">
<div className="grid-item pb10">
<div className="grid-item pb5">
<Link
to={`/users/${item && item.user_login}`}
className="show-user-link"
@ -134,37 +134,12 @@ class children_comments extends Component {
height="30"
/>
</Link>
<span className="grid-item">
<span>
<Link
to={`/users/${item && item.user_login}`}
className="show-user-link color-blue ml10"
>
{item && item.user_name}
</Link>
<span className="color-grey-8 ml20">{item.created_at}</span>
</span>
<span className="text-right">
{current_user &&
(current_user.admin ||
current_user.login === item.user_login) ? (
<Popconfirm
placement="bottom"
title={"确定要删除当前评论吗?"}
okText="是"
cancelText="否"
onConfirm={() => this.deleteorder(item.id)}
>
<Button type="link">
<i className="iconfont icon-shanchu font-15 color-grey-6"></i>
</Button>
</Popconfirm>
) : (
""
)}
</span>
</span>
<Link
to={`/users/${item && item.user_login}`}
className="show-user-link color-black ml10 fwb"
>
{item && item.user_name}
</Link>
</div>
<div className="ml30">
{this.commentCtx(item.content)}
@ -180,6 +155,29 @@ class children_comments extends Component {
) : (
""
)}
<div className="mt5">
<span className="color-grey-8">{item.created_at}</span>
<span className="ml20">
{current_user &&
(current_user.admin ||
current_user.login === item.user_login) ? (
<Popconfirm
placement="bottom"
title={"确定要删除当前评论吗?"}
okText="是"
cancelText="否"
onConfirm={() => this.deleteorder(item.id)}
>
<Button type="link">
<i className="iconfont icon-shanchu3 font-15 color-grey-6 mr5 ver-middle"></i>
<span className="font-12 color-grey-6">删除</span>
</Button>
</Popconfirm>
) : (
""
)}
</span>
</div>
</div>
</div>
);
@ -188,7 +186,7 @@ class children_comments extends Component {
return (
<div>
{search_count > 0 && (
<div className="children-comment-bg">
<div className="children-comment-bg mt10">
<List
size="large"
loading={isSpin}

View File

@ -5,13 +5,13 @@ import axios from "axios";
import Upload from "../Upload/Index";
import UploadImg from "../Images/upload.png";
import { getImageUrl } from "educoder";
import { List, Popconfirm, Pagination, Button } from "antd";
import { List, Popconfirm, Pagination, Button, Tabs, Avatar } from "antd";
import Attachments from "../Upload/attachment";
import MDEditor from "../../modules/tpm/challengesnew/tpm-md-editor";
import RenderHtml from "../../components/render-html";
import ChildrenComments from "./children_comments";
import "../Order/order.css";
const { TabPane } = Tabs;
class comments extends Component {
constructor(props) {
super(props);
@ -303,99 +303,71 @@ class comments extends Component {
</React.Fragment>
);
// const comment_meditor = (
// )
const new_comment = (is_reply, item_id) => {
return (
<div>
{(current_user && current_user.login) ? (
<div>
<div className="grid-item pb10">
<Link
to={`/users/${current_user && current_user.login}`}
className="show-user-link"
>
<img
className="radius"
src={getImageUrl(
`images/${current_user && current_user.image_url}`
)}
alt=""
width="30"
height="30"
/>
</Link>
<Link
to={`/users/${current_user && current_user.login}`}
className="show-user-link color-blue ml10"
>
{current_user && current_user.real_name}
</Link>
</div>
<MDEditor
placeholder={"添加评论..."}
height={200}
mdID={
item_id
? "orderdetail-add-descriptions" + item_id
: "orderdetail-add-descriptions"
}
initValue={is_reply ? reply_content : content}
onChange={
is_reply ? this.replyContentChange : this.onContentChange
}
></MDEditor>
<p className="quillFlag">
{quillFlag && <span className="">请输入评论内容</span>}
</p>
<Upload
className="commentStyle"
isComplete={attachment_clean}
load={this.UploadFunc}
icon={
<img
src={UploadImg}
width="58"
alt=""
style={{ marginBottom: 15 }}
/>
}
size={100}
showNotification={this.props.showNotification}
/>
<p className="clearfix mt20 text-right">
{is_reply && (
<Button
onClick={this.cancel_reply}
size="large"
className="mr15"
>
取消
</Button>
)}
<Button
type="primary"
onClick={this.addjournals}
loading={journal_spin}
size="large"
>
评论
</Button>
</p>
</div>
) : (
<div className="mt15">
<span className="reply-comment-input">
<Button
className="add_reply_button"
onClick={() => this.add_reply("")}
>
<span>我要回复</span>
</Button>
</span>
{/* <a className="" onClick={() => this.loginModal()}>
登录
</a>并参与到对话中 */}
</div>
)}
<div className="grid-item-top pb10">
<Link
to={`/users/${current_user && current_user.login}`}
className="show-user-link mr10"
>
<img
className="radius"
src={getImageUrl(
`images/${current_user && current_user.image_url}`
)}
alt=""
width="30"
height="30"
/>
</Link>
<div>
<MDEditor
placeholder={"添加评论..."}
height={200}
mdID={
item_id
? "orderdetail-add-descriptions" + item_id
: "orderdetail-add-descriptions"
}
initValue={is_reply ? reply_content : content}
onChange={
is_reply ? this.replyContentChange : this.onContentChange
}
></MDEditor>
<p className="quillFlag">
{quillFlag && <span className="">请输入评论内容</span>}
</p>
<Upload
className="commentStyle"
isComplete={attachment_clean}
load={this.UploadFunc}
icon={
<img
src={UploadImg}
width="58"
alt=""
style={{ marginBottom: 15 }}
/>
}
size={100}
showNotification={this.props.showNotification}
/>
<p className="clearfix mt20">
<Button
type="primary"
onClick={this.addjournals}
loading={journal_spin}
className="mr15"
>
评论
</Button>
<Button onClick={this.cancel_reply}>取消</Button>
</p>
</div>
</div>
);
};
@ -403,7 +375,7 @@ class comments extends Component {
const renderList = (item) => {
return (
<div className="width100">
<div className="grid-item pb10">
<div className="pb5">
<Link
to={`/users/${item && item.user_login}`}
className="show-user-link"
@ -416,37 +388,12 @@ class comments extends Component {
height="30"
/>
</Link>
<span className="grid-item">
<span>
<Link
to={`/users/${item && item.user_login}`}
className="show-user-link color-blue ml10"
>
{item && item.user_name}
</Link>
<span className="color-grey-8 ml20">{item.created_at}</span>
</span>
<span className="text-right">
{current_user &&
(current_user.admin ||
current_user.login === item.user_login) ? (
<Popconfirm
placement="bottom"
title={"确定要删除当前评论吗?"}
okText="是"
cancelText="否"
onConfirm={() => this.deleteorder(item.id)}
>
<Button type="link">
<i className="iconfont icon-shanchu font-15 color-grey-6"></i>
</Button>
</Popconfirm>
) : (
""
)}
</span>
</span>
<Link
to={`/users/${item && item.user_login}`}
className="show-user-link color-black ml10 fwb"
>
{item && item.user_name}
</Link>
</div>
<div className="ml30">
{item.content ? (
@ -466,6 +413,46 @@ class comments extends Component {
) : (
""
)}
<div className="grid-item mt5">
<span className="color-grey-8">{item.created_at}</span>
<span className="text-right">
{current_user &&
(current_user.admin ||
current_user.login === item.user_login) ? (
<Popconfirm
placement="bottom"
title={"确定要删除当前评论吗?"}
okText="是"
cancelText="否"
onConfirm={() => this.deleteorder(item.id)}
>
<Button type="link">
<i className="iconfont icon-shanchu3 font-15 color-grey-6 mr5 ver-middle"></i>
<span className="font-12 color-grey-6">删除</span>
</Button>
</Popconfirm>
) : (
""
)}
<Button
type="link"
className="ml-10"
onClick={() => this.add_reply(item.id)}
>
<i className="iconfont icon-huifu1 font-15 color-grey-6 mr5 ver-middle"></i>
<span className="font-12 color-grey-6">回复</span>
</Button>
</span>
</div>
{current_user && (
<div>
{is_reply && reply_id && reply_id === item.id ? (
<div className="pt20">{new_comment(is_reply, item.id)}</div>
) : (
""
)}
</div>
)}
<ChildrenComments
order_id={orderId}
parent_id={item.id}
@ -474,61 +461,68 @@ class comments extends Component {
{...this.props}
></ChildrenComments>
</div>
{current_user && (
<div>
{is_reply && reply_id && reply_id === item.id ? (
<div className="pd20">{new_comment(is_reply, item.id)}</div>
) : (
<div className="grid-item mt15">
<Link
to={`/users/${current_user && current_user.login}`}
className="show-user-link mr10"
>
<img
className="radius"
src={getImageUrl(
`images/${current_user && current_user.image_url}`
)}
alt=""
width="30"
height="30"
/>
</Link>
<span className="reply-comment-input">
<Button
className="add_reply_button"
onClick={() => this.add_reply(item.id)}
>
<span>我要回复</span>
</Button>
</span>
</div>
)}
</div>
)}
</div>
);
};
return (
<div className="pd20">
<div className="comment-background">
{journalsdata && journalsdata.journals_total_count > 0 ? (
<List
size="large"
loading={isSpin}
header={<div>回复({journalsdata.journals_total_count})</div>}
dataSource={journalsdata.issue_journals}
renderItem={(item) => <List.Item>{renderList(item)}</List.Item>}
/>
) : (
<div className="ant-list-header border-bottom-comment">
<div>回复({search_count})</div>
</div>
)}
<div className="mt20">
<div className="comment-background pd10 mb10">
<Tabs defaultActiveKey="1" className="custom-comment-tabs">
<TabPane
tab={
<span className="ml-3 font-16">
评论
{search_count > 0 && (
<span className="search-count-button">{search_count}</span>
)}
</span>
}
key="1"
>
<div className="mb10">
{is_reply && !reply_id ? (
<div className="pd20">{new_comment(is_reply, undefined)}</div>
) : (
<div className="children-comment-bg pd20 grid-item">
<img
className="radius"
src={getImageUrl(
`images/${
current_user
? current_user.image_url
: "avatars/User/b"
}`
)}
alt=""
width="30"
height="30"
/>
<span className="reply-comment-input mr20">
<Button
className="add_reply_button ml15"
onClick={() => this.add_reply(undefined)}
>
<span>添加评论...</span>
</Button>
</span>
</div>
)}
</div>
{journalsdata && journalsdata.journals_total_count > 0 && (
<List
size="large"
loading={isSpin}
header=""
dataSource={journalsdata.issue_journals}
renderItem={(item) => (
<List.Item>{renderList(item)}</List.Item>
)}
/>
)}
</TabPane>
</Tabs>
{Paginations}
<div className="pd20 border-top-e">{new_comment()}</div>
</div>
</div>
);