From 13da75c1054b5417541d4917240765d2b147bbf3 Mon Sep 17 00:00:00 2001 From: Bill Date: Tue, 22 Feb 2022 01:40:22 -0500 Subject: [PATCH] Update toolbar --- src/common/Base.tsx | 2 +- src/components/toolbar/ToolbarMeView.tsx | 41 ++-- src/components/toolbar/ToolbarView.scss | 178 +++++------------- src/components/toolbar/ToolbarView.tsx | 80 ++++---- .../toolbar/common/ToolbarViewItems.ts | 5 - 5 files changed, 90 insertions(+), 216 deletions(-) diff --git a/src/common/Base.tsx b/src/common/Base.tsx index 20cbb8e5..f5fd00fe 100644 --- a/src/common/Base.tsx +++ b/src/common/Base.tsx @@ -54,7 +54,7 @@ export const Base: FC> = props => if(className.length) newClassName += (' ' + className); - return newClassName; + return newClassName.trim(); }, [ getClassNames, className ]); const getStyle = useMemo(() => diff --git a/src/components/toolbar/ToolbarMeView.tsx b/src/components/toolbar/ToolbarMeView.tsx index 4d9f3e4d..25253509 100644 --- a/src/components/toolbar/ToolbarMeView.tsx +++ b/src/components/toolbar/ToolbarMeView.tsx @@ -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 = props => }, []); return ( -
-
-
- -
-
- -
-
handleToolbarItemClick(ToolbarViewItems.ACHIEVEMENTS_ITEM) }> - - { (unseenAchievementCount > 0) && - } -
-
handleToolbarItemClick(ToolbarViewItems.PROFILE_ITEM) }> - -
-
- -
-
handleToolbarItemClick(ToolbarViewItems.CLOTHING_ITEM) }> - -
-
- -
-
handleToolbarItemClick(ToolbarViewItems.SETTINGS_ITEM) }> - -
-
-
+ + handleToolbarItemClick(ToolbarViewItems.ACHIEVEMENTS_ITEM) }> + { (unseenAchievementCount > 0) && + } + + handleToolbarItemClick(ToolbarViewItems.PROFILE_ITEM) } /> + + handleToolbarItemClick(ToolbarViewItems.CLOTHING_ITEM) } /> + handleToolbarItemClick(ToolbarViewItems.SETTINGS_ITEM) } /> + ); } diff --git a/src/components/toolbar/ToolbarView.scss b/src/components/toolbar/ToolbarView.scss index 0b7fb99a..ad910648 100644 --- a/src/components/toolbar/ToolbarView.scss +++ b/src/components/toolbar/ToolbarView.scss @@ -1,111 +1,67 @@ -.nitro-toolbar-container { +.nitro-toolbar { position: absolute; bottom: 0; left: 0; width: 100%; height: $toolbar-height; z-index: $toolbar-zindex; + 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); - .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); + .navigation-item { - #toolbar-chat-input-container { - margin: 0 10px; - - @include media-breakpoint-down(sm) { - width: 0px; - height: 0px; + &.item-avatar { + width: 50px; + height: 45px; + overflow: hidden; + + .avatar-image { + margin-left: -5px; + margin-top: 25px; } } - .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; - height: 45px; - overflow: hidden; - - .avatar-image { - margin-left: -5px; - margin-top: 25px; - } - } - - .icon, - &.item-avatar { - position: relative; - //transition: transform .2s ease-out; - - &:hover, - &.active { - -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; - } - } + &:hover { + -webkit-transform: translate(-1px, -1px); + transform: translate(-1px, -1px); + filter: drop-shadow(2px 2px 0 rgba($black, 0.8)); } - .nitro-toolbar-me-menu { - bottom: 77px; - left: 200px; - position: absolute; - font-size: 12px; - z-index: $toolbar-memenu-zindex; + &.active, + &:active { + -webkit-transform: translate(0px, 0px); + transform: translate(0px, 0px); + filter: drop-shadow(2px 2px 0 rgba($black, 0.8)); + } + } - .list-group { - .list-group-item { - min-width: 70px; - transition: all 0.3s; - font-size: 10px; - text-align: center; + #toolbar-chat-input-container { - i { - filter: grayscale(1); - } + @include media-breakpoint-down(sm) { + width: 0px; + height: 0px; + } + } +} - &:hover { - color: $cyan; - text-decoration: underline; +.nitro-toolbar-me { + position: absolute; + 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; - i { - filter: grayscale(0); - } - } + .navigation-item { + transition: filter .2s ease-out; + filter: grayscale(1); - .count { - top: 0px; - right: 5px; - font-size: 10px; - } - } - } + &:hover { + 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)); - } - } - } - } -} diff --git a/src/components/toolbar/ToolbarView.tsx b/src/components/toolbar/ToolbarView.tsx index 4b52ac03..3c72e368 100644 --- a/src/components/toolbar/ToolbarView.tsx +++ b/src/components/toolbar/ToolbarView.tsx @@ -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 = props => }, []); return ( -
+ <> -
-
-
-
setMeExpanded(!isMeExpanded) }> + + + + setMeExpanded(!isMeExpanded) }> { (unseenAchievementCount > 0) && } -
- { isInRoom && ( -
- -
) } - { !isInRoom && ( -
CreateLinkEvent('navigator/goto/home') }> - -
) } -
handleToolbarItemClick(ToolbarViewItems.NAVIGATOR_ITEM) }> - -
-
handleToolbarItemClick(ToolbarViewItems.CATALOG_ITEM) }> - -
-
handleToolbarItemClick(ToolbarViewItems.INVENTORY_ITEM) }> - + + { isInRoom && + } + { !isInRoom && + CreateLinkEvent('navigator/goto/home') } /> } + handleToolbarItemClick(ToolbarViewItems.NAVIGATOR_ITEM) } /> + handleToolbarItemClick(ToolbarViewItems.CATALOG_ITEM) } /> + handleToolbarItemClick(ToolbarViewItems.INVENTORY_ITEM) }> { (unseenInventoryCount > 0) && } -
- { isInRoom && ( -
handleToolbarItemClick(ToolbarViewItems.CAMERA_ITEM) }> - -
) } - { isMod && ( -
handleToolbarItemClick(ToolbarViewItems.MOD_TOOLS_ITEM) }> - -
) } -
-
-
-
-
-
handleToolbarItemClick(ToolbarViewItems.FRIEND_LIST_ITEM) }> - + + { isInRoom && + handleToolbarItemClick(ToolbarViewItems.CAMERA_ITEM) } /> } + { isMod && + handleToolbarItemClick(ToolbarViewItems.MOD_TOOLS_ITEM) } /> } + + + + + + handleToolbarItemClick(ToolbarViewItems.FRIEND_LIST_ITEM) }> { (unseenFriendRequestCount > 0) && } -
+ { ((chatIconType === CHAT_ICON_SHOWING) || (chatIconType === CHAT_ICON_UNREAD)) && -
handleToolbarItemClick(ToolbarViewItems.FRIEND_CHAT_ITEM) }> - { (chatIconType === CHAT_ICON_SHOWING) && } - { (chatIconType === CHAT_ICON_UNREAD) && } -
} -
-
-
-
-
+ handleToolbarItemClick(ToolbarViewItems.FRIEND_CHAT_ITEM) } /> } + + + + + ); } diff --git a/src/components/toolbar/common/ToolbarViewItems.ts b/src/components/toolbar/common/ToolbarViewItems.ts index 48a376d1..b527f531 100644 --- a/src/components/toolbar/common/ToolbarViewItems.ts +++ b/src/components/toolbar/common/ToolbarViewItems.ts @@ -1,8 +1,3 @@ -export interface ToolbarViewProps -{ - isInRoom: boolean; -} - export class ToolbarViewItems { public static NAVIGATOR_ITEM: string = 'TVI_NAVIGATOR_ITEM';