GH-479 - Updating comment order and adding images (#1985)
* GH-479 - Updating comment order and images * Updating default image url * Updating test * Updating image function * Updating tests
This commit is contained in:
Asaad Mahmood
GitHub
parent
cef37be94b
commit
76e13723b9
|
|
@ -124,11 +124,10 @@ exports[`components/cardDialog already following card 1`] = `
|
|||
class="CommentsList"
|
||||
>
|
||||
<div
|
||||
class="commentrow"
|
||||
class="CommentsList__new"
|
||||
>
|
||||
<img
|
||||
class="comment-avatar"
|
||||
src="data:image/svg+xml,<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 100 100\\" style=\\"fill: rgb(192, 192, 192);\\"><rect width=\\"100\\" height=\\"100\\" /></svg>"
|
||||
/>
|
||||
<div
|
||||
class="MarkdownEditor octo-editor newcomment "
|
||||
|
|
@ -185,7 +184,9 @@ exports[`components/cardDialog already following card 1`] = `
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<hr />
|
||||
<hr
|
||||
class="CommentsList__divider"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -598,11 +599,10 @@ exports[`components/cardDialog return cardDialog menu content 1`] = `
|
|||
class="CommentsList"
|
||||
>
|
||||
<div
|
||||
class="commentrow"
|
||||
class="CommentsList__new"
|
||||
>
|
||||
<img
|
||||
class="comment-avatar"
|
||||
src="data:image/svg+xml,<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 100 100\\" style=\\"fill: rgb(192, 192, 192);\\"><rect width=\\"100\\" height=\\"100\\" /></svg>"
|
||||
/>
|
||||
<div
|
||||
class="MarkdownEditor octo-editor newcomment "
|
||||
|
|
@ -659,7 +659,9 @@ exports[`components/cardDialog return cardDialog menu content 1`] = `
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<hr />
|
||||
<hr
|
||||
class="CommentsList__divider"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -877,11 +879,10 @@ exports[`components/cardDialog return cardDialog menu content and cancel delete
|
|||
class="CommentsList"
|
||||
>
|
||||
<div
|
||||
class="commentrow"
|
||||
class="CommentsList__new"
|
||||
>
|
||||
<img
|
||||
class="comment-avatar"
|
||||
src="data:image/svg+xml,<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 100 100\\" style=\\"fill: rgb(192, 192, 192);\\"><rect width=\\"100\\" height=\\"100\\" /></svg>"
|
||||
/>
|
||||
<div
|
||||
class="MarkdownEditor octo-editor newcomment "
|
||||
|
|
@ -938,7 +939,9 @@ exports[`components/cardDialog return cardDialog menu content and cancel delete
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<hr />
|
||||
<hr
|
||||
class="CommentsList__divider"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -1156,11 +1159,10 @@ exports[`components/cardDialog should match snapshot 1`] = `
|
|||
class="CommentsList"
|
||||
>
|
||||
<div
|
||||
class="commentrow"
|
||||
class="CommentsList__new"
|
||||
>
|
||||
<img
|
||||
class="comment-avatar"
|
||||
src="data:image/svg+xml,<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 100 100\\" style=\\"fill: rgb(192, 192, 192);\\"><rect width=\\"100\\" height=\\"100\\" /></svg>"
|
||||
/>
|
||||
<div
|
||||
class="MarkdownEditor octo-editor newcomment "
|
||||
|
|
@ -1217,7 +1219,9 @@ exports[`components/cardDialog should match snapshot 1`] = `
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<hr />
|
||||
<hr
|
||||
class="CommentsList__divider"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
.comment-text {
|
||||
color: rgb(var(--center-channel-color-rgb));
|
||||
width: 100%;
|
||||
padding-left: 28px;
|
||||
padding-left: 32px;
|
||||
|
||||
p {
|
||||
&:first-child {
|
||||
|
|
|
|||
|
|
@ -6,29 +6,29 @@
|
|||
width: 100%;
|
||||
|
||||
.comment-avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 100%;
|
||||
box-shadow: rgba(15, 15, 15, 0.1) 0 2px 4px;
|
||||
}
|
||||
|
||||
.commentrow {
|
||||
.CommentsList__new {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
|
||||
.comment-avatar {
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
align-items: center;
|
||||
padding: 8px 0 24px;
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
.newcomment {
|
||||
flex-grow: 1;
|
||||
margin: 4px 0 0 8px;
|
||||
margin: 0 0 0 8px;
|
||||
|
||||
+ button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.CommentsList__divider {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,11 +5,15 @@ import {FormattedMessage, useIntl} from 'react-intl'
|
|||
|
||||
import {CommentBlock, createCommentBlock} from '../../blocks/commentBlock'
|
||||
import mutator from '../../mutator'
|
||||
import {useAppSelector} from '../../store/hooks'
|
||||
import {Utils} from '../../utils'
|
||||
import Button from '../../widgets/buttons/button'
|
||||
|
||||
import {MarkdownEditor} from '../markdownEditor'
|
||||
|
||||
import {IUser} from '../../user'
|
||||
import {getMe} from '../../store/users'
|
||||
|
||||
import Comment from './comment'
|
||||
import './commentsList.scss'
|
||||
|
||||
|
|
@ -22,6 +26,7 @@ type Props = {
|
|||
|
||||
const CommentsList = React.memo((props: Props) => {
|
||||
const [newComment, setNewComment] = useState('')
|
||||
const me = useAppSelector<IUser|null>(getMe)
|
||||
|
||||
const onSendClicked = () => {
|
||||
const commentText = newComment
|
||||
|
|
@ -42,14 +47,11 @@ const CommentsList = React.memo((props: Props) => {
|
|||
const {comments} = props
|
||||
const intl = useIntl()
|
||||
|
||||
// TODO: Replace this placeholder
|
||||
const userImageUrl = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="fill: rgb(192, 192, 192);"><rect width="100" height="100" /></svg>'
|
||||
|
||||
const newCommentComponent = (
|
||||
<div className='commentrow'>
|
||||
<div className='CommentsList__new'>
|
||||
<img
|
||||
className='comment-avatar'
|
||||
src={userImageUrl}
|
||||
src={Utils.getProfilePicture(me?.id)}
|
||||
/>
|
||||
<MarkdownEditor
|
||||
className='newcomment'
|
||||
|
|
@ -78,21 +80,21 @@ const CommentsList = React.memo((props: Props) => {
|
|||
|
||||
return (
|
||||
<div className='CommentsList'>
|
||||
{comments.map((comment) => (
|
||||
{/* New comment */}
|
||||
{!props.readonly && newCommentComponent}
|
||||
|
||||
{comments.slice(0).reverse().map((comment) => (
|
||||
<Comment
|
||||
key={comment.id}
|
||||
comment={comment}
|
||||
userImageUrl={userImageUrl}
|
||||
userImageUrl={Utils.getProfilePicture(comment.modifiedBy)}
|
||||
userId={comment.modifiedBy}
|
||||
readonly={props.readonly}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* New comment */}
|
||||
{!props.readonly && newCommentComponent}
|
||||
|
||||
{/* horizontal divider below comments */}
|
||||
{!(comments.length === 0 && props.readonly) && <hr/>}
|
||||
{!(comments.length === 0 && props.readonly) && <hr className='CommentsList__divider'/>}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import {IAppWindow} from './types'
|
|||
|
||||
declare let window: IAppWindow
|
||||
|
||||
const imageURLForUser = (window as any).Components?.imageURLForUser
|
||||
const IconClass = 'octo-icon'
|
||||
const OpenButtonClass = 'open-button'
|
||||
const SpacerClass = 'octo-spacer'
|
||||
|
|
@ -57,6 +58,12 @@ class Utils {
|
|||
return ret
|
||||
}
|
||||
|
||||
static getProfilePicture(userId?: string): string {
|
||||
const defaultImageUrl = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="fill: rgb(192, 192, 192);"><rect width="100" height="100" /></svg>'
|
||||
|
||||
return imageURLForUser && userId ? imageURLForUser(userId) : defaultImageUrl
|
||||
}
|
||||
|
||||
static randomArray(size: number): Uint8Array {
|
||||
const crypto = window.crypto || window.msCrypto
|
||||
const rands = new Uint8Array(size)
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user