diff options
author | Asaad Mahmood <asaadmahmoodspin@users.noreply.github.com> | 2016-06-30 05:04:37 +0500 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2016-06-29 16:04:37 -0800 |
commit | 1f9eb4db6ab4328e44c8587105eb005890052078 (patch) | |
tree | cc649a09b0684af5ea05ecb8dc609595cf662ac4 /webapp/components | |
parent | b97b3ae6179bc15ec23e0697b08cdcbdf53e4ffc (diff) | |
download | chat-1f9eb4db6ab4328e44c8587105eb005890052078.tar.gz chat-1f9eb4db6ab4328e44c8587105eb005890052078.tar.bz2 chat-1f9eb4db6ab4328e44c8587105eb005890052078.zip |
Adding expand icon for RHS (#3386)
* Adding expand icon for RHS
Fixing errors
Adding back getTeamInviteLink with better functionality for mobile
Adding vertical align to post__link
Updating improvements for expand RHS stuff
* Improving transition on mobile
* Removing irrelevant changes
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/rhs_header_post.jsx | 101 | ||||
-rw-r--r-- | webapp/components/rhs_thread.jsx | 6 | ||||
-rw-r--r-- | webapp/components/search_results.jsx | 11 | ||||
-rw-r--r-- | webapp/components/search_results_header.jsx | 87 | ||||
-rw-r--r-- | webapp/components/search_results_item.jsx | 13 | ||||
-rw-r--r-- | webapp/components/sidebar_right.jsx | 26 |
6 files changed, 218 insertions, 26 deletions
diff --git a/webapp/components/rhs_header_post.jsx b/webapp/components/rhs_header_post.jsx index 6e0d9276e..8e54016fb 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 = ( + <Tooltip id='closeSidebarTooltip'> + <FormattedMessage + id='rhs_header.closeTooltip' + defaultMessage='Close Sidebar' + /> + </Tooltip> + ); + + const backToResultsTooltip = ( + <Tooltip id='backToResultsTooltip'> + <FormattedMessage + id='rhs_header.backToResultsTooltip' + defaultMessage='Back to Search Results' + /> + </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.fromSearch) { back = ( <a @@ -48,7 +91,13 @@ export default class RhsHeaderPost extends React.Component { onClick={this.handleBack} className='sidebar--right__back' > - <i className='fa fa-chevron-left'></i> + <OverlayTrigger + delayShow={Constants.OVERLAY_TIME_DELAY} + placement='top' + overlay={backToResultsTooltip} + > + <i className='fa fa-angle-left'></i> + </OverlayTrigger> </a> ); } @@ -62,14 +111,44 @@ export default class RhsHeaderPost extends React.Component { defaultMessage='Message Details' /> </span> - <button - type='button' - className='sidebar--right__close' - aria-label='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' + onClick={this.handleClose} + > + + <OverlayTrigger + delayShow={Constants.OVERLAY_TIME_DELAY} + placement='top' + overlay={closeSidebarTooltip} + > + <i className='fa fa-sign-out'/> + </OverlayTrigger> + </button> + </div> </div> ); } @@ -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 914a697a5..9922e3e1f 100644 --- a/webapp/components/rhs_thread.jsx +++ b/webapp/components/rhs_thread.jsx @@ -230,6 +230,8 @@ export default class RhsThread extends React.Component { <RhsHeaderPost fromSearch={this.props.fromSearch} isMentionSearch={this.props.isMentionSearch} + toggleSize={this.props.toggleSize} + shrink={this.props.shrink} /> <Scrollbars autoHide={true} @@ -293,5 +295,7 @@ RhsThread.propTypes = { fromSearch: React.PropTypes.string, isMentionSearch: React.PropTypes.bool, currentUser: React.PropTypes.object.isRequired, - useMilitaryTime: React.PropTypes.bool.isRequired + useMilitaryTime: React.PropTypes.bool.isRequired, + toggleSize: React.PropTypes.function, + shrink: React.PropTypes.function }; diff --git a/webapp/components/search_results.jsx b/webapp/components/search_results.jsx index ec1307353..6431ff2c2 100644 --- a/webapp/components/search_results.jsx +++ b/webapp/components/search_results.jsx @@ -171,6 +171,7 @@ export default class SearchResults extends React.Component { term={searchTerm} isMentionSearch={this.props.isMentionSearch} useMilitaryTime={this.props.useMilitaryTime} + shrink={this.props.shrink} /> ); }, this); @@ -180,7 +181,11 @@ export default class SearchResults extends React.Component { <div className='sidebar--right__content'> <div className='search-bar__container sidebar--right__search-header'>{searchForm}</div> <div className='sidebar-right__body'> - <SearchResultsHeader isMentionSearch={this.props.isMentionSearch}/> + <SearchResultsHeader + isMentionSearch={this.props.isMentionSearch} + toggleSize={this.props.toggleSize} + shrink={this.props.shrink} + /> <div id='search-items-container' className='search-items-container' @@ -195,5 +200,7 @@ export default class SearchResults extends React.Component { SearchResults.propTypes = { isMentionSearch: React.PropTypes.bool, - useMilitaryTime: React.PropTypes.bool.isRequired + useMilitaryTime: React.PropTypes.bool.isRequired, + toggleSize: React.PropTypes.function, + shrink: React.PropTypes.function }; 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 }; diff --git a/webapp/components/search_results_item.jsx b/webapp/components/search_results_item.jsx index 2f453bc84..217cd5568 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 3a2060bf2..7cdb894cc 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 = ( <SearchResults isMentionSearch={this.state.isMentionSearch} useMilitaryTime={this.state.useMilitaryTime} + toggleSize={this.toggleSize} + shrink={this.onShrink} /> ); } 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 ( <div - className='sidebar--right' + className={'sidebar--right ' + expandedClass} id='sidebar-right' > + <div + onClick={this.onShrink} + className='sidebar--right__bg' + /> <div className='sidebar-right-container'> {content} </div> |