diff --git a/js/src/forum/components/CommentPost.tsx b/js/src/forum/components/CommentPost.tsx index 287e0bd14..ea0ebe477 100644 --- a/js/src/forum/components/CommentPost.tsx +++ b/js/src/forum/components/CommentPost.tsx @@ -1,7 +1,7 @@ import Post from './Post'; import PostUser from './PostUser'; -// import PostMeta from './PostMeta'; -// import PostEdited from './PostEdited'; +import PostMeta from './PostMeta'; +import PostEdited from './PostEdited'; // import EditPostComposer from './EditPostComposer'; import ItemList from '../../common/utils/ItemList'; import listItems from '../../common/helpers/listItems'; @@ -119,19 +119,17 @@ export default class CommentPost extends Post { /** * Build an item list for the post's header. - * - * @return {ItemList} */ - headerItems() { + headerItems(): ItemList { const items = new ItemList(); const post = this.props.post; const props = { post }; items.add('user', , 100); - // items.add('meta', PostMeta.component(props)); + items.add('meta', ); if (post.isEdited() && !post.isHidden()) { - items.add('edited', PostEdited.component(props)); + items.add('edited', ); } // If the post is hidden, add a button that allows toggling the visibility diff --git a/js/src/forum/components/PostEdited.tsx b/js/src/forum/components/PostEdited.tsx new file mode 100644 index 000000000..27285fd04 --- /dev/null +++ b/js/src/forum/components/PostEdited.tsx @@ -0,0 +1,48 @@ +import Component from '../../common/Component'; +import { PostProp } from '../../common/concerns/ComponentProps'; +import humanTime from '../../common/utils/humanTime'; + +/** + * The `PostEdited` component displays information about when and by whom a post + * was edited. + */ +export default class PostEdited extends Component { + shouldUpdateTooltip = false; + oldEditedInfo?: string; + + view() { + const post = this.props.post; + const editedUser = post.editedUser(); + const editedInfo = app.translator.transText('core.forum.post.edited_tooltip', { user: editedUser, ago: humanTime(post.editedAt()) }); + + if (editedInfo !== this.oldEditedInfo) { + this.shouldUpdateTooltip = true; + this.oldEditedInfo = editedInfo; + } + + return ( + + {app.translator.trans('core.forum.post.edited_text')} + + ); + } + + oncreate(vnode) { + super.oncreate(vnode); + + console.log('set up tooltip'); + + this.$().tooltip(); + } + + onupdate(vnode) { + super.onupdate(vnode); + + if (this.shouldUpdateTooltip) { + this.$() + .tooltip('destroy') + .tooltip(); + this.shouldUpdateTooltip = false; + } + } +} diff --git a/js/src/forum/components/PostMeta.tsx b/js/src/forum/components/PostMeta.tsx new file mode 100644 index 000000000..a2abdc3dd --- /dev/null +++ b/js/src/forum/components/PostMeta.tsx @@ -0,0 +1,52 @@ +import Component from '../../common/Component'; +import { PostProp } from '../../common/concerns/ComponentProps'; +import humanTime from '../../common/helpers/humanTime'; +import fullTime from '../../common/helpers/fullTime'; +import Post from '../../common/models/Post'; + +export default class PostMeta extends Component { + view() { + const post = this.props.post; + const time = post.createdAt(); + const permalink = this.getPermalink(post); + const touch = 'ontouchstart' in document.documentElement; + + // When the dropdown menu is shown, select the contents of the permalink + // input so that the user can quickly copy the URL. + const selectPermalink = function(this: Element) { + setTimeout(() => + $(this) + .parent() + .find('.PostMeta-permalink') + .select() + ); + }; + + return ( +
+ + {humanTime(time)} + + +
+ {app.translator.trans('core.forum.post.number_tooltip', { number: post.number() })}{' '} + {fullTime(time)} {post.data.attributes.ipAddress} + {touch ? ( + + {permalink} + + ) : ( + e.stopPropagation()} /> + )} +
+
+ ); + } + + /** + * Get the permalink for the given post. + */ + getPermalink(post: Post): string { + return window.location.origin + app.route.post(post); + } +}