Briq
/
multiparty-meeting
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #58 from havfo/feat/sidebar-over 

Feat/sidebar over
master
Håvar Aambø Fosstveit 2018-08-03 09:59:35 +02:00 committed by GitHub
parent 6cec6e5155 add65db8fd
commit 887621f264
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 34 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/lib/components/Room.jsx
View File

@ -82,12 +82,7 @@ class Room extends React.Component
<Appear duration={300}> <Appear duration={300}>
<div data-component='Room'> <div data-component='Room'>
<FullScreenView advancedMode={room.advancedMode} /> <FullScreenView advancedMode={room.advancedMode} />
<div <div className='room-wrapper'>
className='room-wrapper'
style={{
width : toolAreaOpen ? '75%' : '100%'
}}
>
<Notifications /> <Notifications />
<ToolAreaButton /> <ToolAreaButton />
@ -161,10 +156,7 @@ class Room extends React.Component
/> />
</div> </div>
<div <div
className='toolarea-wrapper' className={classnames('toolarea-wrapper', { open: toolAreaOpen })}
style={{
width : toolAreaOpen ? '25%' : '0%'
}}
> >
{toolAreaOpen ? {toolAreaOpen ?
<ToolArea <ToolArea

2
app/lib/components/ToolArea/ToolAreaButton.jsx
View File

@ -15,7 +15,7 @@ class ToolAreaButton extends React.Component
} = this.props; } = this.props;
return ( return (
<div data-component='ToolAreaButton'> <div data-component='ToolAreaButton' className={classnames({ on: toolAreaOpen })}>
<div <div
className={classnames('button toolarea-button room-controls', { className={classnames('button toolarea-button room-controls', {
on : toolAreaOpen, on : toolAreaOpen,

2
app/stylus/components/FileSharing.styl
View File

@ -91,5 +91,5 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 2rem; font-size: 2rem;
z-index: 2000; z-index: 3000;
} }

6
app/stylus/components/FullScreenView.styl
View File

@ -4,11 +4,11 @@
left: 0; left: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
z-index: 200; z-index: 2000;
> .controls { > .controls {
position: absolute; position: absolute;
z-index: 201; z-index: 2020;
right: 0; right: 0;
top: 0; top: 0;
display: flex; display: flex;
@ -53,7 +53,7 @@
.incompatible-video { .incompatible-video {
position: absolute; position: absolute;
z-index: 2 z-index: 2010;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;

2
app/stylus/components/FullView.styl
View File

@ -16,7 +16,7 @@
$backgroundTint = #000; $backgroundTint = #000;
position: absolute; position: absolute;
z-index: 5 z-index: 10;
top: 0.6vmin; top: 0.6vmin;
left: 0.6vmin; left: 0.6vmin;
bottom: 0; bottom: 0;

2
app/stylus/components/Me.styl
View File

@ -19,7 +19,7 @@
> .controls { > .controls {
position: absolute; position: absolute;
z-index: 10; z-index: 20;
right: 0; right: 0;
top: 0; top: 0;
display: flex; display: flex;

2
app/stylus/components/Notifications.styl
View File

@ -1,6 +1,6 @@
[data-component='Notifications'] { [data-component='Notifications'] {
position: absolute; position: absolute;
z-index: 9999; z-index: 1010;
pointer-events: none; pointer-events: none;
top: 0; top: 0;
right: 65px; right: 65px;

6
app/stylus/components/Peer.styl
View File

@ -42,7 +42,7 @@
align-items: center; align-items: center;
padding: 0.4vmin; padding: 0.4vmin;
transition: opacity 0.3s; transition: opacity 0.3s;
z-index: 10; z-index: 20;
> .icon { > .icon {
flex: 0 0 auto; flex: 0 0 auto;
@ -85,7 +85,7 @@
} }
> .controls { > .controls {
position: absolute; position: absolute;
z-index: 10; z-index: 20;
right: 0; right: 0;
top: 0; top: 0;
display: flex; display: flex;
@ -195,7 +195,7 @@
.incompatible-video { .incompatible-video {
position: absolute; position: absolute;
z-index: 2 z-index: 10;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;

2
app/stylus/components/PeerView.styl
View File

@ -16,7 +16,7 @@
$backgroundTint = #000; $backgroundTint = #000;
position: absolute; position: absolute;
z-index: 5 z-index: 10;
top: 0.6vmin; top: 0.6vmin;
left: 0.6vmin; left: 0.6vmin;
bottom: 0; bottom: 0;

16
app/stylus/components/Room.styl
View File

@ -7,7 +7,6 @@
left: 0; left: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
transition: width 0.3s;
> .state { > .state {
position: fixed; position: fixed;
@ -95,7 +94,7 @@
> .room-link-wrapper { > .room-link-wrapper {
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
z-index: 1; z-index: 10;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
@ -142,7 +141,7 @@
> .me-container { > .me-container {
position: fixed; position: fixed;
z-index: 100; z-index: 110;
overflow: hidden; overflow: hidden;
box-shadow: 0px 5px 12px 2px rgba(#111, 0.5); box-shadow: 0px 5px 12px 2px rgba(#111, 0.5);
transition-property: border-color; transition-property: border-color;
@ -168,12 +167,17 @@
> .toolarea-wrapper { > .toolarea-wrapper {
position: fixed; position: fixed;
width: 0;
top: 0; top: 0;
right: 0; right: 0;
width: 20%;
height: 100%; height: 100%;
background-color: rgba(0,0,0,0.1); background-color: rgba(50, 50, 50, 0.9);
transition: width 0.3s; transition: width 0.3s;
z-index: 1000;
&.open {
width: 25%;
}
} }
} }
@ -242,7 +246,7 @@
position: absolute; position: absolute;
top: 100%; top: 100%;
width: 100%; width: 100%;
z-index: 1000; z-index: 120;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }

2
app/stylus/components/ScreenView.styl
View File

@ -16,7 +16,7 @@
$backgroundTint = #000; $backgroundTint = #000;
position: absolute; position: absolute;
z-index: 5 z-index: 10;
top: 0.6vmin; top: 0.6vmin;
left: 0.6vmin; left: 0.6vmin;
bottom: 0; bottom: 0;

2
app/stylus/components/Sidebar.styl
View File

@ -1,6 +1,6 @@
[data-component='Sidebar'] { [data-component='Sidebar'] {
position: fixed; position: fixed;
z-index: 101; z-index: 500;
top: calc(50% - 60px); top: calc(50% - 60px);
height: 120px; height: 120px;
display: flex; display: flex;

11
app/stylus/components/ToolArea.styl
View File

@ -1,14 +1,19 @@
[data-component='ToolAreaButton'] { [data-component='ToolAreaButton'] {
position: absolute; position: absolute;
z-index: 101; z-index: 1000;
top: 20px; right: 0;
right: 20px;
height: 36px; height: 36px;
width: 36px; width: 36px;
padding: 2rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
transition: right 0.3s;
&.on {
right: 25%;
}
> .button { > .button {
flex: 0 0 auto; flex: 0 0 auto;