tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added App Setttings Modal

Browse Source
This commit is contained in:
kibigo!
2017-06-28 22:00:54 -07:00
parent 6cbbdc805f
commit 595c6de32c
19 changed files with 561 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
app/javascript/mastodon/components/status.js
View File

@@ -25,6 +25,7 @@ export default class StatusOrReblog extends ImmutablePureComponent {
static propTypes = {
status: ImmutablePropTypes.map,
account: ImmutablePropTypes.map,
settings: ImmutablePropTypes.map,
wrapped: PropTypes.bool,
onReply: PropTypes.func,
onFavourite: PropTypes.func,
@@ -47,6 +48,7 @@ export default class StatusOrReblog extends ImmutablePureComponent {
updateOnProps = [
'status',
'account',
'settings',
'wrapped',
'me',
'boostModal',
@@ -97,6 +99,7 @@ class Status extends ImmutablePureComponent {
static propTypes = {
status: ImmutablePropTypes.map,
account: ImmutablePropTypes.map,
settings: ImmutablePropTypes.map,
wrapped: PropTypes.bool,
onReply: PropTypes.func,
onFavourite: PropTypes.func,
@@ -126,6 +129,7 @@ class Status extends ImmutablePureComponent {
updateOnProps = [
'status',
'account',
'settings',
'wrapped',
'me',
'boostModal',
@@ -140,7 +144,8 @@ class Status extends ImmutablePureComponent {
]
componentWillReceiveProps (nextProps) {
if (nextProps.collapse !== this.props.collapse && nextProps.collapse !== undefined) this.setState({ isCollapsed: !!nextProps.collapse });
if (!nextProps.settings.getIn(['collapsed', 'enabled'])) this.collapse(false);
else if (nextProps.collapse !== this.props.collapse && nextProps.collapse !== undefined) this.collapse(this.props.collapse);
}
shouldComponentUpdate (nextProps, nextState) {
@@ -165,8 +170,13 @@ class Status extends ImmutablePureComponent {
componentDidMount () {
const node = this.node;
if (this.props.collapse !== undefined) this.setState({ isCollapsed: !!this.props.collapse });
else if (node.clientHeight > 400) this.setState({ isCollapsed: true });
const { collapse, settings, status } = this.props;
if (collapse !== undefined) this.collapse(collapse);
else if (settings.getIn(['collapsed', 'auto', 'all'])) this.collapse();
else if (settings.getIn(['collapsed', 'auto', 'lengthy']) && node.clientHeight > 400) this.collapse();
else if (settings.getIn(['collapsed', 'auto', 'replies']) && status.get('in_reply_to_id', null) !== null) this.collapse();
else if (settings.getIn(['collapsed', 'auto', 'media']) && status.get('media_attachments').size > 0) this.collapse();
if (!this.props.intersectionObserverWrapper) {
// TODO: enable IntersectionObserver optimization for notification statuses.
@@ -186,6 +196,11 @@ class Status extends ImmutablePureComponent {
this.componentMounted = false;
}
collapse = (collapsedOrNot) => {
if (collapsedOrNot === undefined) collapsedOrNot = true;
if (this.props.settings.getIn(['collapsed', 'enabled'])) this.setState({ isCollapsed: !!collapsedOrNot });
}
handleIntersection = (entry) => {
// Edge 15 doesn't support isIntersecting, but we can infer it
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12156111/
@@ -247,20 +262,23 @@ class Status extends ImmutablePureComponent {
};
handleCollapsedClick = () => {
this.setState({ isCollapsed: !this.state.isCollapsed, isExpanded: false });
this.collapse(!this.state.isCollapsed);
this.setState({ isExpanded: false });
}
render () {
let media = null;
let mediaType = null;
let thumb = null;
let statusAvatar;
// Exclude intersectionObserverWrapper from `other` variable
// because intersection is managed in here.
const { status, account, intersectionObserverWrapper, intl, ...other } = this.props;
const { status, account, settings, intersectionObserverWrapper, intl, ...other } = this.props;
const { isExpanded, isIntersecting, isHidden, isCollapsed } = this.state;
let background = settings.getIn(['collapsed', 'backgrounds', 'user_backgrounds']) ? status.getIn(['account', 'header']) : null;
if (status === null) {
return null;
}
@@ -280,12 +298,12 @@ class Status extends ImmutablePureComponent {
} else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
media = <VideoPlayer media={status.getIn(['media_attachments', 0])} sensitive={status.get('sensitive')} onOpenVideo={this.props.onOpenVideo} />;
mediaType = <i className='fa fa-fw fa-video-camera' aria-hidden='true' />;
if (!status.get('sensitive') && !(status.get('spoiler_text').length > 0)) thumb = status.getIn(['media_attachments', 0]).get('preview_url');
} else {
media = <MediaGallery media={status.get('media_attachments')} sensitive={status.get('sensitive')} height={110} onOpenMedia={this.props.onOpenMedia} autoPlayGif={this.props.autoPlayGif} />;
mediaType = status.get('media_attachments').size > 1 ? <i className='fa fa-fw fa-th-large' aria-hidden='true' /> : <i className='fa fa-fw fa-picture-o' aria-hidden='true' />;
if (!status.get('sensitive') && !(status.get('spoiler_text').length > 0)) thumb = status.getIn(['media_attachments', 0]).get('preview_url');
}
if (!status.get('sensitive') && !(status.get('spoiler_text').length > 0) && settings.getIn(['collapsed', 'backgrounds', 'preview_images'])) background = status.getIn(['media_attachments', 0]).get('preview_url');
}
if (account === undefined || account === null) {
@@ -295,19 +313,19 @@ class Status extends ImmutablePureComponent {
}
return (
<div className={`status ${this.props.muted ? 'muted' : ''} status-${status.get('visibility')} ${isCollapsed ? 'status-collapsed' : ''}`} data-id={status.get('id')} ref={this.handleRef} style={{ backgroundImage: thumb && isCollapsed ? 'url(' + thumb + ')' : 'none' }}>
<div className={`status ${this.props.muted ? 'muted' : ''} status-${status.get('visibility')} ${isCollapsed ? 'status-collapsed' : ''}`} data-id={status.get('id')} ref={this.handleRef} style={{ backgroundImage: background && isCollapsed ? 'url(' + background + ')' : 'none' }}>
<div className='status__info'>
<div className='status__info__icons'>
{mediaType}
<IconButton
{settings.getIn(['collapsed', 'enabled']) ? <IconButton
className='status__collapse-button'
animate flip
active={isCollapsed}
title={isCollapsed ? intl.formatMessage(messages.uncollapse) : intl.formatMessage(messages.collapse)}
icon='angle-double-up'
onClick={this.handleCollapsedClick}
/>
/> : null}
</div>
<a onClick={this.handleAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name'>