update comment style

chromesetting
tangjiang 6 years ago
parent 281aaee056
commit 7ef472177b

@ -4,7 +4,7 @@
* @Github: * @Github:
* @Date: 2019-12-18 10:49:46 * @Date: 2019-12-18 10:49:46
* @LastEditors : tangjiang * @LastEditors : tangjiang
* @LastEditTime : 2019-12-24 17:05:14 * @LastEditTime : 2019-12-24 18:04:52
*/ */
import './index.scss'; import './index.scss';
import React from 'react'; import React from 'react';
@ -26,7 +26,11 @@ function CommentIcon ({
const _className = [undefined, null, ''].includes(count) ? 'comment_count_none' : 'comment_count'; const _className = [undefined, null, ''].includes(count) ? 'comment_count_none' : 'comment_count';
return ( return (
<span className={`comment_icon_count ${props.className}`} onClick={ handleSpanClick }> <span
style={props.style}
className={`comment_icon_count ${props.className}`}
onClick={ handleSpanClick }
>
<Icon className="comment_icon" type={type} style={{ color: iconColor }} theme={theme}/> <Icon className="comment_icon" type={type} style={{ color: iconColor }} theme={theme}/>
<span className={_className}>{ count }</span> <span className={_className}>{ count }</span>
</span> </span>

@ -4,7 +4,7 @@
* @Github: * @Github:
* @Date: 2019-12-17 17:35:17 * @Date: 2019-12-17 17:35:17
* @LastEditors : tangjiang * @LastEditors : tangjiang
* @LastEditTime : 2019-12-24 17:11:59 * @LastEditTime : 2019-12-24 18:05:18
*/ */
import './index.scss'; import './index.scss';
import React, { useState } from 'react'; import React, { useState } from 'react';
@ -14,6 +14,7 @@ import { Icon } from 'antd';
import CommentForm from './CommentForm'; import CommentForm from './CommentForm';
function CommentItem ({ function CommentItem ({
isAdmin,
options, options,
confirm, confirm,
comment, comment,
@ -60,7 +61,7 @@ function CommentItem ({
const commentAvatar = (author) => ( const commentAvatar = (author) => (
<img <img
className="item-flex flex-image" className="item-flex flex-image"
src={author.image_url ? getImageUrl(`/images/${author.image_url}`) : 'https://b-ssl.duitang.com/uploads/item/201511/13/20151113110434_kyReJ.jpeg'} src={author.image_url ? getImageUrl(`images/${author.image_url}`) : 'https://b-ssl.duitang.com/uploads/item/201511/13/20151113110434_kyReJ.jpeg'}
alt="" alt=""
/> />
); );
@ -175,7 +176,8 @@ function CommentItem ({
{commentAppend(children)} {commentAppend(children)}
<div className="comment_icon_area"> <div className="comment_icon_area">
<CommentIcon <CommentIcon
style={{ display: isAdmin ? 'inline-block' : 'none'}}
className='comment-icon-margin' className='comment-icon-margin'
type={!hidden ? "eye" : 'eye-invisible'} type={!hidden ? "eye" : 'eye-invisible'}
iconClick={() => handleShowOrHide(id, !hidden ? 1 : 0)} iconClick={() => handleShowOrHide(id, !hidden ? 1 : 0)}

@ -4,13 +4,15 @@
* @Github: * @Github:
* @Date: 2019-12-17 17:34:00 * @Date: 2019-12-17 17:34:00
* @LastEditors : tangjiang * @LastEditors : tangjiang
* @LastEditTime : 2019-12-24 11:30:14 * @LastEditTime : 2019-12-24 18:08:07
*/ */
import './index.scss'; import './index.scss';
import React from 'react'; import React from 'react';
import CommentItem from './CommentItem'; import CommentItem from './CommentItem';
import { Empty } from 'antd';
function CommentList (props) { function CommentList (props) {
const { const {
isAdmin,
commentLists, // 评论列表 commentLists, // 评论列表
submitChildComment, submitChildComment,
submitDeleteComment, submitDeleteComment,
@ -21,18 +23,27 @@ function CommentList (props) {
const {comments = []} = commentLists; const {comments = []} = commentLists;
const renderLi = () => { const renderLi = () => {
return comments.map((item, index) => { if (comments.length > 0) {
return comments.map((item, index) => {
return (
<CommentItem
isAdmin={isAdmin}
key={`item_${index}`}
submitChildComment={submitChildComment}
submitDeleteComment={submitDeleteComment}
comment={item}
likeComment={likeComment}
showOrHideComment={showOrHideComment}
/>
);
});
} else {
return ( return (
<CommentItem <div className="empty_comment">
key={`item_${index}`} <Empty />
submitChildComment={submitChildComment} </div>
submitDeleteComment={submitDeleteComment}
comment={item}
likeComment={likeComment}
showOrHideComment={showOrHideComment}
/>
); );
}); }
} }
return ( return (

@ -4,7 +4,7 @@
* @Github: * @Github:
* @Date: 2019-12-17 17:31:33 * @Date: 2019-12-17 17:31:33
* @LastEditors : tangjiang * @LastEditors : tangjiang
* @LastEditTime : 2019-12-24 15:47:07 * @LastEditTime : 2019-12-24 18:03:21
*/ */
import React from 'react'; import React from 'react';
// import CommentForm from './CommentForm'; // import CommentForm from './CommentForm';
@ -15,6 +15,7 @@ function Comment (props) {
commentLists, commentLists,
// addComment, // addComment,
// cancelComment, // cancelComment,
isAdmin,
addChildComment, addChildComment,
likeComment, likeComment,
showOrHideComment, showOrHideComment,
@ -31,6 +32,7 @@ function Comment (props) {
onSubmit={addComment} onSubmit={addComment}
/> */} /> */}
<CommentList <CommentList
isAdmin={isAdmin}
likeComment={likeComment} likeComment={likeComment}
showOrHideComment={showOrHideComment} showOrHideComment={showOrHideComment}
commentLists={commentLists} commentLists={commentLists}

@ -9,7 +9,13 @@ $ml: 20px;
.comment_list_wrapper{ .comment_list_wrapper{
box-sizing: border-box; box-sizing: border-box;
// border-top: 1px solid $bdColor; // border-top: 1px solid $bdColor;
.empty_comment{
display: flex;
height: calc(100vh - 200px);
width: 100%;
justify-content: center;
align-items: center;
}
.comment_item_show{ .comment_item_show{
display: block; display: block;
} }

@ -4,7 +4,7 @@
* @Github: * @Github:
* @Date: 2019-11-27 09:49:35 * @Date: 2019-11-27 09:49:35
* @LastEditors : tangjiang * @LastEditors : tangjiang
* @LastEditTime : 2019-12-24 17:10:14 * @LastEditTime : 2019-12-24 17:58:26
*/ */
import './index.scss'; import './index.scss';
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
@ -15,6 +15,7 @@ import actions from '../../../../../redux/actions';
const CommentTask = (props) => { const CommentTask = (props) => {
const { const {
isAdmin,
identifier, identifier,
commentLists, commentLists,
addComment, addComment,
@ -74,6 +75,7 @@ const CommentTask = (props) => {
return ( return (
<div className="task_comment_task"> <div className="task_comment_task">
<Comment <Comment
isAdmin={isAdmin}
commentLists={commentLists} commentLists={commentLists}
addComment={handleAddComment} addComment={handleAddComment}
addChildComment={handleAddChildComment} addChildComment={handleAddChildComment}
@ -92,8 +94,10 @@ const mapStateToProps = (state) => {
const { const {
comment_identifier comment_identifier
} = state.ojForUserReducer; } = state.ojForUserReducer;
const { userInfo } = state.userReducer;
return { return {
commentLists, commentLists,
isAdmin: userInfo.admin,
identifier: comment_identifier identifier: comment_identifier
} }
} }

Loading…
Cancel
Save