Ported updates from #64

lolsob-rspec
kibigo! 2017-07-15 15:10:06 -07:00
parent f48f42598f
commit d5d6a8ad16
6 changed files with 51 additions and 29 deletions

View File

@ -47,7 +47,7 @@ export default class StatusActionBar extends ImmutablePureComponent {
onReport: PropTypes.func, onReport: PropTypes.func,
onMuteConversation: PropTypes.func, onMuteConversation: PropTypes.func,
onDeleteNotification: PropTypes.func, onDeleteNotification: PropTypes.func,
me: PropTypes.number.isRequired, me: PropTypes.number,
withDismiss: PropTypes.bool, withDismiss: PropTypes.bool,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
}; };
@ -108,6 +108,7 @@ export default class StatusActionBar extends ImmutablePureComponent {
const { status, me, intl, withDismiss } = this.props; const { status, me, intl, withDismiss } = this.props;
const reblogDisabled = status.get('visibility') === 'private' || status.get('visibility') === 'direct'; const reblogDisabled = status.get('visibility') === 'private' || status.get('visibility') === 'direct';
const mutingConversation = status.get('muted'); const mutingConversation = status.get('muted');
const anonymousAccess = !me;
let menu = []; let menu = [];
let reblogIcon = 'retweet'; let reblogIcon = 'retweet';
@ -151,12 +152,12 @@ export default class StatusActionBar extends ImmutablePureComponent {
return ( return (
<div className='status__action-bar'> <div className='status__action-bar'>
<IconButton className='status__action-bar-button' title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} /> <IconButton className='status__action-bar-button' disabled={anonymousAccess} title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} />
<IconButton className='status__action-bar-button' disabled={reblogDisabled} active={status.get('reblogged')} title={reblogDisabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /> <IconButton className='status__action-bar-button' disabled={anonymousAccess || reblogDisabled} active={status.get('reblogged')} title={reblogDisabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
<IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /> <IconButton className='status__action-bar-button star-icon' disabled={anonymousAccess} animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
<div className='status__action-bar-dropdown'> <div className='status__action-bar-dropdown'>
<DropdownMenu items={menu} icon='ellipsis-h' size={18} direction='right' ariaLabel='More' /> <DropdownMenu items={menu} disabled={anonymousAccess} icon='ellipsis-h' size={18} direction='right' ariaLabel='More' />
</div> </div>
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a> <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a>

View File

@ -4,6 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import escapeTextContentForBrowser from 'escape-html'; import escapeTextContentForBrowser from 'escape-html';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import classnames from 'classnames';
// Mastodon imports // // Mastodon imports //
import emojify from '../../../mastodon/emoji'; import emojify from '../../../mastodon/emoji';
@ -12,10 +13,6 @@ import Permalink from '../../../mastodon/components/permalink';
export default class StatusContent extends React.PureComponent { export default class StatusContent extends React.PureComponent {
static contextTypes = {
router: PropTypes.object,
};
static propTypes = { static propTypes = {
status: ImmutablePropTypes.map.isRequired, status: ImmutablePropTypes.map.isRequired,
expanded: PropTypes.oneOf([true, false, null]), expanded: PropTypes.oneOf([true, false, null]),
@ -24,6 +21,7 @@ export default class StatusContent extends React.PureComponent {
media: PropTypes.element, media: PropTypes.element,
mediaIcon: PropTypes.string, mediaIcon: PropTypes.string,
parseClick: PropTypes.func, parseClick: PropTypes.func,
disabled: PropTypes.bool,
}; };
state = { state = {
@ -45,10 +43,11 @@ export default class StatusContent extends React.PureComponent {
link.addEventListener('click', this.onHashtagClick.bind(this, link.text), false); link.addEventListener('click', this.onHashtagClick.bind(this, link.text), false);
} else { } else {
link.addEventListener('click', this.onLinkClick.bind(this), false); link.addEventListener('click', this.onLinkClick.bind(this), false);
link.setAttribute('target', '_blank');
link.setAttribute('rel', 'noopener');
link.setAttribute('title', link.href); link.setAttribute('title', link.href);
} }
link.setAttribute('target', '_blank');
link.setAttribute('rel', 'noopener');
} }
} }
@ -118,7 +117,13 @@ export default class StatusContent extends React.PureComponent {
} }
render () { render () {
const { status, media, mediaIcon } = this.props; const {
status,
media,
mediaIcon,
parseClick,
disabled,
} = this.props;
const hidden = ( const hidden = (
this.props.setExpansion ? this.props.setExpansion ?
@ -133,6 +138,9 @@ export default class StatusContent extends React.PureComponent {
)), )),
}; };
const directionStyle = { direction: 'ltr' }; const directionStyle = { direction: 'ltr' };
const classNames = classnames('status__content', {
'status__content--with-action': parseClick && !disabled,
});
if (isRtl(status.get('search_index'))) { if (isRtl(status.get('search_index'))) {
directionStyle.direction = 'rtl'; directionStyle.direction = 'rtl';
@ -180,7 +188,7 @@ export default class StatusContent extends React.PureComponent {
} }
return ( return (
<div className='status__content status__content--with-action' ref={this.setRef}> <div className={classNames} ref={this.setRef}>
<p <p
style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }} style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}
onMouseDown={this.handleMouseDown} onMouseDown={this.handleMouseDown}
@ -207,11 +215,11 @@ export default class StatusContent extends React.PureComponent {
</div> </div>
); );
} else if (this.props.parseClick) { } else if (parseClick) {
return ( return (
<div <div
ref={this.setRef} ref={this.setRef}
className='status__content status__content--with-action' className={classNames}
style={directionStyle} style={directionStyle}
> >
<div <div

View File

@ -220,6 +220,7 @@ if we have a `friend` and a normal `<Avatar>` if we don't.
} }
<a <a
href={account.get('url')} href={account.get('url')}
target='_blank'
className='status__display-name' className='status__display-name'
onClick={this.handleAccountClick} onClick={this.handleAccountClick}
> >

View File

@ -507,6 +507,7 @@ applicable.
const { router } = this.context; const { router } = this.context;
const { status } = this.props; const { status } = this.props;
const { isExpanded } = this.state; const { isExpanded } = this.state;
if (!router) return;
if (destination === undefined) { if (destination === undefined) {
destination = `/statuses/${ destination = `/statuses/${
status.getIn(['reblog', 'id'], status.get('id')) status.getIn(['reblog', 'id'], status.get('id'))
@ -532,7 +533,13 @@ this operation are further explained in the code below.
*/ */
render () { render () {
const { parseClick, setExpansion, handleRef } = this; const {
parseClick,
setExpansion,
saveHeight,
handleRef,
} = this;
const { router } = this.context;
const { const {
status, status,
account, account,
@ -706,9 +713,10 @@ collapsed.
media={media} media={media}
mediaIcon={mediaIcon} mediaIcon={mediaIcon}
expanded={isExpanded} expanded={isExpanded}
setExpansion={this.setExpansion} setExpansion={setExpansion}
onHeightUpdate={this.saveHeight} onHeightUpdate={saveHeight}
parseClick={parseClick} parseClick={parseClick}
disabled={!router}
/> />
{isExpanded !== false ? ( {isExpanded !== false ? (
<StatusActionBar <StatusActionBar

View File

@ -17,6 +17,10 @@ const messages = defineMessages({
@injectIntl @injectIntl
export default class StatusPlayer extends React.PureComponent { export default class StatusPlayer extends React.PureComponent {
static contextTypes = {
router: PropTypes.object,
};
static propTypes = { static propTypes = {
media: ImmutablePropTypes.map.isRequired, media: ImmutablePropTypes.map.isRequired,
letterbox: PropTypes.bool, letterbox: PropTypes.bool,
@ -122,7 +126,7 @@ export default class StatusPlayer extends React.PureComponent {
</div> </div>
); );
let expandButton = ( let expandButton = !this.context.router ? '' : (
<div className='status__video-player-expand'> <div className='status__video-player-expand'>
<IconButton overlay title={intl.formatMessage(messages.expand_video)} icon='expand' onClick={this.handleExpand} /> <IconButton overlay title={intl.formatMessage(messages.expand_video)} icon='expand' onClick={this.handleExpand} />
</div> </div>

View File

@ -28,7 +28,7 @@ Imports
*/ */
// Package imports // // Package imports //
import Immutable from 'immutable'; import { Map as ImmutableMap } from 'immutable';
// Mastodon imports // // Mastodon imports //
import { STORE_HYDRATE } from '../../mastodon/actions/store'; import { STORE_HYDRATE } from '../../mastodon/actions/store';
@ -48,27 +48,27 @@ These are only used if no previously-saved values exist.
*/ */
const initialState = Immutable.fromJS({ const initialState = ImmutableMap({
layout : 'auto', layout : 'auto',
stretch : true, stretch : true,
collapsed : { collapsed : ImmutableMap({
enabled : true, enabled : true,
auto : { auto : ImmutableMap({
all : false, all : false,
notifications : true, notifications : true,
lengthy : true, lengthy : true,
replies : false, replies : false,
media : false, media : false,
}, }),
backgrounds : { backgrounds : ImmutableMap({
user_backgrounds : false, user_backgrounds : false,
preview_images : false, preview_images : false,
}, }),
}, }),
media : { media : ImmutableMap({
letterbox : true, letterbox : true,
fullwidth : true, fullwidth : true,
}, }),
}); });
/* * * * */ /* * * * */