nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 11:23:05 +02: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">
{ landingViewVisible && <HotelView /> }
<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 } />
</TransitionAnimation>
<NavigatorView />

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

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

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

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