Refactor reply indicator and show compact list of attachments

master
Thibaut Girka 6 years ago committed by ThibG
parent e3bf8c8aa1
commit d3783b864c
  1. 12
      app/javascript/flavours/glitch/features/composer/index.js
  2. 21
      app/javascript/flavours/glitch/features/composer/reply/index.js

@ -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…
Cancel
Save