mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-23 14:40:50 +01:00
Update toolbar
This commit is contained in:
Bill
parent
3cf0fed1ef
commit
13da75c105
@ -54,7 +54,7 @@ export const Base: FC<BaseProps<HTMLDivElement>> = props =>
|
||||
|
||||
if(className.length) newClassName += (' ' + className);
|
||||
|
||||
return newClassName;
|
||||
return newClassName.trim();
|
||||
}, [ getClassNames, className ]);
|
||||
|
||||
const getStyle = useMemo(() =>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { RoomObjectCategory } from '@nitrots/nitro-renderer';
|
||||
import { FC, useEffect } from 'react';
|
||||
import { GetRoomEngine, GetRoomSession } from '../../api';
|
||||
import { Base, Flex } from '../../common';
|
||||
import { ItemCountView } from '../../views/shared/item-count/ItemCountView';
|
||||
import { ToolbarViewItems } from './common/ToolbarViewItems';
|
||||
|
||||
@ -24,35 +25,15 @@ export const ToolbarMeView: FC<ToolbarMeViewProps> = props =>
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="d-flex nitro-toolbar-me px-1 py-2">
|
||||
<div className="navigation-items">
|
||||
<div className="navigation-item">
|
||||
<i className="icon icon-me-talents"></i>
|
||||
</div>
|
||||
<div className="navigation-item">
|
||||
<i className="icon icon-me-helper-tool"></i>
|
||||
</div>
|
||||
<div className="navigation-item" onClick={ () => handleToolbarItemClick(ToolbarViewItems.ACHIEVEMENTS_ITEM) }>
|
||||
<i className="icon icon-me-achievements"></i>
|
||||
<Flex alignItems="center" className="nitro-toolbar-me p-2" gap={ 2 }>
|
||||
<Base pointer className="navigation-item icon icon-me-achievements" onClick={ () => handleToolbarItemClick(ToolbarViewItems.ACHIEVEMENTS_ITEM) }>
|
||||
{ (unseenAchievementCount > 0) &&
|
||||
<ItemCountView count={ unseenAchievementCount } /> }
|
||||
</div>
|
||||
<div className="navigation-item" onClick={ () => handleToolbarItemClick(ToolbarViewItems.PROFILE_ITEM) }>
|
||||
<i className="icon icon-me-profile"></i>
|
||||
</div>
|
||||
<div className="navigation-item">
|
||||
<i className="icon icon-me-rooms"></i>
|
||||
</div>
|
||||
<div className="navigation-item" onClick={ () => handleToolbarItemClick(ToolbarViewItems.CLOTHING_ITEM) }>
|
||||
<i className="icon icon-me-clothing"></i>
|
||||
</div>
|
||||
<div className="navigation-item">
|
||||
<i className="icon icon-me-forums"></i>
|
||||
</div>
|
||||
<div className="navigation-item" onClick={ () => handleToolbarItemClick(ToolbarViewItems.SETTINGS_ITEM) }>
|
||||
<i className="icon icon-me-settings"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Base>
|
||||
<Base pointer className="navigation-item icon icon-me-profile" onClick={ () => handleToolbarItemClick(ToolbarViewItems.PROFILE_ITEM) } />
|
||||
<Base pointer className="navigation-item icon icon-me-rooms" />
|
||||
<Base pointer className="navigation-item icon icon-me-clothing" onClick={ () => handleToolbarItemClick(ToolbarViewItems.CLOTHING_ITEM) } />
|
||||
<Base pointer className="navigation-item icon icon-me-settings" onClick={ () => handleToolbarItemClick(ToolbarViewItems.SETTINGS_ITEM) } />
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,42 +1,16 @@
|
||||
.nitro-toolbar-container {
|
||||
.nitro-toolbar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: $toolbar-height;
|
||||
z-index: $toolbar-zindex;
|
||||
|
||||
.nitro-toolbar {
|
||||
height: 100%;
|
||||
pointer-events: all;
|
||||
background: rgba($dark, 0.95);
|
||||
box-shadow: inset 0px 5px lighten(rgba($dark, 0.6), 2.5),
|
||||
inset 0 -4px darken(rgba($dark, 0.6), 4);
|
||||
|
||||
#toolbar-chat-input-container {
|
||||
margin: 0 10px;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-items {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.navigation-avatar {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.navigation-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
//margin: 0 1px;
|
||||
position: relative;
|
||||
|
||||
&.item-avatar {
|
||||
width: 50px;
|
||||
@ -49,63 +23,45 @@
|
||||
}
|
||||
}
|
||||
|
||||
.icon,
|
||||
&.item-avatar {
|
||||
position: relative;
|
||||
//transition: transform .2s ease-out;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
&:hover {
|
||||
-webkit-transform: translate(-1px, -1px);
|
||||
transform: translate(-1px, -1px);
|
||||
filter: drop-shadow(2px 2px 0 rgba($black, 0.8));
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-image {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.chat-input-container {
|
||||
left: 60px;
|
||||
}
|
||||
&.active,
|
||||
&:active {
|
||||
-webkit-transform: translate(0px, 0px);
|
||||
transform: translate(0px, 0px);
|
||||
filter: drop-shadow(2px 2px 0 rgba($black, 0.8));
|
||||
}
|
||||
}
|
||||
|
||||
.nitro-toolbar-me-menu {
|
||||
bottom: 77px;
|
||||
left: 200px;
|
||||
#toolbar-chat-input-container {
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nitro-toolbar-me {
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
bottom: 60px;
|
||||
left: 15px;
|
||||
z-index: $toolbar-memenu-zindex;
|
||||
background: rgba(20, 20, 20, .95);
|
||||
border: 1px solid #101010;
|
||||
box-shadow: inset 2px 2px rgba(255, 255, 255, .1), inset -2px -2px rgba(255, 255, 255, .1);
|
||||
border-radius: $border-radius;
|
||||
|
||||
.list-group {
|
||||
.list-group-item {
|
||||
min-width: 70px;
|
||||
transition: all 0.3s;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
.navigation-item {
|
||||
transition: filter .2s ease-out;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $cyan;
|
||||
text-decoration: underline;
|
||||
|
||||
i {
|
||||
filter: grayscale(0);
|
||||
}
|
||||
}
|
||||
|
||||
.count {
|
||||
top: 0px;
|
||||
right: 5px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
filter: grayscale(0) drop-shadow(2px 2px 0 rgba($black, 0.8));
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -122,45 +78,3 @@
|
||||
drop-shadow(-2px 1px 0 rgba($white, 1))
|
||||
drop-shadow(0 -2px 0 rgba($white, 1));
|
||||
}
|
||||
|
||||
.nitro-toolbar-me {
|
||||
position: absolute;
|
||||
bottom: 65px;
|
||||
left: 15px;
|
||||
z-index: $toolbar-me-zindex;
|
||||
background: rgba(20, 20, 20, .95);
|
||||
border: 1px solid #101010;
|
||||
box-shadow: inset 2px 2px rgba(255, 255, 255, .1), inset -2px -2px rgba(255, 255, 255, .1);
|
||||
border-radius: $border-radius;
|
||||
|
||||
.navigation-items {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.navigation-avatar {
|
||||
border-right: 1px solid rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.navigation-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
width: 50px;
|
||||
font-size: 11px;
|
||||
|
||||
.icon {
|
||||
transition: filter .2s ease-out;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.icon {
|
||||
filter: grayscale(0) drop-shadow(2px 2px 0 rgba($black, 0.8));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { Dispose, DropBounce, EaseOut, FigureUpdateEvent, JumpBy, Motions, NitroToolbarAnimateIconEvent, Queue, UserInfoDataParser, UserInfoEvent, Wait } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback, useState } from 'react';
|
||||
import { CreateLinkEvent, GetRoomSession, GetRoomSessionManager, GetSessionDataManager, GetUserProfile, GoToDesktop, OpenMessengerChat } from '../../api';
|
||||
import { Base, Flex } from '../../common';
|
||||
import { AvatarEditorEvent, FriendsEvent, FriendsMessengerIconEvent, FriendsRequestCountEvent, InventoryEvent, NavigatorEvent, RoomWidgetCameraEvent } from '../../events';
|
||||
import { AchievementsUIEvent, AchievementsUIUnseenCountEvent } from '../../events/achievements';
|
||||
import { UnseenItemTrackerUpdateEvent } from '../../events/inventory/UnseenItemTrackerUpdateEvent';
|
||||
@ -181,64 +182,47 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="nitro-toolbar-container">
|
||||
<>
|
||||
<TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isMeExpanded } timeout={ 300 }>
|
||||
<ToolbarMeView unseenAchievementCount={ unseenAchievementCount } handleToolbarItemClick={ handleToolbarItemClick } />
|
||||
</TransitionAnimation>
|
||||
<div className="d-flex justify-content-between align-items-center nitro-toolbar py-1 px-3">
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="navigation-items gap-2">
|
||||
<div className={ 'navigation-item item-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ event => setMeExpanded(!isMeExpanded) }>
|
||||
<Flex alignItems="center" justifyContent="between" gap={ 2 } className="nitro-toolbar py-1 px-3">
|
||||
<Flex gap={ 2 } alignItems="center">
|
||||
<Flex alignItems="center" gap={ 2 }>
|
||||
<Flex center pointer className={ 'navigation-item item-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ event => setMeExpanded(!isMeExpanded) }>
|
||||
<AvatarImageView figure={ userFigure } direction={ 2 } />
|
||||
{ (unseenAchievementCount > 0) &&
|
||||
<ItemCountView count={ unseenAchievementCount } /> }
|
||||
</div>
|
||||
{ isInRoom && (
|
||||
<div className="navigation-item" onClick={ visitDesktop }>
|
||||
<i className="icon icon-habbo"></i>
|
||||
</div>) }
|
||||
{ !isInRoom && (
|
||||
<div className="navigation-item" onClick={ event => CreateLinkEvent('navigator/goto/home') }>
|
||||
<i className="icon icon-house"></i>
|
||||
</div>) }
|
||||
<div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.NAVIGATOR_ITEM) }>
|
||||
<i className="icon icon-rooms"></i>
|
||||
</div>
|
||||
<div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.CATALOG_ITEM) }>
|
||||
<i className="icon icon-catalog"></i>
|
||||
</div>
|
||||
<div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.INVENTORY_ITEM) }>
|
||||
<i className="icon icon-inventory"></i>
|
||||
</Flex>
|
||||
{ isInRoom &&
|
||||
<Base pointer className="navigation-item icon icon-habbo" onClick={ visitDesktop } /> }
|
||||
{ !isInRoom &&
|
||||
<Base pointer className="navigation-item icon icon-house" onClick={ event => CreateLinkEvent('navigator/goto/home') } /> }
|
||||
<Base pointer className="navigation-item icon icon-rooms" onClick={ event => handleToolbarItemClick(ToolbarViewItems.NAVIGATOR_ITEM) } />
|
||||
<Base pointer className="navigation-item icon icon-catalog" onClick={ event => handleToolbarItemClick(ToolbarViewItems.CATALOG_ITEM) } />
|
||||
<Base pointer className="navigation-item icon icon-inventory" onClick={ event => handleToolbarItemClick(ToolbarViewItems.INVENTORY_ITEM) }>
|
||||
{ (unseenInventoryCount > 0) &&
|
||||
<ItemCountView count={ unseenInventoryCount } /> }
|
||||
</div>
|
||||
{ isInRoom && (
|
||||
<div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.CAMERA_ITEM) }>
|
||||
<i className="icon icon-camera"></i>
|
||||
</div>) }
|
||||
{ isMod && (
|
||||
<div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.MOD_TOOLS_ITEM) }>
|
||||
<i className="icon icon-modtools"></i>
|
||||
</div>) }
|
||||
</div>
|
||||
<div id="toolbar-chat-input-container" className="d-flex align-items-center" />
|
||||
</div>
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<div className="navigation-items gap-2">
|
||||
<div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.FRIEND_LIST_ITEM) }>
|
||||
<i className="icon icon-friendall"></i>
|
||||
</Base>
|
||||
{ isInRoom &&
|
||||
<Base pointer className="navigation-item icon icon-camera" onClick={ event => handleToolbarItemClick(ToolbarViewItems.CAMERA_ITEM) } /> }
|
||||
{ isMod &&
|
||||
<Base pointer className="navigation-item icon icon-modtools" onClick={ event => handleToolbarItemClick(ToolbarViewItems.MOD_TOOLS_ITEM) } /> }
|
||||
</Flex>
|
||||
<Flex alignItems="center" id="toolbar-chat-input-container" />
|
||||
</Flex>
|
||||
<Flex alignItems="center" gap={ 2 }>
|
||||
<Flex gap={ 2 }>
|
||||
<Base pointer className="navigation-item icon icon-friendall" onClick={ event => handleToolbarItemClick(ToolbarViewItems.FRIEND_LIST_ITEM) }>
|
||||
{ (unseenFriendRequestCount > 0) &&
|
||||
<ItemCountView count={ unseenFriendRequestCount } /> }
|
||||
</div>
|
||||
</Base>
|
||||
{ ((chatIconType === CHAT_ICON_SHOWING) || (chatIconType === CHAT_ICON_UNREAD)) &&
|
||||
<div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.FRIEND_CHAT_ITEM) }>
|
||||
{ (chatIconType === CHAT_ICON_SHOWING) && <i className="icon icon-message" /> }
|
||||
{ (chatIconType === CHAT_ICON_UNREAD) && <i className="icon icon-message is-unseen" /> }
|
||||
</div> }
|
||||
</div>
|
||||
<div id="toolbar-friend-bar-container" className="d-none d-lg-block" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Base pointer className={ `navigation-item icon icon-message ${ (chatIconType === CHAT_ICON_UNREAD) && 'is-unread' }` } onClick={ event => handleToolbarItemClick(ToolbarViewItems.FRIEND_CHAT_ITEM) } /> }
|
||||
</Flex>
|
||||
<Base id="toolbar-friend-bar-container" className="d-none d-lg-block" />
|
||||
</Flex>
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,8 +1,3 @@
|
||||
export interface ToolbarViewProps
|
||||
{
|
||||
isInRoom: boolean;
|
||||
}
|
||||
|
||||
export class ToolbarViewItems
|
||||
{
|
||||
public static NAVIGATOR_ITEM: string = 'TVI_NAVIGATOR_ITEM';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user