diff options
author | Asaad Mahmood <asaad@spinpunch.com> | 2016-02-03 23:54:48 +0500 |
---|---|---|
committer | Asaad Mahmood <asaad@spinpunch.com> | 2016-02-03 23:54:48 +0500 |
commit | f8d3f9d4ecbb86c01f4cb13a5e41029b2330cc73 (patch) | |
tree | 66b3ccb41bee086005245b8f51dad48e33461520 /web/react | |
parent | 9bba6c79882d1f5d14b98052caf59a11fc2388d5 (diff) | |
download | chat-f8d3f9d4ecbb86c01f4cb13a5e41029b2330cc73.tar.gz chat-f8d3f9d4ecbb86c01f4cb13a5e41029b2330cc73.tar.bz2 chat-f8d3f9d4ecbb86c01f4cb13a5e41029b2330cc73.zip |
Multiple UI Improvements
Diffstat (limited to 'web/react')
-rw-r--r-- | web/react/components/channel_loader.jsx | 10 | ||||
-rw-r--r-- | web/react/components/search_results_item.jsx | 118 |
2 files changed, 74 insertions, 54 deletions
diff --git a/web/react/components/channel_loader.jsx b/web/react/components/channel_loader.jsx index 712d6885f..cb1da90de 100644 --- a/web/react/components/channel_loader.jsx +++ b/web/react/components/channel_loader.jsx @@ -84,6 +84,16 @@ export default class ChannelLoader extends React.Component { } }); + $('body').on('mouseenter mouseleave', '.search-item__container .post', function mouseOver(ev) { + if (ev.type === 'mouseenter') { + $(this).closest('.search-item__container').find('.date-separator').addClass('hovered--after'); + $(this).closest('.search-item__container').next('div').find('.date-separator').addClass('hovered--before'); + } else { + $(this).closest('.search-item__container').find('.date-separator').removeClass('hovered--after'); + $(this).closest('.search-item__container').next('div').find('.date-separator').removeClass('hovered--before'); + } + }); + $('body').on('mouseenter mouseleave', '.post.post--comment.same--root', function mouseOver(ev) { if (ev.type === 'mouseenter') { $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--comment'); diff --git a/web/react/components/search_results_item.jsx b/web/react/components/search_results_item.jsx index 0ad091d5b..544ba920a 100644 --- a/web/react/components/search_results_item.jsx +++ b/web/react/components/search_results_item.jsx @@ -59,64 +59,74 @@ export default class SearchResultsItem extends React.Component { }; return ( - <div - className='search-item-container post' - > - <div className='search-channel__name'>{channelName}</div> - <div className='post__content'> - <div className='post__img'> - <img - src={'/api/v1/users/' + this.props.post.user_id + '/image?time=' + timestamp + '&' + utils.getSessionIndex()} - height='36' - width='36' + <div className='search-item__container'> + <div className='date-separator'> + <hr className='separator__hr' /> + <div className='separator__text'> + <FormattedDate + value={this.props.post.create_at} + day='numeric' + month='long' + year='numeric' /> </div> - <div> - <ul className='post__header'> - <li className='col__name'><strong><UserProfile userId={this.props.post.user_id} /></strong></li> - <li className='col'> - <time className='search-item-time'> - <FormattedDate - value={this.props.post.create_at} - day='numeric' - month='long' - year='numeric' - hour12={true} - hour='2-digit' - minute='2-digit' - /> - </time> - </li> - <li> - <a - href='#' - className='search-item__jump' - onClick={this.handleClick} - > - <FormattedMessage - id='search_item.jump' - defaultMessage='Jump' - /> - </a> - </li> - <li> - <a - href='#' - className='comment-icon__container search-item__comment' - onClick={this.handleFocusRHSClick} - > - <span - className='comment-icon' - dangerouslySetInnerHTML={{__html: Constants.REPLY_ICON}} - /> - </a> - </li> - </ul> - <div className='search-item-snippet'> - <span - dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.props.post.message, formattingOptions)}} + </div> + <div + className='post' + > + <div className='search-channel__name'>{channelName}</div> + <div className='post__content'> + <div className='post__img'> + <img + src={'/api/v1/users/' + this.props.post.user_id + '/image?time=' + timestamp + '&' + utils.getSessionIndex()} + height='36' + width='36' /> </div> + <div> + <ul className='post__header'> + <li className='col__name'><strong><UserProfile userId={this.props.post.user_id} /></strong></li> + <li className='col'> + <time className='search-item-time'> + <FormattedDate + value={this.props.post.create_at} + hour12={true} + hour='2-digit' + minute='2-digit' + /> + </time> + </li> + <li> + <a + href='#' + className='search-item__jump' + onClick={this.handleClick} + > + <FormattedMessage + id='search_item.jump' + defaultMessage='Jump' + /> + </a> + </li> + <li> + <a + href='#' + className='comment-icon__container search-item__comment' + onClick={this.handleFocusRHSClick} + > + <span + className='comment-icon' + dangerouslySetInnerHTML={{__html: Constants.REPLY_ICON}} + /> + </a> + </li> + </ul> + <div className='search-item-snippet'> + <span + dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.props.post.message, formattingOptions)}} + /> + </div> + </div> </div> </div> </div> |