From b24ed88e27cca014a374c896b0dda67537c25ff6 Mon Sep 17 00:00:00 2001 From: Torjus Date: Thu, 9 Aug 2018 09:03:27 +0200 Subject: [PATCH 1/7] Use less intensive background image on phones --- app/stylus/components/ToolArea.styl | 6 +++++- app/stylus/index.styl | 20 ++++++++++---------- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/app/stylus/components/ToolArea.styl b/app/stylus/components/ToolArea.styl index 12b6428..ce2ea05 100644 --- a/app/stylus/components/ToolArea.styl +++ b/app/stylus/components/ToolArea.styl @@ -157,13 +157,17 @@ top: 0; right: 0; height: 100%; - background-color: rgba(50, 50, 50, 0.9); + background: rgba(0, 0, 0, 0.25); transition: width 0.3s; z-index: 1010; display: flex; flex-direction: column; border-left: 1px solid #222; + +desktop() { + background: rgba(50, 50, 50, 0.9); + } + > .tab-headers { display: flex; background: rgba(0, 0, 0, 0.1); diff --git a/app/stylus/index.styl b/app/stylus/index.styl index 2ad0be0..c9888e5 100644 --- a/app/stylus/index.styl +++ b/app/stylus/index.styl @@ -9,19 +9,9 @@ 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; - } - +mobile() { font-size: 12px; } @@ -30,6 +20,16 @@ html { body { height: 100%; overflow-x: 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 { From be6a5b6caaef05f46912b9c8f6a6028e13240581 Mon Sep 17 00:00:00 2001 From: Torjus Date: Thu, 9 Aug 2018 09:11:19 +0200 Subject: [PATCH 2/7] Fine-tune sidebar color --- app/stylus/components/ToolArea.styl | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/app/stylus/components/ToolArea.styl b/app/stylus/components/ToolArea.styl index ce2ea05..030df6a 100644 --- a/app/stylus/components/ToolArea.styl +++ b/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) { @@ -157,17 +159,13 @@ top: 0; right: 0; height: 100%; - background: rgba(0, 0, 0, 0.25); + background: rgba(50, 50, 50, 0.9); transition: width 0.3s; z-index: 1010; display: flex; flex-direction: column; border-left: 1px solid #222; - +desktop() { - background: rgba(50, 50, 50, 0.9); - } - > .tab-headers { display: flex; background: rgba(0, 0, 0, 0.1); From 87e389a9560b444e3400df776069a5df105851cd Mon Sep 17 00:00:00 2001 From: Torjus Date: Thu, 9 Aug 2018 09:18:54 +0200 Subject: [PATCH 3/7] Prevent scrollbars on mobile --- app/stylus/index.styl | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/stylus/index.styl b/app/stylus/index.styl index c9888e5..ce004c2 100644 --- a/app/stylus/index.styl +++ b/app/stylus/index.styl @@ -11,6 +11,8 @@ html { height: 100%; font-family: 'Roboto'; font-weight: 300; + overflow-x: hidden; + overflow-y: hidden; +mobile() { font-size: 12px; @@ -20,6 +22,7 @@ html { body { height: 100%; overflow-x: hidden; + overflow-y: hidden; background-color: #333; +desktop() { From 5f3635e5f804b7693d15f02df26c78f8420d9b05 Mon Sep 17 00:00:00 2001 From: Torjus Date: Thu, 9 Aug 2018 09:22:37 +0200 Subject: [PATCH 4/7] Support closing toolbar by clicking on the overlay --- app/lib/components/ToolArea/ToolArea.jsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/app/lib/components/ToolArea/ToolArea.jsx b/app/lib/components/ToolArea/ToolArea.jsx index 0d331c9..82f9725 100644 --- a/app/lib/components/ToolArea/ToolArea.jsx +++ b/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} />
({ @@ -97,7 +100,8 @@ const mapStateToProps = (state) => ({ }); const mapDispatchToProps = { - setToolTab : toolTabActions.setToolTab + setToolTab : stateActions.setToolTab, + toggleToolArea : stateActions.toggleToolArea }; const ToolAreaContainer = connect( From b605e053f01a23583ea7146df40cd193337434d2 Mon Sep 17 00:00:00 2001 From: Torjus Date: Thu, 9 Aug 2018 09:50:33 +0200 Subject: [PATCH 5/7] Fix broken badge --- app/lib/components/ToolArea/ToolAreaButton.jsx | 16 +++++++++++----- app/stylus/components/ToolArea.styl | 2 +- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/app/lib/components/ToolArea/ToolAreaButton.jsx b/app/lib/components/ToolArea/ToolAreaButton.jsx index 6659dcd..43139a7 100644 --- a/app/lib/components/ToolArea/ToolAreaButton.jsx +++ b/app/lib/components/ToolArea/ToolAreaButton.jsx @@ -11,15 +11,21 @@ class ToolAreaButton extends React.Component const { toolAreaOpen, toggleToolArea, - unread + unread, + visible } = this.props; return ( -
+
Date: Thu, 9 Aug 2018 10:17:08 +0200 Subject: [PATCH 6/7] Attempt fixing scrolling by preventing touchmove events --- app/lib/components/Room.jsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/app/lib/components/Room.jsx b/app/lib/components/Room.jsx index cf394ef..f388b88 100644 --- a/app/lib/components/Room.jsx +++ b/app/lib/components/Room.jsx @@ -49,16 +49,24 @@ class Room extends React.Component this.waitForHide(); } + handleTouchMove = (event) => + { + event.preventDefault(); + event.stopPropagation(); + }; + componentDidMount() { window.addEventListener('mousemove', this.handleMovement); window.addEventListener('touchstart', this.handleMovement); + document.body.addEventListener('touchmove', this.handleTouchMove, false); } componentWillUnmount() { window.removeEventListener('mousemove', this.handleMovement); window.removeEventListener('touchstart', this.handleMovement); + document.body.removeEventListener('touchmove', this.handleTouchMove); } render() From 3a0d6f3622e1906f1e9a3a1dc7cfcdff7a80a42e Mon Sep 17 00:00:00 2001 From: Torjus Date: Thu, 9 Aug 2018 10:19:53 +0200 Subject: [PATCH 7/7] Revert "Attempt fixing scrolling by preventing touchmove events" This reverts commit bf4a2e489f3e80ec7037c01a3e413bd5de301f74. --- app/lib/components/Room.jsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/app/lib/components/Room.jsx b/app/lib/components/Room.jsx index f388b88..cf394ef 100644 --- a/app/lib/components/Room.jsx +++ b/app/lib/components/Room.jsx @@ -49,24 +49,16 @@ class Room extends React.Component this.waitForHide(); } - handleTouchMove = (event) => - { - event.preventDefault(); - event.stopPropagation(); - }; - componentDidMount() { window.addEventListener('mousemove', this.handleMovement); window.addEventListener('touchstart', this.handleMovement); - document.body.addEventListener('touchmove', this.handleTouchMove, false); } componentWillUnmount() { window.removeEventListener('mousemove', this.handleMovement); window.removeEventListener('touchstart', this.handleMovement); - document.body.removeEventListener('touchmove', this.handleTouchMove); } render()