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-04-23 21:04:49 -04:00
parent 34d0250f17
commit 4b0ac6f767
3 changed files with 21 additions and 3 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" type={ TransitionAnimationTypes.SLIDE_LEFT } inProp={ isReady } timeout={ 300 }> <TransitionAnimation className="nitro-toolbar-container" type={ TransitionAnimationTypes.SLIDE_LEFT } inProp={ isReady } timeout={ 300 }>
<ToolbarView isInRoom={ !landingViewVisible } /> <ToolbarView isInRoom={ !landingViewVisible } />
</TransitionAnimation> </TransitionAnimation>
<NavigatorView /> <NavigatorView />

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

@ -1,10 +1,28 @@
.nitro-toolbar { .nitro-toolbar-container {
position: absolute; position: absolute;
width: 70px; width: 70px;
top: 10px; top: 10px;
left: 10px; left: 10px;
z-index: $toolbar-zindex; 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 {
pointer-events: all; pointer-events: all;
box-shadow: $box-shadow;
border-radius: $border-radius;
.list-group { .list-group {
align-items: center; align-items: center;

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

@ -49,7 +49,7 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
return ( return (
<> <>
<div className="d-flex flex-column bg-primary rounded shadow border border-black p-0 h-100"> <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"> <ul className="flex-grow-1 list-group p-1">
{ isInRoom && ( { isInRoom && (
<li className="list-group-item"> <li className="list-group-item">