From 95aaa0a08084885c2b0ffb07198d38d5890426ab Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Thu, 15 Oct 2015 22:54:15 +0500
Subject: Multiple UI Improvements

---
 .../components/admin_console/email_settings.jsx    |  6 ++--
 .../components/admin_console/gitlab_settings.jsx   | 14 ++++----
 .../components/admin_console/sql_settings.jsx      |  2 +-
 web/react/components/channel_loader.jsx            |  9 -----
 web/react/components/create_comment.jsx            |  4 ++-
 web/react/components/email_verify.jsx              |  8 ++---
 web/react/components/navbar.jsx                    | 31 +++++++++---------
 web/react/components/popover_list_members.jsx      | 29 +++++++----------
 web/react/components/rhs_thread.jsx                |  8 ++---
 web/react/components/search_results.jsx            |  4 ++-
 web/react/components/sidebar.jsx                   |  4 ++-
 web/react/components/user_profile.jsx              | 38 ++++++++++++++++++----
 12 files changed, 86 insertions(+), 71 deletions(-)

(limited to 'web/react/components')

diff --git a/web/react/components/admin_console/email_settings.jsx b/web/react/components/admin_console/email_settings.jsx
index c028d605d..12480e7eb 100644
--- a/web/react/components/admin_console/email_settings.jsx
+++ b/web/react/components/admin_console/email_settings.jsx
@@ -447,7 +447,7 @@ export default class EmailSettings extends React.Component {
                             </div>
                             <div className='help-text'>
                                 <button
-                                    className='btn'
+                                    className='btn btn-default'
                                     onClick={this.handleTestConnection}
                                     disabled={!this.state.sendEmailNotifications}
                                     id='connection-button'
@@ -482,7 +482,7 @@ export default class EmailSettings extends React.Component {
                             <p className='help-text'>{'32-character salt added to signing of email invites. Randomly generated on install. Click "Re-Generate" to create new salt.'}</p>
                             <div className='help-text'>
                                 <button
-                                    className='btn'
+                                    className='btn btn-default'
                                     onClick={this.handleGenerateInvite}
                                     disabled={!this.state.sendEmailNotifications}
                                 >
@@ -513,7 +513,7 @@ export default class EmailSettings extends React.Component {
                             <p className='help-text'>{'32-character salt added to signing of password reset emails. Randomly generated on install. Click "Re-Generate" to create new salt.'}</p>
                             <div className='help-text'>
                                 <button
-                                    className='btn'
+                                    className='btn btn-default'
                                     onClick={this.handleGenerateReset}
                                     disabled={!this.state.sendEmailNotifications}
                                 >
diff --git a/web/react/components/admin_console/gitlab_settings.jsx b/web/react/components/admin_console/gitlab_settings.jsx
index 5c22bf5cf..41c8ad2fc 100644
--- a/web/react/components/admin_console/gitlab_settings.jsx
+++ b/web/react/components/admin_console/gitlab_settings.jsx
@@ -116,12 +116,14 @@ export default class GitLabSettings extends React.Component {
                             <p className='help-text'>
                                 {'When true, Mattermost allows team creation and account signup using GitLab OAuth.'} <br/>
                             </p>
-                            <ol className='help-text'>
-                                <li>{'Log in to your GitLab account and go to Applications -> Profile Settings.'}</li>
-                                <li>{'Enter Redirect URIs "<your-mattermost-url>/login/gitlab/complete" (example: http://localhost:8065/login/gitlab/complete) and "<your-mattermost-url>/signup/gitlab/complete". '}</li>
-                                <li>{'Then use "Secret" and "Id" fields from GitLab to complete the options below.'}</li>
-                                <li>{'Complete the Endpoint URLs below. '}</li>
-                            </ol>
+                            <div className='help-text'>
+                                <ol>
+                                    <li>{'Log in to your GitLab account and go to Applications -> Profile Settings.'}</li>
+                                    <li>{'Enter Redirect URIs "<your-mattermost-url>/login/gitlab/complete" (example: http://localhost:8065/login/gitlab/complete) and "<your-mattermost-url>/signup/gitlab/complete". '}</li>
+                                    <li>{'Then use "Secret" and "Id" fields from GitLab to complete the options below.'}</li>
+                                    <li>{'Complete the Endpoint URLs below. '}</li>
+                                </ol>
+                            </div>
                         </div>
                     </div>
 
diff --git a/web/react/components/admin_console/sql_settings.jsx b/web/react/components/admin_console/sql_settings.jsx
index 16a69e664..655daa30c 100644
--- a/web/react/components/admin_console/sql_settings.jsx
+++ b/web/react/components/admin_console/sql_settings.jsx
@@ -220,7 +220,7 @@ export default class SqlSettings extends React.Component {
                             <p className='help-text'>{'32-character salt available to encrypt and decrypt sensitive fields in database.'}</p>
                             <div className='help-text'>
                                 <button
-                                    className='help-link'
+                                    className='btn btn-default'
                                     onClick={this.handleGenerate}
                                 >
                                     {'Re-Generate'}
diff --git a/web/react/components/channel_loader.jsx b/web/react/components/channel_loader.jsx
index d0d6ab5e2..270631db2 100644
--- a/web/react/components/channel_loader.jsx
+++ b/web/react/components/channel_loader.jsx
@@ -75,15 +75,6 @@ export default class ChannelLoader extends React.Component {
             Utils.applyTheme(Constants.THEMES.default);
         }
 
-        /* Setup global mouse events */
-        $('body').on('click', function hidePopover(e) {
-            $('[data-toggle="popover"]').each(function eachPopover() {
-                if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
-                    $(this).popover('hide');
-                }
-            });
-        });
-
         $('body').on('mouseenter mouseleave', '.post', function mouseOver(ev) {
             if (ev.type === 'mouseenter') {
                 $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--after');
diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx
index 2ac5d2179..fa3f82c2e 100644
--- a/web/react/components/create_comment.jsx
+++ b/web/react/components/create_comment.jsx
@@ -46,7 +46,9 @@ export default class CreateComment extends React.Component {
     componentDidUpdate(prevProps, prevState) {
         if (prevState.uploadsInProgress < this.state.uploadsInProgress) {
             $('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight);
-            $('.post-right__scroll').perfectScrollbar('update');
+            if ($(window).width() > 768) {
+                $('.post-right__scroll').perfectScrollbar('update');
+            }
         }
     }
     handleSubmit(e) {
diff --git a/web/react/components/email_verify.jsx b/web/react/components/email_verify.jsx
index 9be7f97f8..940b01f8d 100644
--- a/web/react/components/email_verify.jsx
+++ b/web/react/components/email_verify.jsx
@@ -39,11 +39,9 @@ export default class EmailVerify extends React.Component {
 
         return (
             <div className='col-sm-12'>
-                <div className='panel panel-default verify_panel'>
-                    <div className='panel-heading'>
-                        <h3 className='panel-title'>{title}</h3>
-                    </div>
-                    <div className='panel-body'>
+                <div className='signup-team__container'>
+                    <h3>{title}</h3>
+                    <div>
                         {body}
                         {resend}
                         {resendConfirm}
diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx
index 6503bd801..b07349df3 100644
--- a/web/react/components/navbar.jsx
+++ b/web/react/components/navbar.jsx
@@ -13,6 +13,8 @@ const Utils = require('../utils/utils.jsx');
 var Constants = require('../utils/constants.jsx');
 var ActionTypes = Constants.ActionTypes;
 var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
+var Popover = ReactBootstrap.Popover;
+var OverlayTrigger = ReactBootstrap.OverlayTrigger;
 
 export default class Navbar extends React.Component {
     constructor(props) {
@@ -36,12 +38,6 @@ export default class Navbar extends React.Component {
         ChannelStore.addChangeListener(this.onChange);
         ChannelStore.addExtraInfoChangeListener(this.onChange);
         $('.inner__wrap').click(this.hideSidebars);
-
-        $('body').on('click.infopopover', function handlePopoverClick(e) {
-            if ($(e.target).attr('data-toggle') !== 'popover' && $(e.target).parents('.popover.in').length === 0) {
-                $('.info-popover').popover('hide');
-            }
-        });
     }
     componentWillUnmount() {
         ChannelStore.removeChangeListener(this.onChange);
@@ -224,11 +220,14 @@ export default class Navbar extends React.Component {
             return (
                 <div className='navbar-brand'>
                     <div className='dropdown'>
-                        <div
-                            data-toggle='popover'
-                            data-content={popoverContent}
-                            className='description info-popover'
-                        />
+                        <OverlayTrigger
+                            trigger='click'
+                            placement='bottom'
+                            rootClose='true'
+                            overlay={<Popover>{popoverContent}</Popover>}
+                        >
+                        <div className='description info-popover'/>
+                        </OverlayTrigger>
                         <a
                             href='#'
                             className='dropdown-toggle theme'
@@ -330,7 +329,7 @@ export default class Navbar extends React.Component {
         var isDirect = false;
 
         if (channel) {
-            popoverContent = React.renderToString(
+            popoverContent = (
                 <MessageWrapper
                     message={channel.description}
                     options={{singleline: true, mentionHighlight: false}}
@@ -354,9 +353,9 @@ export default class Navbar extends React.Component {
             }
 
             if (channel.description.length === 0) {
-                popoverContent = React.renderToString(
+                popoverContent = (
                     <div>
-                        No channel description yet. <br/>
+                        {'No channel description yet.'} <br/>
                         <a
                             href='#'
                             data-toggle='modal'
@@ -365,8 +364,8 @@ export default class Navbar extends React.Component {
                             data-channelid={channel.id}
                             data-target='#edit_channel'
                         >
-                            Click here
-                        </a> to add one.</div>
+                            {'Click here'}
+                        </a> {'to add one.'}</div>
                 );
             }
         }
diff --git a/web/react/components/popover_list_members.jsx b/web/react/components/popover_list_members.jsx
index 5d9052fd7..16ae693fa 100644
--- a/web/react/components/popover_list_members.jsx
+++ b/web/react/components/popover_list_members.jsx
@@ -2,6 +2,8 @@
 // See License.txt for license information.
 
 var UserStore = require('../stores/user_store.jsx');
+var Popover = ReactBootstrap.Popover;
+var OverlayTrigger = ReactBootstrap.OverlayTrigger;
 
 export default class PopoverListMembers extends React.Component {
     componentDidMount() {
@@ -24,16 +26,9 @@ export default class PopoverListMembers extends React.Component {
                 });
             }
         };
-
-        $('#member_popover').popover({placement: 'bottom', trigger: 'click', html: true});
-        $('body').on('click', function onClick(e) {
-            if (e.target.parentNode && $(e.target.parentNode.parentNode)[0] !== $('#member_popover')[0] && $(e.target).parents('.popover.in').length === 0) {
-                $('#member_popover').popover('hide');
-            }
-        });
     }
     render() {
-        let popoverHtml = '';
+        let popoverHtml = [];
         let count = 0;
         let countText = '-';
         const members = this.props.members;
@@ -46,7 +41,7 @@ export default class PopoverListMembers extends React.Component {
 
             members.forEach(function addMemberElement(m) {
                 if (teamMembers[m.username] && teamMembers[m.username].delete_at <= 0) {
-                    popoverHtml += `<div class='text--nowrap'>${m.username}</div>`;
+                    popoverHtml.push(<div className='text--nowrap'>{m.username}</div>);
                     count++;
                 }
             });
@@ -59,15 +54,14 @@ export default class PopoverListMembers extends React.Component {
         }
 
         return (
-            <div
-                id='member_popover'
-                data-toggle='popover'
-                data-content={popoverHtml}
-                data-original-title='Members'
+            <OverlayTrigger
+                trigger='click'
+                placement='bottom'
+                rootClose='true'
+                overlay={<Popover title='Members'>{popoverHtml}</Popover>}
             >
-                <div
-                    id='member_tooltip'
-                >
+            <div id='member_popover'>
+                <div>
                     {countText}
                     <span
                         className='fa fa-user'
@@ -75,6 +69,7 @@ export default class PopoverListMembers extends React.Component {
                     />
                 </div>
             </div>
+            </OverlayTrigger>
         );
     }
 }
diff --git a/web/react/components/rhs_thread.jsx b/web/react/components/rhs_thread.jsx
index 41fd74adb..131253aa5 100644
--- a/web/react/components/rhs_thread.jsx
+++ b/web/react/components/rhs_thread.jsx
@@ -52,8 +52,6 @@ export default class RhsThread extends React.Component {
         if ($('.post-right__scroll')[0]) {
             $('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight);
         }
-
-        $('.post-right__scroll').perfectScrollbar('update');
         this.resize();
     }
     componentWillUnmount() {
@@ -100,8 +98,10 @@ export default class RhsThread extends React.Component {
         var height = $(window).height() - $('#error_bar').outerHeight() - 100;
         $('.post-right__scroll').css('height', height + 'px');
         $('.post-right__scroll').scrollTop(100000);
-        $('.post-right__scroll').perfectScrollbar();
-        $('.post-right__scroll').perfectScrollbar('update');
+        if ($(window).width() > 768) {
+            $('.post-right__scroll').perfectScrollbar();
+            $('.post-right__scroll').perfectScrollbar('update');
+        }
     }
     render() {
         var postList = this.state.postList;
diff --git a/web/react/components/search_results.jsx b/web/react/components/search_results.jsx
index 5eea3c501..e55fd3752 100644
--- a/web/react/components/search_results.jsx
+++ b/web/react/components/search_results.jsx
@@ -56,7 +56,9 @@ export default class SearchResults extends React.Component {
         var height = $(window).height() - $('#error_bar').outerHeight() - 100;
         $('#search-items-container').css('height', height + 'px');
         $('#search-items-container').scrollTop(0);
-        $('#search-items-container').perfectScrollbar();
+        if ($(window).width() > 768) {
+            $('#search-items-container').perfectScrollbar();
+        }
     }
 
     render() {
diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx
index 1308165a9..e7d90bb88 100644
--- a/web/react/components/sidebar.jsx
+++ b/web/react/components/sidebar.jsx
@@ -134,7 +134,9 @@ export default class Sidebar extends React.Component {
 
         AsyncClient.getDirectChannelPreferences();
 
-        $('.nav-pills__container').perfectScrollbar();
+        if ($(window).width() > 768) {
+            $('.nav-pills__container').perfectScrollbar();
+        }
 
         this.updateTitle();
         this.updateUnreadIndicators();
diff --git a/web/react/components/user_profile.jsx b/web/react/components/user_profile.jsx
index cc6165c1b..782cb0659 100644
--- a/web/react/components/user_profile.jsx
+++ b/web/react/components/user_profile.jsx
@@ -3,6 +3,8 @@
 
 var Utils = require('../utils/utils.jsx');
 var UserStore = require('../stores/user_store.jsx');
+var Popover = ReactBootstrap.Popover;
+var OverlayTrigger = ReactBootstrap.OverlayTrigger;
 
 var id = 0;
 
@@ -32,7 +34,6 @@ 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: 'click hover', html: true, delay: {show: 200, hide: 100}});
             $('body').tooltip({selector: '[data-toggle=tooltip]', trigger: 'hover click'});
         }
     }
@@ -62,23 +63,46 @@ export default class UserProfile extends React.Component {
             return <div>{name}</div>;
         }
 
-        var dataContent = '<img class="user-popover__image" src="/api/v1/users/' + this.state.profile.id + '/image?time=' + this.state.profile.update_at + '" height="128" width="128" />';
+        var dataContent = [];
+        dataContent.push(
+            <img className='user-popover__image'
+                src={'/api/v1/users/' + this.state.profile.id + '/image?time=' + this.state.profile.update_at}
+                height='128'
+                width='128'
+            />
+        );
         if (!global.window.config.ShowEmailAddress === 'true') {
-            dataContent += '<div class="text-nowrap">Email not shared</div>';
+            dataContent.push(<div className='text-nowrap'>{'Email not shared'}</div>);
         } else {
-            dataContent += '<div data-toggle="tooltip" title="' + this.state.profile.email + '"><a href="mailto:' + this.state.profile.email + '" class="text-nowrap text-lowercase user-popover__email">' + this.state.profile.email + '</a></div>';
+            dataContent.push(
+                <div
+                    data-toggle='tooltip'
+                    title="' + this.state.profile.email + '"
+                >
+                    <a
+                        href="mailto:' + this.state.profile.email + '"
+                        className='text-nowrap text-lowercase user-popover__email'
+                    >
+                        {this.state.profile.email}
+                    </a>
+                </div>
+            );
         }
 
         return (
+            <OverlayTrigger
+                trigger={['hover', 'click']}
+                placement='right'
+                rootClose='true'
+                overlay={<Popover title={this.state.profile.username}>{dataContent}</Popover>}
+            >
             <div
                 className='user-popover'
                 id={'profile_' + this.uniqueId}
-                data-toggle='popover'
-                data-content={dataContent}
-                data-original-title={this.state.profile.username}
             >
                 {name}
             </div>
+            </OverlayTrigger>
         );
     }
 }
-- 
cgit v1.2.3-1-g7c22


From ac2bac0334dfa1da0ec80408ffc3ac8f79b9fade Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Thu, 15 Oct 2015 22:57:07 +0500
Subject: Changing user popover trigger from hover click to just click

---
 web/react/components/user_profile.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'web/react/components')

diff --git a/web/react/components/user_profile.jsx b/web/react/components/user_profile.jsx
index 782cb0659..715161b4f 100644
--- a/web/react/components/user_profile.jsx
+++ b/web/react/components/user_profile.jsx
@@ -91,7 +91,7 @@ export default class UserProfile extends React.Component {
 
         return (
             <OverlayTrigger
-                trigger={['hover', 'click']}
+                trigger='click'
                 placement='right'
                 rootClose='true'
                 overlay={<Popover title={this.state.profile.username}>{dataContent}</Popover>}
-- 
cgit v1.2.3-1-g7c22


From 3d16d64c0ba2233b680e4ded01784a892c63e925 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Thu, 15 Oct 2015 23:20:15 +0500
Subject: Removing my navbar popover changes since Chris has already done the
 popover changes in his PR

---
 web/react/components/navbar.jsx | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

(limited to 'web/react/components')

diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx
index b07349df3..6503bd801 100644
--- a/web/react/components/navbar.jsx
+++ b/web/react/components/navbar.jsx
@@ -13,8 +13,6 @@ const Utils = require('../utils/utils.jsx');
 var Constants = require('../utils/constants.jsx');
 var ActionTypes = Constants.ActionTypes;
 var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
-var Popover = ReactBootstrap.Popover;
-var OverlayTrigger = ReactBootstrap.OverlayTrigger;
 
 export default class Navbar extends React.Component {
     constructor(props) {
@@ -38,6 +36,12 @@ export default class Navbar extends React.Component {
         ChannelStore.addChangeListener(this.onChange);
         ChannelStore.addExtraInfoChangeListener(this.onChange);
         $('.inner__wrap').click(this.hideSidebars);
+
+        $('body').on('click.infopopover', function handlePopoverClick(e) {
+            if ($(e.target).attr('data-toggle') !== 'popover' && $(e.target).parents('.popover.in').length === 0) {
+                $('.info-popover').popover('hide');
+            }
+        });
     }
     componentWillUnmount() {
         ChannelStore.removeChangeListener(this.onChange);
@@ -220,14 +224,11 @@ export default class Navbar extends React.Component {
             return (
                 <div className='navbar-brand'>
                     <div className='dropdown'>
-                        <OverlayTrigger
-                            trigger='click'
-                            placement='bottom'
-                            rootClose='true'
-                            overlay={<Popover>{popoverContent}</Popover>}
-                        >
-                        <div className='description info-popover'/>
-                        </OverlayTrigger>
+                        <div
+                            data-toggle='popover'
+                            data-content={popoverContent}
+                            className='description info-popover'
+                        />
                         <a
                             href='#'
                             className='dropdown-toggle theme'
@@ -329,7 +330,7 @@ export default class Navbar extends React.Component {
         var isDirect = false;
 
         if (channel) {
-            popoverContent = (
+            popoverContent = React.renderToString(
                 <MessageWrapper
                     message={channel.description}
                     options={{singleline: true, mentionHighlight: false}}
@@ -353,9 +354,9 @@ export default class Navbar extends React.Component {
             }
 
             if (channel.description.length === 0) {
-                popoverContent = (
+                popoverContent = React.renderToString(
                     <div>
-                        {'No channel description yet.'} <br/>
+                        No channel description yet. <br/>
                         <a
                             href='#'
                             data-toggle='modal'
@@ -364,8 +365,8 @@ export default class Navbar extends React.Component {
                             data-channelid={channel.id}
                             data-target='#edit_channel'
                         >
-                            {'Click here'}
-                        </a> {'to add one.'}</div>
+                            Click here
+                        </a> to add one.</div>
                 );
             }
         }
-- 
cgit v1.2.3-1-g7c22