From 872f001fbbebe93ae7fc4b92a6d17a378e0d50d5 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Tue, 15 Dec 2015 14:56:40 -0500 Subject: [PATCH 1/6] Added floating post timestamp --- web/react/components/posts_view.jsx | 92 ++++++++++++++++--- web/sass-files/sass/partials/_post.scss | 32 ++++++- web/sass-files/sass/partials/_responsive.scss | 5 +- 3 files changed, 111 insertions(+), 18 deletions(-) diff --git a/web/react/components/posts_view.jsx b/web/react/components/posts_view.jsx index e116fdeeaf..83e580307b 100644 --- a/web/react/components/posts_view.jsx +++ b/web/react/components/posts_view.jsx @@ -26,7 +26,11 @@ export default class PostsView extends React.Component { this.wasAtBottom = true; this.scrollHeight = 0; - this.state = {displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false')}; + this.state = { + displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'), + isScrolling: true, // TODO change this once we start detecting scrolling + topPostId: null + }; } static get SCROLL_TYPE_FREE() { return 1; @@ -69,6 +73,37 @@ export default class PostsView extends React.Component { this.props.postViewScrolled(this.isAtBottom()); this.prevScrollHeight = this.refs.postlist.scrollHeight; this.prevOffsetTop = this.jumpToPostNode.offsetTop; + + this.updateFloatingTimestamp(); + } + updateFloatingTimestamp() { + if (this.props.postList) { + // iterate through posts starting at the bottom since users are more likely to be viewing newer posts + for (let i = 0; i < this.props.postList.order.length; i++) { + const id = this.props.postList.order[i]; + const element = ReactDOM.findDOMNode(this.refs[id]); + + if (!element || element.offsetTop + element.clientHeight <= this.refs.postlist.scrollTop) { + // this post is off the top of the screen so the last one is at the top of the screen + let topPostId; + + if (i > 0) { + topPostId = this.props.postList.order[i - 1]; + } else { + // the first post we look at should always be on the screen, but handle that case anyway + topPostId = id; + } + + if (topPostId !== this.state.topPostId) { + this.setState({ + topPostId + }); + } + + break; + } + } + } } loadMorePostsTop() { this.props.loadMorePostsTopClicked(); @@ -322,6 +357,12 @@ export default class PostsView extends React.Component { if (nextState.displayNameType !== this.state.displayNameType) { return true; } + if (this.state.topPostId !== nextState.topPostId) { + return true; + } + if (this.state.isScrolling !== nextState.isScrolling) { + return true; + } return false; } @@ -377,20 +418,43 @@ export default class PostsView extends React.Component { } } + let floatingTimestamp = null; + if (this.state.topPostId) { + const topPost = this.props.postList.posts[this.state.topPostId]; + const dateString = Utils.getDateForUnixTicks(topPost.create_at).toDateString(); + + let timestampClass = 'post-list__timestamp'; + if (this.state.isScrolling) { + timestampClass += ' scrolling'; + } + + floatingTimestamp = ( +
+ {dateString} +
+ ); + } + return ( -
-
-
- {moreMessagesTop} - {postElements} - {moreMessagesBottom} +
+ {floatingTimestamp} +
+
+
+ {moreMessagesTop} + {postElements} + {moreMessagesBottom} +
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index fbebb4e98f..4e5968254a 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -211,6 +211,10 @@ body.ios { overflow-y: hidden; height: 100%; + .inactive { + display: none; + } + .post-list-holder-by-time { background: #fff; overflow-y: scroll; @@ -222,9 +226,6 @@ body.ios { &::-webkit-scrollbar { width: 0px !important; } - &.inactive { - display: none; - } &.active { display: inline; } @@ -247,6 +248,31 @@ body.ios { } } +.post-list__timestamp { + position: absolute; + top: 8px; + left: 50%; + z-index: 50; + width: 120px; + text-align: center; + background: $primary-color; + color: #fff; + @include border-radius(3px); + font-size: 12px; + line-height: 25px; + margin-left: -60px; + -webkit-font-smoothing: initial; + @include single-transition(all, 0.3s, ease, 1.0s); + @include translateY(-45px); + @include opacity(0); + + &.scrolling { + @include single-transition(all, 0.3s, ease); + @include translateY(0); + @include opacity(0.8); + } +} + .post-create__container { form { width: 100%; diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 2aa130fa9e..c493c6aeb7 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -241,6 +241,9 @@ } } } + .post-list__timestamp { + display: block; + } .signup-team__container { padding: 30px 0; margin-bottom: 30px; @@ -795,4 +798,4 @@ font-size: 2em; } } -} \ No newline at end of file +} From 07638f7e7dd6718155eb650562d71063e7756de5 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Tue, 15 Dec 2015 15:55:52 -0500 Subject: [PATCH 2/6] Added DelayedAction class to use to handle stopping scrolling --- web/react/components/posts_view.jsx | 19 ++++++++++++++++- web/react/utils/delayed_action.jsx | 27 +++++++++++++++++++++++++ web/sass-files/sass/partials/_post.scss | 2 +- 3 files changed, 46 insertions(+), 2 deletions(-) create mode 100644 web/react/utils/delayed_action.jsx diff --git a/web/react/components/posts_view.jsx b/web/react/components/posts_view.jsx index 83e580307b..187cf2a711 100644 --- a/web/react/components/posts_view.jsx +++ b/web/react/components/posts_view.jsx @@ -7,6 +7,7 @@ import * as EventHelpers from '../dispatcher/event_helpers.jsx'; import * as Utils from '../utils/utils.jsx'; import Post from './post.jsx'; import Constants from '../utils/constants.jsx'; +import DelayedAction from '../utils/delayed_action.jsx'; const Preferences = Constants.Preferences; export default class PostsView extends React.Component { @@ -15,6 +16,7 @@ export default class PostsView extends React.Component { this.updateState = this.updateState.bind(this); this.handleScroll = this.handleScroll.bind(this); + this.handleScrollStop = this.handleScrollStop.bind(this); this.isAtBottom = this.isAtBottom.bind(this); this.loadMorePostsTop = this.loadMorePostsTop.bind(this); this.loadMorePostsBottom = this.loadMorePostsBottom.bind(this); @@ -26,9 +28,11 @@ export default class PostsView extends React.Component { this.wasAtBottom = true; this.scrollHeight = 0; + this.scrollStopAction = new DelayedAction(this.handleScrollStop); + this.state = { displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'), - isScrolling: true, // TODO change this once we start detecting scrolling + isScrolling: false, topPostId: null }; } @@ -75,6 +79,19 @@ export default class PostsView extends React.Component { this.prevOffsetTop = this.jumpToPostNode.offsetTop; this.updateFloatingTimestamp(); + + if (!this.state.isScrolling) { + this.setState({ + isScrolling: true + }); + } + + this.scrollStopAction.fireAfter(1000); + } + handleScrollStop() { + this.setState({ + isScrolling: false + }); } updateFloatingTimestamp() { if (this.props.postList) { diff --git a/web/react/utils/delayed_action.jsx b/web/react/utils/delayed_action.jsx new file mode 100644 index 0000000000..4f6239ad02 --- /dev/null +++ b/web/react/utils/delayed_action.jsx @@ -0,0 +1,27 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +export default class DelayedAction { + constructor(action) { + this.action = action; + + this.timer = -1; + + // bind fire since it doesn't get passed the correct this value with setTimeout + this.fire = this.fire.bind(this); + } + + fire() { + this.action(); + + this.timer = -1; + } + + fireAfter(timeout) { + if (this.timer >= 0) { + window.clearTimeout(this.timer); + } + + this.timer = window.setTimeout(this.fire, timeout); + } +} diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 4e5968254a..9acac9532a 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -262,7 +262,7 @@ body.ios { line-height: 25px; margin-left: -60px; -webkit-font-smoothing: initial; - @include single-transition(all, 0.3s, ease, 1.0s); + @include single-transition(all, 0.3s, ease); @include translateY(-45px); @include opacity(0); From c7fb1f7fe94cd018daa7de2b85a2246eaff9f111 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Tue, 15 Dec 2015 16:31:07 -0500 Subject: [PATCH 3/6] Hid floating timestamp header on non-mobile --- web/react/components/posts_view.jsx | 5 +++++ web/sass-files/sass/partials/_post.scss | 1 + 2 files changed, 6 insertions(+) diff --git a/web/react/components/posts_view.jsx b/web/react/components/posts_view.jsx index 187cf2a711..a4dd51e19f 100644 --- a/web/react/components/posts_view.jsx +++ b/web/react/components/posts_view.jsx @@ -94,6 +94,11 @@ export default class PostsView extends React.Component { }); } updateFloatingTimestamp() { + // skip this in non-mobile view since that's when the timestamp is visible + if ($(window).width() > 768) { + return; + } + if (this.props.postList) { // iterate through posts starting at the bottom since users are more likely to be viewing newer posts for (let i = 0; i < this.props.postList.order.length; i++) { diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 9acac9532a..88842c973a 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -265,6 +265,7 @@ body.ios { @include single-transition(all, 0.3s, ease); @include translateY(-45px); @include opacity(0); + display: none; &.scrolling { @include single-transition(all, 0.3s, ease); From b4eb83d66ff3304653bfc80a1b2f4982351eae73 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Wed, 16 Dec 2015 09:30:46 -0500 Subject: [PATCH 4/6] Added scroll to bottom arrows for mobile --- web/react/components/posts_view.jsx | 27 +++++++++++++++++++++--- web/sass-files/sass/partials/_post.scss | 18 ++++++++++++++++ web/static/images/postArrows.png | Bin 0 -> 5684 bytes 3 files changed, 42 insertions(+), 3 deletions(-) create mode 100644 web/static/images/postArrows.png diff --git a/web/react/components/posts_view.jsx b/web/react/components/posts_view.jsx index a4dd51e19f..aedf431af9 100644 --- a/web/react/components/posts_view.jsx +++ b/web/react/components/posts_view.jsx @@ -23,6 +23,7 @@ export default class PostsView extends React.Component { this.createPosts = this.createPosts.bind(this); this.updateScrolling = this.updateScrolling.bind(this); this.handleResize = this.handleResize.bind(this); + this.scrollToBottom = this.scrollToBottom.bind(this); this.jumpToPostNode = null; this.wasAtBottom = true; @@ -283,9 +284,7 @@ export default class PostsView extends React.Component { } updateScrolling() { if (this.props.scrollType === PostsView.SCROLL_TYPE_BOTTOM) { - window.requestAnimationFrame(() => { - this.refs.postlist.scrollTop = this.refs.postlist.scrollHeight; - }); + this.scrollToBottom(); } else if (this.props.scrollType === PostsView.SCROLL_TYPE_NEW_MESSAGE) { window.requestAnimationFrame(() => { // If separator exists scroll to it. Otherwise scroll to bottom. @@ -335,6 +334,11 @@ export default class PostsView extends React.Component { handleResize() { this.updateScrolling(); } + scrollToBottom() { + window.requestAnimationFrame(() => { + this.refs.postlist.scrollTop = this.refs.postlist.scrollHeight; + }); + } componentDidMount() { if (this.props.postList != null) { this.updateScrolling(); @@ -460,9 +464,26 @@ export default class PostsView extends React.Component { ); } + let scrollToBottomArrows = null; + if ($(window).width() <= 768) { + let scrollToBottomArrowsClass = 'post-list__arrows'; + if (this.state.isScrolling && !this.wasAtBottom) { + scrollToBottomArrowsClass += ' scrolling'; + } + + scrollToBottomArrows = ( +
+ ); + } + return (
{floatingTimestamp} + {scrollToBottomArrows}
KLZ*U+IBfRsybQWXdwQbLP>6pAqfylh#{fb6;Z(vMMVS~$e@S=j*ftg6;Uhf59&ghTmgWD0l;*T zI709Y^p6lP1rIRMx#05C~cW=H_Aw*bJ-5DT&Z2n+x)QHX^p z00esgV8|mQcmRZ%02D^@S3L16t`O%c004NIvOKvYIYoh62rY33S640`D9%Y2D-rV&neh&#Q1i z007~1e$oCcFS8neI|hJl{-P!B1ZZ9hpmq0)X0i`JwE&>$+E?>%_LC6RbVIkUx0b+_+BaR3cnT7Zv!AJxW zizFb)h!jyGOOZ85F;a?DAXP{m@;!0_IfqH8(HlgRxt7s3}k3K`kFu>>-2Q$QMFfPW!La{h336o>X zu_CMttHv6zR;&ZNiS=X8v3CR#fknUxHUxJ0uoBa_M6WNWeqIg~6QE69c9o#eyhGvpiOA@W-aonk<7r1(?fC{oI5N*U!4 zfg=2N-7=cNnjjOr{yriy6mMFgG#l znCF=fnQv8CDz++o6_Lscl}eQ+l^ZHARH>?_s@|##Rr6KLRFA1%Q+=*RRWnoLsR`7U zt5vFIcfW3@?wFpwUVxrVZ>QdQz32KIeJ}k~{cZZE^+ya? z2D1z#2HOnI7(B%_ac?{wFUQ;QQA1tBKtrWrm0_3Rgps+?Jfqb{jYbcQX~taRB;#$y zZN{S}1|}gUOHJxc?wV3fxuz+mJ4`!F$IZ;mqRrNsHJd##*D~ju=bP7?-?v~|cv>vB zsJ6IeNwVZxrdjT`yl#bBIa#GxRa#xMMy;K#CDyyGyQdMSxlWT#tDe?p!?5wT$+oGt z8L;Kp2HUQ-ZMJ=3XJQv;x5ci*?vuTfeY$;({XGW_huIFR9a(?@3)XSs8O^N5RyOM=TTmp(3=8^+zpz2r)C z^>JO{deZfso3oq3?Wo(Y?l$ge?uXo;%ru`Vo>?<<(8I_>;8Eq#KMS9gFl*neeosSB zfoHYnBQIkwkyowPu(zdms`p{<7e4kra-ZWq<2*OsGTvEV%s0Td$hXT+!*8Bnh2KMe zBmZRodjHV?r+_5^X9J0WL4jKW`}lf%A-|44I@@LTvf1rHjG(ze6+w@Jt%Bvjts!X0 z?2xS?_ve_-kiKB_KiJlZ$9G`c^=E@oNG)mWWaNo-3TIW8)$Hg0Ub-~8?KhvJ>$ z3*&nim@mj(aCxE5!t{lw7O5^0EIO7zOo&c6l<+|iDySBWCGrz@C5{St!X3hAA}`T4 z(TLbXTq+(;@<=L8dXnssyft|w#WSTW<++3>sgS%(4NTpeI-VAqb|7ssJvzNHgOZVu zaYCvgO_R1~>SyL=cFU|~g|hy|Zi}}s9+d~lYqOB71z9Z$wnC=pR9Yz4DhIM>Wmjgu z&56o6maCpC&F##y%G;1PobR9i?GnNg;gYtchD%p19a!eQtZF&3JaKv33gZ<8D~47E ztUS1iwkmDaPpj=$m#%)jCVEY4fnLGNg2A-`YwHVD3gv};>)hAvT~AmqS>Lr``i7kw zJ{5_It`yrBmlc25DBO7E8;5VoznR>Ww5hAaxn$2~(q`%A-YuS64wkBy=9dm`4cXeX z4c}I@?e+FW+b@^RDBHV(wnMq2zdX3SWv9u`%{xC-q*U}&`cyXV(%rRT*Z6MH?i+i& z_B8C(+grT%{XWUQ+f@NoP1R=AW&26{v-dx)iK^-Nmiuj8txj!m?Z*Ss1N{dh4z}01 z)YTo*JycSU)+_5r4#yw9{+;i4Ee$peRgIj+;v;ZGdF1K$3E%e~4LaI(jC-u%2h$&R z9cLXcYC@Xwnns&bn)_Q~Te?roKGD|d-g^8;+aC{{G(1^(O7m37Y1-+6)01cN&y1aw zoqc{T`P^XJqPBbIW6s}d4{z_f5Om?vMgNQEJG?v2T=KYd^0M3I6IZxbny)%vZR&LD zJpPl@Psh8QyPB@KTx+@RdcC!KX7}kEo;S|j^u2lU7XQ}Oo;f|;z4Ll+_r>@1-xl3| zawq-H%e&ckC+@AhPrP6BKT#_XdT7&;F71j}Joy zkC~6lh7E@6o;W@^IpRNZ{ptLtL(gQ-CY~4mqW;US7Zxvm_|@yz&e53Bp_lTPlfP|z zrTyx_>lv@x#=^!PzR7qqF<$gm`|ZJZ+;<)Cqu&ot2z=0000WV@Og>004R=004l4008;_004mL004C`008P>0026e000+nl3&F} z000YLNklZ&X#r~$-=n9PvTG|^ZwsWT-r zCX$XgC_-fjscp2HHW{(ipmr29riRoC(^AH1fu_TcI2e^_)GDxKLzRHbuU%O7=j%V` zIX5qF_q~ni^v%3^!?JtM`P_Tnx#ygFRq%hQ{QQr{qr1MB9X!v2lM$wp_>6yqpsE1u zko=7EBXAnsDv@9>-8?;24+&DxIZb2_3&V@-`Hn4|4}sI@e;j}y=6^f@58ZACc&Z@< zeL;*ZK@zsO8C$$kwr~<~K>()Ht){0S*aN@?z)9bAF~BOG=N}kSrBbnQzHH%r*z%nL zpC%f$X(S{VzzhIk03xqkx$;(TZ|?!MT0Ij$H~V^o$&0S8uCAuY$jEE}O8_jG3P?Y2PXJgN85x<~)6>%|wxzAD?KnZk z)Au#(Oo{=60YuPfEbQ#;JjMICOeRxnOiWA;fTd)_9CF=|Kp{nNAtdKMTue+%j>%+d z_hrk~t5;6~(39N}#PJ=#AQC8 zb6KO~2Owh|ufxv8}DG?`gGKqfBh#tyb$jxiv@ZqWY$$rb9f>d*w#2zrX)_ za&mGm03*E%vNP#t=HdYuQ&Li1=#x$K!FGIdkS$0MY?G#VivcQp<#R7DE9<0npOauQ+ky#5*33$0etDczC!k zH#c`9fK)PiF0(#OC*{+b^;UpOUB7<)rje16J_T^j4?q0yZ2&9CJ}m{8Q1N0f24o>; zh#`+0Ia20!yC>xg7#kbAyJ^#=EdZ7=kTXeUC_QJ=s3!nemY0{e#cH+o%gJ`T-IE`D z@WIbTa8Y8{lme833?)Ofg1a6%bZEEB<+95eVzb!>wr<_}69CI8)6mj8GK-#Ca;@e0 z`T1LIHrt?_Oqa_wap1s#UF4QY{$`G?2mM7=7IK~dxo_XTold87T+X2J@$sQI-+c3R zGH4M+$T)f~0+3!%Q1JT1#Ke%CET_|HD=#nK!NARvgYyR{2boqIwy02TsB&&$hu&1$s{D0q(?pMLsjoy+BN$bHvpwSKdC z^X69xZXxN5CH+wnwIHV?$cPu=F!J>|6zb>Et);~F2?`cz8#ivu8yy|J!%x9AIy(B_ zb?essnA~z9>Cus1!G^hH*G#fAMCyHHlWmp6>X#8T5BBxrGgu`y*Z??4PY~(VR99DLmX(z)A}}Gr4;Hzq z%2!1nEGk(HyLaz?d2({{8@Jm%e(cz>Hz*S7MPXkLV0l(n)=L(PrRV$1oW)}4&dA94 z5v`qi($C5_R#jDPce~vacDud5u(0qY>MXFOTCl&0UdUjgN$`@QqM|K!yWPTO5=W07 zEv9$FK$%D!DbWL1mX?g36j6;ipd!{HbzDJj`Z>*HL1piw&Jlmv ze06p8y8xb+fJ_3gEIvN|`M$ostN!5n`ue_zkB@(zlJg`9xTnvYIdi~YHRE(ThYue< zyn%vHq`0D&Y*~zqjI=4K$IhKQ_nsff)Y#bAXU%5wC8^){_V%_@Unj*ETun{QZp>OUoX$TCFF8gh(mCB?HK8Zf>qtqR(tLcg&wZ z{~3z1ICzjf=@KQ$UnHo^JqtozGFB_TB$P46RF(M zQr3|Oz^Kt^*4(^#vr*xo{gvamECz122u>A9%R=Q3vZJHp&kEh?vxta@9Lg^Zl&Kg1 zERTwcdbX>p>t9ObT)K4WPZYowD}_^1(TgFYY4jHZ$Y^V8JEz3Bo}Qle=;-KN0IO-e zTpb-9ooh0gE-4ILXX$qaCg;?M0!qLw3l{Qzslq@S06g8?+9vKs;YN99*;8+IJes^wV@Iv2lp@l6>Zd1R#xs+vQZ6K3G-@m^|ZbL<8pZ}o&D%q&n;dDA}KDynu^78VZF>U#I zfx;0$pWeizc-u`K-Cn@ zpwwYHjyWZ$W?JiBIw|O++r=D< Date: Wed, 16 Dec 2015 09:39:26 -0500 Subject: [PATCH 5/6] Cleaned up floating post components --- web/react/components/posts_view.jsx | 89 +++++++++++++++++------------ 1 file changed, 54 insertions(+), 35 deletions(-) diff --git a/web/react/components/posts_view.jsx b/web/react/components/posts_view.jsx index aedf431af9..a28efbd041 100644 --- a/web/react/components/posts_view.jsx +++ b/web/react/components/posts_view.jsx @@ -444,46 +444,22 @@ export default class PostsView extends React.Component { } } - let floatingTimestamp = null; + let topPost = null; if (this.state.topPostId) { - const topPost = this.props.postList.posts[this.state.topPostId]; - const dateString = Utils.getDateForUnixTicks(topPost.create_at).toDateString(); - - let timestampClass = 'post-list__timestamp'; - if (this.state.isScrolling) { - timestampClass += ' scrolling'; - } - - floatingTimestamp = ( -
- {dateString} -
- ); - } - - let scrollToBottomArrows = null; - if ($(window).width() <= 768) { - let scrollToBottomArrowsClass = 'post-list__arrows'; - if (this.state.isScrolling && !this.wasAtBottom) { - scrollToBottomArrowsClass += ' scrolling'; - } - - scrollToBottomArrows = ( -
- ); + topPost = this.props.postList.posts[this.state.topPostId]; } return (
- {floatingTimestamp} - {scrollToBottomArrows} + +
768) { + return