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>