diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2018-03-11 09:52:59 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-03-11 09:52:59 +0100 |
commit | b6003afcdb1b89eb967a2b211e3b4e26aed9ac9d (patch) | |
tree | 68723a2a3423bfaaeeb801f17e86a10be6680c73 /app/javascript/mastodon/components/column_header.js | |
parent | f5ee2d469bb2ff398571694a95a16c8e819153c9 (diff) |
Add show more/less toggle for entire threads in web UI (#6733)
Fix #1258
Diffstat (limited to 'app/javascript/mastodon/components/column_header.js')
-rw-r--r-- | app/javascript/mastodon/components/column_header.js | 26 |
1 files changed, 17 insertions, 9 deletions
diff --git a/app/javascript/mastodon/components/column_header.js b/app/javascript/mastodon/components/column_header.js index 6b79ec02d..56453aeac 100644 --- a/app/javascript/mastodon/components/column_header.js +++ b/app/javascript/mastodon/components/column_header.js @@ -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> |