Merge branch 'master' of https://github.com/mattermost/platform into MM-831

merge

9 files changed, 138 insertions, 94 deletions

diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx
index be2a5e93c..1af259853 100644
--- a/web/react/components/more_channels.jsx
+++ b/web/react/components/more_channels.jsx
@@ -61,6 +61,10 @@ module.exports = React.createClass({
     render: function() {
         var server_error = this.state.server_error ? <div className='form-group has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null;
         var outter = this;
+        var moreChannels;
+
+        if (this.state.channels != null)
+            moreChannels = this.state.channels;
 
         return (
             <div className="modal fade" id="more_channels" ref="modal" tabIndex="-1" role="dialog" aria-hidden="true">
@@ -75,26 +79,36 @@ module.exports = React.createClass({
                             <button data-toggle="modal" data-target="#new_channel" data-channeltype={this.state.channel_type} type="button" className="btn btn-primary channel-create-btn" onClick={this.handleNewChannel}>Create New Channel</button>
                         </div>
                         <div className="modal-body">
-                            {this.state.channels.length ?
-                                <table className="more-channel-table table">
-                                    <tbody>
-                                        {this.state.channels.map(function(channel) {
-                                            return (
-                                                <tr key={channel.id}>
-                                                    <td>
-                                                        <p className="more-channel-name">{channel.display_name}</p>
-                                                        <p className="more-channel-description">{channel.description}</p>
-                                                    </td>
-                                                    <td className="td--action"><button onClick={outter.handleJoin.bind(outter, channel.id)} className="pull-right btn btn-primary">Join</button></td>
-                                                </tr>
-                                            )
-                                        })}
-                                    </tbody>
-                                </table>
-                                :   <div className="no-channel-message">
-                                        <p className="primary-message">No more channels to join</p>
-                                        <p className="secondary-message">Click 'Create New Channel' to make a new one</p>
-                                    </div>}
+                            {moreChannels ?
+                                (moreChannels.length ?
+                                    <table className="more-channel-table table">
+                                        <tbody>
+                                            {moreChannels.map(function(channel) {
+                                                return (
+                                                    <tr key={channel.id}>
+                                                        <td>
+                                                            <p className="more-channel-name">{channel.display_name}</p>
+                                                            <p className="more-channel-description">{channel.description}</p>
+                                                        </td>
+                                                        <td className="td--action"><button onClick={outter.handleJoin.bind(outter, channel.id)} className="pull-right btn btn-primary">Join</button></td>
+                                                    </tr>
+                                                )
+                                            })}
+                                        </tbody>
+                                    </table>
+                                    :   <div className="no-channel-message">
+                                            <p className="primary-message">No more channels to join</p>
+                                            <p className="secondary-message">Click 'Create New Channel' to make a new one</p>
+                                        </div>)
+                                :   <div ref="loadingscreen" className="loading-screen loading-screen--channel">
+                                        <div className="loading__content">
+                                        <h3>Loading</h3>
+                                            <div id="round_1" className="round"></div>
+                                            <div id="round_2" className="round"></div>
+                                            <div id="round_3" className="round"></div>
+                                        </div>
+                                    </div>
+                                }
                             { server_error }
                         </div>
                         <div className="modal-footer">
diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx
index fc5157ce6..d6dc9ce30 100644
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -123,7 +123,7 @@ module.exports = React.createClass({
         $('.post-list__content div .post').removeClass('post--last');
         $('.post-list__content div:last-child .post').addClass('post--last');
 
-        $('body').on('mouseenter mouseleave', '.post:not(.post--comment.same--root)', function(ev){
+        $('body').on('mouseenter mouseleave', '.post', function(ev){
             if(ev.type === 'mouseenter'){
                 $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--after');
                 $(this).parent('div').next('.date-separator, .new-separator').addClass('hovered--before');
@@ -134,6 +134,17 @@ module.exports = React.createClass({
             }
         });
 
+        $('body').on('mouseenter mouseleave', '.post.post--comment.same--root', function(ev){
+            if(ev.type === 'mouseenter'){
+                $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--comment');
+                $(this).parent('div').next('.date-separator, .new-separator').addClass('hovered--comment');
+            }
+            else {
+                $(this).parent('div').prev('.date-separator, .new-separator').removeClass('hovered--comment');
+                $(this).parent('div').next('.date-separator, .new-separator').removeClass('hovered--comment');
+            }
+        });
+
     },
     componentDidUpdate: function() {
         this.resize();
diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx
index 2c28c5d9f..115ee87d4 100644
--- a/web/react/components/post_right.jsx
+++ b/web/react/components/post_right.jsx
@@ -282,7 +282,6 @@ module.exports = React.createClass({
     componentDidMount: function() {
         PostStore.addSelectedPostChangeListener(this._onChange);
         PostStore.addChangeListener(this._onChangeAll);
-        $(".post-right__scroll").perfectScrollbar();
         this.resize();
         var self = this;
         $(window).resize(function(){
@@ -341,7 +340,7 @@ module.exports = React.createClass({
         var height = $(window).height() - $('#error_bar').outerHeight() - 100;
         $(".post-right__scroll").css("height", height + "px");
         $(".post-right__scroll").scrollTop(100000);
-        $(".post-right__scroll").perfectScrollbar('update');
+        $(".post-right__scroll").perfectScrollbar();
     },
     render: function() {
 
diff --git a/web/react/stores/channel_store.jsx b/web/react/stores/channel_store.jsx
index 77ab69ef8..340ce9922 100644
--- a/web/react/stores/channel_store.jsx
+++ b/web/react/stores/channel_store.jsx
@@ -202,7 +202,7 @@ var ChannelStore = assign({}, EventEmitter.prototype, {
     BrowserStore.setItem("more_channels", JSON.stringify(channels));
   },
   _getMoreChannels: function() {
-    var channels = [];
+    var channels;
     try {
         channels = JSON.parse(BrowserStore.getItem("more_channels"));
     }
diff --git a/web/react/utils/async_client.jsx b/web/react/utils/async_client.jsx
index 9383057c3..a2a6f8db7 100644
--- a/web/react/utils/async_client.jsx
+++ b/web/react/utils/async_client.jsx
@@ -104,7 +104,7 @@ module.exports.updateLastViewedAt = function() {
 module.exports.getMoreChannels = function(force) {
     if (isCallInProgress("getMoreChannels")) return;
 
-    if (ChannelStore.getMoreAll().length == 0 || force) {
+    if (!ChannelStore.getMoreAll() || force) {
 
         callTracker["getMoreChannels"] = utils.getTimestamp();
         client.getMoreChannels(
diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss
index 1268d8a07..79142176e 100644
--- a/web/sass-files/sass/partials/_files.scss
+++ b/web/sass-files/sass/partials/_files.scss
@@ -119,7 +119,7 @@
   width: 120px;
   height: 100px;
   float: left;
-  margin: 0 1em 1em 0;
+  margin: 5px 10px 5px 0;
   &.custom-file {
     width: 85px;
     height: 100px;
diff --git a/web/sass-files/sass/partials/_loading.scss b/web/sass-files/sass/partials/_loading.scss
index 185a42180..bc819e8f5 100644
--- a/web/sass-files/sass/partials/_loading.scss
+++ b/web/sass-files/sass/partials/_loading.scss
@@ -5,10 +5,16 @@
 	position: absolute;
 	@include box-sizing(border-box);
 	text-align: center;
+	&.loading-screen--channel {
+		position: relative;
+		padding: 4em 0 3.5em;
+	}
 	.loading__content {
 		display: table-cell;
 		vertical-align: middle;
+		font-size: 0;
 		h3 {
+			font-size: 16px;
 			font-weight: 400;
 			margin: 0 0.2em 0;
 			display: inline-block;
@@ -23,7 +29,7 @@
 			width: 4px;
 			height: 4px;
 			display: inline-block;
-			margin: 0 1px;
+			margin: 0 2px;
 			opacity: 0.1;
 			@include border-radius(10px);
 			-moz-animation: move 0.75s infinite linear;
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index f33cedd16..2d5cd67db 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -41,67 +41,68 @@ body.ios {
 	min-height:37px;
 }
 
-#post-list {
-	.date-separator, .new-separator {
-		text-align: center;
-		height: 2em;
-		margin: 0;
-		position: relative;
-		&:before, &:after {
-			content: "";
-			height: 1em;
-			position: absolute;
-			left: 0;
-			width: 100%;
-			display: none;
-		}
+.date-separator, .new-separator {
+	text-align: center;
+	height: 2em;
+	margin: 0;
+	position: relative;
+	&:before, &:after {
+		content: "";
+		height: 1em;
+		position: absolute;
+		left: 0;
+		width: 100%;
+		display: none;
+	}
+	&:before {
+		bottom: 0;
+	}
+	&:after {
+		top: 0;
+	}
+	&.hovered--after {
 		&:before {
-			bottom: 0;
+			background: #f5f5f5;
+			display: block;
 		}
+	}
+	&.hovered--before {
 		&:after {
-			top: 0;
-		}
-		&.hovered--after {
-			&:before {
-				background: #f5f5f5;
-				display: block;
-			}
-		}
-		&.hovered--before {
-			&:after {
-				background: #f5f5f5;
-				display: block;
-			}
-		}
-		.separator__hr {
-			border-color: #ccc;
-			margin: 0;
-			position: relative;
-			z-index: 5;
-			top: 1em;
-		}
-		.separator__text {
-			line-height: 2em;
-			color: #555;
-			background: #FFF;
-			display: inline-block;
-			padding: 0 1em;
-			font-weight: 700;
-			@include border-radius(50px);
-			position: relative;
-			z-index: 5;
-			font-size: 13px;
+			background: #f5f5f5;
+			display: block;
 		}
 	}
-	.new-separator {
-		.separator__hr {
-			border-color: #FFAF53;
-		}
-		.separator__text {
-			color: #F80;
-			font-weight: normal;
-		}
+	.separator__hr {
+		border-color: #ccc;
+		margin: 0;
+		position: relative;
+		z-index: 5;
+		top: 1em;
 	}
+	.separator__text {
+		line-height: 2em;
+		color: #555;
+		background: #FFF;
+		display: inline-block;
+		padding: 0 1em;
+		font-weight: 700;
+		@include border-radius(50px);
+		position: relative;
+		z-index: 5;
+		font-size: 13px;
+	}
+}
+.new-separator {
+	.separator__hr {
+		border-color: #FFAF53;
+	}
+	.separator__text {
+		color: #F80;
+		font-weight: normal;
+	}
+}
+
+#post-list {
 	.post-list-holder-by-time {
 		background: #fff;
 		overflow-y: scroll;
@@ -135,6 +136,7 @@ body.ios {
 		color: grey;
 	}
 }
+
 .post-create__container {
 	form {
 		width: 100%;
@@ -306,7 +308,7 @@ body.ios {
 	}
 	.post-image__columns {
 		@include legacy-pie-clearfix;
-		margin-top: 1em;
+		padding-bottom: 5px;
 	}
 	.post-info--hidden {
 		display: none;
@@ -347,7 +349,7 @@ body.ios {
 		}
 		&.post-info {
 			.post-profile-time {
-				width: 100px;
+				width: 150px;
 				display: inline-block;
 				margin-left: 50px;
 			}
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index 1a2befc3f..0eeaa3615 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -1,6 +1,13 @@
 @media screen and (max-width: 1800px) {
     .inner__wrap {
         &.move--left {
+            .date-separator, .new-separator {
+                &.hovered--comment {
+                    &:before, &:after {
+                        background: none;
+                    }
+                }
+            }
             .post {
                 &.same--root {
                     margin-left: 60px;
@@ -82,6 +89,13 @@
             max-width: 810px;
         }
     }
+    .date-separator, .new-separator {
+        &.hovered--comment {
+            &:before, &:after {
+                background: none;
+            }
+        }
+    }
     .post {
         &.same--root {
             margin-left: 60px;
@@ -207,17 +221,15 @@
 }
 
 @media screen and (max-width: 768px) {
-    #post-list {
-        .date-seperator, .new-separator {
-            &.hovered--after {
-                &:before {
-                    background: none;
-                }
+    .date-separator, .new-separator {
+        &.hovered--after {
+            &:before {
+                background: none;
             }
-            &.hovered--before {
-                &:after {
-                    background: none;
-                }
+        }
+        &.hovered--before {
+            &:after {
+                background: none;
             }
         }
     }