From 21c37410e63ddbe984072d303ebc45da6161e75d Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Fri, 6 Apr 2018 09:24:30 -0400
Subject: [PATCH] Manually fire tab change events onclick to fix touching tabs
not working
It seems like there is some kind of touch action interference coming
from the blocks panel, where if you touch the tabs on a touchscreen
chromebook/chrome responsive mode, it does not select the tab if the
touch radius is overlapping the blocks panel at all. See gifs in PR for
more explanation. Fixes issue #1283, making chromebooks useable!
---
src/components/gui/gui.jsx | 21 ++++++++++++++++++---
src/containers/gui.jsx | 5 ++++-
2 files changed, 22 insertions(+), 4 deletions(-)
diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index 37a66c308..37feae634 100644
--- a/src/components/gui/gui.jsx
+++ b/src/components/gui/gui.jsx
@@ -54,6 +54,9 @@ const GUIComponent = props => {
loading,
onExtensionButtonClick,
onActivateTab,
+ onActivateCostumesTab,
+ onActivateSoundsTab,
+ onActivateBlocksTab,
previewInfoVisible,
soundsTabVisible,
vm,
@@ -113,7 +116,10 @@ const GUIComponent = props => {
onSelect={onActivateTab}
>
<TabList className={tabClassNames.tabList}>
- <Tab className={tabClassNames.tab}>
+ <Tab
+ className={tabClassNames.tab}
+ onClick={onActivateBlocksTab}
+ >
<img
draggable={false}
src={codeIcon}
@@ -124,7 +130,10 @@ const GUIComponent = props => {
id="gui.gui.codeTab"
/>
</Tab>
- <Tab className={tabClassNames.tab}>
+ <Tab
+ className={tabClassNames.tab}
+ onClick={onActivateCostumesTab}
+ >
<img
draggable={false}
src={costumesIcon}
@@ -135,7 +144,10 @@ const GUIComponent = props => {
id="gui.gui.costumesTab"
/>
</Tab>
- <Tab className={tabClassNames.tab}>
+ <Tab
+ className={tabClassNames.tab}
+ onClick={onActivateSoundsTab}
+ >
<img
draggable={false}
src={soundsIcon}
@@ -221,6 +233,9 @@ GUIComponent.propTypes = {
intl: intlShape.isRequired,
loading: PropTypes.bool,
onActivateTab: PropTypes.func,
+ onActivateBlocksTab: PropTypes.func,
+ onActivateCostumesTab: PropTypes.func,
+ onActivateSoundsTab: PropTypes.func,
onExtensionButtonClick: PropTypes.func,
onTabSelect: PropTypes.func,
previewInfoVisible: PropTypes.bool,
diff --git a/src/containers/gui.jsx b/src/containers/gui.jsx
index 85b3a7acd..3c2d2ddcf 100644
--- a/src/containers/gui.jsx
+++ b/src/containers/gui.jsx
@@ -107,7 +107,10 @@ const mapStateToProps = state => ({
const mapDispatchToProps = dispatch => ({
onExtensionButtonClick: () => dispatch(openExtensionLibrary()),
- onActivateTab: tab => dispatch(activateTab(tab))
+ onActivateTab: tab => dispatch(activateTab(tab)),
+ onActivateBlocksTab: () => dispatch(activateTab(BLOCKS_TAB_INDEX)),
+ onActivateCostumesTab: () => dispatch(activateTab(COSTUMES_TAB_INDEX)),
+ onActivateSoundsTab: () => dispatch(activateTab(SOUNDS_TAB_INDEX))
});
const ConnectedGUI = connect(
--
GitLab