diff options
-rw-r--r-- | webapp/components/post_view/components/date_separator.jsx | 27 | ||||
-rw-r--r-- | webapp/components/rhs_comment.jsx | 3 | ||||
-rw-r--r-- | webapp/components/rhs_root_post.jsx | 3 | ||||
-rw-r--r-- | webapp/components/rhs_thread.jsx | 90 | ||||
-rw-r--r-- | webapp/sass/layout/_post-right.scss | 9 |
5 files changed, 90 insertions, 42 deletions
diff --git a/webapp/components/post_view/components/date_separator.jsx b/webapp/components/post_view/components/date_separator.jsx new file mode 100644 index 000000000..18dc0c7ff --- /dev/null +++ b/webapp/components/post_view/components/date_separator.jsx @@ -0,0 +1,27 @@ +import React from 'react'; +import {FormattedDate} from 'react-intl'; + +export default class DateSeparator extends React.Component { + render() { + return ( + <div + className='date-separator' + > + <hr className='separator__hr'/> + <div className='separator__text'> + <FormattedDate + value={this.props.date} + weekday='short' + month='short' + day='2-digit' + year='numeric' + /> + </div> + </div> + ); + } +} + +DateSeparator.propTypes = { + date: React.PropTypes.instanceOf(Date) +}; diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx index c9a582877..52e4d9851 100644 --- a/webapp/components/rhs_comment.jsx +++ b/webapp/components/rhs_comment.jsx @@ -564,9 +564,6 @@ export default class RhsComment extends React.Component { } const timeOptions = { - day: 'numeric', - month: 'short', - year: 'numeric', hour: '2-digit', minute: '2-digit', hour12: !this.props.useMilitaryTime diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx index 6a6b01a7f..83d930bca 100644 --- a/webapp/components/rhs_root_post.jsx +++ b/webapp/components/rhs_root_post.jsx @@ -511,9 +511,6 @@ export default class RhsRootPost extends React.Component { } const timeOptions = { - day: 'numeric', - month: 'short', - year: 'numeric', hour: '2-digit', minute: '2-digit', hour12: !this.props.useMilitaryTime diff --git a/webapp/components/rhs_thread.jsx b/webapp/components/rhs_thread.jsx index 3c0b2e114..2c1d03901 100644 --- a/webapp/components/rhs_thread.jsx +++ b/webapp/components/rhs_thread.jsx @@ -8,6 +8,7 @@ import RootPost from './rhs_root_post.jsx'; import Comment from './rhs_comment.jsx'; import FileUploadOverlay from './file_upload_overlay.jsx'; import FloatingTimestamp from './post_view/components/floating_timestamp.jsx'; +import DateSeparator from './post_view/components/date_separator.jsx'; import PostStore from 'stores/post_store.jsx'; import UserStore from 'stores/user_store.jsx'; @@ -325,6 +326,7 @@ export default class RhsThread extends React.Component { const postsArray = this.state.postsArray; const selected = this.state.selected; const profiles = this.state.profiles || {}; + let previousPostDay = Utils.getDateForUnixTicks(selected.create_at); if (postsArray == null || selected == null) { return ( @@ -355,6 +357,55 @@ export default class RhsThread extends React.Component { rootStatus = this.state.statuses[selected.user_id] || 'offline'; } + const commentsLists = []; + for (let i = 0; i < postsArray.length; i++) { + const comPost = postsArray[i]; + let p; + if (UserStore.getCurrentId() === comPost.user_id) { + p = UserStore.getCurrentUser(); + } else { + p = profiles[comPost.user_id]; + } + + let isFlagged = false; + if (this.state.flaggedPosts) { + isFlagged = this.state.flaggedPosts.get(comPost.id) === 'true'; + } + + let status = 'offline'; + if (this.state.statuses && p && p.id) { + status = this.state.statuses[p.id] || 'offline'; + } + + const keyPrefix = comPost.id ? comPost.id : comPost.pending_post_id; + + const currentPostDay = Utils.getDateForUnixTicks(comPost.create_at); + + if (currentPostDay.toDateString() !== previousPostDay.toDateString()) { + previousPostDay = currentPostDay; + commentsLists.push( + <DateSeparator + date={currentPostDay} + />); + } + + commentsLists.push( + <div key={keyPrefix + 'commentKey'}> + <Comment + ref={comPost.id} + post={comPost} + user={p} + currentUser={this.props.currentUser} + compactDisplay={this.state.compactDisplay} + useMilitaryTime={this.props.useMilitaryTime} + isFlagged={isFlagged} + status={status} + isBusy={this.state.isBusy} + /> + </div> + ); + } + return ( <div className='post-right__container'> <FileUploadOverlay overlayType='right'/> @@ -384,6 +435,9 @@ export default class RhsThread extends React.Component { onScroll={this.handleScroll} > <div className='post-right__scroll'> + <DateSeparator + date={previousPostDay} + /> <RootPost ref={selected.id} post={selected} @@ -401,41 +455,7 @@ export default class RhsThread extends React.Component { ref='rhspostlist' className='post-right-comments-container' > - {postsArray.map((comPost) => { - let p; - if (UserStore.getCurrentId() === comPost.user_id) { - p = UserStore.getCurrentUser(); - } else { - p = profiles[comPost.user_id]; - } - - let isFlagged = false; - if (this.state.flaggedPosts) { - isFlagged = this.state.flaggedPosts.get(comPost.id) === 'true'; - } - - let status = 'offline'; - if (this.state.statuses && p && p.id) { - status = this.state.statuses[p.id] || 'offline'; - } - - const keyPrefix = comPost.id ? comPost.id : comPost.pending_post_id; - - return ( - <Comment - ref={comPost.id} - key={keyPrefix + 'commentKey'} - post={comPost} - user={p} - currentUser={this.props.currentUser} - compactDisplay={this.state.compactDisplay} - useMilitaryTime={this.props.useMilitaryTime} - isFlagged={isFlagged} - status={status} - isBusy={this.state.isBusy} - /> - ); - })} + {commentsLists} </div> <div className='post-create__container'> <CreateComment diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss index 455ed7fff..9a0f658a2 100644 --- a/webapp/sass/layout/_post-right.scss +++ b/webapp/sass/layout/_post-right.scss @@ -53,6 +53,12 @@ border: none; } + .date-separator { + hr { + border-top: 1px solid #eee; + } + } + .post-create__container { width: 100%; @@ -147,7 +153,8 @@ @include flex(1 1 auto); overflow: auto; position: relative; - + padding-top: 10px; + .file-preview__container { margin-top: 5px; } |