Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Added basic context menu button that doesn't work yet

Browse source
This commit is contained in:
Simon Backx 2022-07-06 09:24:27 +02:00
parent 63050013ca
commit 9e445b8307
2 changed files with 67 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
apps/comments-ui/src/components/Comment.js
View file

@ -1,48 +1,62 @@
import {formatRelativeTime} from '../utils/helpers';
import {ReactComponent as MoreIcon} from '../images/icons/more.svg';
import React from 'react';
import AppContext from '../AppContext';
import AuthorContextMenu from './modals/AuthorContextMenu';
import {getInitials} from '../utils/helpers';
function Comment(props) {
const comment = props.comment;
class Comment extends React.Component {
static contextType = AppContext;
const html = {__html: comment.html};
constructor(props) {
super(props);
this.state = {
isContextMenuOpen: false
};
function getInitials() {
if (!comment.member || !comment.member.name) {
return '';
}
const parts = comment.member.name.split(' ');
if (parts.length === 0) {
return '';
}
if (parts.length === 1) {
return parts[0].substring(0, 1);
}
return parts[0].substring(0, 1) + parts[parts.length - 1].substring(0, 1);
this.toggleContextMenu = this.toggleContextMenu.bind(this);
}
return (
<div className="flex mb-4">
<div>
<div className="flex mb-2 space-x-4 justify-start items-center">
<figure className="relative w-10 h-10">
<div className="flex justify-center items-center w-10 h-10 rounded-full bg-black">
<p className="text-white font-sans font-semibold">{ getInitials() }</p>
toggleContextMenu() {
this.setState(state => ({
isContextMenuOpen: !state.isContextMenuOpen
}));
}
getInitials() {
const comment = this.props.comment;
return this.getInitials(comment.member.name);
}
render() {
const comment = this.props.comment;
const html = {__html: comment.html};
return (
<div className="flex mb-4">
<div>
<div className="flex mb-2 space-x-4 justify-start items-center">
<figure className="relative w-10 h-10">
<div className="flex justify-center items-center w-10 h-10 rounded-full bg-black">
<p className="text-white font-sans font-semibold">{ getInitials() }</p>
</div>
<img className="absolute top-0 left-0 w-10 h-10 rounded-full" src={comment.member.avatar_image} alt="Avatar"/>
</figure>
<div>
<h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{comment.member.name}</h4>
<h6 className="text-xs text-neutral-400 font-sans">{formatRelativeTime(comment.created_at)}</h6>
</div>
<img className="absolute top-0 left-0 w-10 h-10 rounded-full" src={comment.member.avatar_image} alt="Avatar"/>
</figure>
<div>
<h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{comment.member.name}</h4>
<h6 className="text-xs text-neutral-400 font-sans">{formatRelativeTime(comment.created_at)}</h6>
</div>
</div>
<div className="ml-14 mb-4 font-sans leading-normal dark:text-neutral-300">
<p dangerouslySetInnerHTML={html} className="whitespace-pre-wrap"></p>
<div className="ml-14 mb-4 font-sans leading-normal dark:text-neutral-300">
<p dangerouslySetInnerHTML={html} className="whitespace-pre-wrap"></p>
</div>
<button onClick={this.toggleContextMenu}><MoreIcon className='gh-comments-icon gh-comments-icon-more' /></button>
{this.state.isContextMenuOpen ? <AuthorContextMenu /> : null}
</div>
</div>
</div>
);
);
}
}
export default Comment;

17
apps/comments-ui/src/utils/helpers.js
View file

@ -87,3 +87,20 @@ export function formatRelativeTime(dateString) {
}
return `${Math.floor(diff)} weeks ago`;
}
export function getInitials(name) {
if (!name) {
return '';
}
const parts = name.split(' ');
if (parts.length === 0) {
return '';
}
if (parts.length === 1) {
return parts[0].substring(0, 1);
}
return parts[0].substring(0, 1) + parts[parts.length - 1].substring(0, 1);
}