From f8d3f9d4ecbb86c01f4cb13a5e41029b2330cc73 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaad@spinpunch.com>
Date: Wed, 3 Feb 2016 23:54:48 +0500
Subject: Multiple UI Improvements

---
 web/react/components/channel_loader.jsx      |  10 +++
 web/react/components/search_results_item.jsx | 118 +++++++++++++++------------
 2 files changed, 74 insertions(+), 54 deletions(-)

(limited to 'web/react/components')

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>
-- 
cgit v1.2.3-1-g7c22