diff options
author | beatrix <beatrix.bitrot@gmail.com> | 2018-04-26 11:34:14 -0400 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-04-26 11:34:14 -0400 |
commit | f4ed38272be7cce814e3d3e7e5a2d1f352279e19 (patch) | |
tree | 4e26499478b18d2338be90f21428f1bd76481b89 /app/javascript/flavours/glitch/components/column_header.js | |
parent | 8f12afb5996c58ddf41ceaa20f6c4e036273d3a6 (diff) | |
parent | b383c0688a0939d25b9184e61dac72cda71f6926 (diff) |
Merge pull request #401 from ThibG/glitch-soc/features/unfold-thread
Port the “unfold thread” feature from Mastodon's UI to glitch-soc flavour
Diffstat (limited to 'app/javascript/flavours/glitch/components/column_header.js')
-rw-r--r-- | app/javascript/flavours/glitch/components/column_header.js | 34 |
1 files changed, 19 insertions, 15 deletions
diff --git a/app/javascript/flavours/glitch/components/column_header.js b/app/javascript/flavours/glitch/components/column_header.js index ae90b6f81..bfad6467d 100644 --- a/app/javascript/flavours/glitch/components/column_header.js +++ b/app/javascript/flavours/glitch/components/column_header.js @@ -23,12 +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, - focusable: PropTypes.bool, + extraButton: PropTypes.node, showBackButton: PropTypes.bool, notifCleaning: PropTypes.bool, // true only for the notification column notifCleaningActive: PropTypes.bool, @@ -41,10 +41,6 @@ export default class ColumnHeader extends React.PureComponent { intl: PropTypes.object.isRequired, }; - static defaultProps = { - focusable: true, - } - state = { collapsed: true, animating: false, @@ -91,7 +87,7 @@ export default class ColumnHeader extends React.PureComponent { } render () { - const { intl, icon, active, children, pinned, onPin, multiColumn, focusable, 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; @@ -167,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 tabIndex={focusable ? 0 : null} role='button' className={buttonClassName} aria-label={title} onClick={this.handleTitleClick}> - <i className={`fa fa-fw fa-${icon} column-header__icon`} /> - <span className='column-header__title'> - {title} - </span> + <h1 className={buttonClassName}> + {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} |