From c0c704652cb7da2d85b2480c85c2305f49c5e9c4 Mon Sep 17 00:00:00 2001 From: Baptiste Lemoine Date: Wed, 18 Dec 2019 12:37:42 +0100 Subject: [PATCH] :zap: creation time for message --- .../components/conversation.js | 146 +++++++++++------- 1 file changed, 94 insertions(+), 52 deletions(-) diff --git a/app/javascript/mastodon/features/direct_timeline/components/conversation.js b/app/javascript/mastodon/features/direct_timeline/components/conversation.js index 235cb7ad8..221988ecd 100644 --- a/app/javascript/mastodon/features/direct_timeline/components/conversation.js +++ b/app/javascript/mastodon/features/direct_timeline/components/conversation.js @@ -4,7 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import StatusContent from 'mastodon/components/status_content'; import AttachmentList from 'mastodon/components/attachment_list'; -import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container'; import AvatarComposite from 'mastodon/components/avatar_composite'; import Permalink from 'mastodon/components/permalink'; @@ -15,12 +15,12 @@ import { autoPlayGif } from 'mastodon/initial_state'; import classNames from 'classnames'; const messages = defineMessages({ - more: { id: 'status.more', defaultMessage: 'More' }, - open: { id: 'conversation.open', defaultMessage: 'View conversation' }, - reply: { id: 'status.reply', defaultMessage: 'Reply' }, - markAsRead: { id: 'conversation.mark_as_read', defaultMessage: 'Mark as read' }, - delete: { id: 'conversation.delete', defaultMessage: 'Delete conversation' }, - muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' }, + more : { id: 'status.more', defaultMessage: 'More' }, + open : { id: 'conversation.open', defaultMessage: 'View conversation' }, + reply : { id: 'status.reply', defaultMessage: 'Reply' }, + markAsRead : { id: 'conversation.mark_as_read', defaultMessage: 'Mark as read' }, + delete : { id: 'conversation.delete', defaultMessage: 'Delete conversation' }, + muteConversation : { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' }, unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' }, }); @@ -33,17 +33,17 @@ class Conversation extends ImmutablePureComponent { static propTypes = { conversationId: PropTypes.string.isRequired, - accounts: ImmutablePropTypes.list.isRequired, - lastStatus: ImmutablePropTypes.map, - unread:PropTypes.bool.isRequired, - onMoveUp: PropTypes.func, - onMoveDown: PropTypes.func, - markRead: PropTypes.func.isRequired, - delete: PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, + accounts : ImmutablePropTypes.list.isRequired, + lastStatus : ImmutablePropTypes.map, + unread : PropTypes.bool.isRequired, + onMoveUp : PropTypes.func, + onMoveDown : PropTypes.func, + markRead : PropTypes.func.isRequired, + delete : PropTypes.func.isRequired, + intl : PropTypes.object.isRequired, }; - _updateEmojis () { + _updateEmojis() { const node = this.namesNode; if (!node || autoPlayGif) { @@ -64,21 +64,21 @@ class Conversation extends ImmutablePureComponent { } } - componentDidMount () { + componentDidMount() { this._updateEmojis(); } - componentDidUpdate () { + componentDidUpdate() { this._updateEmojis(); } handleEmojiMouseEnter = ({ target }) => { target.src = target.getAttribute('data-original'); - } + }; handleEmojiMouseLeave = ({ target }) => { target.src = target.getAttribute('data-static'); - } + }; handleClick = () => { if (!this.context.router) { @@ -92,41 +92,41 @@ class Conversation extends ImmutablePureComponent { } this.context.router.history.push(`/statuses/${lastStatus.get('id')}`); - } + }; handleMarkAsRead = () => { this.props.markRead(); - } + }; handleReply = () => { this.props.reply(this.props.lastStatus, this.context.router.history); - } + }; handleDelete = () => { this.props.delete(); - } + }; handleHotkeyMoveUp = () => { this.props.onMoveUp(this.props.conversationId); - } + }; handleHotkeyMoveDown = () => { this.props.onMoveDown(this.props.conversationId); - } + }; handleConversationMute = () => { this.props.onMute(this.props.lastStatus); - } + }; handleShowMore = () => { this.props.onToggleHidden(this.props.lastStatus); - } + }; setNamesRef = (c) => { this.namesNode = c; - } + }; - render () { + render() { const { accounts, lastStatus, unread, intl } = this.props; if (lastStatus === null) { @@ -138,7 +138,10 @@ class Conversation extends ImmutablePureComponent { null, ]; - menu.push({ text: intl.formatMessage(lastStatus.get('muted') ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMute }); + menu.push({ + text : intl.formatMessage(lastStatus.get('muted') ? messages.unmuteConversation : messages.muteConversation), + action: this.handleConversationMute, + }); if (unread) { menu.push({ text: intl.formatMessage(messages.markAsRead), action: this.handleMarkAsRead }); @@ -147,33 +150,60 @@ class Conversation extends ImmutablePureComponent { menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDelete }); - const names = accounts.map(a => ).reduce((prev, cur) => [prev, ', ', cur]); + const names = accounts.map(a => + + ).reduce((prev, cur) => [prev, ', ', cur]); const handlers = { - reply: this.handleReply, - open: this.handleClick, - moveUp: this.handleHotkeyMoveUp, - moveDown: this.handleHotkeyMoveDown, + reply : this.handleReply, + open : this.handleClick, + moveUp : this.handleHotkeyMoveUp, + moveDown : this.handleHotkeyMoveDown, toggleHidden: this.handleShowMore, }; return ( -
+
- -
+ +
- {unread && } -
+ + {lastStatus.get('created_at').substr(0, 10)} + + {unread && } + +
-
- {names} }} /> -
-
+
+ {names} }} + /> +
+
- +
- -
- - - - + + + + + + ); }