tykayn/mastodon
1
0
Fork 0
mirror of https://framagit.org/tykayn/mastodon.git synced 2023-08-25 08:33:12 +02:00
Code Issues Projects Releases Wiki Activity

⚡ creation time for message

Browse Source
This commit is contained in:
Baptiste Lemoine 2019-12-18 12:37:42 +01:00
parent 7e30a3a575
commit c0c704652c
1 changed files with 94 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
app/javascript/mastodon/features/direct_timeline/components/conversation.js
View File

@ -4,7 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import StatusContent from 'mastodon/components/status_content'; import StatusContent from 'mastodon/components/status_content';
import AttachmentList from 'mastodon/components/attachment_list'; 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 DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container';
import AvatarComposite from 'mastodon/components/avatar_composite'; import AvatarComposite from 'mastodon/components/avatar_composite';
import Permalink from 'mastodon/components/permalink'; import Permalink from 'mastodon/components/permalink';
@ -15,12 +15,12 @@ import { autoPlayGif } from 'mastodon/initial_state';
import classNames from 'classnames'; import classNames from 'classnames';
const messages = defineMessages({ const messages = defineMessages({
more: { id: 'status.more', defaultMessage: 'More' }, more : { id: 'status.more', defaultMessage: 'More' },
open: { id: 'conversation.open', defaultMessage: 'View conversation' }, open : { id: 'conversation.open', defaultMessage: 'View conversation' },
reply: { id: 'status.reply', defaultMessage: 'Reply' }, reply : { id: 'status.reply', defaultMessage: 'Reply' },
markAsRead: { id: 'conversation.mark_as_read', defaultMessage: 'Mark as read' }, markAsRead : { id: 'conversation.mark_as_read', defaultMessage: 'Mark as read' },
delete: { id: 'conversation.delete', defaultMessage: 'Delete conversation' }, delete : { id: 'conversation.delete', defaultMessage: 'Delete conversation' },
muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' }, muteConversation : { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' }, unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
}); });
@ -33,17 +33,17 @@ class Conversation extends ImmutablePureComponent {
static propTypes = { static propTypes = {
conversationId: PropTypes.string.isRequired, conversationId: PropTypes.string.isRequired,
accounts: ImmutablePropTypes.list.isRequired, accounts : ImmutablePropTypes.list.isRequired,
lastStatus: ImmutablePropTypes.map, lastStatus : ImmutablePropTypes.map,
unread:PropTypes.bool.isRequired, unread : PropTypes.bool.isRequired,
onMoveUp: PropTypes.func, onMoveUp : PropTypes.func,
onMoveDown: PropTypes.func, onMoveDown : PropTypes.func,
markRead: PropTypes.func.isRequired, markRead : PropTypes.func.isRequired,
delete: PropTypes.func.isRequired, delete : PropTypes.func.isRequired,
intl: PropTypes.object.isRequired, intl : PropTypes.object.isRequired,
}; };
_updateEmojis () { _updateEmojis() {
const node = this.namesNode; const node = this.namesNode;
if (!node || autoPlayGif) { if (!node || autoPlayGif) {
@ -64,21 +64,21 @@ class Conversation extends ImmutablePureComponent {
} }
} }
componentDidMount () { componentDidMount() {
this._updateEmojis(); this._updateEmojis();
} }
componentDidUpdate () { componentDidUpdate() {
this._updateEmojis(); this._updateEmojis();
} }
handleEmojiMouseEnter = ({ target }) => { handleEmojiMouseEnter = ({ target }) => {
target.src = target.getAttribute('data-original'); target.src = target.getAttribute('data-original');
} };
handleEmojiMouseLeave = ({ target }) => { handleEmojiMouseLeave = ({ target }) => {
target.src = target.getAttribute('data-static'); target.src = target.getAttribute('data-static');
} };
handleClick = () => { handleClick = () => {
if (!this.context.router) { if (!this.context.router) {
@ -92,41 +92,41 @@ class Conversation extends ImmutablePureComponent {
} }
this.context.router.history.push(`/statuses/${lastStatus.get('id')}`); this.context.router.history.push(`/statuses/${lastStatus.get('id')}`);
} };
handleMarkAsRead = () => { handleMarkAsRead = () => {
this.props.markRead(); this.props.markRead();
} };
handleReply = () => { handleReply = () => {
this.props.reply(this.props.lastStatus, this.context.router.history); this.props.reply(this.props.lastStatus, this.context.router.history);
} };
handleDelete = () => { handleDelete = () => {
this.props.delete(); this.props.delete();
} };
handleHotkeyMoveUp = () => { handleHotkeyMoveUp = () => {
this.props.onMoveUp(this.props.conversationId); this.props.onMoveUp(this.props.conversationId);
} };
handleHotkeyMoveDown = () => { handleHotkeyMoveDown = () => {
this.props.onMoveDown(this.props.conversationId); this.props.onMoveDown(this.props.conversationId);
} };
handleConversationMute = () => { handleConversationMute = () => {
this.props.onMute(this.props.lastStatus); this.props.onMute(this.props.lastStatus);
} };
handleShowMore = () => { handleShowMore = () => {
this.props.onToggleHidden(this.props.lastStatus); this.props.onToggleHidden(this.props.lastStatus);
} };
setNamesRef = (c) => { setNamesRef = (c) => {
this.namesNode = c; this.namesNode = c;
} };
render () { render() {
const { accounts, lastStatus, unread, intl } = this.props; const { accounts, lastStatus, unread, intl } = this.props;
if (lastStatus === null) { if (lastStatus === null) {
@ -138,7 +138,10 @@ class Conversation extends ImmutablePureComponent {
null, 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) { if (unread) {
menu.push({ text: intl.formatMessage(messages.markAsRead), action: this.handleMarkAsRead }); 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 }); menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDelete });
const names = accounts.map(a => <Permalink to={`/accounts/${a.get('id')}`} href={a.get('url')} key={a.get('id')} title={a.get('acct')}><bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }} /></bdi></Permalink>).reduce((prev, cur) => [prev, ', ', cur]); const names = accounts.map(a => <Permalink
to={`/accounts/${a.get('id')}`}
href={a.get('url')}
key={a.get('id')}
title={a.get('acct')}
>
<bdi ><strong
className='display-name__html'
dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }}
/></bdi >
</Permalink >).reduce((prev, cur) => [prev, ', ', cur]);
const handlers = { const handlers = {
reply: this.handleReply, reply : this.handleReply,
open: this.handleClick, open : this.handleClick,
moveUp: this.handleHotkeyMoveUp, moveUp : this.handleHotkeyMoveUp,
moveDown: this.handleHotkeyMoveDown, moveDown : this.handleHotkeyMoveDown,
toggleHidden: this.handleShowMore, toggleHidden: this.handleShowMore,
}; };
return ( return (
<HotKeys handlers={handlers}> <HotKeys handlers={handlers}>
<div className={classNames('conversation focusable muted', { 'conversation--unread': unread })} tabIndex='0'> <div
className={classNames('conversation focusable muted', { 'conversation--unread': unread })}
tabIndex='0'
>
<div className='conversation__avatar'> <div className='conversation__avatar'>
<AvatarComposite accounts={accounts} size={48} /> <AvatarComposite
</div> accounts={accounts}
size={48}
/>
</div >
<div className='conversation__content'> <div className='conversation__content'>
<div className='conversation__content__info'> <div className='conversation__content__info'>
<div className='conversation__content__relative-time'> <div className='conversation__content__relative-time'>
{unread && <span className='conversation__unread' />} <RelativeTimestamp timestamp={lastStatus.get('created_at')} /> <span className='conversation_created-at'>
</div> {lastStatus.get('created_at').substr(0, 10)}
</span >
{unread && <span className='conversation__unread' />}
<RelativeTimestamp timestamp={lastStatus.get('created_at')} />
</div >
<div className='conversation__content__names' ref={this.setNamesRef}> <div
<FormattedMessage id='conversation.with' defaultMessage='With {names}' values={{ names: <span>{names}</span> }} /> className='conversation__content__names'
</div> ref={this.setNamesRef}
</div> >
<FormattedMessage
id='conversation.with'
defaultMessage='With {names}'
values={{ names: <span >{names}</span > }}
/>
</div >
</div >
<StatusContent <StatusContent
status={lastStatus} status={lastStatus}
@ -191,15 +221,27 @@ class Conversation extends ImmutablePureComponent {
)} )}
<div className='status__action-bar'> <div className='status__action-bar'>
<IconButton className='status__action-bar-button' title={intl.formatMessage(messages.reply)} icon='reply' onClick={this.handleReply} /> <IconButton
className='status__action-bar-button'
title={intl.formatMessage(messages.reply)}
icon='reply'
onClick={this.handleReply}
/>
<div className='status__action-bar-dropdown'> <div className='status__action-bar-dropdown'>
<DropdownMenuContainer status={lastStatus} items={menu} icon='ellipsis-h' size={18} direction='right' title={intl.formatMessage(messages.more)} /> <DropdownMenuContainer
</div> status={lastStatus}
</div> items={menu}
</div> icon='ellipsis-h'
</div> size={18}
</HotKeys> direction='right'
title={intl.formatMessage(messages.more)}
/>
</div >
</div >
</div >
</div >
</HotKeys >
); );
} }