forked from treehouse/mastodon
Refactor reply indicator and show compact list of attachments
parent
e3bf8c8aa1
commit
d3783b864c
|
@ -78,6 +78,7 @@ function mapStateToProps (state) {
|
||||||
preselectDate: state.getIn(['compose', 'preselectDate']),
|
preselectDate: state.getIn(['compose', 'preselectDate']),
|
||||||
privacy: state.getIn(['compose', 'privacy']),
|
privacy: state.getIn(['compose', 'privacy']),
|
||||||
progress: state.getIn(['compose', 'progress']),
|
progress: state.getIn(['compose', 'progress']),
|
||||||
|
inReplyTo: inReplyTo ? state.getIn(['statuses', inReplyTo]) : null,
|
||||||
replyAccount: inReplyTo ? state.getIn(['statuses', inReplyTo, 'account']) : null,
|
replyAccount: inReplyTo ? state.getIn(['statuses', inReplyTo, 'account']) : null,
|
||||||
replyContent: inReplyTo ? state.getIn(['statuses', inReplyTo, 'contentHtml']) : null,
|
replyContent: inReplyTo ? state.getIn(['statuses', inReplyTo, 'contentHtml']) : null,
|
||||||
resetFileKey: state.getIn(['compose', 'resetFileKey']),
|
resetFileKey: state.getIn(['compose', 'resetFileKey']),
|
||||||
|
@ -302,8 +303,7 @@ class Composer extends React.Component {
|
||||||
onUpload,
|
onUpload,
|
||||||
privacy,
|
privacy,
|
||||||
progress,
|
progress,
|
||||||
replyAccount,
|
inReplyTo,
|
||||||
replyContent,
|
|
||||||
resetFileKey,
|
resetFileKey,
|
||||||
sensitive,
|
sensitive,
|
||||||
showSearch,
|
showSearch,
|
||||||
|
@ -328,10 +328,9 @@ class Composer extends React.Component {
|
||||||
{privacy === 'direct' ? <ComposerDirectWarning /> : null}
|
{privacy === 'direct' ? <ComposerDirectWarning /> : null}
|
||||||
{privacy === 'private' && amUnlocked ? <ComposerWarning /> : null}
|
{privacy === 'private' && amUnlocked ? <ComposerWarning /> : null}
|
||||||
{privacy !== 'public' && APPROX_HASHTAG_RE.test(text) ? <ComposerHashtagWarning /> : null}
|
{privacy !== 'public' && APPROX_HASHTAG_RE.test(text) ? <ComposerHashtagWarning /> : null}
|
||||||
{replyAccount && (
|
{inReplyTo && (
|
||||||
<ComposerReply
|
<ComposerReply
|
||||||
account={replyAccount}
|
status={inReplyTo}
|
||||||
content={replyContent}
|
|
||||||
intl={intl}
|
intl={intl}
|
||||||
onCancel={onCancelReply}
|
onCancel={onCancelReply}
|
||||||
/>
|
/>
|
||||||
|
@ -417,8 +416,7 @@ Composer.propTypes = {
|
||||||
preselectDate: PropTypes.instanceOf(Date),
|
preselectDate: PropTypes.instanceOf(Date),
|
||||||
privacy: PropTypes.string,
|
privacy: PropTypes.string,
|
||||||
progress: PropTypes.number,
|
progress: PropTypes.number,
|
||||||
replyAccount: PropTypes.string,
|
inReplyTo: ImmutablePropTypes.map,
|
||||||
replyContent: PropTypes.string,
|
|
||||||
resetFileKey: PropTypes.number,
|
resetFileKey: PropTypes.number,
|
||||||
sideArm: PropTypes.string,
|
sideArm: PropTypes.string,
|
||||||
sensitive: PropTypes.bool,
|
sensitive: PropTypes.bool,
|
||||||
|
|
|
@ -6,6 +6,7 @@ import { defineMessages } from 'react-intl';
|
||||||
// Components.
|
// Components.
|
||||||
import AccountContainer from 'flavours/glitch/containers/account_container';
|
import AccountContainer from 'flavours/glitch/containers/account_container';
|
||||||
import IconButton from 'flavours/glitch/components/icon_button';
|
import IconButton from 'flavours/glitch/components/icon_button';
|
||||||
|
import AttachmentList from 'flavours/glitch/components/attachment_list';
|
||||||
|
|
||||||
// Utils.
|
// Utils.
|
||||||
import { assignHandlers } from 'flavours/glitch/util/react_helpers';
|
import { assignHandlers } from 'flavours/glitch/util/react_helpers';
|
||||||
|
@ -44,11 +45,14 @@ export default class ComposerReply extends React.PureComponent {
|
||||||
render () {
|
render () {
|
||||||
const { handleClick } = this.handlers;
|
const { handleClick } = this.handlers;
|
||||||
const {
|
const {
|
||||||
account,
|
status,
|
||||||
content,
|
|
||||||
intl,
|
intl,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
|
const account = status.get('account');
|
||||||
|
const content = status.get('content');
|
||||||
|
const attachments = status.get('media_attachments');
|
||||||
|
|
||||||
// The result.
|
// The result.
|
||||||
return (
|
return (
|
||||||
<article className='composer--reply'>
|
<article className='composer--reply'>
|
||||||
|
@ -60,18 +64,24 @@ export default class ComposerReply extends React.PureComponent {
|
||||||
title={intl.formatMessage(messages.cancel)}
|
title={intl.formatMessage(messages.cancel)}
|
||||||
inverted
|
inverted
|
||||||
/>
|
/>
|
||||||
{account ? (
|
{account && (
|
||||||
<AccountContainer
|
<AccountContainer
|
||||||
id={account}
|
id={account}
|
||||||
small
|
small
|
||||||
/>
|
/>
|
||||||
) : null}
|
)}
|
||||||
</header>
|
</header>
|
||||||
<div
|
<div
|
||||||
className='content'
|
className='content'
|
||||||
dangerouslySetInnerHTML={{ __html: content || '' }}
|
dangerouslySetInnerHTML={{ __html: content || '' }}
|
||||||
style={{ direction: isRtl(content) ? 'rtl' : 'ltr' }}
|
style={{ direction: isRtl(content) ? 'rtl' : 'ltr' }}
|
||||||
/>
|
/>
|
||||||
|
{attachments.size > 0 && (
|
||||||
|
<AttachmentList
|
||||||
|
compact
|
||||||
|
media={attachments}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</article>
|
</article>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -79,8 +89,7 @@ export default class ComposerReply extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
ComposerReply.propTypes = {
|
ComposerReply.propTypes = {
|
||||||
account: PropTypes.string,
|
status: PropTypes.map.isRequired,
|
||||||
content: PropTypes.string,
|
|
||||||
intl: PropTypes.object.isRequired,
|
intl: PropTypes.object.isRequired,
|
||||||
onCancel: PropTypes.func,
|
onCancel: PropTypes.func,
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue