Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Add show more/less toggle for entire threads in web UI (#6733)

Browse source 
Fix #1258
This commit is contained in:
Eugen Rochko 2018-03-11 09:52:59 +01:00 • committed by GitHub
parent f5ee2d469b
commit b6003afcdb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 120 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

26
app/javascript/mastodon/components/column_header.js
View file

@ -19,10 +19,11 @@ export default class ColumnHeader extends React.PureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
title: PropTypes.node.isRequired,
icon: PropTypes.string.isRequired,
title: PropTypes.node,
icon: PropTypes.string,
active: PropTypes.bool,
multiColumn: PropTypes.bool,
extraButton: PropTypes.node,
showBackButton: PropTypes.bool,
children: PropTypes.node,
pinned: PropTypes.bool,
@ -63,7 +64,7 @@ export default class ColumnHeader extends React.PureComponent {
}
render () {
const { title, icon, active, children, pinned, onPin, multiColumn, showBackButton, intl: { formatMessage } } = this.props;
const { title, icon, active, children, pinned, onPin, multiColumn, extraButton, showBackButton, intl: { formatMessage } } = this.props;
const { collapsed, animating } = this.state;
const wrapperClassName = classNames('column-header__wrapper', {
@ -125,19 +126,26 @@ export default class ColumnHeader extends React.PureComponent {
}
if (children || multiColumn) {
collapseButton = <button className={collapsibleButtonClassName} aria-label={formatMessage(collapsed ? messages.show : messages.hide)} aria-pressed={collapsed ? 'false' : 'true'} onClick={this.handleToggleClick}><i className='fa fa-sliders' /></button>;
collapseButton = <button className={collapsibleButtonClassName} title={formatMessage(collapsed ? messages.show : messages.hide)} aria-label={formatMessage(collapsed ? messages.show : messages.hide)} aria-pressed={collapsed ? 'false' : 'true'} onClick={this.handleToggleClick}><i className='fa fa-sliders' /></button>;
}
const hasTitle = icon && title;
return (
<div className={wrapperClassName}>
<h1 className={buttonClassName}>
<button onClick={this.handleTitleClick}>
<i className={`fa fa-fw fa-${icon} column-header__icon`} />
{title}
</button>
{hasTitle && (
<button onClick={this.handleTitleClick}>
<i className={`fa fa-fw fa-${icon} column-header__icon`} />
{title}
</button>
)}
{!hasTitle && backButton}
<div className='column-header__buttons'>
{backButton}
{hasTitle && backButton}
{extraButton}
{collapseButton}
</div>
</h1>

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

@ -37,16 +37,13 @@ export default class Status extends ImmutablePureComponent {
onBlock: PropTypes.func,
onEmbed: PropTypes.func,
onHeightChange: PropTypes.func,
onToggleHidden: PropTypes.func,
muted: PropTypes.bool,
hidden: PropTypes.bool,
onMoveUp: PropTypes.func,
onMoveDown: PropTypes.func,
};
state = {
isExpanded: false,
}
// Avoid checking props that are functions (and whose equality will always
// evaluate to false. See react-immutable-pure-component for usage.
updateOnProps = [
@ -56,8 +53,6 @@ export default class Status extends ImmutablePureComponent {
'hidden',
]
updateOnStates = ['isExpanded']
handleClick = () => {
if (!this.context.router) {
return;
@ -76,7 +71,7 @@ export default class Status extends ImmutablePureComponent {
}
handleExpandedToggle = () => {
this.setState({ isExpanded: !this.state.isExpanded });
this.props.onToggleHidden(this._properStatus());
};
renderLoadingMediaGallery () {
@ -140,7 +135,6 @@ export default class Status extends ImmutablePureComponent {
let statusAvatar, prepend;
const { hidden, featured } = this.props;
const { isExpanded } = this.state;
let { status, account, ...other } = this.props;
@ -248,7 +242,7 @@ export default class Status extends ImmutablePureComponent {
</a>
</div>
<StatusContent status={status} onClick={this.handleClick} expanded={isExpanded} onExpandedToggle={this.handleExpandedToggle} />
<StatusContent status={status} onClick={this.handleClick} expanded={!status.get('hidden')} onExpandedToggle={this.handleExpandedToggle} />
{media}