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

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

@ -129,19 +129,38 @@
margin-bottom:21px; margin-bottom:21px;
} }
&.friend-bar-search-item-active {
margin-bottom:10.5em;
background-color: #b69b83;
border: 2px solid #e2c1a3;
}
.friend-bar-item-head { .friend-bar-item-head {
&.avatar { &.avatar {
top: -30px; top: -31px;
left: -30px; left: -25px;
} }
&.group { &.group {
top: -5px; top: -31px;
left: -5px; left: -25px;
} }
pointer-events: none; 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 { .avatar-image {
max-height: 80px; max-height: 80px;
} }

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 { FC, useEffect, useRef, useState } from 'react';
import { GetUserProfile, LocalizeText, MessengerFriend, OpenMessengerChat } from '../../../../api'; import { GetUserProfile, LocalizeText, MessengerFriend, OpenMessengerChat, SendMessageComposer } from '../../../../api';
import { Base, LayoutAvatarImageView, LayoutBadgeImageView } from '../../../../common'; import { Base, Button, LayoutAvatarImageView, LayoutBadgeImageView } from '../../../../common';
import { useFriends } from '../../../../hooks'; import { useFriends } from '../../../../hooks';
export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props => export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
@ -32,10 +32,16 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
if(!friend) if(!friend)
{ {
return ( return (
<div ref={ elementRef } className="btn btn-friendsgen friend-bar-item friend-bar-search"> <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="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> </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 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' }` }> <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) && <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>
<div className="text-truncate">{ friend.name }</div> <div className="text-truncate">{ friend.name }</div>
{ isVisible && { isVisible &&
<div className="d-flex justify-content-between"> <div className="d-flex justify-content-between">

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

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