diff options
author | ThibG <thib@sitedethib.com> | 2019-10-07 12:02:20 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-10-07 12:02:20 +0200 |
commit | d2f7b8685cfd0ec9b69af505b56c791d9b5f1c82 (patch) | |
tree | 79e8fa613494ae37fe2adfb41bf9ba38f0ffd80d /app/javascript/flavours/glitch/components/column_header.js | |
parent | 3921125e5578fb3871fdcae0e8e8a77179f1ad72 (diff) | |
parent | 0fbe36e3fb4644945eeb0c142045a003e2793b19 (diff) |
Merge pull request #1229 from ThibG/glitch-soc/features/upstream-scroll-behavior
Merge upstream changes to scroll behavior in single column
Diffstat (limited to 'app/javascript/flavours/glitch/components/column_header.js')
-rw-r--r-- | app/javascript/flavours/glitch/components/column_header.js | 16 |
1 files changed, 12 insertions, 4 deletions
diff --git a/app/javascript/flavours/glitch/components/column_header.js b/app/javascript/flavours/glitch/components/column_header.js index 3a064e90a..43c9f1144 100644 --- a/app/javascript/flavours/glitch/components/column_header.js +++ b/app/javascript/flavours/glitch/components/column_header.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { createPortal } from 'react-dom'; import classNames from 'classnames'; import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; import ImmutablePropTypes from 'react-immutable-proptypes'; @@ -36,6 +37,7 @@ class ColumnHeader extends React.PureComponent { onEnterCleaningMode: PropTypes.func, children: PropTypes.node, pinned: PropTypes.bool, + placeholder: PropTypes.bool, onPin: PropTypes.func, onMove: PropTypes.func, onClick: PropTypes.func, @@ -104,7 +106,7 @@ class ColumnHeader extends React.PureComponent { } render () { - const { intl, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, notifCleaning, notifCleaningActive } = this.props; + const { intl, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, notifCleaning, notifCleaningActive, placeholder } = this.props; const { collapsed, animating, animatingNCD } = this.state; let title = this.props.title; @@ -157,7 +159,7 @@ class ColumnHeader extends React.PureComponent { <button title={formatMessage(messages.moveRight)} aria-label={formatMessage(messages.moveRight)} className='text-btn column-header__setting-btn' onClick={this.handleMoveRight}><Icon id='chevron-right' /></button> </div> ); - } else if (multiColumn) { + } else if (multiColumn && this.props.onPin) { pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='plus' /> <FormattedMessage id='column_header.pin' defaultMessage='Pin' /></button>; } @@ -179,13 +181,13 @@ class ColumnHeader extends React.PureComponent { collapsedContent.push(pinButton); } - if (children || multiColumn) { + if (children || (multiColumn && this.props.onPin)) { 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}><Icon id='sliders' /></button>; } const hasTitle = icon && title; - return ( + const component = ( <div className={wrapperClassName}> <h1 className={buttonClassName}> {hasTitle && ( @@ -229,6 +231,12 @@ class ColumnHeader extends React.PureComponent { </div> </div> ); + + if (multiColumn || placeholder) { + return component; + } else { + return createPortal(component, document.getElementById('tabs-bar__portal')); + } } } |