friend bar changes

This commit is contained in:
Layne 2021-07-03 20:45:26 -04:00
parent c4e8a8cb48
commit 7780eb6592
10 changed files with 111 additions and 7 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -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;
}

View File

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

View File

@ -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');
}
}
}

View File

@ -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>
);
}

View File

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

View File

@ -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>
);
}