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

Redesign Friends bar and Staff Alert

Browse Source
This commit is contained in:
duckietm 2024-04-04 13:52:39 +02:00
parent 9da0e32702
commit d850e6568d
4 changed files with 46 additions and 20 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

@ -3,11 +3,11 @@ import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { LocalizeText, MessengerFriend, SendMessageComposer } from '../../../../api'; import { LocalizeText, MessengerFriend, SendMessageComposer } from '../../../../api';
import { Button, Flex, NitroCardAccordionSetView, NitroCardAccordionView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common'; import { Button, Flex, NitroCardAccordionSetView, NitroCardAccordionView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
import { useFriends } from '../../../../hooks'; import { useFriends } from '../../../../hooks';
import { FriendsListGroupView } from './friends-list-group/FriendsListGroupView';
import { FriendsListRequestView } from './friends-list-request/FriendsListRequestView';
import { FriendsRemoveConfirmationView } from './FriendsListRemoveConfirmationView'; import { FriendsRemoveConfirmationView } from './FriendsListRemoveConfirmationView';
import { FriendsRoomInviteView } from './FriendsListRoomInviteView'; import { FriendsRoomInviteView } from './FriendsListRoomInviteView';
import { FriendsSearchView } from './FriendsListSearchView'; import { FriendsSearchView } from './FriendsListSearchView';
import { FriendsListGroupView } from './friends-list-group/FriendsListGroupView';
import { FriendsListRequestView } from './friends-list-request/FriendsListRequestView';
export const FriendsListView: FC<{}> = props => export const FriendsListView: FC<{}> = props =>
{ {

12
src/components/friends/views/messenger/FriendsMessengerView.tsx
View File

@ -114,18 +114,16 @@ export const FriendsMessengerView: FC<{}> = props =>
<Text bold>{ LocalizeText('toolbar.icon.label.messenger') }</Text> <Text bold>{ LocalizeText('toolbar.icon.label.messenger') }</Text>
<Column fit overflow="auto"> <Column fit overflow="auto">
<Column> <Column>
{ visibleThreads && (visibleThreads.length > 0) && visibleThreads.map(thread => { visibleThreads && (visibleThreads.length > 0) && visibleThreads.map(thread => {
{
return ( return (
<LayoutGridItem key={ thread.threadId } itemActive={ (activeThread === thread) } onClick={ event => setActiveThreadId(thread.threadId) }> <LayoutGridItem key={ thread.threadId } itemActive={ (activeThread === thread) } onClick={ event => setActiveThreadId(thread.threadId) }>
{ thread.unread && { thread.unread &&
<LayoutItemCountView count={ thread.unreadCount } /> } <LayoutItemCountView count={ thread.unreadCount } /> }
<Flex fullWidth alignItems="center" gap={ 1 }> <Flex fullWidth alignItems="center" gap={ 1 }>
<Flex alignItems="center" className="friend-head px-1"> <Flex alignItems="center" className="friend-head px-1">
{ (thread.participant.id > 0) && <LayoutAvatarImageView figure={
<LayoutAvatarImageView figure={ thread.participant.figure } headOnly={ true } direction={ 3 } /> } thread.participant.id > 0 ? thread.participant.figure : thread.participant.id <= 0 && thread.participant.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' : thread.participant.figure
{ (thread.participant.id <= 0) && } headOnly={true} direction={thread.participant.id > 0 ? 2 : 3} scale={0.9} />
<LayoutBadgeImageView isGroup={ true } badgeCode={ thread.participant.figure } /> }
</Flex> </Flex>
<Text truncate grow>{ thread.participant.name }</Text> <Text truncate grow>{ thread.participant.name }</Text>
</Flex> </Flex>