luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Adding comment component

Browse source
This commit is contained in:
Jesús Espino 2020-10-24 20:37:09 +02:00
parent f295c783f7
commit 8f17720d4b
3 changed files with 73 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
webapp/src/components/cardDetail.tsx
View file

@ -16,9 +16,12 @@ import {OctoUtils} from '../octoUtils'
import {PropertyMenu} from '../propertyMenu'
import {Utils} from '../utils'
import Menu from '../widgets/menu'
import MenuWrapper from '../widgets/menuWrapper'
import Button from './button'
import {Editable} from './editable'
import {MarkdownEditor} from './markdownEditor'
import Comment from './comment'
type Props = {
boardTree: BoardTree
@ -262,52 +265,14 @@ export default class CardDetail extends React.Component<Props, State> {
<hr/>
<div className='commentlist'>
{comments.map((comment) => {
const optionsButtonRef = React.createRef<HTMLDivElement>()
const showCommentMenu = (e: React.MouseEvent, activeComment: IBlock) => {
OldMenu.shared.options = [
{id: 'delete', name: 'Delete'},
]
OldMenu.shared.onMenuClicked = (id) => {
switch (id) {
case 'delete': {
mutator.deleteBlock(activeComment)
break
}
}
}
OldMenu.shared.showAtElement(e.target as HTMLElement)
}
return (<div
{comments.map((comment) => (
<Comment
key={comment.id}
className='comment'
onMouseOver={() => {
optionsButtonRef.current.style.display = null
}}
onMouseLeave={() => {
optionsButtonRef.current.style.display = 'none'
}}
>
<div className='comment-header'>
<img
className='comment-avatar'
src={userImageUrl}
/>
<div className='comment-username'>{username}</div>
<div className='comment-date'>{(new Date(comment.createAt)).toLocaleTimeString()}</div>
<div
ref={optionsButtonRef}
className='octo-hoverbutton square'
style={{display: 'none'}}
onClick={(e) => {
showCommentMenu(e, comment)
}}
>...</div>
</div>
<div className='comment-text'>{comment.title}</div>
</div>)
})}
comment={comment}
userImageUrl={userImageUrl}
username={username}
/>
))}
{/* New comment */}

12
webapp/src/components/comment.scss Normal file
View file

@ -0,0 +1,12 @@
.Comment {
.MenuWrapper {
display: none;
position: absolute;
right: 0;
}
&:hover {
.MenuWrapper {
display: block;
}
}
}

51
webapp/src/components/comment.tsx Normal file
View file

@ -0,0 +1,51 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {FC} from 'react'
import {IntlShape, injectIntl} from 'react-intl'
import mutator from '../mutator'
import {IBlock} from '../blocks/block'
import Menu from '../widgets/menu'
import MenuWrapper from '../widgets/menuWrapper'
import './comment.scss'
type Props = {
comment: IBlock
username: string
userImageUrl: string
intl: IntlShape
}
const Comment: FC<Props> = (props: Props) => {
const {comment, username, userImageUrl, intl} = props
return (
<div
key={comment.id}
className='Comment comment'
>
<div className='comment-header'>
<img
className='comment-avatar'
src={userImageUrl}
/>
<div className='comment-username'>{username}</div>
<div className='comment-date'>{(new Date(comment.createAt)).toLocaleTimeString()}</div>
<MenuWrapper>
<div className='octo-hoverbutton square'>{'...'}</div>
<Menu>
<Menu.Text
id='delete'
name={intl.formatMessage({id: 'Comment.delete', defaultMessage: 'Delete'})}
onClick={() => mutator.deleteBlock(comment)}
/>
</Menu>
</MenuWrapper>
</div>
<div className='comment-text'>{comment.title}</div>
</div>
)
}
export default injectIntl(Comment)