diff options
Diffstat (limited to 'webapp/components/search_results_header.jsx')
-rw-r--r-- | webapp/components/search_results_header.jsx | 87 |
1 files changed, 77 insertions, 10 deletions
diff --git a/webapp/components/search_results_header.jsx b/webapp/components/search_results_header.jsx index e9fc2c144..7cb072b70 100644 --- a/webapp/components/search_results_header.jsx +++ b/webapp/components/search_results_header.jsx @@ -3,6 +3,7 @@ import AppDispatcher from '../dispatcher/app_dispatcher.jsx'; import Constants from 'utils/constants.jsx'; +import {Tooltip, OverlayTrigger} from 'react-bootstrap'; import {FormattedMessage} from 'react-intl'; @@ -15,6 +16,7 @@ export default class SearchResultsHeader extends React.Component { super(props); this.handleClose = this.handleClose.bind(this); + this.toggleSize = this.toggleSize.bind(this); } handleClose(e) { @@ -36,6 +38,13 @@ export default class SearchResultsHeader extends React.Component { type: ActionTypes.RECEIVED_POST_SELECTED, postId: null }); + + this.props.shrink(); + } + + toggleSize(e) { + e.preventDefault(); + this.props.toggleSize(); } render() { @@ -46,6 +55,33 @@ export default class SearchResultsHeader extends React.Component { /> ); + const closeSidebarTooltip = ( + <Tooltip id='closeSidebarTooltip'> + <FormattedMessage + id='rhs_header.closeTooltip' + defaultMessage='Close Sidebar' + /> + </Tooltip> + ); + + const expandSidebarTooltip = ( + <Tooltip id='expandSidebarTooltip'> + <FormattedMessage + id='rhs_header.expandTooltip' + defaultMessage='Expand Sidebar' + /> + </Tooltip> + ); + + const shrinkSidebarTooltip = ( + <Tooltip id='shrinkSidebarTooltip'> + <FormattedMessage + id='rhs_header.expandTooltip' + defaultMessage='Shrink Sidebar' + /> + </Tooltip> + ); + if (this.props.isMentionSearch) { title = ( <FormattedMessage @@ -58,20 +94,51 @@ export default class SearchResultsHeader extends React.Component { return ( <div className='sidebar--right__header'> <span className='sidebar--right__title'>{title}</span> - <button - type='button' - className='sidebar--right__close' - aria-label='Close' - title='Close' - onClick={this.handleClose} - > - <i className='fa fa-sign-out'/> - </button> + <div className='pull-right'> + <button + type='button' + className='sidebar--right__expand' + aria-label='Expand' + onClick={this.toggleSize} + > + <OverlayTrigger + delayShow={Constants.OVERLAY_TIME_DELAY} + placement='top' + overlay={expandSidebarTooltip} + > + <i className='fa fa-expand'/> + </OverlayTrigger> + <OverlayTrigger + delayShow={Constants.OVERLAY_TIME_DELAY} + placement='top' + overlay={shrinkSidebarTooltip} + > + <i className='fa fa-compress'/> + </OverlayTrigger> + </button> + <button + type='button' + className='sidebar--right__close' + aria-label='Close' + title='Close' + onClick={this.handleClose} + > + <OverlayTrigger + delayShow={Constants.OVERLAY_TIME_DELAY} + placement='top' + overlay={closeSidebarTooltip} + > + <i className='fa fa-sign-out'/> + </OverlayTrigger> + </button> + </div> </div> ); } } SearchResultsHeader.propTypes = { - isMentionSearch: React.PropTypes.bool + isMentionSearch: React.PropTypes.bool, + toggleSize: React.PropTypes.function, + shrink: React.PropTypes.function }; |