namekuji/chuckya
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Notifications collapsed by default

Browse source
This commit is contained in:
kibigo! 2017-06-26 14:18:59 -07:00
parent 49ba78d6f8
commit c806fef865
2 changed files with 16 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
app/javascript/mastodon/components/status.js
View file

@ -41,6 +41,7 @@ class StatusUnextended extends ImmutablePureComponent {
boostModal: PropTypes.bool, boostModal: PropTypes.bool,
autoPlayGif: PropTypes.bool, autoPlayGif: PropTypes.bool,
muted: PropTypes.bool, muted: PropTypes.bool,
collapse: PropTypes.bool,
intersectionObserverWrapper: PropTypes.object, intersectionObserverWrapper: PropTypes.object,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
}; };
@ -62,16 +63,20 @@ class StatusUnextended extends ImmutablePureComponent {
'boostModal', 'boostModal',
'autoPlayGif', 'autoPlayGif',
'muted', 'muted',
'collapse',
] ]
updateOnStates = ['isExpanded'] updateOnStates = [
'isExpanded',
'isCollapsed',
]
componentWillReceiveProps (nextProps) {
if (nextProps.collapse !== this.props.collapse && nextProps.collapse !== undefined) this.setState({ isCollapsed: !!nextProps.collapse });
}
shouldComponentUpdate (nextProps, nextState) { shouldComponentUpdate (nextProps, nextState) {
if (nextState.isCollapsed !== this.state.isCollapsed) { if (!nextState.isIntersecting && nextState.isHidden) {
// If the collapsed state of the element has changed then we definitely
// need to re-update.
return true;
} else if (!nextState.isIntersecting && nextState.isHidden) {
// It's only if we're not intersecting (i.e. offscreen) and isHidden is true // It's only if we're not intersecting (i.e. offscreen) and isHidden is true
// that either "isIntersecting" or "isHidden" matter, and then they're // that either "isIntersecting" or "isHidden" matter, and then they're
// the only things that matter. // the only things that matter.
@ -92,6 +97,9 @@ class StatusUnextended extends ImmutablePureComponent {
componentDidMount () { componentDidMount () {
const node = this.node; const node = this.node;
if (this.props.collapse !== undefined) this.setState({ isCollapsed: !!this.props.collapse });
else if (node.clientHeight > 400 && !(this.props.status.get('reblog', null) !== null && typeof this.props.status.get('reblog') === 'object')) this.setState({ isCollapsed: true });
if (!this.props.intersectionObserverWrapper) { if (!this.props.intersectionObserverWrapper) {
// TODO: enable IntersectionObserver optimization for notification statuses. // TODO: enable IntersectionObserver optimization for notification statuses.
// These are managed in notifications/index.js rather than status_list.js // These are managed in notifications/index.js rather than status_list.js
@ -103,8 +111,6 @@ class StatusUnextended extends ImmutablePureComponent {
this.handleIntersection this.handleIntersection
); );
if (node.clientHeight > 400 && !(this.props.status.get('reblog', null) !== null && typeof this.props.status.get('reblog') === 'object')) this.setState({ isCollapsed: true });
this.componentMounted = true; this.componentMounted = true;
} }

4
app/javascript/mastodon/features/notifications/components/notification.js
View file

@ -44,7 +44,7 @@ export default class Notification extends ImmutablePureComponent {
<FormattedMessage id='notification.favourite' defaultMessage='{name} favourited your status' values={{ name: link }} /> <FormattedMessage id='notification.favourite' defaultMessage='{name} favourited your status' values={{ name: link }} />
</div> </div>
<StatusContainer id={notification.get('status')} account={notification.get('account')} muted withDismiss /> <StatusContainer id={notification.get('status')} account={notification.get('account')} muted collapse withDismiss />
</div> </div>
); );
} }
@ -59,7 +59,7 @@ export default class Notification extends ImmutablePureComponent {
<FormattedMessage id='notification.reblog' defaultMessage='{name} boosted your status' values={{ name: link }} /> <FormattedMessage id='notification.reblog' defaultMessage='{name} boosted your status' values={{ name: link }} />
</div> </div>
<StatusContainer id={notification.get('status')} account={notification.get('account')} muted withDismiss /> <StatusContainer id={notification.get('status')} account={notification.get('account')} muted collapse withDismiss />
</div> </div>
); );
} }