Merge pull request #63 from havfo/fix/background-lag

Improve mobile performance

app/lib/components/ToolArea/ToolArea.jsx

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import * as toolTabActions from '../../redux/stateActions';
+import * as stateActions from '../../redux/stateActions';
 import ParticipantList from '../ParticipantList/ParticipantList';
 import Chat from '../Chat/Chat';
 import Settings from '../Settings';
@@ -22,7 +22,8 @@ class ToolArea extends React.Component
 			currentToolTab,
 			toolAreaOpen,
 			unreadMessages,
-			unreadFiles
+			unreadFiles,
+			toggleToolArea
 		} = this.props;
 
 		const VisibleTab = {
@@ -38,6 +39,7 @@ class ToolArea extends React.Component
 					className={classNames('toolarea-shade', {
 						open : toolAreaOpen
 					})}
+					onClick={toggleToolArea}
 				/>
 
 				<div
@@ -86,7 +88,8 @@ ToolArea.propTypes =
 	setToolTab     : PropTypes.func.isRequired,
 	unreadMessages : PropTypes.number.isRequired,
 	unreadFiles    : PropTypes.number.isRequired,
-	toolAreaOpen   : PropTypes.bool
+	toolAreaOpen   : PropTypes.bool,
+	toggleToolArea : PropTypes.func.isRequired
 };
 
 const mapStateToProps = (state) => ({
@@ -97,7 +100,8 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = {
-	setToolTab : toolTabActions.setToolTab
+	setToolTab     : stateActions.setToolTab,
+	toggleToolArea : stateActions.toggleToolArea
 };
 
 const ToolAreaContainer = connect(

app/lib/components/ToolArea/ToolAreaButton.jsx

@@ -11,15 +11,21 @@ class ToolAreaButton extends React.Component
 		const {
 			toolAreaOpen,
 			toggleToolArea,
-			unread
+			unread,
+			visible
 		} = this.props;
 
 		return (
-			<div data-component='ToolAreaButton' className={classnames({ on: toolAreaOpen })}>
 			<div
-					className={classnames('button toolarea-button room-controls', {
+				data-component='ToolAreaButton'
+				className={classnames('room-controls', {
 					on : toolAreaOpen,
-						visible : this.props.visible
+					visible
+				})}
+			>
+				<div
+					className={classnames('button toolarea-button', {
+						on : toolAreaOpen
 					})}
 					data-tip='Toggle tool area'
 					data-type='dark'

app/stylus/components/ToolArea.styl

@@ -11,6 +11,12 @@
 	&.open {
 		display: block;
 	}
+
+	+desktop() {
+		&.open {
+			display: none;
+		}
+	}
 }
 
 [data-component='ToolAreaButton'] {
@@ -41,10 +47,6 @@
 			width: 60%;
 		}
 	}
-	
-	.toolarea-shade.open {
-		display: none;
-	}
 }
 
 @media (min-width: 900px) {
@@ -81,7 +83,7 @@
 	right: 0;
 	height: 36px;
 	width: 36px;
-	padding: 2rem;
+	margin: 2rem;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
@@ -157,7 +159,7 @@
 	top: 0;
 	right: 0;
 	height: 100%;
-	background-color: rgba(50, 50, 50, 0.9);
+	background: rgba(50, 50, 50, 0.9);
 	transition: width 0.3s;
 	z-index: 1010;
 	display: flex;

app/stylus/index.styl

@@ -9,18 +9,10 @@ global-reset();
 
 html {
 	height: 100%;
-	box-sizing: border-box;
-	background-image: url('/resources/images/background.svg');
-	background-attachment: fixed;
-	background-position: center;
-	background-size: cover;
-	background-repeat: no-repeat;
 	font-family: 'Roboto';
 	font-weight: 300;
-
-	+desktop() {
-		font-size: 16px;
-	}
+	overflow-x: hidden;
+	overflow-y: hidden;
 
 	+mobile() {
 		font-size: 12px;
@@ -30,6 +22,17 @@ html {
 body {
 	height: 100%;
 	overflow-x: hidden;
+	overflow-y: hidden;
+	background-color: #333;
+
+	+desktop() {
+		font-size: 16px;
+		background-image: url('/resources/images/background.svg');
+		background-attachment: fixed;
+		background-position: center;
+		background-size: cover;
+		background-repeat: no-repeat;
+	}
 }
 
 #multiparty-meeting {