Multiple UI Improvements

2015-10-15 22:54:15 +05:00
--- 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}
                                >
--- 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>

--- 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'}
--- 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');
--- 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) {
--- 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}
--- 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>
                );
            }
        }
--- 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>
        );
    }
 }
--- 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;
--- 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() {
--- 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();
--- 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>
        );
    }
 }
--- a/web/react/utils/utils.jsx
+++ b/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);
    }

--- a/web/sass-files/sass/partials/_admin-console.scss
+++ b/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 {
-                padding-left: 23px;
+            .help-text {
+                ul, ol {
+                    padding-left: 23px;
+                }
            }
            .help-text {
                margin: 10px 0 0 15px;
--- a/web/sass-files/sass/partials/_base.scss
+++ b/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;
--- a/web/sass-files/sass/partials/_files.scss
+++ b/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 {
--- a/web/sass-files/sass/partials/_markdown.scss
+++ b/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;
--- a/web/sass-files/sass/partials/_post_right.scss
+++ b/web/sass-files/sass/partials/_post_right.scss
@@ -93,6 +93,7 @@

 .post-right__scroll {
 	position: relative;
+	overflow: auto;
 }

 .post-right-comment-time {
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/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;
--- a/web/sass-files/sass/partials/_search.scss
+++ b/web/sass-files/sass/partials/_search.scss
@@ -67,6 +67,7 @@
 }

 .search-items-container {
+	overflow: auto;
 	position: relative;
 }

--- a/web/sass-files/sass/partials/_sidebar--left.scss
+++ b/web/sass-files/sass/partials/_sidebar--left.scss
@@ -69,7 +69,7 @@
        top: 66px;
    }
    .nav-pills__unread-indicator-bottom {
-        bottom: 10px;
+        bottom: 20px;
    }

    .nav {
--- a/web/templates/channel.html
+++ b/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>