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
8694273c50
commit
93146541db
@ -5,19 +5,20 @@
|
||||
width: 100%;
|
||||
height: $toolbar-height;
|
||||
z-index: $toolbar-zindex;
|
||||
|
||||
|
||||
.nitro-toolbar {
|
||||
height: 100%;
|
||||
pointer-events: all;
|
||||
background: rgba($dark,.95);
|
||||
box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
|
||||
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
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -26,7 +27,7 @@
|
||||
align-items: center;
|
||||
|
||||
&.navigation-avatar {
|
||||
border-right: 1px solid rgba(0, 0, 0, .3);
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.navigation-item {
|
||||
@ -41,7 +42,7 @@
|
||||
width: 50px;
|
||||
height: 45px;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
.avatar-image {
|
||||
margin-left: -5px;
|
||||
margin-top: 25px;
|
||||
@ -53,7 +54,8 @@
|
||||
position: relative;
|
||||
//transition: transform .2s ease-out;
|
||||
|
||||
&:hover, &.active {
|
||||
&:hover,
|
||||
&.active {
|
||||
-webkit-transform: translate(-1px, -1px);
|
||||
transform: translate(-1px, -1px);
|
||||
filter: drop-shadow(2px 2px 0 rgba($black, 0.8));
|
||||
@ -67,12 +69,6 @@
|
||||
.chat-input-container {
|
||||
left: 60px;
|
||||
}
|
||||
|
||||
.count {
|
||||
top: 0rem;
|
||||
right: 2px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -82,28 +78,27 @@
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
z-index: $toolbar-memenu-zindex;
|
||||
|
||||
|
||||
.list-group {
|
||||
|
||||
.list-group-item {
|
||||
min-width: 70px;
|
||||
transition: all .3s;
|
||||
transition: all 0.3s;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
|
||||
|
||||
i {
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
color: $cyan;
|
||||
text-decoration: underline;
|
||||
|
||||
|
||||
i {
|
||||
filter: grayscale(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.count {
|
||||
top: 0px;
|
||||
right: 5px;
|
||||
@ -123,7 +118,9 @@
|
||||
max-width: 120px;
|
||||
max-height: 150px;
|
||||
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";
|
||||
|
||||
@ -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 { CreateLinkEvent, GetRoomSession, GetRoomSessionManager, GetSessionDataManager, GoToDesktop, OpenMessengerChat } from '../../api';
|
||||
import { AvatarEditorEvent, CatalogEvent, FriendsEvent, FriendsMessengerIconEvent, InventoryEvent, NavigatorEvent, RoomWidgetCameraEvent } from '../../events';
|
||||
import { CreateLinkEvent, GetRoomSession, GetRoomSessionManager, GetSessionDataManager, GetUserProfile, GoToDesktop, OpenMessengerChat } from '../../api';
|
||||
import { AvatarEditorEvent, CatalogEvent, FriendsEvent, FriendsMessengerIconEvent, FriendsRequestCountEvent, InventoryEvent, NavigatorEvent, RoomWidgetCameraEvent } from '../../events';
|
||||
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';
|
||||
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 { TransitionAnimationTypes } from '../../layout/transitions/TransitionAnimation.types';
|
||||
import { AvatarImageView } from '../shared/avatar-image/AvatarImageView';
|
||||
import { ItemCountView } from '../shared/item-count/ItemCountView';
|
||||
import { ToolbarMeView } from './me/ToolbarMeView';
|
||||
import { ToolbarViewItems, ToolbarViewProps } from './ToolbarView.types';
|
||||
|
||||
@ -28,9 +29,8 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
|
||||
const [ chatIconType, setChatIconType ] = useState(CHAT_ICON_HIDDEN);
|
||||
const [ unseenInventoryCount, setUnseenInventoryCount ] = useState(0);
|
||||
const [ unseenAchievementCount, setUnseenAchievementCount ] = useState(0);
|
||||
|
||||
const [ unseenFriendRequestCount, setFriendRequestCount ] = useState(0);
|
||||
const isMod = GetSessionDataManager().isModerator;
|
||||
const unseenFriendListCount = 0;
|
||||
|
||||
const onUserInfoEvent = useCallback((event: UserInfoEvent) =>
|
||||
{
|
||||
@ -72,27 +72,34 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
|
||||
|
||||
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 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');
|
||||
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 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 wait = (500 - Math.abs(((((1 / squared) * 100) * 500) * 0.5)));
|
||||
const height = 20;
|
||||
|
||||
const motionName = (`ToolbarBouncing[${ iconName }]`);
|
||||
|
||||
@ -144,7 +151,7 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
|
||||
setMeExpanded(false);
|
||||
return;
|
||||
case ToolbarViewItems.PROFILE_ITEM:
|
||||
SendMessageHook(new UserProfileComposer(GetSessionDataManager().userId));
|
||||
GetUserProfile(GetSessionDataManager().userId);
|
||||
setMeExpanded(false);
|
||||
return;
|
||||
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) }>
|
||||
<AvatarImageView figure={ userFigure } direction={ 2 } />
|
||||
{ (unseenAchievementCount > 0) &&
|
||||
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementCount }</div> }
|
||||
<ItemCountView count={ unseenAchievementCount } /> }
|
||||
</div>
|
||||
{ isInRoom && (
|
||||
<div className="navigation-item" onClick={ visitDesktop }>
|
||||
@ -194,8 +201,8 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
|
||||
</div>
|
||||
<div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.INVENTORY_ITEM) }>
|
||||
<i className="icon icon-inventory"></i>
|
||||
{ (unseenInventoryCount > 0) && (
|
||||
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenInventoryCount }</div>) }
|
||||
{ (unseenInventoryCount > 0) &&
|
||||
<ItemCountView count={ unseenInventoryCount } /> }
|
||||
</div>
|
||||
{ isInRoom && (
|
||||
<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-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.FRIEND_LIST_ITEM) }>
|
||||
<i className="icon icon-friendall"></i>
|
||||
{ (unseenFriendListCount > 0) && (
|
||||
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenFriendListCount }</div>) }
|
||||
{ (unseenFriendRequestCount > 0) &&
|
||||
<ItemCountView count={ unseenFriendRequestCount } /> }
|
||||
</div>
|
||||
{ ((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" /> }
|
||||
{ (unseenFriendListCount > 0) &&
|
||||
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenFriendListCount }</div> }
|
||||
</div> }
|
||||
</div>
|
||||
<div id="toolbar-friend-bar-container" className="d-none d-lg-block" />
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { RoomObjectCategory } from '@nitrots/nitro-renderer';
|
||||
import { FC, useEffect } from 'react';
|
||||
import { GetRoomEngine, GetRoomSession } from '../../../api';
|
||||
import { ItemCountView } from '../../shared/item-count/ItemCountView';
|
||||
import { ToolbarViewItems } from '../ToolbarView.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) }>
|
||||
<i className="icon icon-me-achievements"></i>
|
||||
{ (unseenAchievementCount > 0) &&
|
||||
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementCount }</div> }
|
||||
<ItemCountView count={ unseenAchievementCount } /> }
|
||||
</div>
|
||||
<div className="navigation-item" onClick={ () => handleToolbarItemClick(ToolbarViewItems.PROFILE_ITEM) }>
|
||||
<i className="icon icon-me-profile"></i>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user