mirror of
https://github.com/billsonnn/nitro-react.git
synced 2025-01-18 21:36:27 +01:00
Toolbar
This commit is contained in:
parent
4a58b16962
commit
0525356a2b
@ -33,26 +33,26 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
|
|||||||
if(!friend)
|
if(!friend)
|
||||||
{
|
{
|
||||||
return (
|
return (
|
||||||
<div ref={ elementRef } className="btn btn-primary friend-bar-item friend-bar-search">
|
<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="friend-bar-item-head absolute"/>
|
<div className="absolute friend-bar-item-head"/>
|
||||||
<div className="text-truncate">{ LocalizeText('friend.bar.find.title') }</div>
|
<div className="text-truncate">{ LocalizeText('friend.bar.find.title') }</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={ elementRef } className={ 'btn btn-success friend-bar-item ' + (isVisible ? 'friend-bar-item-active' : '') } onClick={ event => setVisible(prevValue => !prevValue) }>
|
<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={ `friend-bar-item-head absolute ${ friend.id > 0 ? 'avatar': 'group' }` }>
|
<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) && <LayoutAvatarImageView direction={ 2 } figure={ friend.figure } headOnly={ true } /> }
|
||||||
{ (friend.id <= 0) && <LayoutBadgeImageView badgeCode={ friend.figure } isGroup={ true } /> }
|
{ (friend.id <= 0) && <LayoutBadgeImageView badgeCode={ friend.figure } isGroup={ true } /> }
|
||||||
</div>
|
</div>
|
||||||
<div className="text-truncate">{ friend.name }</div>
|
<div className="truncate">{ friend.name }</div>
|
||||||
{ isVisible &&
|
{ isVisible &&
|
||||||
<div className="flex justify-content-between">
|
<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 &&
|
{ friend.followingAllowed &&
|
||||||
<div className="nitro-friends-spritesheet icon-friendbar-visit cursor-pointer" onClick={ event => followFriend(friend) } /> }
|
<div className="cursor-pointer nitro-friends-spritesheet icon-friendbar-visit" 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-profile" onClick={ event => GetUserProfile(friend.id) } />
|
||||||
</div> }
|
</div> }
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -13,12 +13,12 @@ export const FriendBarView: FC<{ onlineFriends: MessengerFriend[] }> = props =>
|
|||||||
const elementRef = useRef<HTMLDivElement>();
|
const elementRef = useRef<HTMLDivElement>();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={ elementRef } className="flex items-center friend-bar">
|
<div ref={ elementRef } className="flex items-center">
|
||||||
<Button className="friend-bar-button" disabled={ (indexOffset <= 0) } variant="black" onClick={ event => setIndexOffset(indexOffset - 1) }>
|
<Button className="z-[2] cursor-pointer" disabled={ (indexOffset <= 0) } variant="black" onClick={ event => setIndexOffset(indexOffset - 1) }>
|
||||||
<FaChevronLeft className="fa-icon" />
|
<FaChevronLeft className="fa-icon" />
|
||||||
</Button>
|
</Button>
|
||||||
{ Array.from(Array(MAX_DISPLAY_COUNT), (e, i) => <FriendBarItemView key={ i } friend={ (onlineFriends[ indexOffset + i ] || null) } />) }
|
{ 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" />
|
<FaChevronRight className="fa-icon" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -21,9 +21,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
|||||||
|
|
||||||
useMessageEvent<PerkAllowancesMessageEvent>(PerkAllowancesMessageEvent, event =>
|
useMessageEvent<PerkAllowancesMessageEvent>(PerkAllowancesMessageEvent, event =>
|
||||||
{
|
{
|
||||||
const parser = event.getParser();
|
setUseGuideTool(event.getParser().isAllowed(PerkEnum.USE_GUIDE_TOOL));
|
||||||
|
|
||||||
setUseGuideTool(parser.isAllowed(PerkEnum.USE_GUIDE_TOOL));
|
|
||||||
});
|
});
|
||||||
|
|
||||||
useNitroEvent<NitroToolbarAnimateIconEvent>(NitroToolbarAnimateIconEvent.ANIMATE_ICON, event =>
|
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 }>
|
<TransitionAnimation inProp={ isMeExpanded } timeout={ 300 } type={ TransitionAnimationTypes.FADE_IN }>
|
||||||
<ToolbarMeView setMeExpanded={ setMeExpanded } unseenAchievementCount={ getTotalUnseen } useGuideTool={ useGuideTool } />
|
<ToolbarMeView setMeExpanded={ setMeExpanded } unseenAchievementCount={ getTotalUnseen } useGuideTool={ useGuideTool } />
|
||||||
</TransitionAnimation>
|
</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="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) }>
|
<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) }>
|
||||||
|
@ -212,6 +212,14 @@ body {
|
|||||||
.nitro-icon {
|
.nitro-icon {
|
||||||
@apply inline-block bg-transparent bg-center bg-no-repeat outline-0;
|
@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 {
|
&.icon-nitro-light {
|
||||||
background-image: url("@/assets/images/nitro/nitro-n-light.svg");
|
background-image: url("@/assets/images/nitro/nitro-n-light.svg");
|
||||||
}
|
}
|
||||||
|
@ -34,6 +34,7 @@ module.exports = {
|
|||||||
boxShadow,
|
boxShadow,
|
||||||
backgroundImage: {
|
backgroundImage: {
|
||||||
'button-gradient-gray': 'linear-gradient(to bottom, #e2e2e2 50%, #c8c8c8 50%)',
|
'button-gradient-gray': 'linear-gradient(to bottom, #e2e2e2 50%, #c8c8c8 50%)',
|
||||||
|
'toolbar-gradient': 'linear-gradient(to bottom, #363636 50%, #2a2a2a 50%)',
|
||||||
},
|
},
|
||||||
spacing: {
|
spacing: {
|
||||||
'card-header': '33px',
|
'card-header': '33px',
|
||||||
@ -48,6 +49,9 @@ module.exports = {
|
|||||||
'loading': '100',
|
'loading': '100',
|
||||||
'chat-zindex': '20'
|
'chat-zindex': '20'
|
||||||
},
|
},
|
||||||
|
dropShadow: {
|
||||||
|
'hover': '2px 2px 0 rgba(0,0,0,0.8)'
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
safelist: [
|
safelist: [
|
||||||
|
Loading…
Reference in New Issue
Block a user