Merge branch 'master' into PLT-44

11 files changed, 110 insertions, 46 deletions

diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx
index 2df3dc40f..12d1af6ff 100644
--- a/web/react/components/create_comment.jsx
+++ b/web/react/components/create_comment.jsx
@@ -32,6 +32,7 @@ export default class CreateComment extends React.Component {
         this.removePreview = this.removePreview.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
         this.getFileCount = this.getFileCount.bind(this);
+        this.handleResize = this.handleResize.bind(this);
 
         PostStore.clearCommentDraftUploads();
 
@@ -40,13 +41,23 @@ export default class CreateComment extends React.Component {
             messageText: draft.message,
             uploadsInProgress: draft.uploadsInProgress,
             previews: draft.previews,
-            submitting: false
+            submitting: false,
+            windowWidth: Utils.windowWidth()
         };
     }
+    componentDidMount() {
+        window.addEventListener('resize', this.handleResize);
+    }
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.handleResize);
+    }
+    handleResize() {
+        this.setState({windowWidth: Utils.windowWidth()});
+    }
     componentDidUpdate(prevProps, prevState) {
         if (prevState.uploadsInProgress < this.state.uploadsInProgress) {
             $('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight);
-            if ($(window).width() > 768) {
+            if (this.state.windowWidth > 768) {
                 $('.post-right__scroll').perfectScrollbar('update');
             }
         }
diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx
index 2581bdcca..035899592 100644
--- a/web/react/components/create_post.jsx
+++ b/web/react/components/create_post.jsx
@@ -37,6 +37,7 @@ export default class CreatePost extends React.Component {
         this.onChange = this.onChange.bind(this);
         this.getFileCount = this.getFileCount.bind(this);
         this.handleArrowUp = this.handleArrowUp.bind(this);
+        this.handleResize = this.handleResize.bind(this);
 
         PostStore.clearDraftUploads();
 
@@ -48,9 +49,17 @@ export default class CreatePost extends React.Component {
             uploadsInProgress: draft.uploadsInProgress,
             previews: draft.previews,
             submitting: false,
-            initialText: draft.messageText
+            initialText: draft.messageText,
+            windowWidth: Utils.windowWidth(),
+            windowHeigth: Utils.windowHeight()
         };
     }
+    handleResize() {
+        this.setState({
+            windowWidth: Utils.windowWidth(),
+            windowHeight: Utils.windowHeight()
+        });
+    }
     componentDidUpdate(prevProps, prevState) {
         if (prevState.previews.length !== this.state.previews.length) {
             this.resizePostHolder();
@@ -61,6 +70,11 @@ export default class CreatePost extends React.Component {
             this.resizePostHolder();
             return;
         }
+
+        if (prevState.windowWidth !== this.state.windowWidth || prevState.windowHeight !== this.state.windowHeigth) {
+            this.resizePostHolder();
+            return;
+        }
     }
     getCurrentDraft() {
         const draft = PostStore.getCurrentDraft();
@@ -194,10 +208,9 @@ export default class CreatePost extends React.Component {
         PostStore.storeCurrentDraft(draft);
     }
     resizePostHolder() {
-        const height = $(window).height() - $(ReactDOM.findDOMNode(this.refs.topDiv)).height() - 50;
+        const height = this.state.windowHeigth - $(ReactDOM.findDOMNode(this.refs.topDiv)).height() - 50;
         $('.post-list-holder-by-time').css('height', `${height}px`);
-        $(window).trigger('resize');
-        if ($(window).width() > 960) {
+        if (this.state.windowWidth > 960) {
             $('#post_textbox').focus();
         }
     }
@@ -274,9 +287,11 @@ export default class CreatePost extends React.Component {
     componentDidMount() {
         ChannelStore.addChangeListener(this.onChange);
         this.resizePostHolder();
+        window.addEventListener('resize', this.handleResize);
     }
     componentWillUnmount() {
         ChannelStore.removeChangeListener(this.onChange);
+        window.removeEventListener('resize', this.handleResize);
     }
     onChange() {
         const channelId = ChannelStore.getCurrentId();
diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx
index 21f9a53a0..ba0bff599 100644
--- a/web/react/components/more_direct_channels.jsx
+++ b/web/react/components/more_direct_channels.jsx
@@ -140,12 +140,11 @@ export default class MoreDirectChannels extends React.Component {
         if (user.nickname) {
             const separator = fullName ? ' - ' : '';
             details.push(
-                <p
+                <span
                     key={`${user.nickname}__nickname`}
-                    className='more-description'
                 >
                     {separator + user.nickname}
-                </p>
+                </span>
             );
         }
 
@@ -184,7 +183,9 @@ export default class MoreDirectChannels extends React.Component {
                     <div className='more-name'>
                         {user.username}
                     </div>
-                    {details}
+                    <div className='more-description'>
+                        {details}
+                    </div>
                 </td>
                 <td className='td--action lg'>
                     {joinButton}
@@ -242,7 +243,7 @@ export default class MoreDirectChannels extends React.Component {
                 onHide={this.handleHide}
             >
                 <Modal.Header closeButton={true}>
-                    <Modal.Title>{'Team Directory'}</Modal.Title>
+                    <Modal.Title>{'Direct Messages'}</Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
                     <div className='row filter-row'>
diff --git a/web/react/components/rhs_thread.jsx b/web/react/components/rhs_thread.jsx
index 467d74681..bcdec2870 100644
--- a/web/react/components/rhs_thread.jsx
+++ b/web/react/components/rhs_thread.jsx
@@ -4,7 +4,7 @@
 var PostStore = require('../stores/post_store.jsx');
 var UserStore = require('../stores/user_store.jsx');
 var PreferenceStore = require('../stores/preference_store.jsx');
-var utils = require('../utils/utils.jsx');
+var Utils = require('../utils/utils.jsx');
 var SearchBox = require('./search_bar.jsx');
 var CreateComment = require('./create_comment.jsx');
 var RhsHeaderPost = require('./rhs_header_post.jsx');
@@ -20,8 +20,12 @@ export default class RhsThread extends React.Component {
         this.onChange = this.onChange.bind(this);
         this.onChangeAll = this.onChangeAll.bind(this);
         this.forceUpdateInfo = this.forceUpdateInfo.bind(this);
+        this.handleResize = this.handleResize.bind(this);
 
-        this.state = this.getStateFromStores();
+        const state = this.getStateFromStores();
+        state.windowWidth = Utils.windowWidth();
+        state.windowHeight = Utils.windowHeight();
+        this.state = state;
     }
     getStateFromStores() {
         var postList = PostStore.getSelectedPost();
@@ -47,9 +51,7 @@ export default class RhsThread extends React.Component {
         PostStore.addChangeListener(this.onChangeAll);
         PreferenceStore.addChangeListener(this.forceUpdateInfo);
         this.resize();
-        $(window).resize(function resize() {
-            this.resize();
-        }.bind(this));
+        window.addEventListener('resize', this.handleResize);
     }
     componentDidUpdate() {
         if ($('.post-right__scroll')[0]) {
@@ -61,6 +63,7 @@ export default class RhsThread extends React.Component {
         PostStore.removeSelectedPostChangeListener(this.onChange);
         PostStore.removeChangeListener(this.onChangeAll);
         PreferenceStore.removeChangeListener(this.forceUpdateInfo);
+        window.removeEventListener('resize', this.handleResize);
     }
     forceUpdateInfo() {
         if (this.state.postList) {
@@ -71,9 +74,15 @@ export default class RhsThread extends React.Component {
             }
         }
     }
+    handleResize() {
+        this.setState({
+            windowWidth: Utils.windowWidth(),
+            windowHeight: Utils.windowHeight()
+        });
+    }
     onChange() {
         var newState = this.getStateFromStores();
-        if (!utils.areStatesEqual(newState, this.state)) {
+        if (!Utils.areStatesEqual(newState, this.state)) {
             this.setState(newState);
         }
     }
@@ -103,15 +112,15 @@ export default class RhsThread extends React.Component {
         }
 
         var newState = this.getStateFromStores();
-        if (!utils.areStatesEqual(newState, this.state)) {
+        if (!Utils.areStatesEqual(newState, this.state)) {
             this.setState(newState);
         }
     }
     resize() {
-        var height = $(window).height() - $('#error_bar').outerHeight() - 100;
+        var height = this.state.windowHeight - $('#error_bar').outerHeight() - 100;
         $('.post-right__scroll').css('height', height + 'px');
         $('.post-right__scroll').scrollTop(100000);
-        if ($(window).width() > 768) {
+        if (this.state.windowWidth > 768) {
             $('.post-right__scroll').perfectScrollbar();
             $('.post-right__scroll').perfectScrollbar('update');
         }
diff --git a/web/react/components/search_results.jsx b/web/react/components/search_results.jsx
index e55fd3752..30e15d0ad 100644
--- a/web/react/components/search_results.jsx
+++ b/web/react/components/search_results.jsx
@@ -4,7 +4,7 @@
 var PostStore = require('../stores/post_store.jsx');
 var UserStore = require('../stores/user_store.jsx');
 var SearchBox = require('./search_bar.jsx');
-var utils = require('../utils/utils.jsx');
+var Utils = require('../utils/utils.jsx');
 var SearchResultsHeader = require('./search_results_header.jsx');
 var SearchResultsItem = require('./search_results_item.jsx');
 
@@ -20,18 +20,19 @@ export default class SearchResults extends React.Component {
 
         this.onChange = this.onChange.bind(this);
         this.resize = this.resize.bind(this);
+        this.handleResize = this.handleResize.bind(this);
 
-        this.state = getStateFromStores();
+        const state = getStateFromStores();
+        state.windowWidth = Utils.windowWidth();
+        state.windowHeight = Utils.windowHeight();
+        this.state = state;
     }
 
     componentDidMount() {
         this.mounted = true;
         PostStore.addSearchChangeListener(this.onChange);
         this.resize();
-        var self = this;
-        $(window).resize(function resize() {
-            self.resize();
-        });
+        window.addEventListener('resize', this.handleResize);
     }
 
     componentDidUpdate() {
@@ -41,22 +42,30 @@ export default class SearchResults extends React.Component {
     componentWillUnmount() {
         PostStore.removeSearchChangeListener(this.onChange);
         this.mounted = false;
+        window.removeEventListener('resize', this.handleResize);
+    }
+
+    handleResize() {
+        this.setState({
+            windowWidth: Utils.windowWidth(),
+            windowHeight: Utils.windowHeight()
+        });
     }
 
     onChange() {
         if (this.mounted) {
             var newState = getStateFromStores();
-            if (!utils.areStatesEqual(newState, this.state)) {
+            if (!Utils.areStatesEqual(newState, this.state)) {
                 this.setState(newState);
             }
         }
     }
 
     resize() {
-        var height = $(window).height() - $('#error_bar').outerHeight() - 100;
+        var height = this.state.windowHeight - $('#error_bar').outerHeight() - 100;
         $('#search-items-container').css('height', height + 'px');
         $('#search-items-container').scrollTop(0);
-        if ($(window).width() > 768) {
+        if (this.state.windowWidth > 768) {
             $('#search-items-container').perfectScrollbar();
         }
     }
diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx
index 14868985b..ed2c84057 100644
--- a/web/react/components/sidebar.jsx
+++ b/web/react/components/sidebar.jsx
@@ -29,9 +29,10 @@ export default class Sidebar extends React.Component {
 
         this.onChange = this.onChange.bind(this);
         this.onScroll = this.onScroll.bind(this);
-        this.onResize = this.onResize.bind(this);
         this.updateUnreadIndicators = this.updateUnreadIndicators.bind(this);
         this.handleLeaveDirectChannel = this.handleLeaveDirectChannel.bind(this);
+        this.updateScrollbar = this.updateScrollbar.bind(this);
+        this.handleResize = this.handleResize.bind(this);
 
         this.showNewChannelModal = this.showNewChannelModal.bind(this);
         this.hideNewChannelModal = this.hideNewChannelModal.bind(this);
@@ -46,6 +47,7 @@ export default class Sidebar extends React.Component {
         state.newChannelModalType = '';
         state.showDirectChannelsModal = false;
         state.loadingDMChannel = -1;
+        state.windowWidth = Utils.windowWidth();
 
         this.state = state;
     }
@@ -129,14 +131,11 @@ export default class Sidebar extends React.Component {
         TeamStore.addChangeListener(this.onChange);
         PreferenceStore.addChangeListener(this.onChange);
 
-        if ($(window).width() > 768) {
-            $('.nav-pills__container').perfectScrollbar();
-        }
-
         this.updateTitle();
         this.updateUnreadIndicators();
+        this.updateScrollbar();
 
-        $(window).on('resize', this.onResize);
+        window.addEventListener('resize', this.handleResize);
     }
     shouldComponentUpdate(nextProps, nextState) {
         if (!Utils.areStatesEqual(nextProps, this.props)) {
@@ -151,9 +150,10 @@ export default class Sidebar extends React.Component {
     componentDidUpdate() {
         this.updateTitle();
         this.updateUnreadIndicators();
+        this.updateScrollbar();
     }
     componentWillUnmount() {
-        $(window).off('resize', this.onResize);
+        window.removeEventListener('resize', this.handleResize);
 
         ChannelStore.removeChangeListener(this.onChange);
         UserStore.removeChangeListener(this.onChange);
@@ -161,6 +161,18 @@ export default class Sidebar extends React.Component {
         TeamStore.removeChangeListener(this.onChange);
         PreferenceStore.removeChangeListener(this.onChange);
     }
+    handleResize() {
+        this.setState({
+            windowWidth: Utils.windowWidth(),
+            windowHeight: Utils.windowHeight()
+        });
+    }
+    updateScrollbar() {
+        if (this.state.windowWidth > 768) {
+            $('.nav-pills__container').perfectScrollbar();
+            $('.nav-pills__container').perfectScrollbar('update');
+        }
+    }
     onChange() {
         var newState = this.getStateFromStores();
         if (!Utils.areStatesEqual(newState, this.state)) {
@@ -186,9 +198,6 @@ export default class Sidebar extends React.Component {
     onScroll() {
         this.updateUnreadIndicators();
     }
-    onResize() {
-        this.updateUnreadIndicators();
-    }
     updateUnreadIndicators() {
         const container = $(ReactDOM.findDOMNode(this.refs.container));
 
diff --git a/web/react/utils/emoticons.jsx b/web/react/utils/emoticons.jsx
index 94bb91503..7b43e48b4 100644
--- a/web/react/utils/emoticons.jsx
+++ b/web/react/utils/emoticons.jsx
@@ -3,6 +3,7 @@
 
 const emoticonPatterns = {
     smile: /(^|\s)(:-?\))($|\s)/g, // :)
+    wink: /(^|\s)(;-?\))($|\s)/g, // ;)
     open_mouth: /(^|\s)(:o)($|\s)/gi, // :o
     scream: /(^|\s)(:-o)($|\s)/gi, // :-o
     smirk: /(^|\s)(:-?])($|\s)/g, // :]
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index f17a55142..53e328384 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -519,11 +519,11 @@ export function applyTheme(theme) {
         changeCss('.modal .custom-textarea:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
         changeCss('.channel-intro, .settings-modal .settings-table .settings-content .divider-dark, hr, .settings-modal .settings-table .settings-links', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.post.current--user .post-body, .post.post--comment.other--root.current--user .post-comment, pre', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
-        changeCss('.post.current--user .post-body, .post.post--comment.other--root.current--user .post-comment, .post.post--comment.other--root .post-comment, .post.same--root .post-body, .modal .more-channel-table tbody>tr td, .member-div:first-child, .member-div, .access-history__table .access__report, .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2);
+        changeCss('.post.current--user .post-body, .post.post--comment.other--root.current--user .post-comment, .post.post--comment.other--root .post-comment, .post.same--root .post-body, .modal .more-table tbody>tr td, .member-div:first-child, .member-div, .access-history__table .access__report, .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2);
         changeCss('@media(max-width: 1440px){.post.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
         changeCss('@media(max-width: 1440px){.post.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
         changeCss('@media(max-width: 1800px){.inner__wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
-        changeCss('.post:hover, .modal .more-channel-table tbody>tr:hover td, .sidebar--right .sidebar--right__header, .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
+        changeCss('.post:hover, .modal .more-table tbody>tr:hover td, .sidebar--right .sidebar--right__header, .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
         changeCss('.date-separator.hovered--before:after, .date-separator.hovered--after:before, .new-separator.hovered--after:before, .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
         changeCss('.command-name:hover, .mentions-name:hover, .mentions-focus, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
         changeCss('code', 'background:' + changeOpacity(theme.centerChannelColor, 0.1), 1);
@@ -976,3 +976,11 @@ export function getShortenedTeamURL() {
     }
     return teamURL + '/';
 }
+
+export function windowWidth() {
+    return $(window).width();
+}
+
+export function windowHeight() {
+    return $(window).height();
+}
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index 0e474a1e2..5570b5ce4 100644
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -194,7 +194,7 @@
 			position: relative;
 			max-width: 90%;
 			min-height: 100px;
-			min-width: 240px;
+			min-width: 320px;
 			@include border-radius(3px);
 			display: table;
 			margin: 0 auto;
@@ -338,7 +338,7 @@
 .modal-direct-channels {
 
 	.user-list {
-		margin-top: 20px;
+		margin-top: 10px;
 		overflow: auto;
 		-webkit-overflow-scrolling: touch;
 		max-height: 500px;
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index c41199cac..09ac2047c 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -267,6 +267,7 @@
             }
         }
         .file-details {
+            width: 100%;
             height: auto;
         }
     }
@@ -697,7 +698,7 @@
         .modal-image {
             .image-wrapper {
                 font-size: 12px;
-                min-width: 280px;
+                min-width: 250px;
                 .modal-close {
                     @include opacity(1);
                 }
diff --git a/web/web.go b/web/web.go
index e379bf35c..0a0e57f4b 100644
--- a/web/web.go
+++ b/web/web.go
@@ -454,9 +454,9 @@ func verifyEmail(c *api.Context, w http.ResponseWriter, r *http.Request) {
 			user := result.Data.(*model.User)
 
 			if user.LastActivityAt > 0 {
-				api.FireAndForgetEmailChangeVerifyEmail(user.Id, user.Email, team.Name, team.DisplayName, c.GetSiteURL(), c.GetTeamURLFromTeam(team))
+				api.SendEmailChangeVerifyEmailAndForget(user.Id, user.Email, team.Name, team.DisplayName, c.GetSiteURL(), c.GetTeamURLFromTeam(team))
 			} else {
-				api.FireAndForgetVerifyEmail(user.Id, user.Email, team.Name, team.DisplayName, c.GetSiteURL(), c.GetTeamURLFromTeam(team))
+				api.SendVerifyEmailAndForget(user.Id, user.Email, team.Name, team.DisplayName, c.GetSiteURL(), c.GetTeamURLFromTeam(team))
 			}
 
 			newAddress := strings.Replace(r.URL.String(), "&resend=true", "&resend_success=true", -1)