Merge pull request #1076 from asaadmahmoodspin/ui-improvements

Multiple UI Improvements

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

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'>
+                            <div className='help-text'>
-                                <li>{'Log in to your GitLab account and go to Applications -> Profile Settings.'}</li>
+                                <ol>
-                                <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>{'Log in to your GitLab account and go to Applications -> Profile Settings.'}</li>
-                                <li>{'Then use "Secret" and "Id" fields from GitLab to complete the options below.'}</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>{'Complete the Endpoint URLs below. '}</li>
+                                    <li>{'Then use "Secret" and "Id" fields from GitLab to complete the options below.'}</li>
-                            </ol>
+                                    <li>{'Complete the Endpoint URLs below. '}</li>
+                                </ol>
+                            </div>
                         </div>
                     </div>
 

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

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');

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) {

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='signup-team__container'>
-                    <div className='panel-heading'>
+                    <h3>{title}</h3>
-                        <h3 className='panel-title'>{title}</h3>
+                    <div>
-                    </div>
-                    <div className='panel-body'>
                         {body}
                         {resend}
                         {resendConfirm}

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
+            <OverlayTrigger
-                id='member_popover'
+                trigger='click'
-                data-toggle='popover'
+                placement='bottom'
-                data-content={popoverHtml}
+                rootClose='true'
-                data-original-title='Members'
+                overlay={<Popover title='Members'>{popoverHtml}</Popover>}
             >
-                <div
+            <div id='member_popover'>
-                    id='member_tooltip'
+                <div>
-                >
                     {countText}
                     <span
                         className='fa fa-user'
@@ -75,6 +69,7 @@ export default class PopoverListMembers extends React.Component {
                     />
                 </div>
             </div>
+            </OverlayTrigger>
         );
     }
 }

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();
+        if ($(window).width() > 768) {
-        $('.post-right__scroll').perfectScrollbar('update');
+            $('.post-right__scroll').perfectScrollbar();
+            $('.post-right__scroll').perfectScrollbar('update');
+        }
     }
     render() {
         var postList = this.state.postList;

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() {

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();

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='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>
         );
     }
 }

web/react/utils/utils.jsx

@@ -467,6 +467,10 @@ export function applyTheme(theme) {
         changeCss('.date-separator .separator__text, .new-separator .separator__text', 'background:' + theme.centerChannelBg, 1);
         changeCss('.post-image__column .post-image__details', 'background:' + theme.centerChannelBg, 1);
         changeCss('.sidebar--right, .dropdown-menu, .popover', 'background:' + theme.centerChannelBg, 1);
+        changeCss('.popover.bottom>.arrow:after', 'border-bottom-color:' + theme.centerChannelBg, 1);
+        changeCss('.popover.right>.arrow:after', 'border-right-color:' + theme.centerChannelBg, 1);
+        changeCss('.popover.left>.arrow:after', 'border-left-color:' + theme.centerChannelBg, 1);
+        changeCss('.popover.top>.arrow:after', 'border-top-color:' + theme.centerChannelBg, 1);
         changeCss('.search-bar__container .search__form .search-bar, .form-control', 'background:' + theme.centerChannelBg, 1);
     }
 

web/sass-files/sass/partials/_admin-console.scss

@@ -15,12 +15,11 @@
             .nav {
                 li {
                     padding: 0;
+                    @include opacity(1);
                     .icon {
                         width: 17px;
                     }
                     > a {
-                        padding: 9px 15px;
-                        display: block;
                         &:hover, &.active, &:focus  {
                             background-color: #EAEAEA;
                         }
@@ -117,8 +116,10 @@
             .form-group {
                 margin-bottom: 25px;
             }
-            ul, ol {
+            .help-text {
-                padding-left: 23px;
+                ul, ol {
+                    padding-left: 23px;
+                }
             }
             .help-text {
                 margin: 10px 0 0 15px;

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

@@ -39,10 +39,6 @@ img {
   height: auto;
 }
 
-.input-group-addon {
-  background: transparent;
-}
-
 .popover {
   color: #333;
   &.bottom, &.right, &.top, &.left {
@@ -53,6 +49,9 @@ img {
   .popover-title {
     background: rgba(black, 0.05);
   }
+  .popover-content {
+    white-space: pre-wrap;
+  }
 }
 
 .dropdown-menu {
@@ -182,6 +181,10 @@ a:focus, a:hover {
   background-color: white !important;
 }
 
+.alert {
+  padding: 8px 12px;
+}
+
 .emoji {
   width: 1.5em;
   height: 1.5em;

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

@@ -194,6 +194,7 @@
     vertical-align: top;
 
     .file-details__name {
+      color: #333;
       font-size: 16px;
     }
     .file-details__info {

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

@@ -1,5 +1,6 @@
 .markdown__heading {
 	font-weight: 700;
+	line-height: 1.5;
 }
 .markdown__paragraph-inline {
 	display: inline;

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

@@ -93,6 +93,7 @@
 
 .post-right__scroll {
 	position: relative;
+	overflow: auto;
 }
 
 .post-right-comment-time {

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

@@ -586,11 +586,14 @@
         &.move--right {
             @include translate3d(0, 0, 0);
         }
+        .nav-pills__unread-indicator-bottom {
+            bottom: 10px;
+        }
         .badge {
             top: 13px;
         }
         > div {
-            padding-bottom: 105px;
+            padding-bottom: 65px;
         }
         .team__header {
             display: none;

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

@@ -67,6 +67,7 @@
 }
 
 .search-items-container {
+	overflow: auto;
 	position: relative;
 }
 

web/sass-files/sass/partials/_sidebar--left.scss

@@ -69,7 +69,7 @@
         top: 66px;
     }
     .nav-pills__unread-indicator-bottom {
-        bottom: 10px;
+        bottom: 20px;
     }
 
     .nav {

web/templates/channel.html

@@ -54,7 +54,7 @@
 <script>
   window.setup_channel_page({{ .Props }});
   $('body').tooltip( {selector: '[data-toggle=tooltip]'} );
-  $('.modal-body').css('max-height', $(window).height() - 150);
+  $('.modal-body').css('max-height', $(window).height() - 200);
   $('.modal-body').perfectScrollbar();
 </script>
 </body>