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, 91 insertions, 10 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
 };