diff --git a/webapp/components/rhs_header_post.jsx b/webapp/components/rhs_header_post.jsx index 6e0d9276e3..8e54016fb9 100644 --- a/webapp/components/rhs_header_post.jsx +++ b/webapp/components/rhs_header_post.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 * as GlobalActions from 'actions/global_actions.jsx'; import {FormattedMessage} from 'react-intl'; @@ -16,6 +17,7 @@ export default class RhsHeaderPost extends React.Component { super(props); this.handleClose = this.handleClose.bind(this); + this.toggleSize = this.toggleSize.bind(this); this.handleBack = this.handleBack.bind(this); this.state = {}; @@ -23,6 +25,11 @@ export default class RhsHeaderPost extends React.Component { handleClose(e) { e.preventDefault(); GlobalActions.emitCloseRightHandSide(); + this.props.shrink(); + } + toggleSize(e) { + e.preventDefault(); + this.props.toggleSize(); } handleBack(e) { e.preventDefault(); @@ -41,6 +48,42 @@ export default class RhsHeaderPost extends React.Component { } render() { let back; + const closeSidebarTooltip = ( + + + + ); + + const backToResultsTooltip = ( + + + + ); + + const expandSidebarTooltip = ( + + + + ); + + const shrinkSidebarTooltip = ( + + + + ); + if (this.props.fromSearch) { back = ( - + + + ); } @@ -62,14 +111,44 @@ export default class RhsHeaderPost extends React.Component { defaultMessage='Message Details' /> - +
+ + +
); } @@ -81,5 +160,7 @@ RhsHeaderPost.defaultProps = { }; RhsHeaderPost.propTypes = { isMentionSearch: React.PropTypes.bool, - fromSearch: React.PropTypes.string + fromSearch: React.PropTypes.string, + toggleSize: React.PropTypes.function, + shrink: React.PropTypes.function }; diff --git a/webapp/components/rhs_thread.jsx b/webapp/components/rhs_thread.jsx index 914a697a50..9922e3e1fc 100644 --- a/webapp/components/rhs_thread.jsx +++ b/webapp/components/rhs_thread.jsx @@ -230,6 +230,8 @@ export default class RhsThread extends React.Component { ); }, this); @@ -180,7 +181,11 @@ export default class SearchResults extends React.Component {
{searchForm}
- +
); + const closeSidebarTooltip = ( + + + + ); + + const expandSidebarTooltip = ( + + + + ); + + const shrinkSidebarTooltip = ( + + + + ); + if (this.props.isMentionSearch) { title = ( {title} - +
+ + +
); } } SearchResultsHeader.propTypes = { - isMentionSearch: React.PropTypes.bool + isMentionSearch: React.PropTypes.bool, + toggleSize: React.PropTypes.function, + shrink: React.PropTypes.function }; diff --git a/webapp/components/search_results_item.jsx b/webapp/components/search_results_item.jsx index 2f453bc84f..217cd55688 100644 --- a/webapp/components/search_results_item.jsx +++ b/webapp/components/search_results_item.jsx @@ -23,10 +23,17 @@ export default class SearchResultsItem extends React.Component { super(props); this.handleFocusRHSClick = this.handleFocusRHSClick.bind(this); + this.shrinkSidebar = this.shrinkSidebar.bind(this); } hideSidebar() { - $('.inner-wrap, .sidebar--right').removeClass('move--left'); + $('.sidebar--right').removeClass('move--left'); + } + + shrinkSidebar() { + setTimeout(() => { + this.props.shrink(); + }); } handleFocusRHSClick(e) { @@ -143,6 +150,7 @@ export default class SearchResultsItem extends React.Component { this.hideSidebar(); } + this.shrinkSidebar(); browserHistory.push('/' + window.location.pathname.split('/')[1] + '/pl/' + post.id); } } @@ -187,5 +195,6 @@ SearchResultsItem.propTypes = { channel: React.PropTypes.object, isMentionSearch: React.PropTypes.bool, term: React.PropTypes.string, - useMilitaryTime: React.PropTypes.bool.isRequired + useMilitaryTime: React.PropTypes.bool.isRequired, + shrink: React.PropTypes.function }; diff --git a/webapp/components/sidebar_right.jsx b/webapp/components/sidebar_right.jsx index 3a2060bf2d..7cdb894ccf 100644 --- a/webapp/components/sidebar_right.jsx +++ b/webapp/components/sidebar_right.jsx @@ -25,6 +25,8 @@ export default class SidebarRight extends React.Component { this.onSearchChange = this.onSearchChange.bind(this); this.onUserChange = this.onUserChange.bind(this); this.onShowSearch = this.onShowSearch.bind(this); + this.onShrink = this.onShrink.bind(this); + this.toggleSize = this.toggleSize.bind(this); this.doStrangeThings = this.doStrangeThings.bind(this); @@ -32,6 +34,7 @@ export default class SidebarRight extends React.Component { searchVisible: SearchStore.getSearchResults() !== null, isMentionSearch: SearchStore.getIsMentionSearch(), postRightVisible: !!PostStore.getSelectedPost(), + expanded: false, fromSearch: false, currentUser: UserStore.getCurrentUser(), useMilitaryTime: PreferenceStore.getBool(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, Constants.Preferences.USE_MILITARY_TIME, false) @@ -110,6 +113,10 @@ export default class SidebarRight extends React.Component { }); } + onShrink() { + this.setState({expanded: false}); + } + onSearchChange() { this.setState({ searchVisible: SearchStore.getSearchResults() !== null, @@ -131,14 +138,25 @@ export default class SidebarRight extends React.Component { } } + toggleSize() { + this.setState({expanded: !this.state.expanded}); + } + render() { let content = null; + let expandedClass = ''; + + if (this.state.expanded) { + expandedClass = 'sidebar--right--expanded'; + } if (this.state.searchVisible) { content = ( ); } else if (this.state.postRightVisible) { @@ -148,15 +166,21 @@ export default class SidebarRight extends React.Component { isMentionSearch={this.state.isMentionSearch} currentUser={this.state.currentUser} useMilitaryTime={this.state.useMilitaryTime} + toggleSize={this.toggleSize} + shrink={this.onShrink} /> ); } return (