diff options
author | Thibaut Girka <thib@sitedethib.com> | 2018-03-28 19:56:46 +0200 |
---|---|---|
committer | Thibaut Girka <thib@sitedethib.com> | 2018-04-22 19:19:01 +0200 |
commit | 64d8d0464dedeabf09b5a651151f177dba2053df (patch) | |
tree | 0de37076e213287faa9e397561960f4cbf997cf3 /app/javascript/flavours/glitch/components/column_header.js | |
parent | 2888f74c1219e53e0aca28263ea8289d17264c21 (diff) |
Add show more/less toggle for entire threads in web UI
Inspired from b6003afcdb1b89eb967a2b211e3b4e26aed9ac9d but using component properties instead of redux store for hidden/revealed state.
Diffstat (limited to 'app/javascript/flavours/glitch/components/column_header.js')
-rw-r--r-- | app/javascript/flavours/glitch/components/column_header.js | 27 |
1 files changed, 18 insertions, 9 deletions
diff --git a/app/javascript/flavours/glitch/components/column_header.js b/app/javascript/flavours/glitch/components/column_header.js index cd977c4ca..bfad6467d 100644 --- a/app/javascript/flavours/glitch/components/column_header.js +++ b/app/javascript/flavours/glitch/components/column_header.js @@ -23,11 +23,12 @@ 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, localSettings : ImmutablePropTypes.map, multiColumn: PropTypes.bool, + extraButton: PropTypes.node, showBackButton: PropTypes.bool, notifCleaning: PropTypes.bool, // true only for the notification column notifCleaningActive: PropTypes.bool, @@ -86,7 +87,7 @@ export default class ColumnHeader extends React.PureComponent { } render () { - const { intl, icon, active, children, pinned, onPin, multiColumn, showBackButton, intl: { formatMessage }, notifCleaning, notifCleaningActive } = this.props; + const { intl, icon, active, children, pinned, onPin, multiColumn, extraButton, showBackButton, intl: { formatMessage }, notifCleaning, notifCleaningActive } = this.props; const { collapsed, animating, animatingNCD } = this.state; let title = this.props.title; @@ -162,18 +163,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} { notifCleaning ? ( <button aria-label={msgEnterNotifCleaning} |