mirror of
https://github.com/billsonnn/nitro-react.git
synced 2025-01-18 21:36:27 +01:00
Update toolbar
This commit is contained in:
Bill
parent
384337b2f6
commit
ce93b9744b
@ -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 />
|
||||
|
||||
@ -1,106 +1,93 @@
|
||||
.nitro-toolbar-container {
|
||||
position: absolute;
|
||||
width: 70px;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
z-index: $toolbar-zindex;
|
||||
|
||||
.nitro-toolbar {
|
||||
height: 100%;
|
||||
pointer-events: all;
|
||||
background-color: rgba(#33312C, 1);
|
||||
|
||||
// @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 {
|
||||
pointer-events: all;
|
||||
box-shadow: $box-shadow;
|
||||
border-radius: $border-radius;
|
||||
|
||||
.list-group {
|
||||
align-items: center;
|
||||
|
||||
.list-group-item {
|
||||
.navigation-items {
|
||||
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;
|
||||
|
||||
&:active {
|
||||
-webkit-transform: translate(0, 1px);
|
||||
transform: translate(0, 1px);
|
||||
}
|
||||
.navigation-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
width: 50px;
|
||||
margin: 0 1px;
|
||||
|
||||
.avatar-image {
|
||||
top: 20px;
|
||||
}
|
||||
.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));
|
||||
|
||||
.icon,
|
||||
.avatar-image {
|
||||
position: relative;
|
||||
filter: drop-shadow(0px 2px 0px black);
|
||||
}
|
||||
|
||||
.chat-input-container {
|
||||
left: 60px;
|
||||
}
|
||||
|
||||
.count {
|
||||
top: 0rem;
|
||||
right: 5px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nitro-toolbar-me-menu {
|
||||
bottom: 77px;
|
||||
left: 200px;
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
z-index: $toolbar-memenu-zindex;
|
||||
|
||||
.list-group {
|
||||
|
||||
.list-group-item {
|
||||
min-width: 70px;
|
||||
transition: all .3s;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $cyan;
|
||||
text-decoration: underline;
|
||||
|
||||
i {
|
||||
filter: grayscale(0);
|
||||
&:active {
|
||||
-webkit-transform: translate(0, 1px);
|
||||
transform: translate(0, 1px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.avatar-image {
|
||||
top: -40px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.chat-input-container {
|
||||
left: 60px;
|
||||
}
|
||||
|
||||
.count {
|
||||
top: 0px;
|
||||
top: 0rem;
|
||||
right: 5px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nitro-toolbar-me-menu {
|
||||
bottom: 77px;
|
||||
left: 200px;
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
z-index: $toolbar-memenu-zindex;
|
||||
|
||||
.list-group {
|
||||
|
||||
.list-group-item {
|
||||
min-width: 70px;
|
||||
transition: all .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;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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>) }
|
||||
{ !isInRoom && (
|
||||
<li className="list-group-item">
|
||||
<i className="icon icon-house"></i>
|
||||
</li>) }
|
||||
<li className="list-group-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) }>
|
||||
<i className="icon icon-catalog"></i>
|
||||
</li>
|
||||
<li className="list-group-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) }>
|
||||
<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 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 && (
|
||||
<div className="navigation-item">
|
||||
<i className="icon icon-house"></i>
|
||||
</div>) }
|
||||
<div className="navigation-item" onClick={ event => handleToolbarItemClick(event, ToolbarViewItems.NAVIGATOR_ITEM) }>
|
||||
<i className="icon icon-rooms"></i>
|
||||
</div>
|
||||
<div className="navigation-item" onClick={ event => handleToolbarItemClick(event, ToolbarViewItems.CATALOG_ITEM) }>
|
||||
<i className="icon icon-catalog"></i>
|
||||
</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>) }
|
||||
</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>) }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user