Merge pull request #168 from ralder/fix-loading-screen-for-ie

[webui] fix loading animation for ie
2015-07-14 10:49:51 -04:00
--- a/web/react/components/loading_screen.jsx
+++ b/web/react/components/loading_screen.jsx
@@ -0,0 +1,24 @@
+// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+module.exports = React.createClass({
+    displayName: "LoadingScreen",
+    propTypes: {
+        position: React.PropTypes.oneOf(['absolute', 'fixed', 'relative', 'static', 'inherit'])
+    },
+    getDefaultProps: function() {
+        return { position: 'relative' };
+    },
+    render: function() {
+        return (
+            <div className="loading-screen" style={{position: this.props.position}}>
+                <div className="loading__content">
+                    <h3>Loading</h3>
+                    <div className="round round-1"></div>
+                    <div className="round round-2"></div>
+                    <div className="round round-3"></div>
+                </div>
+            </div>
+        );
+    }
+});
--- a/web/react/components/more_channels.jsx
+++ b/web/react/components/more_channels.jsx
@@ -7,6 +7,7 @@ var client = require('../utils/client.jsx');
 var asyncClient = require('../utils/async_client.jsx');
 var UserStore = require('../stores/user_store.jsx');
 var ChannelStore = require('../stores/channel_store.jsx');
