nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-19 05:46:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update toolbar

Browse Source
This commit is contained in:
Bill 2021-05-04 18:40:01 -04:00
parent 384337b2f6
commit ce93b9744b
3 changed files with 108 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/main/MainView.tsx
View File

@ -45,7 +45,7 @@ export function MainView(props: MainViewProps): JSX.Element
<div className="nitro-main"> <div className="nitro-main">
{ landingViewVisible && <HotelView /> } { landingViewVisible && <HotelView /> }
<RoomHostView /> <RoomHostView />
<TransitionAnimation className="nitro-toolbar-container" type={ TransitionAnimationTypes.SLIDE_LEFT } inProp={ isReady } timeout={ 300 }> <TransitionAnimation className="nitro-toolbar-container" type={ TransitionAnimationTypes.FADE_UP } inProp={ isReady } timeout={ 300 }>
<ToolbarView isInRoom={ !landingViewVisible } /> <ToolbarView isInRoom={ !landingViewVisible } />
</TransitionAnimation> </TransitionAnimation>
<NavigatorView /> <NavigatorView />

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

@ -1,57 +1,43 @@
.nitro-toolbar-container { .nitro-toolbar-container {
position: absolute; position: absolute;
width: 70px; bottom: 0;
top: 10px; left: 0;
left: 10px; width: 100%;
height: 35px;
z-index: $toolbar-zindex; z-index: $toolbar-zindex;
// @include media-breakpoint-up(sm) { .nitro-toolbar {
// top: 0; height: 100%;
// left: 0;
// height: 100%;
// box-shadow: $box-shadow-right !important;
// border-radius: 0 !important;
// .nitro-toolbar {
// box-shadow: $box-shadow-right !important;
// border-radius: 0 !important;
// }
// }
}
.nitro-toolbar {
pointer-events: all; pointer-events: all;
box-shadow: $box-shadow; background-color: rgba(#33312C, 1);
border-radius: $border-radius;
.list-group { .navigation-items {
display: flex;
align-items: center; align-items: center;
.list-group-item { .navigation-item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
padding: unset;
min-width: 50px;
min-height: 60px;
width: 50px; width: 50px;
height: 60px; margin: 0 1px;
margin: 0 5px;
.icon,
.avatar-image {
position: relative;
top: -12px;
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));
&:active { &:active {
-webkit-transform: translate(0, 1px); -webkit-transform: translate(0, 1px);
transform: translate(0, 1px); transform: translate(0, 1px);
} }
.avatar-image {
top: 20px;
} }
.icon,
.avatar-image { .avatar-image {
position: relative; top: -40px;
filter: drop-shadow(0px 2px 0px black); pointer-events: none;
} }
.chat-input-container { .chat-input-container {
@ -102,6 +88,7 @@
} }
} }
} }
}
} }
.toolbar-icon-animation { .toolbar-icon-animation {

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

@ -48,42 +48,40 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
CreateMessageHook(UserInfoEvent, onUserInfoEvent); CreateMessageHook(UserInfoEvent, onUserInfoEvent);
return ( return (
<> <div className="d-flex nitro-toolbar">
<div className="d-flex flex-column bg-primary border border-black p-0 h-100 nitro-toolbar"> <div className="navigation-items me-2">
<ul className="flex-grow-1 list-group p-1"> <div className="navigation-item">
{ isInRoom && ( { userInfo && <AvatarImageView figure={ userInfo.figure } direction={ 2 } /> }
<li className="list-group-item"> </div>
<i className="icon icon-hotelview icon-nitro-light"></i> { (unseenAchievementsCount > 0) && (
</li>) } <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementsCount }</div>) }
</div>
<div className="navigation-items">
{/* { isInRoom && (
<div className="navigation-item">
<i className="icon icon-hotelview icon-nitro-light filter-none"></i>
</div>) } */}
{ !isInRoom && ( { !isInRoom && (
<li className="list-group-item"> <div className="navigation-item">
<i className="icon icon-house"></i> <i className="icon icon-house"></i>
</li>) } </div>) }
<li className="list-group-item" onClick={ event => handleToolbarItemClick(event, ToolbarViewItems.NAVIGATOR_ITEM) }> <div className="navigation-item" onClick={ event => handleToolbarItemClick(event, ToolbarViewItems.NAVIGATOR_ITEM) }>
<i className="icon icon-rooms"></i> <i className="icon icon-rooms"></i>
</li> </div>
<li className="list-group-item" onClick={ event => handleToolbarItemClick(event, ToolbarViewItems.CATALOG_ITEM) }> <div className="navigation-item" onClick={ event => handleToolbarItemClick(event, ToolbarViewItems.CATALOG_ITEM) }>
<i className="icon icon-catalog"></i> <i className="icon icon-catalog"></i>
</li> </div>
<li className="list-group-item" onClick={ event => handleToolbarItemClick(event, ToolbarViewItems.INVENTORY_ITEM) }> <div className="navigation-item" onClick={ event => handleToolbarItemClick(event, 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>) } <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenInventoryCount }</div>) }
</li> </div>
<li className="list-group-item" onClick={ event => handleToolbarItemClick(event, ToolbarViewItems.FRIEND_LIST_ITEM) }> <div className="navigation-item" onClick={ event => handleToolbarItemClick(event, ToolbarViewItems.FRIEND_LIST_ITEM) }>
<i className="icon icon-friendall"></i> <i className="icon icon-friendall"></i>
{ (unseenFriendListCount > 0) && ( { (unseenFriendListCount > 0) && (
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenFriendListCount }</div>) } <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenFriendListCount }</div>) }
</li>
</ul>
<ul className="list-group p-1">
<li className="position-relative list-group-item">
{ userInfo && <AvatarImageView figure={ userInfo.figure } direction={ 2 } headOnly={ true } /> }
{ (unseenAchievementsCount > 0) && (
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementsCount }</div>) }
</li>
</ul>
</div> </div>
</> </div>
</div>
); );
} }