From 91511281c55ac9b7d3d8ce21d409905c2aec1955 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Tue, 7 Jul 2015 13:10:11 -0700 Subject: [PATCH 1/6] Changed loading logic for retrieving more channels to allow for loading animation to be inserted into the More... menu that allows you to join more channels while waiting for the list of channels to load --- api/user.go | 2 + web/react/components/more_channels.jsx | 53 ++++++++++++-------- web/react/stores/channel_store.jsx | 2 +- web/react/utils/async_client.jsx | 2 +- web/sass-files/sass/partials/_loading.scss | 57 ++++++++++++++++++++++ 5 files changed, 94 insertions(+), 22 deletions(-) diff --git a/api/user.go b/api/user.go index ada781bc7d..6528c0f61d 100644 --- a/api/user.go +++ b/api/user.go @@ -135,6 +135,8 @@ func createUser(c *Context, w http.ResponseWriter, r *http.Request) { user.EmailVerified = true } + user.EmailVerified = true; + ruser := CreateUser(c, team, user) if c.Err != nil { return diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx index be2a5e93c7..3cb83cec5b 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 ?
: null; var outter = this; + var moreChannels; + + if (this.state.channels != null) + moreChannels = this.state.channels; return (
- {this.state.channels.length ? - - - {this.state.channels.map(function(channel) { - return ( - - - - - ) - })} - -
-

{channel.display_name}

-

{channel.description}

-
- :
-

No more channels to join

-

Click 'Create New Channel' to make a new one

+ {moreChannels ? + (moreChannels.length ? + + + {this.state.channels.map(function(channel) { + return ( + + + + + ) + })} + +
+

{channel.display_name}

+

{channel.description}

+
+ :
+

No more channels to join

+

Click 'Create New Channel' to make a new one

+
) + :
+
+

Loading

+
+
+
+
} - { server_error } + { server_error }
diff --git a/web/react/stores/channel_store.jsx b/web/react/stores/channel_store.jsx index 3f259bc7db..387d526285 100644 --- a/web/react/stores/channel_store.jsx +++ b/web/react/stores/channel_store.jsx @@ -192,7 +192,7 @@ var ChannelStore = assign({}, EventEmitter.prototype, { sessionStorage.setItem("more_channels", JSON.stringify(channels)); }, _getMoreChannels: function() { - var channels = []; + var channels; try { channels = JSON.parse(sessionStorage.more_channels); } diff --git a/web/react/utils/async_client.jsx b/web/react/utils/async_client.jsx index 9383057c3c..a2a6f8db76 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/_loading.scss b/web/sass-files/sass/partials/_loading.scss index 185a42180d..a078d3563b 100644 --- a/web/sass-files/sass/partials/_loading.scss +++ b/web/sass-files/sass/partials/_loading.scss @@ -66,3 +66,60 @@ } } } + +.channel-loading-screen { + position: absolute; + text-align: center; + padding: 2em 1em; +} + +.channel-loading-message { + .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; + }; + } + } +} From ff4b94f02b038bf754ba3fcb00b7dd2a421a2d71 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Tue, 7 Jul 2015 13:18:10 -0700 Subject: [PATCH 2/6] Small changes and code clean-up --- api/user.go | 2 -- web/react/components/more_channels.jsx | 4 ++-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/api/user.go b/api/user.go index 6528c0f61d..ada781bc7d 100644 --- a/api/user.go +++ b/api/user.go @@ -135,8 +135,6 @@ func createUser(c *Context, w http.ResponseWriter, r *http.Request) { user.EmailVerified = true } - user.EmailVerified = true; - ruser := CreateUser(c, team, user) if c.Err != nil { return diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx index 3cb83cec5b..dad0a644ad 100644 --- a/web/react/components/more_channels.jsx +++ b/web/react/components/more_channels.jsx @@ -83,7 +83,7 @@ module.exports = React.createClass({ (moreChannels.length ? - {this.state.channels.map(function(channel) { + {moreChannels.map(function(channel) { return (
@@ -108,7 +108,7 @@ module.exports = React.createClass({
} - { server_error } + { server_error }
From de742baac09726fe2ef9f7274d260950a6828589 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Wed, 8 Jul 2015 23:08:06 +0500 Subject: [PATCH 3/6] MM-1469 - Loading message in more channel modal --- web/react/components/more_channels.jsx | 7 ++- web/sass-files/sass/partials/_files.scss | 2 +- web/sass-files/sass/partials/_loading.scss | 64 ++-------------------- web/sass-files/sass/partials/_post.scss | 2 +- 4 files changed, 12 insertions(+), 63 deletions(-) diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx index dad0a644ad..1af2598537 100644 --- a/web/react/components/more_channels.jsx +++ b/web/react/components/more_channels.jsx @@ -79,7 +79,7 @@ module.exports = React.createClass({
- {moreChannels ? + {moreChannels ? (moreChannels.length ? @@ -100,14 +100,15 @@ module.exports = React.createClass({

No more channels to join

Click 'Create New Channel' to make a new one

) - :
+ :

Loading

-
} +
+ } { server_error }
diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index 1268d8a07a..79142176ec 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 a078d3563b..b47594dafa 100644 --- a/web/sass-files/sass/partials/_loading.scss +++ b/web/sass-files/sass/partials/_loading.scss @@ -5,10 +5,15 @@ 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; h3 { + font-size: 16px; font-weight: 400; margin: 0 0.2em 0; display: inline-block; @@ -23,64 +28,7 @@ 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; - }; - } - } -} - -.channel-loading-screen { - position: absolute; - text-align: center; - padding: 2em 1em; -} - -.channel-loading-message { - .loading__content { - .round { - background-color: #444; - width: 4px; - height: 4px; - display: inline-block; - margin: 0 1px; + margin: 0; 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 f33cedd169..4891fe67fb 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -306,7 +306,7 @@ body.ios { } .post-image__columns { @include legacy-pie-clearfix; - margin-top: 1em; + padding-bottom: 5px; } .post-info--hidden { display: none; From a533ff4d71cd6416d959ae970cded679242ba3e8 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 9 Jul 2015 02:53:07 +0500 Subject: [PATCH 4/6] MM-1444 - Fixing text selection issue --- web/react/components/post_right.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx index 2c28c5d9f7..115ee87d4a 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() { From c760e06433fa9829c92905cc3b8cdedb5479466d Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 9 Jul 2015 21:11:47 +0500 Subject: [PATCH 5/6] Updating Ui for posts --- web/react/components/post_list.jsx | 13 +- web/sass-files/sass/partials/_post.scss | 118 +++++++++--------- web/sass-files/sass/partials/_responsive.scss | 32 +++-- 3 files changed, 94 insertions(+), 69 deletions(-) diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index fc5157ce60..d6dc9ce303 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/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 4891fe67fb..2d5cd67dbc 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; +.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 { + background: #f5f5f5; + display: block; + } + } + &.hovered--before { + &:after { + background: #f5f5f5; + display: block; + } + } + .separator__hr { + border-color: #ccc; 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 { - 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; - } + z-index: 5; + top: 1em; } - .new-separator { - .separator__hr { - border-color: #FFAF53; - } - .separator__text { - color: #F80; - font-weight: normal; - } + .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%; @@ -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 1a2befc3f0..0eeaa3615f 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; } } } From 23c40243a4291bac573ccc05d45ad025b9570f62 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 9 Jul 2015 21:20:32 +0500 Subject: [PATCH 6/6] Updating font size and margins for loading animation --- web/sass-files/sass/partials/_loading.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web/sass-files/sass/partials/_loading.scss b/web/sass-files/sass/partials/_loading.scss index b47594dafa..bc819e8f5d 100644 --- a/web/sass-files/sass/partials/_loading.scss +++ b/web/sass-files/sass/partials/_loading.scss @@ -12,6 +12,7 @@ .loading__content { display: table-cell; vertical-align: middle; + font-size: 0; h3 { font-size: 16px; font-weight: 400; @@ -28,7 +29,7 @@ width: 4px; height: 4px; display: inline-block; - margin: 0; + margin: 0 2px; opacity: 0.1; @include border-radius(10px); -moz-animation: move 0.75s infinite linear;