+var LoadingScreen = require('./loading_screen.jsx');

 function getStateFromStores() {
  return {
@@ -16,6 +17,8 @@ function getStateFromStores() {
 }

 module.exports = React.createClass({
+    displayName: "MoreChannelsModal",
+
    componentDidMount: function() {
        ChannelStore.addMoreChangeListener(this._onChange);
        $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function (e) {
@@ -90,7 +93,7 @@ module.exports = React.createClass({
                                                            <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>
+                                                        <td className="td--action"><button onClick={outter.handleJoin.bind(outter, channel.id)} className="btn btn-primary">Join</button></td>
                                                    </tr>
                                                )
                                            })}
@@ -100,15 +103,7 @@ module.exports = React.createClass({
                                            <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>
-                                }
+                            :   <LoadingScreen /> }
                            { server_error }
                        </div>
                        <div className="modal-footer">
--- a/web/react/components/post.jsx
+++ b/web/react/components/post.jsx
@@ -10,6 +10,7 @@ var UserStore = require('../stores/user_store.jsx');
 var ActionTypes = Constants.ActionTypes;

 module.exports = React.createClass({
+    displayName: "Post",
    componentDidMount: function() {
        $('.modal').on('show.bs.modal', function () {
            $('.modal-body').css('overflow-y', 'auto');
@@ -19,7 +20,7 @@ module.exports = React.createClass({
    handleCommentClick: function(e) {
        e.preventDefault();

-        data = {};
+        var data = {};
        data.order = [this.props.post.id];
        data.posts = this.props.posts;

@@ -48,7 +49,6 @@ module.exports = React.createClass({

        var commentCount = 0;
        var commentRootId = parentPost ? post.root_id : post.id;
-        var rootUser = "";
        for (var postId in posts) {
            if (posts[postId].root_id == commentRootId) {
                commentCount += 1;
@@ -57,12 +57,7 @@ module.exports = React.createClass({

        var error = this.state.error ? <div className='form-group has-error'><label className='control-label'>{ this.state.error }</label></div> : null;

-        if (this.props.sameRoot){
-            rootUser = "same--root";
-        }
-        else {
-            rootUser = "other--root";
-        }
+        var rootUser =  this.props.sameRoot ? "same--root" : "other--root";

        var postType = "";
        if (type != "Post"){
@@ -83,7 +78,7 @@ module.exports = React.createClass({
                    <div className="post-profile-img__container">
                        <img className="post-profile-img" src={"/api/v1/users/" + post.user_id + "/image?time=" + timestamp} height="36" width="36" />
                    </div>
-                    : "" }
+                    : null }
                    <div className="post__content">
                        <PostHeader post={post} sameRoot={this.props.sameRoot} commentCount={commentCount} handleCommentClick={this.handleCommentClick} isLastComment={this.props.isLastComment} />
                        <PostBody post={post} sameRoot={this.props.sameRoot} parentPost={parentPost} posts={posts} handleCommentClick={this.handleCommentClick} />
--- a/web/react/components/post_body.jsx
+++ b/web/react/components/post_body.jsx
@@ -120,7 +120,7 @@ module.exports = React.createClass({
        return (
            <div className="post-body">
                { comment }
-                <p key={post.Id+"_message"} className={postClass}><span>{inner}</span></p>
+                <p key={post.id+"_message"} className={postClass}><span>{inner}</span></p>
                { filenames && filenames.length > 0 ?
                    <div className="post-image__columns">
                        { postFiles }
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -8,6 +8,7 @@ var UserProfile = require( './user_profile.jsx' );
 var AsyncClient = require('../utils/async_client.jsx');
 var CreatePost = require('./create_post.jsx');
 var Post = require('./post.jsx');
+var LoadingScreen = require('./loading_screen.jsx');
 var SocketStore = require('../stores/socket_store.jsx');
 var utils = require('../utils/utils.jsx');
 var Client = require('../utils/client.jsx');
@@ -26,37 +27,8 @@ function getStateFromStores() {
    };
 }

-function changeColor(col, amt) {
-
-    var usePound = false;
-
-    if (col[0] == "#") {
-        col = col.slice(1);
-        usePound = true;
-    }
-
-    var num = parseInt(col,16);
-
-    var r = (num >> 16) + amt;
-
-    if (r > 255) r = 255;
-    else if  (r < 0) r = 0;
-
-    var b = ((num >> 8) & 0x00FF) + amt;
-
-    if (b > 255) b = 255;
-    else if  (b < 0) b = 0;
-
-    var g = (num & 0x0000FF) + amt;
-
-    if (g > 255) g = 255;
-    else if (g < 0) g = 0;
-
-    return (usePound?"#":"") + String("000000" + (g | (b << 8) | (r << 16)).toString(16)).slice(-6);
-
-}
-
 module.exports = React.createClass({
+    displayName: "PostList",
    scrollPosition: 0,
    preventScrollTrigger: false,
    gotMorePosts: false,
@@ -69,7 +41,7 @@ module.exports = React.createClass({
            utils.changeCss('a.theme', 'color:'+user.props.theme+'; fill:'+user.props.theme+'!important;');
            utils.changeCss('div.theme', 'background-color:'+user.props.theme+';');
            utils.changeCss('.btn.btn-primary', 'background: ' + user.props.theme+';');
-            utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + changeColor(user.props.theme, -10)  +';');
+            utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, -10)  +';');
            utils.changeCss('.modal .modal-header', 'background: ' + user.props.theme+';');
            utils.changeCss('.mention', 'background: ' + user.props.theme+';');
            utils.changeCss('.mention-link', 'color: ' + user.props.theme+';');
@@ -161,24 +133,20 @@ module.exports = React.createClass({
        $('body').off('click.userpopover');
    },
    resize: function() {
+        var post_holder = $(".post-list-holder-by-time")[0];
+        this.preventScrollTrigger = true;
        if (this.gotMorePosts) {
            this.gotMorePosts = false;
-            var post_holder = $(".post-list-holder-by-time")[0];
-            this.preventScrollTrigger = true;
            $(post_holder).scrollTop($(post_holder).scrollTop() + (post_holder.scrollHeight-this.oldScrollHeight) );
-            $(post_holder).perfectScrollbar('update');
        } else {
-            var post_holder = $(".post-list-holder-by-time")[0];
-            this.preventScrollTrigger = true;
            if ($("#new_message")[0] && !this.scrolledToNew) {
                $(post_holder).scrollTop($(post_holder).scrollTop() + $("#new_message").offset().top - 63);
-                $(post_holder).perfectScrollbar('update');
                this.scrolledToNew = true;
            } else {
                $(post_holder).scrollTop(post_holder.scrollHeight);
-                $(post_holder).perfectScrollbar('update');
            }
        }
+        $(post_holder).perfectScrollbar('update');
    },
    _onChange: function() {
        var newState = getStateFromStores();
@@ -347,7 +315,10 @@ module.exports = React.createClass({
                            <div className="channel-intro-profile">
                                <strong><UserProfile userId={teammate.id} /></strong>
                            </div>
-                            <p className="channel-intro-text">{"This is the start of your private message history with " + teammate_name + "." }<br/>{"Private messages and files shared here are not shown to people outside this area."}</p>
+                            <p className="channel-intro-text">
+                                {"This is the start of your private message history with " + teammate_name + "." }<br/>
+                                {"Private messages and files shared here are not shown to people outside this area."}
+                            </p>
                        </div>
                    );
                } else {
@@ -410,7 +381,7 @@ module.exports = React.createClass({
                                { channel.type === 'P' ? " Only invited members can see this private group." : " Any member can join and read this channel." }
                                <br/>
                                <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a>
-                                <a className="intro-links" style={userStyle} data-toggle="modal" data-target="#channel_invite"><i className="fa fa-user-plus"></i>Invite others to this {ui_type}</a>
+                                <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#channel_invite"><i className="fa fa-user-plus"></i>Invite others to this {ui_type}</a>
                            </p>
                        </div>
                    );
@@ -420,37 +391,35 @@ module.exports = React.createClass({

        var postCtls = [];

-        if (posts != undefined) {
+        if (posts) {
            var previousPostDay = posts[order[order.length-1]] ? utils.getDateForUnixTicks(posts[order[order.length-1]].create_at): new Date();
-            var currentPostDay = new Date();
+            var currentPostDay;

            for (var i = order.length-1; i >= 0; i--) {
                var post = posts[order[i]];
-                var parentPost;
+                var parentPost = post.parent_id ? posts[post.parent_id] : null;

-                if (post.parent_id) {
-                    parentPost = posts[post.parent_id];
-                } else {
-                    parentPost = null;
+                var sameUser = '';
+                var sameRoot = false;
+                var hideProfilePic = false;
+                var prevPost = (i < order.length - 1) ? posts[order[i + 1]] : null;
+
+                if (prevPost) {
+                    sameUser = (prevPost.user_id === post.user_id) && (post.create_at - prevPost.create_at <= 1000*60*5) ? "same--user" : "";
+                    sameRoot = utils.isComment(post) && (prevPost.id === post.root_id || prevPost.root_id === post.root_id);
+
+                    // we only hide the profile pic if the previous post is not a comment, the current post is not a comment, and the previous post was made by the same user as the current post
+                    hideProfilePic = (prevPost.user_id === post.user_id) && !utils.isComment(prevPost) && !utils.isComment(post);
                }

-                var sameUser = i < order.length-1 && posts[order[i+1]].user_id === post.user_id  && post.create_at - posts[order[i+1]].create_at <= 1000*60*5 ? "same--user" : "";
-                var sameRoot = i < order.length-1 && post.root_id != "" && (posts[order[i+1]].id === post.root_id || posts[order[i+1]].root_id === post.root_id) ? true : false;
-
-                // we only hide the profile pic if the previous post is not a comment, the current post is not a comment, and the previous post was made by the same user as the current post
-                var hideProfilePic = i < order.length-1 && posts[order[i+1]].user_id === post.user_id && posts[order[i+1]].root_id === '' && post.root_id === '';
-
                // check if it's the last comment in a consecutive string of comments on the same post
-                var isLastComment = false;
-                if (utils.isComment(post)) {
-                    // it is the last comment if it is last post in the channel or the next post has a different root post
-                    isLastComment = (i === 0 || posts[order[i-1]].root_id != post.root_id);
-                }
+                // it is the last comment if it is last post in the channel or the next post has a different root post
+                var isLastComment = utils.isComment(post) && (i === 0 || posts[order[i-1]].root_id != post.root_id);

                var postCtl = <Post sameUser={sameUser} sameRoot={sameRoot} post={post} parentPost={parentPost} key={post.id} posts={posts} hideProfilePic={hideProfilePic} isLastComment={isLastComment} />;

                currentPostDay = utils.getDateForUnixTicks(post.create_at);
-                if(currentPostDay.getDate() !== previousPostDay.getDate() || currentPostDay.getMonth() !== previousPostDay.getMonth() || currentPostDay.getFullYear() !== previousPostDay.getFullYear()) {
+                if (currentPostDay.toDateString() != previousPostDay.toDateString()) {
                    postCtls.push(
                        <div className="date-separator">
                            <hr className="separator__hr" />
@@ -469,20 +438,10 @@ module.exports = React.createClass({
                    );
                }
                postCtls.push(postCtl);
-                previousPostDay = utils.getDateForUnixTicks(post.create_at);
+                previousPostDay = currentPostDay;
            }
-        }
-        else {
-            postCtls.push(
-                <div ref="loadingscreen" className="loading-screen">
-                    <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>
-            );
+        } else {
+            postCtls.push(<LoadingScreen position="absolute" />);
        }

        return (
@@ -497,5 +456,3 @@ module.exports = React.createClass({
        );
    }
 });
-
-
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -225,7 +225,7 @@ module.exports.extractLinks = function(text) {
    }

    return { "links": links, "text": text };
-} 
+}

 module.exports.escapeRegExp = function(string) {
    return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
@@ -671,13 +671,13 @@ module.exports.isValidUsername = function (name) {
        error = "First character must be a letter.";
    }

-    else 
+    else
    {
        var lowerName = name.toLowerCase().trim();

-        for (var i = 0; i < Constants.RESERVED_USERNAMES.length; i++) 
+        for (var i = 0; i < Constants.RESERVED_USERNAMES.length; i++)
        {
-            if (lowerName === Constants.RESERVED_USERNAMES[i]) 
+            if (lowerName === Constants.RESERVED_USERNAMES[i])
            {
                error = "Cannot use a reserved word as a username.";
                break;
@@ -782,3 +782,34 @@ module.exports.getHomeLink = function() {
 	parts[0] = "www";
 	return window.location.protocol + "//" + parts.join(".");
 }
+
+
+module.exports.changeColor =function(col, amt) {
+
+    var usePound = false;
+
+    if (col[0] == "#") {
+        col = col.slice(1);
+        usePound = true;
+    }
+
+    var num = parseInt(col,16);
+
+    var r = (num >> 16) + amt;
+
+    if (r > 255) r = 255;
+    else if  (r < 0) r = 0;
+
+    var b = ((num >> 8) & 0x00FF) + amt;
+
+    if (b > 255) b = 255;
+    else if  (b < 0) b = 0;
+
+    var g = (num & 0x0000FF) + amt;
+
+    if (g > 255) g = 255;
+    else if (g < 0) g = 0;
+
+    return (usePound?"#":"") + String("000000" + (g | (b << 8) | (r << 16)).toString(16)).slice(-6);
+
+};
--- a/web/sass-files/sass/partials/_loading.scss
+++ b/web/sass-files/sass/partials/_loading.scss
@@ -2,13 +2,8 @@
 	display: table;
 	width: 100%;
 	height: 100%;
-	position: absolute;
-	@include box-sizing(border-box);
+	padding: 60px;
 	text-align: center;
-	&.loading-screen--channel {
-		position: relative;
-		padding: 4em 0 3.5em;
-	}
 	.loading__content {
 		display: table-cell;
 		vertical-align: middle;
@@ -19,11 +14,7 @@
 			margin: 0 0.2em 0;
 			display: inline-block;
 		}
-	}
-}

-.loading-screen {
-	.loading__content {
 		.round {
 			background-color: #444;
 			width: 4px;
@@ -32,43 +23,18 @@
 			margin: 0 2px;
 			opacity: 0.1;
 			@include border-radius(10px);
-			-moz-animation: move 0.75s infinite linear;
-			-webkit-animation: move 0.75s infinite linear;
+			@include animation(move 0.75s infinite linear);
 		}

-		#round_1 {
-			-moz-animation-delay: .2s;
-			-webkit-animation-delay: .2s;
-		}
-
-		#round_2 {
-			-moz-animation-delay: .4s;
-			-webkit-animation-delay: .4s;
-		}
-
-		#round_3 {
-			-moz-animation-delay: .6s;
-			-webkit-animation-delay: .6s;
-		}
-
-		@-moz-keyframes move {
-			0% {
-				opacity: 1;
+		@for $i from 1 through 3 {
+			.round-#{$i} {
+				@include animation-delay(.2s*$i);
 			}
-
-			100% {
-				opacity: 0.1;
-			};
 		}

-		@-webkit-keyframes move {
-			0% {
-				opacity: 1;
-			}
-
-			100% {
-				opacity: 0.1;
-			};
+		@include keyframes(move) {
+			from { opacity: 1; }
+			to { opacity: 0.1; }
 		}
 	}
 }
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -119,6 +119,7 @@ body.ios {
 		table-layout: fixed;
 		width: 100%;
 		min-height: 100%;
+		height: 100%;
 		.post-list__content {
 			display: table-cell;
 			vertical-align: bottom;