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

Merging in some changes to close dropdown along other

Browse source
This commit is contained in:
James Morris 2022-07-06 11:36:05 +02:00
parent 121f1711cd
commit 16279da1ac
4 changed files with 43 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,10 @@
import {formatRelativeTime} from '../utils/helpers';
import {ReactComponent as LikeIcon} from '../images/icons/like.svg';
import {ReactComponent as MoreIcon} from '../images/icons/more.svg';
import React from 'react';
import AppContext from '../AppContext';
import CommentContextMenu from './modals/CommentContextMenu';
import Avatar from './Avatar';
import CommentContextMenu from './modals/CommentContextMenu';
import {ReactComponent as LikeIcon} from '../images/icons/like.svg';
import {ReactComponent as MoreIcon} from '../images/icons/more.svg';
class Comment extends React.Component {
static contextType = AppContext;

6
apps/comments-ui/src/components/Like.js
View file

@ -1,8 +1,8 @@
import {ReactComponent as LikeIcon} from '../images/icons/like.svg';
function Like() {
return (
<div className="mr-4 text-gray-400 text-sm font-sans">
4 Likes
</div>
<button className="flex font-sans mr-5"><LikeIcon className='gh-comments-icon gh-comments-icon-like mr-1' />3</button>
);
}

39
apps/comments-ui/src/components/More.js
View file

@ -1,9 +1,36 @@
function More() {
return (
<div className="text-gray-400 text-sm font-sans">
More
</div>
);
import {ReactComponent as MoreIcon} from '../images/icons/more.svg';
import React from 'react';
import AppContext from '../AppContext';
import CommentContextMenu from './modals/CommentContextMenu';
class More extends React.Component {
static contextType = AppContext;
constructor(props) {
super(props);
this.state = {
isContextMenuOpen: false
};
this.toggleContextMenu = this.toggleContextMenu.bind(this);
}
toggleContextMenu() {
this.setState(state => ({
isContextMenuOpen: !state.isContextMenuOpen
}));
}
render() {
const comment = this.props.comment;
return (
<div className="relative">
<button onClick={this.toggleContextMenu}><MoreIcon className='gh-comments-icon gh-comments-icon-more -m-[3px]' /></button>
{this.state.isContextMenuOpen ? <CommentContextMenu comment={comment} /> : null}
</div>
);
}
}
export default More;

8
apps/comments-ui/src/components/Reply.js
View file

@ -1,9 +1,9 @@
import {ReactComponent as ReplyIcon} from '../images/icons/reply.svg';
function Reply() {
return (
<div className="mr-4 text-gray-400 text-sm font-sans">
Reply
</div>
<button className="flex font-sans mr-5"><ReplyIcon className='gh-comments-icon gh-comments-icon-reply mr-1' />Reply</button>
);
}
export default Reply;
export default Reply;