Merge pull request #740 from asaadmahmoodspin/ui-improvements

UI Modifications for multiple tickets

web/react/components/channel_header.jsx

@@ -55,7 +55,7 @@ export default class ChannelHeader extends React.Component {
         if (!Utils.areStatesEqual(newState, this.state)) {
             this.setState(newState);
         }
-        $('.channel-header__info .description').popover({placement: 'bottom', trigger: 'hover click', html: true, delay: {show: 500, hide: 500}});
+        $('.channel-header__info .description').popover({placement: 'bottom', trigger: 'hover', html: true, delay: {show: 500, hide: 500}});
     }
     onSocketChange(msg) {
         if (msg.action === 'new_user') {

web/react/components/channel_loader.jsx

@@ -90,11 +90,12 @@ export default class ChannelLoader extends React.Component {
         }
 
         /* Setup global mouse events */
-        $('body').on('click.userpopover', function popOver(e) {
+        $('body').on('click', function hidePopover(e) {
-            if ($(e.target).attr('data-toggle') !== 'popover' &&
+            $('[data-toggle="popover"]').each(function eachPopover() {
-                $(e.target).parents('.popover.in').length === 0) {
+                if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
-                $('.user-popover').popover('hide');
+                    $(this).popover('hide');
-            }
+                }
+            });
         });
 
         $('body').on('mouseenter mouseleave', '.post', function mouseOver(ev) {

web/react/components/new_channel_modal.jsx

@@ -93,6 +93,7 @@ export default class NewChannelModal extends React.Component {
             <span>
                 <Modal
                     show={this.props.show}
+                    bsSize='large'
                     onHide={this.props.onModalDismissed}
                 >
                     <Modal.Header closeButton={true}>
@@ -122,7 +123,7 @@ export default class NewChannelModal extends React.Component {
                                     />
                                     {displayNameError}
                                     <p className='input__help dark'>
-                                        {'Channel URL: ' + prettyTeamURL + this.props.channelData.name + ' ('}
+                                        {'URL: ' + prettyTeamURL + this.props.channelData.name + ' ('}
                                         <a
                                             href='#'
                                             onClick={this.props.onChangeURLPressed}

web/react/components/sidebar_right_menu.jsx

@@ -6,6 +6,10 @@ var client = require('../utils/client.jsx');
 var utils = require('../utils/utils.jsx');
 
 export default class SidebarRightMenu extends React.Component {
+    componentDidMount() {
+        $('.sidebar--left .dropdown-menu').perfectScrollbar();
+    }
+
     constructor(props) {
         super(props);
 

web/react/utils/utils.jsx

@@ -955,7 +955,8 @@ export function getTeamURLFromAddressBar() {
 
 export function getShortenedTeamURL() {
     const teamURL = getTeamURLFromAddressBar();
-    if (teamURL.length > 24) {
+    if (teamURL.length > 35) {
         return teamURL.substring(0, 10) + '...' + teamURL.substring(teamURL.length - 12, teamURL.length) + '/';
     }
+    return teamURL + '/';
 }

web/sass-files/sass/partials/_forms.scss

@@ -18,6 +18,7 @@
 	.input__help {
 		color: #777;
 		margin: 10px 0 0 10px;
+	    word-break: break-word;
 		&.dark {
 			color: #222;
 		}