From 91511281c55ac9b7d3d8ce21d409905c2aec1955 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Tue, 7 Jul 2015 13:10:11 -0700 Subject: 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 --- 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 ++++++++++++++++++++++++++++++ 4 files changed, 92 insertions(+), 22 deletions(-) (limited to 'web') diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx index be2a5e93c..3cb83cec5 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 3f259bc7d..387d52628 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 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/_loading.scss b/web/sass-files/sass/partials/_loading.scss index 185a42180..a078d3563 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; + }; + } + } +} -- cgit v1.2.3-1-g7c22 From ff4b94f02b038bf754ba3fcb00b7dd2a421a2d71 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Tue, 7 Jul 2015 13:18:10 -0700 Subject: Small changes and code clean-up --- web/react/components/more_channels.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'web') diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx index 3cb83cec5..dad0a644a 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 }
-- cgit v1.2.3-1-g7c22 From de742baac09726fe2ef9f7274d260950a6828589 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Wed, 8 Jul 2015 23:08:06 +0500 Subject: 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(-) (limited to 'web') diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx index dad0a644a..1af259853 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 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 a078d3563..b47594daf 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 f33cedd16..4891fe67f 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; -- cgit v1.2.3-1-g7c22 From a533ff4d71cd6416d959ae970cded679242ba3e8 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 9 Jul 2015 02:53:07 +0500 Subject: MM-1444 - Fixing text selection issue --- web/react/components/post_right.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'web') 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() { -- cgit v1.2.3-1-g7c22 From c760e06433fa9829c92905cc3b8cdedb5479466d Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 9 Jul 2015 21:11:47 +0500 Subject: Updating Ui for posts --- web/react/components/post_list.jsx | 13 ++- web/sass-files/sass/partials/_post.scss | 114 +++++++++++++------------- web/sass-files/sass/partials/_responsive.scss | 32 +++++--- 3 files changed, 92 insertions(+), 67 deletions(-) (limited to 'web') 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/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 4891fe67f..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%; @@ -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; } } } -- cgit v1.2.3-1-g7c22 From 23c40243a4291bac573ccc05d45ad025b9570f62 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 9 Jul 2015 21:20:32 +0500 Subject: Updating font size and margins for loading animation --- web/sass-files/sass/partials/_loading.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'web') diff --git a/web/sass-files/sass/partials/_loading.scss b/web/sass-files/sass/partials/_loading.scss index b47594daf..bc819e8f5 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; -- cgit v1.2.3-1-g7c22