This commit is contained in:
robbis95 2024-04-17 21:26:41 +02:00
parent 4a58b16962
commit 0525356a2b
5 changed files with 36 additions and 26 deletions

View File

@ -33,26 +33,26 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
if(!friend)
{
return (
<div ref={ elementRef } className="btn btn-primary friend-bar-item friend-bar-search">
<div className="friend-bar-item-head absolute"/>
<div ref={ elementRef } className="border border-black w-[130px] mx-1 rounded cursor-pointer z-0 text-sm py-2.5 px-1 relative pl-[38px] text-left friend-bar-search">
<div className="absolute friend-bar-item-head"/>
<div className="text-truncate">{ LocalizeText('friend.bar.find.title') }</div>
</div>
);
}
return (
<div ref={ elementRef } className={ 'btn btn-success friend-bar-item ' + (isVisible ? 'friend-bar-item-active' : '') } onClick={ event => setVisible(prevValue => !prevValue) }>
<div className={ `friend-bar-item-head absolute ${ friend.id > 0 ? 'avatar': 'group' }` }>
<div ref={ elementRef } className={ 'border border-black rounded cursor-pointer text-sm w-[130px] mx-1 z-0 py-2.5 px-1 relative pl-[38px] text-left' + (isVisible ? 'mb-[21px]' : '') } onClick={ event => setVisible(prevValue => !prevValue) }>
<div className={ `absolute ${ friend.id > 0 ? 'top-[-30px] left-[-30px]': 'top-0 left-[-5px]' }` }>
{ (friend.id > 0) && <LayoutAvatarImageView direction={ 2 } figure={ friend.figure } headOnly={ true } /> }
{ (friend.id <= 0) && <LayoutBadgeImageView badgeCode={ friend.figure } isGroup={ true } /> }
</div>
<div className="text-truncate">{ friend.name }</div>
<div className="truncate">{ friend.name }</div>
{ isVisible &&
<div className="flex justify-content-between">
<div className="nitro-friends-spritesheet icon-friendbar-chat cursor-pointer" onClick={ event => OpenMessengerChat(friend.id) } />
<div className="cursor-pointer nitro-friends-spritesheet icon-friendbar-chat" onClick={ event => OpenMessengerChat(friend.id) } />
{ friend.followingAllowed &&
<div className="nitro-friends-spritesheet icon-friendbar-visit cursor-pointer" onClick={ event => followFriend(friend) } /> }
<div className="nitro-friends-spritesheet icon-profile cursor-pointer" onClick={ event => GetUserProfile(friend.id) } />
<div className="cursor-pointer nitro-friends-spritesheet icon-friendbar-visit" onClick={ event => followFriend(friend) } /> }
<div className="cursor-pointer nitro-friends-spritesheet icon-profile" onClick={ event => GetUserProfile(friend.id) } />
</div> }
</div>
);

View File

@ -13,12 +13,12 @@ export const FriendBarView: FC<{ onlineFriends: MessengerFriend[] }> = props =>
const elementRef = useRef<HTMLDivElement>();
return (
<div ref={ elementRef } className="flex items-center friend-bar">
<Button className="friend-bar-button" disabled={ (indexOffset <= 0) } variant="black" onClick={ event => setIndexOffset(indexOffset - 1) }>
<div ref={ elementRef } className="flex items-center">
<Button className="z-[2] cursor-pointer" disabled={ (indexOffset <= 0) } variant="black" onClick={ event => setIndexOffset(indexOffset - 1) }>
<FaChevronLeft className="fa-icon" />
</Button>
{ Array.from(Array(MAX_DISPLAY_COUNT), (e, i) => <FriendBarItemView key={ i } friend={ (onlineFriends[ indexOffset + i ] || null) } />) }
<Button className="friend-bar-button" disabled={ !((onlineFriends.length > MAX_DISPLAY_COUNT) && ((indexOffset + MAX_DISPLAY_COUNT) <= (onlineFriends.length - 1))) } variant="black" onClick={ event => setIndexOffset(indexOffset + 1) }>
<Button className="z-[2] cursor-pointer" disabled={ !((onlineFriends.length > MAX_DISPLAY_COUNT) && ((indexOffset + MAX_DISPLAY_COUNT) <= (onlineFriends.length - 1))) } variant="black" onClick={ event => setIndexOffset(indexOffset + 1) }>
<FaChevronRight className="fa-icon" />
</Button>
</div>

View File

@ -21,9 +21,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
useMessageEvent<PerkAllowancesMessageEvent>(PerkAllowancesMessageEvent, event =>
{
const parser = event.getParser();
setUseGuideTool(parser.isAllowed(PerkEnum.USE_GUIDE_TOOL));
setUseGuideTool(event.getParser().isAllowed(PerkEnum.USE_GUIDE_TOOL));
});
useNitroEvent<NitroToolbarAnimateIconEvent>(NitroToolbarAnimateIconEvent.ANIMATE_ICON, event =>
@ -70,7 +68,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
<TransitionAnimation inProp={ isMeExpanded } timeout={ 300 } type={ TransitionAnimationTypes.FADE_IN }>
<ToolbarMeView setMeExpanded={ setMeExpanded } unseenAchievementCount={ getTotalUnseen } useGuideTool={ useGuideTool } />
</TransitionAnimation>
<div className="absolute bottom-0 left-0 flex items-center justify-between w-full gap-2 px-3 py-1 z-toolbar bg-toolbar h-toolbar">
<div className="absolute bottom-0 left-0 flex items-center justify-between w-full gap-2 px-3 py-1 border-t border-black z-toolbar bg-toolbar bg-toolbar-gradient shadow-inner1px">
<div className="flex items-center gap-2">
<div className="flex items-center gap-2">
<div className={ classNames('flex justify-center items-center w-[50px] h-[45px] overflow-hidden cursor-pointer *:ml-[-5px] *:mt-[25px]', isMeExpanded && 'active') } onClick={ event => setMeExpanded(!isMeExpanded) }>

View File

@ -212,6 +212,14 @@ body {
.nitro-icon {
@apply inline-block bg-transparent bg-center bg-no-repeat outline-0;
&:hover {
@apply translate-x-[-1px] translate-y-[-1px] drop-shadow-hover
}
&:active {
@apply transform-none filter-none
}
&.icon-nitro-light {
background-image: url("@/assets/images/nitro/nitro-n-light.svg");
}

View File

@ -34,6 +34,7 @@ module.exports = {
boxShadow,
backgroundImage: {
'button-gradient-gray': 'linear-gradient(to bottom, #e2e2e2 50%, #c8c8c8 50%)',
'toolbar-gradient': 'linear-gradient(to bottom, #363636 50%, #2a2a2a 50%)',
},
spacing: {
'card-header': '33px',
@ -48,6 +49,9 @@ module.exports = {
'loading': '100',
'chat-zindex': '20'
},
dropShadow: {
'hover': '2px 2px 0 rgba(0,0,0,0.8)'
},
},
},
safelist: [