From d5d9481c0f4c1ddd86f2e30f798da50c37f56a3a Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Tue, 30 Jun 2015 20:01:35 -0700 Subject: Added new files for adding new loading animation --- web/react/components/loading_posts.jsx | 3 ++ web/sass-files/sass/partials/_loading.scss | 68 ++++++++++++++++++++++++++++++ 2 files changed, 71 insertions(+) create mode 100644 web/react/components/loading_posts.jsx create mode 100644 web/sass-files/sass/partials/_loading.scss (limited to 'web') diff --git a/web/react/components/loading_posts.jsx b/web/react/components/loading_posts.jsx new file mode 100644 index 000000000..f6d859954 --- /dev/null +++ b/web/react/components/loading_posts.jsx @@ -0,0 +1,3 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + diff --git a/web/sass-files/sass/partials/_loading.scss b/web/sass-files/sass/partials/_loading.scss new file mode 100644 index 000000000..185a42180 --- /dev/null +++ b/web/sass-files/sass/partials/_loading.scss @@ -0,0 +1,68 @@ +.loading-screen { + display: table; + width: 100%; + height: 100%; + position: absolute; + @include box-sizing(border-box); + text-align: center; + .loading__content { + display: table-cell; + vertical-align: middle; + h3 { + font-weight: 400; + margin: 0 0.2em 0; + display: inline-block; + } + } +} + +.loading-screen { + .loading__content { + .round { + background-color: #444; + width: 4px; + height: 4px; + display: inline-block; + margin: 0 1px; + opacity: 0.1; + @include border-radius(10px); + -moz-animation: move 0.75s infinite linear; + -webkit-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; + } + + 100% { + opacity: 0.1; + }; + } + + @-webkit-keyframes move { + 0% { + opacity: 1; + } + + 100% { + opacity: 0.1; + }; + } + } +} -- cgit v1.2.3-1-g7c22 From 483b37a64f978db84cd0d128665d2c79775c6e60 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Wed, 1 Jul 2015 16:51:26 -0700 Subject: Added logic for loading animation to appear when posts have yet to be loaded. Added markup necessary for loading animation css. Removed a file that was no longer needed for the design. --- web/react/components/loading_posts.jsx | 3 --- web/react/components/post_list.jsx | 17 +++++++++++++++-- 2 files changed, 15 insertions(+), 5 deletions(-) delete mode 100644 web/react/components/loading_posts.jsx (limited to 'web') diff --git a/web/react/components/loading_posts.jsx b/web/react/components/loading_posts.jsx deleted file mode 100644 index f6d859954..000000000 --- a/web/react/components/loading_posts.jsx +++ /dev/null @@ -1,3 +0,0 @@ -// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. -// See License.txt for license information. - diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index ad8cfa20f..a860804cc 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -295,7 +295,7 @@ module.exports = React.createClass({ }, render: function() { var order = []; - var posts = {}; + var posts; var last_viewed = Number.MAX_VALUE; @@ -408,7 +408,7 @@ module.exports = React.createClass({ } var postCtls = []; - var previousPostDay = posts[order[order.length-1]] ? utils.getDateForUnixTicks(posts[order[order.length-1]].create_at): new Date(); + var previousPostDay = posts && posts[order[order.length-1]] ? utils.getDateForUnixTicks(posts[order[order.length-1]].create_at): new Date(); var currentPostDay = new Date(); for (var i = order.length-1; i >= 0; i--) { @@ -459,6 +459,19 @@ module.exports = React.createClass({ previousPostDay = utils.getDateForUnixTicks(post.create_at); } + if (posts == undefined) { + postCtls.push( +
+
+

Loading

+
+
+
+
+
+ ); + } + return (
-- cgit v1.2.3-1-g7c22 From cbfc85fde2cea70e944f22cc2620d343af839395 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Thu, 2 Jul 2015 12:20:39 -0700 Subject: Added import statement to styles.scss --- web/sass-files/sass/styles.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'web') diff --git a/web/sass-files/sass/styles.scss b/web/sass-files/sass/styles.scss index 8446f1c01..9cc26320c 100644 --- a/web/sass-files/sass/styles.scss +++ b/web/sass-files/sass/styles.scss @@ -29,6 +29,7 @@ @import "partials/modal"; @import "partials/mentions"; @import "partials/error"; +@import "partials/loading"; // Responsive Css @import "partials/responsive"; -- cgit v1.2.3-1-g7c22 From 1a1b29ee6c1aa20a5f608f57616b078f0dbbbe51 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Thu, 2 Jul 2015 16:38:34 -0700 Subject: Restructured logic to flow more naturally and be cleaner --- web/react/components/post_list.jsx | 86 +++++++++++++++++++------------------- 1 file changed, 44 insertions(+), 42 deletions(-) (limited to 'web') diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index a860804cc..169efc766 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -408,58 +408,60 @@ module.exports = React.createClass({ } var postCtls = []; - var previousPostDay = posts && posts[order[order.length-1]] ? utils.getDateForUnixTicks(posts[order[order.length-1]].create_at): new Date(); - var currentPostDay = new Date(); - for (var i = order.length-1; i >= 0; i--) { - var post = posts[order[i]]; - var parentPost; + if (posts != undefined) { + var previousPostDay = posts[order[order.length-1]] ? utils.getDateForUnixTicks(posts[order[order.length-1]].create_at): new Date(); + var currentPostDay = new Date(); - if (post.parent_id) { - parentPost = posts[post.parent_id]; - } else { - parentPost = null; - } + for (var i = order.length-1; i >= 0; i--) { + var post = posts[order[i]]; + var parentPost; - 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; + if (post.parent_id) { + parentPost = posts[post.parent_id]; + } else { + parentPost = null; + } - // 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 === ''; + 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; - // 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); - } + // 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 === ''; - var postCtl = ; + // 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); + } - currentPostDay = utils.getDateForUnixTicks(post.create_at); - if(currentPostDay.getDate() !== previousPostDay.getDate() || currentPostDay.getMonth() !== previousPostDay.getMonth() || currentPostDay.getFullYear() !== previousPostDay.getFullYear()) { - postCtls.push( -
-
-
{currentPostDay.toDateString()}
-
- ); - } + var postCtl = ; - if (post.create_at > last_viewed && !rendered_last_viewed) { - rendered_last_viewed = true; - postCtls.push( -
-
-
New Messages
-
- ); + currentPostDay = utils.getDateForUnixTicks(post.create_at); + if(currentPostDay.getDate() !== previousPostDay.getDate() || currentPostDay.getMonth() !== previousPostDay.getMonth() || currentPostDay.getFullYear() !== previousPostDay.getFullYear()) { + postCtls.push( +
+
+
{currentPostDay.toDateString()}
+
+ ); + } + + if (post.create_at > last_viewed && !rendered_last_viewed) { + rendered_last_viewed = true; + postCtls.push( +
+
+
New Messages
+
+ ); + } + postCtls.push(postCtl); + previousPostDay = utils.getDateForUnixTicks(post.create_at); } - postCtls.push(postCtl); - previousPostDay = utils.getDateForUnixTicks(post.create_at); } - - if (posts == undefined) { + else { postCtls.push(
-- cgit v1.2.3-1-g7c22