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

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
 };