duckietm/Nitro-Cool-UI
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-Cool-UI.git synced 2025-06-21 22:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Redone Friend-Bar

Browse Source
This commit is contained in:
duckietm 2024-04-10 06:44:10 +02:00
parent 78d5055b31
commit 1fd12e69d2
3 changed files with 45 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/friends/FriendsView.scss
View File

@ -128,20 +128,39 @@
&.friend-bar-item-active {
margin-bottom:21px;
}
&.friend-bar-search-item-active {
margin-bottom:10.5em;
background-color: #b69b83;
border: 2px solid #e2c1a3;
}
.friend-bar-item-head {
&.avatar {
top: -30px;
left: -30px;
top: -31px;
left: -25px;
}
&.group {
top: -5px;
left: -5px;
top: -31px;
left: -25px;
}
pointer-events: none;
}
.friend-bar-text {
overflow: hidden;
text-overflow: ellipsis;
// white-space: nowrap;
font-size: 13px;
line-height: 1;
color: #fff;
}
.font-size-friend {
font-size: 12px;
}
.avatar-image {
max-height: 80px;
}
@ -251,4 +270,4 @@
}
}
}
}
}

23
src/components/friends/views/friends-bar/FriendBarItemView.tsx
View File

@ -1,7 +1,7 @@
import { MouseEventType } from '@nitrots/nitro-renderer';
import { FindNewFriendsMessageComposer, MouseEventType } from '@nitrots/nitro-renderer';
import { FC, useEffect, useRef, useState } from 'react';
import { GetUserProfile, LocalizeText, MessengerFriend, OpenMessengerChat } from '../../../../api';
import { Base, LayoutAvatarImageView, LayoutBadgeImageView } from '../../../../common';
import { GetUserProfile, LocalizeText, MessengerFriend, OpenMessengerChat, SendMessageComposer } from '../../../../api';
import { Base, Button, LayoutAvatarImageView, LayoutBadgeImageView } from '../../../../common';
import { useFriends } from '../../../../hooks';
export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
@ -32,10 +32,16 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
if(!friend)
{
return (
<div ref={ elementRef } className="btn btn-friendsgen friend-bar-item friend-bar-search">
return (
<div ref={ elementRef } className={ 'btn btn-friendsgen friend-bar-item friend-bar-search ' + (isVisible ? 'friend-bar-search-item-active' : '') } onClick={ event => setVisible(prevValue => !prevValue) }>
<div className="friend-bar-item-head position-absolute"/>
<div className="text-truncate">{ LocalizeText('friend.bar.find.title') }</div>
<div className="friend-bar-text">{ LocalizeText('friend.bar.find.title') }</div>
{ isVisible &&
<div className="search-content mt-3">
<div className="bg-white text-black px-1 py-1 font-size-friend">{ LocalizeText('friend.bar.find.text') }</div>
<Button className="mt-2 mb-4" variant="white" onClick={ () => SendMessageComposer(new FindNewFriendsMessageComposer()) }>{ LocalizeText('friend.bar.find.button') }</Button>
</div>
}
</div>
);
}
@ -44,8 +50,11 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
<div ref={ elementRef } className={ 'btn btn-friendsgensuccess friend-bar-item ' + (isVisible ? 'friend-bar-item-active' : '') } onClick={ event => setVisible(prevValue => !prevValue) }>
<div className={ `friend-bar-item-head position-absolute ${ friend.id > 0 ? 'avatar': 'group' }` }>
{ (friend.id > 0) && <LayoutAvatarImageView headOnly={ !isVisible } figure={ friend.figure } direction={ 2 } /> }
{ (friend.id <= 0) && <LayoutBadgeImageView isGroup={ true } badgeCode={ friend.figure } /> }
<LayoutAvatarImageView headOnly={true} figure={
friend.id > 0 ? friend.figure : (friend.id <= 0 && friend.figure === 'ADM') ? 'ha-3409-1413-70.lg-285-89.ch-3032-1334-109.sh-3016-110.hd-185-1359.ca-3225-110-62.wa-3264-62-62.fa-1206-90.hr-3322-1403' : friend.figure
} isgroup={friend.id <= 0 ? 1 : 0} direction={friend.id > 0 ? 2 : 3} />
</div>
<div className="text-truncate">{ friend.name }</div>
{ isVisible &&
<div className="d-flex justify-content-between">

6
src/components/friends/views/friends-list/FriendsListView.tsx
View File

@ -11,6 +11,7 @@ import { FriendsSearchView } from './FriendsListSearchView';
export const FriendsListView: FC<{}> = props =>
{
const [ isFromSearchToolbar, setIsFromSearchToolbar ] = useState<boolean>(false);
const [ isVisible, setIsVisible ] = useState(false);
const [ selectedFriendsIds, setSelectedFriendsIds ] = useState<number[]>([]);
const [ showRoomInvite, setShowRoomInvite ] = useState<boolean>(false);
@ -96,12 +97,15 @@ export const FriendsListView: FC<{}> = props =>
{
case 'show':
setIsVisible(true);
setIsFromSearchToolbar(false);
return;
case 'hide':
setIsVisible(false);
setIsFromSearchToolbar(false);
return;
case 'toggle':
setIsVisible(prevValue => !prevValue);
setIsFromSearchToolbar(true);
return;
case 'request':
if(parts.length < 4) return;
@ -147,4 +151,4 @@ export const FriendsListView: FC<{}> = props =>
<FriendsRemoveConfirmationView selectedFriendsIds={ selectedFriendsIds } removeFriendsText={ removeFriendsText } onCloseClick={ () => setShowRemoveFriendsConfirmation(false) } removeSelectedFriends={ removeSelectedFriends } /> }
</>
);
};
};