Collapsable toots [1/??]

This commit is contained in:
kibigo! 2017-06-21 19:05:24 -07:00 committed by beatrix-bitrot
parent 0d3ec19e89
commit 93c52301ad
6 changed files with 71 additions and 12 deletions

View file

@ -17,6 +17,7 @@ export default class IconButton extends React.PureComponent {
disabled: PropTypes.bool,
inverted: PropTypes.bool,
animate: PropTypes.bool,
flip: PropTypes.bool,
overlay: PropTypes.bool,
};
@ -69,7 +70,7 @@ export default class IconButton extends React.PureComponent {
}
return (
<Motion defaultStyle={{ rotate: this.props.active ? -360 : 0 }} style={{ rotate: this.props.animate ? spring(this.props.active ? -360 : 0, { stiffness: 120, damping: 7 }) : 0 }}>
<Motion defaultStyle={{ rotate: this.props.active ? (this.props.flip ? -180 : -360) : 0 }} style={{ rotate: this.props.animate ? spring(this.props.active ? (this.props.flip ? -180 : -360) : 0, { stiffness: 120, damping: 7 }) : 0 }}>
{({ rotate }) =>
<button
aria-label={this.props.title}

View file

@ -3,18 +3,24 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import Avatar from './avatar';
import AvatarOverlay from './avatar_overlay';
import RelativeTimestamp from './relative_timestamp';
import DisplayName from './display_name';
import MediaGallery from './media_gallery';
import VideoPlayer from './video_player';
import StatusContent from './status_content';
import StatusActionBar from './status_action_bar';
import { FormattedMessage } from 'react-intl';
import IconButton from './icon_button';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import emojify from '../emoji';
import escapeTextContentForBrowser from 'escape-html';
import ImmutablePureComponent from 'react-immutable-pure-component';
import scheduleIdleTask from '../features/ui/util/schedule_idle_task';
const messages = defineMessages({
collapse: { id: 'status.collapse', defaultMessage: 'Collapse' },
uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' },
});
@injectIntl
export default class Status extends ImmutablePureComponent {
static contextTypes = {
@ -37,12 +43,14 @@ export default class Status extends ImmutablePureComponent {
autoPlayGif: PropTypes.bool,
muted: PropTypes.bool,
intersectionObserverWrapper: PropTypes.object,
intl: PropTypes.object.isRequired,
};
state = {
isExpanded: false,
isIntersecting: true, // assume intersecting until told otherwise
isHidden: false, // set to true in requestIdleCallback to trigger un-render
isCollapsed: false,
}
// Avoid checking props that are functions (and whose equality will always
@ -60,7 +68,11 @@ export default class Status extends ImmutablePureComponent {
updateOnStates = ['isExpanded']
shouldComponentUpdate (nextProps, nextState) {
if (!nextState.isIntersecting && nextState.isHidden) {
if (nextState.isCollapsed !== this.state.isCollapsed) {
// 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
// that either "isIntersecting" or "isHidden" matter, and then they're
// the only things that matter.
@ -75,6 +87,8 @@ export default class Status extends ImmutablePureComponent {
}
componentDidMount () {
const node = this.node;
if (!this.props.intersectionObserverWrapper) {
// TODO: enable IntersectionObserver optimization for notification statuses.
// These are managed in notifications/index.js rather than status_list.js
@ -86,6 +100,8 @@ export default class Status extends ImmutablePureComponent {
this.handleIntersection
);
if (node.clientHeight > 400) this.setState({ isCollapsed: true });
this.componentMounted = true;
}
@ -150,14 +166,18 @@ export default class Status extends ImmutablePureComponent {
this.setState({ isExpanded: !this.state.isExpanded });
};
handleCollapsedClick = () => {
this.setState({ isCollapsed: !this.state.isCollapsed });
}
render () {
let media = null;
let statusAvatar;
// Exclude intersectionObserverWrapper from `other` variable
// because intersection is managed in here.
const { status, account, intersectionObserverWrapper, ...other } = this.props;
const { isExpanded, isIntersecting, isHidden } = this.state;
const { status, account, intersectionObserverWrapper, intl ...other } = this.props;
const { isExpanded, isIntersecting, isHidden, isCollapsed } = this.state;
if (status === null) {
return null;
@ -210,9 +230,17 @@ export default class Status extends ImmutablePureComponent {
}
return (
<div className={`status ${this.props.muted ? 'muted' : ''} status-${status.get('visibility')}`} data-id={status.get('id')} ref={this.handleRef}>
<div className={`status ${this.props.muted ? 'muted' : ''} status-${status.get('visibility')} ${isCollapsed ? 'status-collapsed' : ''}`} data-id={status.get('id')} ref={this.handleRef}>
<div className='status__info'>
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
<IconButton
className='status__collapse-button'
animate flip
active={isCollapsed}
title={isCollapsed ? intl.formatMessage(messages.uncollapse) : intl.formatMessage(messages.collapse)}
icon='angle-double-down'
onClick={this.handleCollapsedClick}
/>
<a onClick={this.handleAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name'>
<div className='status__avatar'>
@ -221,13 +249,14 @@ export default class Status extends ImmutablePureComponent {
<DisplayName account={status.get('account')} />
</a>
</div>
<StatusContent status={status} onClick={this.handleClick} expanded={isExpanded} onExpandedToggle={this.handleExpandedToggle} onHeightUpdate={this.saveHeight} />
{media}
{isCollapsed ? null : media}
<StatusActionBar {...this.props} />
{isCollapsed ? null : <StatusActionBar {...this.props} />}
</div>
);
}

View file

@ -5,6 +5,7 @@ import IconButton from './icon_button';
import DropdownMenu from './dropdown_menu';
import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import RelativeTimestamp from './relative_timestamp';
const messages = defineMessages({
delete: { id: 'status.delete', defaultMessage: 'Delete' },
@ -145,6 +146,8 @@ export default class StatusActionBar extends ImmutablePureComponent {
<div className='status__action-bar-dropdown'>
<DropdownMenu items={menu} icon='ellipsis-h' size={18} direction='right' ariaLabel='More' />
</div>
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
</div>
);
}

View file

@ -191,6 +191,14 @@
{
"defaultMessage": "{name} boosted",
"id": "status.reblogged_by"
},
{
"defaultMessage": "Collapse",
"id": "status.collapse"
},
{
"defaultMessage": "Uncollapse",
"id": "status.uncollapse"
}
],
"path": "app/javascript/mastodon/components/status.json"
@ -1170,4 +1178,4 @@
],
"path": "app/javascript/mastodon/features/ui/components/video_modal.json"
}
]
]

View file

@ -143,6 +143,7 @@
"search.placeholder": "Search",
"search_results.total": "{count, number} {count, plural, one {result} other {results}}",
"status.cannot_reblog": "This post cannot be boosted",
"status.collapse": "Collapse",
"status.delete": "Delete",
"status.favourite": "Favourite",
"status.load_more": "Load more",
@ -159,6 +160,7 @@
"status.sensitive_warning": "Sensitive content",
"status.show_less": "Show less",
"status.show_more": "Show more",
"status.uncollapse": "Uncollapse",
"status.unmute_conversation": "Unmute conversation",
"tabs_bar.compose": "Compose",
"tabs_bar.federated_timeline": "Federated",

View file

@ -459,6 +459,7 @@
word-wrap: break-word;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
white-space: pre-wrap;
.emojione {
@ -542,8 +543,10 @@
padding: 8px 10px;
padding-left: 68px;
position: relative;
height: auto;
min-height: 48px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
overflow: hidden;
cursor: default;
@keyframes fade {
@ -598,6 +601,14 @@
}
}
}
&.status-collapsed {
height: 48px;
.status__content {
height: 20px;
}
}
}
.notification-favourite {
@ -611,8 +622,8 @@
}
.status__relative-time {
margin-left: auto;
color: lighten($ui-base-color, 26%);
float: right;
font-size: 14px;
}
@ -628,6 +639,11 @@
.status__info {
font-size: 15px;
line-height: 28px;
}
.status__collapse-button {
float: right;
}
.status-check-box {