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

Add toolbar achievement unseen

Browse Source
This commit is contained in:
Bill 2021-09-29 22:29:46 -04:00
parent 0e22b4fe7e
commit c9e64c83dc
3 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@ import { Dispose, DropBounce, EaseOut, FigureUpdateEvent, JumpBy, Motions, Nitro
import { FC, useCallback, useState } from 'react';
import { GetRoomSession, GetRoomSessionManager, GetSessionDataManager, GoToDesktop, OpenMessengerChat } from '../../api';
import { AvatarEditorEvent, CatalogEvent, FriendsEvent, FriendsMessengerIconEvent, InventoryEvent, NavigatorEvent, RoomWidgetCameraEvent } from '../../events';
import { AchievementsUIEvent } from '../../events/achievements';
import { AchievementsUIEvent, AchievementsUIUnseenCountEvent } from '../../events/achievements';
import { UnseenItemTrackerUpdateEvent } from '../../events/inventory/UnseenItemTrackerUpdateEvent';
import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent';
@ -27,9 +27,9 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
const [ isMeExpanded, setMeExpanded ] = useState(false);
const [ chatIconType, setChatIconType ] = useState(CHAT_ICON_HIDDEN);
const [ unseenInventoryCount, setUnseenInventoryCount ] = useState(0);
const [ unseenAchievementCount, setUnseenAchievementCount ] = useState(0);
const unseenFriendListCount = 0;
const unseenAchievementsCount = 0;
const onUserInfoEvent = useCallback((event: UserInfoEvent) =>
{
@ -64,6 +64,13 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
useUiEvent(UnseenItemTrackerUpdateEvent.UPDATE_COUNT, onUnseenItemTrackerUpdateEvent);
const onAchievementsUIUnseenCountEvent = useCallback((event: AchievementsUIUnseenCountEvent) =>
{
setUnseenAchievementCount(event.count);
}, []);
useUiEvent(AchievementsUIUnseenCountEvent.UNSEEN_COUNT, onAchievementsUIUnseenCountEvent);
const animationIconToToolbar = useCallback((iconName: string, image: HTMLImageElement, x: number, y: number) =>
{
const target = (document.body.getElementsByClassName(iconName)[0] as HTMLElement);
@ -160,15 +167,15 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
return (
<div className="nitro-toolbar-container">
<TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isMeExpanded } timeout={ 300 }>
<ToolbarMeView handleToolbarItemClick={ handleToolbarItemClick } />
<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) }>
<AvatarImageView figure={ userFigure } direction={ 2 } />
{ (unseenAchievementsCount > 0) &&
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementsCount }</div> }
{ (unseenAchievementCount > 0) &&
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementCount }</div> }
</div>
{ isInRoom && (
<div className="navigation-item" onClick={ visitDesktop }>

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

@ -4,7 +4,7 @@ import { ToolbarMeViewProps } from './ToolbarMeView.types';
export const ToolbarMeView: FC<ToolbarMeViewProps> = props =>
{
const { handleToolbarItemClick = null } = props;
const { unseenAchievementCount = 0, handleToolbarItemClick = null } = props;
return (
<div className="d-flex nitro-toolbar-me px-1 py-2">
@ -17,6 +17,8 @@ export const ToolbarMeView: FC<ToolbarMeViewProps> = props =>
</div>
<div className="navigation-item" onClick={ () => handleToolbarItemClick(ToolbarViewItems.ACHIEVEMENTS_ITEM) }>
<i className="icon icon-me-achievements"></i>
{ (unseenAchievementCount > 0) &&
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementCount }</div> }
</div>
<div className="navigation-item" onClick={ () => handleToolbarItemClick(ToolbarViewItems.PROFILE_ITEM) }>
<i className="icon icon-me-profile"></i>

1
src/views/toolbar/me/ToolbarMeView.types.ts
View File

@ -1,5 +1,6 @@
export interface ToolbarMeViewProps
{
unseenAchievementCount: number;
handleToolbarItemClick: (item: string) => void;
}