diff options
Diffstat (limited to 'app/javascript/mastodon/features/status/components')
-rw-r--r-- | app/javascript/mastodon/features/status/components/action_bar.jsx (renamed from app/javascript/mastodon/features/status/components/action_bar.js) | 44 | ||||
-rw-r--r-- | app/javascript/mastodon/features/status/components/card.jsx (renamed from app/javascript/mastodon/features/status/components/card.js) | 11 | ||||
-rw-r--r-- | app/javascript/mastodon/features/status/components/detailed_status.jsx (renamed from app/javascript/mastodon/features/status/components/detailed_status.js) | 30 |
3 files changed, 48 insertions, 37 deletions
diff --git a/app/javascript/mastodon/features/status/components/action_bar.js b/app/javascript/mastodon/features/status/components/action_bar.jsx index 46ee9f6c1..0c74c4cc4 100644 --- a/app/javascript/mastodon/features/status/components/action_bar.js +++ b/app/javascript/mastodon/features/status/components/action_bar.jsx @@ -13,7 +13,7 @@ const messages = defineMessages({ delete: { id: 'status.delete', defaultMessage: 'Delete' }, redraft: { id: 'status.redraft', defaultMessage: 'Delete & re-draft' }, edit: { id: 'status.edit', defaultMessage: 'Edit' }, - direct: { id: 'status.direct', defaultMessage: 'Direct message @{name}' }, + direct: { id: 'status.direct', defaultMessage: 'Privately mention @{name}' }, mention: { id: 'status.mention', defaultMessage: 'Mention @{name}' }, reply: { id: 'status.reply', defaultMessage: 'Reply' }, reblog: { id: 'status.reblog', defaultMessage: 'Boost' }, @@ -47,8 +47,6 @@ const mapStateToProps = (state, { status }) => ({ relationship: state.getIn(['relationships', status.getIn(['account', 'id'])]), }); -export default @connect(mapStateToProps) -@injectIntl class ActionBar extends React.PureComponent { static contextTypes = { @@ -82,39 +80,39 @@ class ActionBar extends React.PureComponent { handleReplyClick = () => { this.props.onReply(this.props.status); - } + }; handleReblogClick = (e) => { this.props.onReblog(this.props.status, e); - } + }; handleFavouriteClick = () => { this.props.onFavourite(this.props.status); - } + }; handleBookmarkClick = (e) => { this.props.onBookmark(this.props.status, e); - } + }; handleDeleteClick = () => { this.props.onDelete(this.props.status, this.context.router.history); - } + }; handleRedraftClick = () => { this.props.onDelete(this.props.status, this.context.router.history, true); - } + }; handleEditClick = () => { this.props.onEdit(this.props.status, this.context.router.history); - } + }; handleDirectClick = () => { this.props.onDirect(this.props.status.get('account'), this.context.router.history); - } + }; handleMentionClick = () => { this.props.onMention(this.props.status.get('account'), this.context.router.history); - } + }; handleMuteClick = () => { const { status, relationship, onMute, onUnmute } = this.props; @@ -125,7 +123,7 @@ class ActionBar extends React.PureComponent { } else { onMute(account); } - } + }; handleBlockClick = () => { const { status, relationship, onBlock, onUnblock } = this.props; @@ -136,49 +134,49 @@ class ActionBar extends React.PureComponent { } else { onBlock(status); } - } + }; handleBlockDomain = () => { const { status, onBlockDomain } = this.props; const account = status.get('account'); onBlockDomain(account.get('acct').split('@')[1]); - } + }; handleUnblockDomain = () => { const { status, onUnblockDomain } = this.props; const account = status.get('account'); onUnblockDomain(account.get('acct').split('@')[1]); - } + }; handleConversationMuteClick = () => { this.props.onMuteConversation(this.props.status); - } + }; handleReport = () => { this.props.onReport(this.props.status); - } + }; handlePinClick = () => { this.props.onPin(this.props.status); - } + }; handleShare = () => { navigator.share({ text: this.props.status.get('search_index'), url: this.props.status.get('url'), }); - } + }; handleEmbed = () => { this.props.onEmbed(this.props.status); - } + }; handleCopy = () => { const url = this.props.status.get('url'); navigator.clipboard.writeText(url); - } + }; render () { const { status, relationship, intl } = this.props; @@ -298,3 +296,5 @@ class ActionBar extends React.PureComponent { } } + +export default connect(mapStateToProps)(injectIntl(ActionBar)); diff --git a/app/javascript/mastodon/features/status/components/card.js b/app/javascript/mastodon/features/status/components/card.jsx index 82537dd5d..b588c83e4 100644 --- a/app/javascript/mastodon/features/status/components/card.js +++ b/app/javascript/mastodon/features/status/components/card.jsx @@ -146,7 +146,7 @@ export default class Card extends React.PureComponent { } else { this.setState({ embedded: true }); } - } + }; setRef = c => { this.node = c; @@ -154,17 +154,17 @@ export default class Card extends React.PureComponent { if (this.node) { this._setDimensions(); } - } + }; handleImageLoad = () => { this.setState({ previewLoaded: true }); - } + }; handleReveal = e => { e.preventDefault(); e.stopPropagation(); this.setState({ revealed: true }); - } + }; renderVideo () { const { card } = this.props; @@ -196,11 +196,12 @@ export default class Card extends React.PureComponent { const interactive = card.get('type') !== 'link'; const className = classnames('status-card', { horizontal, compact, interactive }); const title = interactive ? <a className='status-card__title' href={card.get('url')} title={card.get('title')} rel='noopener noreferrer' target='_blank'><strong>{card.get('title')}</strong></a> : <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>; + const language = card.get('language') || ''; const ratio = card.get('width') / card.get('height'); const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio); const description = ( - <div className='status-card__content'> + <div className='status-card__content' lang={language}> {title} {!(horizontal || compact) && <p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>} <span className='status-card__host'>{provider}</span> diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.jsx index c62910e0e..e4e572026 100644 --- a/app/javascript/mastodon/features/status/components/detailed_status.js +++ b/app/javascript/mastodon/features/status/components/detailed_status.jsx @@ -6,7 +6,7 @@ import DisplayName from '../../../components/display_name'; import StatusContent from '../../../components/status_content'; import MediaGallery from '../../../components/media_gallery'; import { Link } from 'react-router-dom'; -import { injectIntl, defineMessages, FormattedDate } from 'react-intl'; +import { injectIntl, defineMessages, FormattedDate, FormattedMessage } from 'react-intl'; import Card from './card'; import ImmutablePureComponent from 'react-immutable-pure-component'; import Video from '../../video'; @@ -25,7 +25,6 @@ const messages = defineMessages({ direct_short: { id: 'privacy.direct.short', defaultMessage: 'Direct' }, }); -export default @injectIntl class DetailedStatus extends ImmutablePureComponent { static contextTypes = { @@ -61,15 +60,15 @@ class DetailedStatus extends ImmutablePureComponent { } e.stopPropagation(); - } + }; handleOpenVideo = (options) => { this.props.onOpenVideo(this.props.status.getIn(['media_attachments', 0]), options); - } + }; handleExpandedToggle = () => { this.props.onToggleHidden(this.props.status); - } + }; _measureHeight (heightJustChanged) { if (this.props.measureHeight && this.node) { @@ -84,7 +83,7 @@ class DetailedStatus extends ImmutablePureComponent { setRef = c => { this.node = c; this._measureHeight(); - } + }; componentDidUpdate (prevProps, prevState) { this._measureHeight(prevState.height !== this.state.height); @@ -102,12 +101,12 @@ class DetailedStatus extends ImmutablePureComponent { } window.open(href, 'mastodon-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes'); - } + }; handleTranslate = () => { const { onTranslate, status } = this.props; onTranslate(status); - } + }; render () { const status = (this.props.status && this.props.status.get('reblog')) ? this.props.status.get('reblog') : this.props.status; @@ -139,6 +138,7 @@ class DetailedStatus extends ImmutablePureComponent { <Audio src={attachment.get('url')} alt={attachment.get('description')} + lang={status.get('language')} duration={attachment.getIn(['meta', 'original', 'duration'], 0)} poster={attachment.get('preview_url') || status.getIn(['account', 'avatar_static'])} backgroundColor={attachment.getIn(['meta', 'colors', 'background'])} @@ -161,6 +161,7 @@ class DetailedStatus extends ImmutablePureComponent { blurhash={attachment.get('blurhash')} src={attachment.get('url')} alt={attachment.get('description')} + lang={status.get('language')} width={300} height={150} inline @@ -176,6 +177,7 @@ class DetailedStatus extends ImmutablePureComponent { standalone sensitive={status.get('sensitive')} media={status.get('media_attachments')} + lang={status.get('language')} height={300} onOpenMedia={this.props.onOpenMedia} visible={this.props.showMedia} @@ -260,7 +262,13 @@ class DetailedStatus extends ImmutablePureComponent { return ( <div style={outerStyle}> - <div ref={this.setRef} className={classNames('detailed-status', `detailed-status-${status.get('visibility')}`, { compact })}> + <div ref={this.setRef} className={classNames('detailed-status', { compact })}> + {status.get('visibility') === 'direct' && ( + <div className='status__prepend'> + <div className='status__prepend-icon-wrapper'><Icon id='at' className='status__prepend-icon' fixedWidth /></div> + <FormattedMessage id='status.direct_indicator' defaultMessage='Private mention' /> + </div> + )} <a href={`/@${status.getIn(['account', 'acct'])}`} onClick={this.handleAccountClick} className='detailed-status__display-name'> <div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={46} /></div> <DisplayName account={status.get('account')} localDomain={this.props.domain} /> @@ -276,7 +284,7 @@ class DetailedStatus extends ImmutablePureComponent { {media} <div className='detailed-status__meta'> - <a className='detailed-status__datetime' href={`/@${status.getIn(['account', 'acct'])}\/${status.get('id')}`} target='_blank' rel='noopener noreferrer'> + <a className='detailed-status__datetime' href={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}`} target='_blank' rel='noopener noreferrer'> <FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' /> </a>{edited}{visibilityLink}{applicationLink}{reblogLink} · {favouriteLink} </div> @@ -286,3 +294,5 @@ class DetailedStatus extends ImmutablePureComponent { } } + +export default injectIntl(DetailedStatus); |