Merge pull request #1046 from asaadmahmoodspin/ui-improvements

Multiple UI Improvements

web/react/components/create_post.jsx

@@ -192,9 +192,12 @@ export default class CreatePost extends React.Component {
         PostStore.storeCurrentDraft(draft);
     }
     resizePostHolder() {
-        const height = $(window).height() - $(React.findDOMNode(this.refs.topDiv)).height() - $('#error_bar').outerHeight() - 50;
+        const height = $(window).height() - $(React.findDOMNode(this.refs.topDiv)).height() - 50;
         $('.post-list-holder-by-time').css('height', `${height}px`);
         $(window).trigger('resize');
+        if ($(window).width() > 960) {
+            $('#post_textbox').focus();
+        }
     }
     handleUploadStart(clientIds, channelId) {
         const draft = PostStore.getDraft(channelId);

web/react/components/error_bar.jsx

@@ -9,7 +9,6 @@ export default class ErrorBar extends React.Component {
 
         this.onErrorChange = this.onErrorChange.bind(this);
         this.handleClose = this.handleClose.bind(this);
-        this.resize = this.resize.bind(this);
         this.prevTimer = null;
 
         this.state = ErrorStore.getLastError();
@@ -46,34 +45,14 @@ export default class ErrorBar extends React.Component {
         return false;
     }
 
-    resize() {
-        if (this.isValidError(this.state)) {
-            var height = $(React.findDOMNode(this)).outerHeight();
-            height = height < 30 ? 30 : height;
-            $('body').css('padding-top', height + 'px');
-        } else {
-            $('body').css('padding-top', '0');
-        }
-    }
-
     componentDidMount() {
         ErrorStore.addChangeListener(this.onErrorChange);
-
-        $(window).resize(() => {
-            this.resize();
-        });
-
-        this.resize();
     }
 
     componentWillUnmount() {
         ErrorStore.removeChangeListener(this.onErrorChange);
     }
 
-    componentDidUpdate() {
-        this.resize();
-    }
-
     onErrorChange() {
         var newState = ErrorStore.getLastError();
 

web/react/components/post_info.jsx

@@ -150,6 +150,7 @@ export default class PostInfo extends React.Component {
             <ul className='post-header post-info'>
                 <li className='post-header-col'>
                     <OverlayTrigger
+                        delayShow='500'
                         container={this}
                         placement='top'
                         overlay={tooltip}

web/react/components/sidebar.jsx

@@ -15,6 +15,8 @@ const TeamStore = require('../stores/team_store.jsx');
 const UnreadChannelIndicator = require('./unread_channel_indicator.jsx');
 const UserStore = require('../stores/user_store.jsx');
 const Utils = require('../utils/utils.jsx');
+const Tooltip = ReactBootstrap.Tooltip;
+const OverlayTrigger = ReactBootstrap.OverlayTrigger;
 
 export default class Sidebar extends React.Component {
     constructor(props) {
@@ -455,14 +457,21 @@ export default class Sidebar extends React.Component {
         }
 
         let closeButton = null;
+        const removeTooltip = <Tooltip>{'Remove from list'}</Tooltip>;
         if (handleClose && !badge) {
             closeButton = (
+                <OverlayTrigger
+                    delayShow='1000'
+                    placement='top'
+                    overlay={removeTooltip}
+                >
                 <span
-                    className='close-btn pull-right small'
+                    className='btn-close'
                     data-close='true'
                 >
                     {'×'}
                 </span>
+                </OverlayTrigger>
             );
 
             rowClass = ' has-close';
@@ -545,6 +554,9 @@ export default class Sidebar extends React.Component {
             showChannelModal = true;
         }
 
+        const createChannelTootlip = <Tooltip>{'Create new channel'}</Tooltip>;
+        const createGroupTootlip = <Tooltip>{'Create new group'}</Tooltip>;
+
         return (
             <div>
                 <NewChannelFlow
@@ -579,6 +591,11 @@ export default class Sidebar extends React.Component {
                         <li>
                             <h4>
                                 {'Channels'}
+                                <OverlayTrigger
+                                    delayShow='500'
+                                    placement='top'
+                                    overlay={createChannelTootlip}
+                                >
                                 <a
                                     className='add-channel-btn'
                                     href='#'
@@ -586,6 +603,7 @@ export default class Sidebar extends React.Component {
                                 >
                                     {'+'}
                                 </a>
+                                </OverlayTrigger>
                             </h4>
                         </li>
                         {publicChannelItems}
@@ -606,6 +624,11 @@ export default class Sidebar extends React.Component {
                         <li>
                             <h4>
                                 {'Private Groups'}
+                                <OverlayTrigger
+                                    delayShow='500'
+                                    placement='top'
+                                    overlay={createGroupTootlip}
+                                >
                                 <a
                                     className='add-channel-btn'
                                     href='#'
@@ -613,6 +636,7 @@ export default class Sidebar extends React.Component {
                                 >
                                     {'+'}
                                 </a>
+                                </OverlayTrigger>
                             </h4>
                         </li>
                         {privateChannelItems}

web/react/components/user_profile.jsx

@@ -32,7 +32,7 @@ export default class UserProfile extends React.Component {
     componentDidMount() {
         UserStore.addChangeListener(this.onChange);
         if (!this.props.disablePopover) {
-            $('#profile_' + this.uniqueId).popover({placement: 'right', container: 'body', trigger: 'hover', html: true, delay: {show: 200, hide: 100}});
+            $('#profile_' + this.uniqueId).popover({placement: 'right', container: 'body', trigger: 'click hover', html: true, delay: {show: 200, hide: 100}});
             $('body').tooltip({selector: '[data-toggle=tooltip]', trigger: 'hover click'});
         }
     }