nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-18 13:26:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Toolbar

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/friends/views/friends-bar/FriendBarItemView.tsx
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>
);

6
src/components/friends/views/friends-bar/FriendsBarView.tsx
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>

28
src/components/toolbar/ToolbarView.tsx
View File

@ -19,46 +19,44 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
const { iconState = MessengerIconState.HIDDEN } = useMessenger();
const isMod = GetSessionDataManager().isModerator;
useMessageEvent<PerkAllowancesMessageEvent>(PerkAllowancesMessageEvent, event =>
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 =>
useNitroEvent<NitroToolbarAnimateIconEvent>(NitroToolbarAnimateIconEvent.ANIMATE_ICON, event =>
{
const animationIconToToolbar = (iconName: string, image: HTMLImageElement, x: number, y: number) =>
{
const target = (document.body.getElementsByClassName(iconName)[0] as HTMLElement);
if(!target) return;
image.className = 'toolbar-icon-animation';
image.style.visibility = 'visible';
image.style.left = (x + 'px');
image.style.top = (y + 'px');
document.body.append(image);
const targetBounds = target.getBoundingClientRect();
const imageBounds = image.getBoundingClientRect();
const left = (imageBounds.x - targetBounds.x);
const top = (imageBounds.y - targetBounds.y);
const squared = Math.sqrt(((left * left) + (top * top)));
const wait = (500 - Math.abs(((((1 / squared) * 100) * 500) * 0.5)));
const height = 20;
const motionName = (`ToolbarBouncing[${ iconName }]`);
if(!Motions.getMotionByTag(motionName))
{
Motions.runMotion(new Queue(new Wait((wait + 8)), new DropBounce(target, 400, 12))).tag = motionName;
}
const motion = new Queue(new EaseOut(new JumpBy(image, wait, ((targetBounds.x - imageBounds.x) + height), (targetBounds.y - imageBounds.y), 100, 1), 1), new Dispose(image));
Motions.runMotion(motion);
}
@ -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) }>

8
src/index.css
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");
}

4
tailwind.config.js
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: [