friend bar changes

src/assets/styles/icons.scss

@@ -468,6 +468,24 @@ i {
             }
         }
 
+        &.icon-fb-profile {
+            background: url('../images/toolbar/icons/friend-bar/profile.png');
+            width: 21px;
+            height: 21px;
+        }
+
+        &.icon-fb-chat {
+            background: url('../images/toolbar/icons/friend-bar/chat.png');
+            width: 20px;
+            height: 21px;
+        }
+
+        &.icon-fb-visit {
+            background: url('../images/toolbar/icons/friend-bar/visit.png');
+            width: 21px;
+            height: 21px;
+        }
+
         &.spin {
             animation: rotating 1s linear infinite;
         }

src/views/friend-list/FriendListView.scss

@@ -3,4 +3,3 @@
 }
 
 @import './views//friend-bar/FriendBarView';
-@import './views/friend-bar-item/FriendBarItemView';

src/views/friend-list/views/friend-bar-item/FriendBarItemView.scss

@@ -0,0 +1,28 @@
+.friend-bar-item {
+    width: 130px;
+    margin: 0 3px;
+    z-index: 0;
+    position: relative;
+    padding-left:38px;
+    text-align: left;
+
+    &.friend-bar-item-active {
+        margin-bottom:21px;
+    }
+
+    .friend-bar-item-head {
+        top: -30px;
+        left: -30px;
+        pointer-events: none;
+    }
+
+    &.friend-bar-search {
+        .friend-bar-item-head {
+            top: -3px;
+            left: 5px;
+            width: 31px;
+            height: 34px;
+            background-image: url('../../../../assets/images/toolbar/friend-search.png');
+        } 
+    }
+}

src/views/friend-list/views/friend-bar-item/FriendBarItemView.tsx

@@ -1,18 +1,66 @@
-import { FC } from 'react';
+import { FollowFriendComposer, MouseEventType, Nitro } from 'nitro-renderer';
+import { FC, useEffect, useRef, useState } from 'react';
+import { LocalizeText } from '../../../../utils/LocalizeText';
+import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
 import { FriendBarItemViewProps } from './FriendBarItemView.types';
 
 export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
 {
     const { friend = null } = props;
+    const [isVisible, setVisible] = useState(false);
+
+    const toggleVisible = () => setVisible(prevCheck => !prevCheck);
+
+    const elementRef = useRef<HTMLDivElement>();
+
+    useEffect(() =>
+    {
+        function onClick(event: MouseEvent): void
+        {
+            const element = elementRef.current;
+
+            if((event.target !== element) && !element.contains((event.target as Node)))
+            {
+                setVisible(false);
+            }
+        }
+
+        document.addEventListener(MouseEventType.MOUSE_CLICK, onClick);
+
+        return () =>
+        {
+            document.removeEventListener(MouseEventType.MOUSE_CLICK, onClick);
+        }
+    }, [ elementRef, setVisible ]);
+    
+
+    const followFriend = () =>
+    {
+
+        Nitro.instance.communication.connection.send(new FollowFriendComposer(friend.id));
+    }
 
     if(!friend)
     {
         return (
-            <div>offline</div>
+            <div ref={ elementRef } className="btn btn-primary friend-bar-item friend-bar-search">
+                <div className="friend-bar-item-head position-absolute"/>
+                <div className="text-truncate">{ LocalizeText("friend.bar.find.title") }</div>
+            </div>
         );
     }
 
     return (
-        <div>{ friend.name }</div>
+        <div ref={ elementRef } className={"btn btn-success friend-bar-item " + (isVisible ? "friend-bar-item-active" : "")} onClick={ event => toggleVisible()}>
+            <div className="friend-bar-item-head position-absolute">
+                <AvatarImageView headOnly={true} figure={friend.figure} direction={2} />
+            </div>
+            <div className="text-truncate">{friend.name}</div>
+            {isVisible && <div className="d-flex justify-content-between">
+                <i className="icon icon-fb-chat cursor-pointer" />
+                {friend.followingAllowed && <i onClick={ event => followFriend() } className="icon icon-fb-visit cursor-pointer" />}
+                <i className="icon icon-fb-profile cursor-pointer" />
+            </div>}
+        </div>
     );
 }

src/views/friend-list/views/friend-bar/FriendBarView.scss

@@ -0,0 +1,7 @@
+.friend-bar {
+    .friend-bar-button {
+        z-index: 2;
+    }
+
+    @import '../friend-bar-item/FriendBarItemView.scss';
+}

src/views/friend-list/views/friend-bar/FriendBarView.tsx

@@ -24,12 +24,16 @@ export const FriendBarView: FC<FriendBarViewProps> = props =>
     }, [ indexOffset, friends ]);
 
     return (
-        <div className="d-flex">
-            <button type="button" className="btn btn-sm btn-primary" disabled={ !canDecreaseIndex } onClick={ event => setIndexOffset(indexOffset - 1) }>back</button>
+        <div className="d-flex friend-bar align-items-center">
+            <button type="button" className="btn btn-sm btn-black align-self-center friend-bar-button" disabled={!canDecreaseIndex} onClick={event => setIndexOffset(indexOffset - 1)}>
+                <i className="fas fa-chevron-left" />
+            </button>
             <FriendBarItemView friend={ (friends[ indexOffset ] || null) } />
             <FriendBarItemView friend={ (friends[ indexOffset + 1 ] || null) } />
             <FriendBarItemView friend={ (friends[ indexOffset + 2 ] || null) } />
-            <button type="button" className="btn btn-sm btn-primary" disabled={ !canIncreaseIndex } onClick={ event => setIndexOffset(indexOffset + 1) }>forward</button>
+            <button type="button" className="btn btn-sm btn-black align-self-center friend-bar-button" disabled={!canIncreaseIndex} onClick={event => setIndexOffset(indexOffset + 1)}>
+                <i className="fas fa-chevron-right" />
+            </button>
         </div>
     );
 }