nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 14:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update toolbar

Browse Source
This commit is contained in:
Bill 2021-11-17 03:46:55 -05:00
parent 8694273c50
commit 93146541db
3 changed files with 49 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/views/toolbar/ToolbarView.scss
View File

@ -9,15 +9,16 @@
.nitro-toolbar { .nitro-toolbar {
height: 100%; height: 100%;
pointer-events: all; pointer-events: all;
background: rgba($dark,.95); background: rgba($dark, 0.95);
box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4); 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 { #toolbar-chat-input-container {
margin: 0 10px; margin: 0 10px;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
width: 0px; width: 0px;
height: 0px height: 0px;
} }
} }
@ -26,7 +27,7 @@
align-items: center; align-items: center;
&.navigation-avatar { &.navigation-avatar {
border-right: 1px solid rgba(0, 0, 0, .3); border-right: 1px solid rgba(0, 0, 0, 0.3);
} }
.navigation-item { .navigation-item {
@ -53,7 +54,8 @@
position: relative; position: relative;
//transition: transform .2s ease-out; //transition: transform .2s ease-out;
&:hover, &.active { &:hover,
&.active {
-webkit-transform: translate(-1px, -1px); -webkit-transform: translate(-1px, -1px);
transform: translate(-1px, -1px); transform: translate(-1px, -1px);
filter: drop-shadow(2px 2px 0 rgba($black, 0.8)); filter: drop-shadow(2px 2px 0 rgba($black, 0.8));
@ -67,12 +69,6 @@
.chat-input-container { .chat-input-container {
left: 60px; left: 60px;
} }
.count {
top: 0rem;
right: 2px;
font-size: 10px;
}
} }
} }
@ -84,10 +80,9 @@
z-index: $toolbar-memenu-zindex; z-index: $toolbar-memenu-zindex;
.list-group { .list-group {
.list-group-item { .list-group-item {
min-width: 70px; min-width: 70px;
transition: all .3s; transition: all 0.3s;
font-size: 10px; font-size: 10px;
text-align: center; text-align: center;
@ -123,7 +118,9 @@
max-width: 120px; max-width: 120px;
max-height: 150px; max-height: 150px;
z-index: 500; z-index: 500;
filter: drop-shadow(2px 1px 0 rgba($white, 1)) drop-shadow(-2px 1px 0 rgba($white, 1)) drop-shadow(0 -2px 0 rgba($white, 1)); filter: drop-shadow(2px 1px 0 rgba($white, 1))
drop-shadow(-2px 1px 0 rgba($white, 1))
drop-shadow(0 -2px 0 rgba($white, 1));
} }
@import './me/ToolbarMeView'; @import "./me/ToolbarMeView";

49
src/views/toolbar/ToolbarView.tsx
View File

@ -1,16 +1,17 @@
import { Dispose, DropBounce, EaseOut, FigureUpdateEvent, JumpBy, Motions, NitroToolbarAnimateIconEvent, Queue, UserInfoDataParser, UserInfoEvent, UserProfileComposer, Wait } from '@nitrots/nitro-renderer'; import { Dispose, DropBounce, EaseOut, FigureUpdateEvent, JumpBy, Motions, NitroToolbarAnimateIconEvent, Queue, UserInfoDataParser, UserInfoEvent, Wait } from '@nitrots/nitro-renderer';
import { FC, useCallback, useState } from 'react'; import { FC, useCallback, useState } from 'react';
import { CreateLinkEvent, GetRoomSession, GetRoomSessionManager, GetSessionDataManager, GoToDesktop, OpenMessengerChat } from '../../api'; import { CreateLinkEvent, GetRoomSession, GetRoomSessionManager, GetSessionDataManager, GetUserProfile, GoToDesktop, OpenMessengerChat } from '../../api';
import { AvatarEditorEvent, CatalogEvent, FriendsEvent, FriendsMessengerIconEvent, InventoryEvent, NavigatorEvent, RoomWidgetCameraEvent } from '../../events'; import { AvatarEditorEvent, CatalogEvent, FriendsEvent, FriendsMessengerIconEvent, FriendsRequestCountEvent, InventoryEvent, NavigatorEvent, RoomWidgetCameraEvent } from '../../events';
import { AchievementsUIEvent, AchievementsUIUnseenCountEvent } from '../../events/achievements'; import { AchievementsUIEvent, AchievementsUIUnseenCountEvent } from '../../events/achievements';
import { UnseenItemTrackerUpdateEvent } from '../../events/inventory/UnseenItemTrackerUpdateEvent'; import { UnseenItemTrackerUpdateEvent } from '../../events/inventory/UnseenItemTrackerUpdateEvent';
import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent'; import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent'; import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent';
import { dispatchUiEvent, useRoomEngineEvent, useUiEvent } from '../../hooks'; import { dispatchUiEvent, useRoomEngineEvent, useUiEvent } from '../../hooks';
import { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event'; import { CreateMessageHook } from '../../hooks/messages/message-event';
import { TransitionAnimation } from '../../layout/transitions/TransitionAnimation'; import { TransitionAnimation } from '../../layout/transitions/TransitionAnimation';
import { TransitionAnimationTypes } from '../../layout/transitions/TransitionAnimation.types'; import { TransitionAnimationTypes } from '../../layout/transitions/TransitionAnimation.types';
import { AvatarImageView } from '../shared/avatar-image/AvatarImageView'; import { AvatarImageView } from '../shared/avatar-image/AvatarImageView';
import { ItemCountView } from '../shared/item-count/ItemCountView';
import { ToolbarMeView } from './me/ToolbarMeView'; import { ToolbarMeView } from './me/ToolbarMeView';
import { ToolbarViewItems, ToolbarViewProps } from './ToolbarView.types'; import { ToolbarViewItems, ToolbarViewProps } from './ToolbarView.types';
@ -28,9 +29,8 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
const [ chatIconType, setChatIconType ] = useState(CHAT_ICON_HIDDEN); const [ chatIconType, setChatIconType ] = useState(CHAT_ICON_HIDDEN);
const [ unseenInventoryCount, setUnseenInventoryCount ] = useState(0); const [ unseenInventoryCount, setUnseenInventoryCount ] = useState(0);
const [ unseenAchievementCount, setUnseenAchievementCount ] = useState(0); const [ unseenAchievementCount, setUnseenAchievementCount ] = useState(0);
const [ unseenFriendRequestCount, setFriendRequestCount ] = useState(0);
const isMod = GetSessionDataManager().isModerator; const isMod = GetSessionDataManager().isModerator;
const unseenFriendListCount = 0;
const onUserInfoEvent = useCallback((event: UserInfoEvent) => const onUserInfoEvent = useCallback((event: UserInfoEvent) =>
{ {
@ -72,27 +72,34 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
useUiEvent(AchievementsUIUnseenCountEvent.UNSEEN_COUNT, onAchievementsUIUnseenCountEvent); useUiEvent(AchievementsUIUnseenCountEvent.UNSEEN_COUNT, onAchievementsUIUnseenCountEvent);
const onFriendsRequestCountEvent = useCallback((event: FriendsRequestCountEvent) =>
{
setFriendRequestCount(event.count);
}, []);
useUiEvent(FriendsRequestCountEvent.UPDATE_COUNT, onFriendsRequestCountEvent);
const animationIconToToolbar = useCallback((iconName: string, image: HTMLImageElement, x: number, y: number) => const animationIconToToolbar = useCallback((iconName: string, image: HTMLImageElement, x: number, y: number) =>
{ {
const target = (document.body.getElementsByClassName(iconName)[0] as HTMLElement); const target = (document.body.getElementsByClassName(iconName)[0] as HTMLElement);
if(!target) return; if(!target) return;
image.className = 'toolbar-icon-animation'; image.className = 'toolbar-icon-animation';
image.style.visibility = 'visible'; image.style.visibility = 'visible';
image.style.left = (x + 'px'); image.style.left = (x + 'px');
image.style.top = (y + 'px'); image.style.top = (y + 'px');
document.body.append(image); document.body.append(image);
const targetBounds = target.getBoundingClientRect(); const targetBounds = target.getBoundingClientRect();
const imageBounds = image.getBoundingClientRect(); const imageBounds = image.getBoundingClientRect();
const left = (imageBounds.x - targetBounds.x); const left = (imageBounds.x - targetBounds.x);
const top = (imageBounds.y - targetBounds.y); const top = (imageBounds.y - targetBounds.y);
const squared = Math.sqrt(((left * left) + (top * top))); const squared = Math.sqrt(((left * left) + (top * top)));
const wait = (500 - Math.abs(((((1 / squared) * 100) * 500) * 0.5))); const wait = (500 - Math.abs(((((1 / squared) * 100) * 500) * 0.5)));
const height = 20; const height = 20;
const motionName = (`ToolbarBouncing[${ iconName }]`); const motionName = (`ToolbarBouncing[${ iconName }]`);
@ -144,7 +151,7 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
setMeExpanded(false); setMeExpanded(false);
return; return;
case ToolbarViewItems.PROFILE_ITEM: case ToolbarViewItems.PROFILE_ITEM:
SendMessageHook(new UserProfileComposer(GetSessionDataManager().userId)); GetUserProfile(GetSessionDataManager().userId);
setMeExpanded(false); setMeExpanded(false);
return; return;
case ToolbarViewItems.SETTINGS_ITEM: case ToolbarViewItems.SETTINGS_ITEM:
@ -176,7 +183,7 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
<div className={ 'navigation-item item-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ event => setMeExpanded(!isMeExpanded) }> <div className={ 'navigation-item item-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ event => setMeExpanded(!isMeExpanded) }>
<AvatarImageView figure={ userFigure } direction={ 2 } /> <AvatarImageView figure={ userFigure } direction={ 2 } />
{ (unseenAchievementCount > 0) && { (unseenAchievementCount > 0) &&
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementCount }</div> } <ItemCountView count={ unseenAchievementCount } /> }
</div> </div>
{ isInRoom && ( { isInRoom && (
<div className="navigation-item" onClick={ visitDesktop }> <div className="navigation-item" onClick={ visitDesktop }>
@ -194,8 +201,8 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
</div> </div>
<div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.INVENTORY_ITEM) }> <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.INVENTORY_ITEM) }>
<i className="icon icon-inventory"></i> <i className="icon icon-inventory"></i>
{ (unseenInventoryCount > 0) && ( { (unseenInventoryCount > 0) &&
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenInventoryCount }</div>) } <ItemCountView count={ unseenInventoryCount } /> }
</div> </div>
{ isInRoom && ( { isInRoom && (
<div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.CAMERA_ITEM) }> <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.CAMERA_ITEM) }>
@ -212,15 +219,13 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
<div className="navigation-items gap-2"> <div className="navigation-items gap-2">
<div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.FRIEND_LIST_ITEM) }> <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.FRIEND_LIST_ITEM) }>
<i className="icon icon-friendall"></i> <i className="icon icon-friendall"></i>
{ (unseenFriendListCount > 0) && ( { (unseenFriendRequestCount > 0) &&
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenFriendListCount }</div>) } <ItemCountView count={ unseenFriendRequestCount } /> }
</div> </div>
{ ((chatIconType === CHAT_ICON_SHOWING) || (chatIconType === CHAT_ICON_UNREAD)) && { ((chatIconType === CHAT_ICON_SHOWING) || (chatIconType === CHAT_ICON_UNREAD)) &&
<div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.FRIEND_CHAT_ITEM) }> <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.FRIEND_CHAT_ITEM) }>
{ (chatIconType === CHAT_ICON_SHOWING) && <i className="icon icon-message" /> } { (chatIconType === CHAT_ICON_SHOWING) && <i className="icon icon-message" /> }
{ (chatIconType === CHAT_ICON_UNREAD) && <i className="icon icon-message is-unseen" /> } { (chatIconType === CHAT_ICON_UNREAD) && <i className="icon icon-message is-unseen" /> }
{ (unseenFriendListCount > 0) &&
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenFriendListCount }</div> }
</div> } </div> }
</div> </div>
<div id="toolbar-friend-bar-container" className="d-none d-lg-block" /> <div id="toolbar-friend-bar-container" className="d-none d-lg-block" />

3
src/views/toolbar/me/ToolbarMeView.tsx
View File

@ -1,6 +1,7 @@
import { RoomObjectCategory } from '@nitrots/nitro-renderer'; import { RoomObjectCategory } from '@nitrots/nitro-renderer';
import { FC, useEffect } from 'react'; import { FC, useEffect } from 'react';
import { GetRoomEngine, GetRoomSession } from '../../../api'; import { GetRoomEngine, GetRoomSession } from '../../../api';
import { ItemCountView } from '../../shared/item-count/ItemCountView';
import { ToolbarViewItems } from '../ToolbarView.types'; import { ToolbarViewItems } from '../ToolbarView.types';
import { ToolbarMeViewProps } from './ToolbarMeView.types'; import { ToolbarMeViewProps } from './ToolbarMeView.types';
@ -29,7 +30,7 @@ export const ToolbarMeView: FC<ToolbarMeViewProps> = props =>
<div className="navigation-item" onClick={ () => handleToolbarItemClick(ToolbarViewItems.ACHIEVEMENTS_ITEM) }> <div className="navigation-item" onClick={ () => handleToolbarItemClick(ToolbarViewItems.ACHIEVEMENTS_ITEM) }>
<i className="icon icon-me-achievements"></i> <i className="icon icon-me-achievements"></i>
{ (unseenAchievementCount > 0) && { (unseenAchievementCount > 0) &&
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementCount }</div> } <ItemCountView count={ unseenAchievementCount } /> }
</div> </div>
<div className="navigation-item" onClick={ () => handleToolbarItemClick(ToolbarViewItems.PROFILE_ITEM) }> <div className="navigation-item" onClick={ () => handleToolbarItemClick(ToolbarViewItems.PROFILE_ITEM) }>
<i className="icon icon-me-profile"></i> <i className="icon icon-me-profile"></i>