From 986df266b19de0171ba047a823b62ebd43230286 Mon Sep 17 00:00:00 2001
From: johnshaughnessy <johnfshaughnessy@gmail.com>
Date: Tue, 4 Sep 2018 17:14:09 -0700
Subject: [PATCH] Arrange the buttons left and right when in landscape mode
---
src/assets/stylesheets/2d-hud.scss | 18 +++++++++++++++++-
src/react-components/2d-hud.js | 26 ++++++++++++++++++++------
src/react-components/ui-root.js | 9 ++++++++-
3 files changed, 45 insertions(+), 8 deletions(-)
diff --git a/src/assets/stylesheets/2d-hud.scss b/src/assets/stylesheets/2d-hud.scss
index 88e643312..7e1d04359 100644
--- a/src/assets/stylesheets/2d-hud.scss
+++ b/src/assets/stylesheets/2d-hud.scss
@@ -18,7 +18,17 @@
}
&:local(.aboveBottom) {
- bottom: 120px;
+ bottom: 110px;
+ }
+
+ &:local(.bottomLeft) {
+ bottom: 10px;
+ right: 35px;
+ }
+
+ &:local(.bottomRight) {
+ bottom: 10px;
+ left: 35px;
}
}
@@ -62,6 +72,12 @@
height: 30px;
}
+:local(.iconButton.medium) {
+ width: 60px;
+ height: 60px;
+ z-index: 1;
+}
+
:local(.iconButton.large) {
width: 80px;
height: 80px;
diff --git a/src/react-components/2d-hud.js b/src/react-components/2d-hud.js
index e50d29598..e533be11c 100644
--- a/src/react-components/2d-hud.js
+++ b/src/react-components/2d-hud.js
@@ -38,7 +38,7 @@ TopHUD.propTypes = {
};
const mediaPickerInput = "media-picker-input";
-const BottomHUD = ({ onCreateObject, showImageOnlyButton, onMediaPicked }) => (
+const BottomHUD = ({ onCreateObject, showImageOnlyButton, onMediaPicked, landscapeMode }) => (
<div>
{showImageOnlyButton ? (
<div>
@@ -53,9 +53,17 @@ const BottomHUD = ({ onCreateObject, showImageOnlyButton, onMediaPicked }) => (
}
}}
/>
- <label htmlFor={mediaPickerInput} className={cx(styles.container, styles.aboveBottom)}>
+ <label
+ htmlFor={mediaPickerInput}
+ className={cx(styles.container, landscapeMode ? styles.bottomLeft : styles.aboveBottom)}
+ >
<div
- className={cx("ui-interactive", styles.iconButton, styles.large, styles.mobileMediaPicker)}
+ className={cx(
+ "ui-interactive",
+ styles.iconButton,
+ landscapeMode ? styles.medium : styles.large,
+ styles.mobileMediaPicker
+ )}
title={"Pick Media"}
/>
</label>
@@ -63,9 +71,14 @@ const BottomHUD = ({ onCreateObject, showImageOnlyButton, onMediaPicked }) => (
) : (
<div />
)}
- <div className={cx(styles.container, styles.bottom)}>
+ <div className={cx(styles.container, landscapeMode ? styles.bottomRight : styles.bottom)}>
<div
- className={cx("ui-interactive", styles.iconButton, styles.large, styles.createObject)}
+ className={cx(
+ "ui-interactive",
+ styles.iconButton,
+ landscapeMode ? styles.medium : styles.large,
+ styles.createObject
+ )}
title={"Create Object"}
onClick={onCreateObject}
/>
@@ -76,7 +89,8 @@ const BottomHUD = ({ onCreateObject, showImageOnlyButton, onMediaPicked }) => (
BottomHUD.propTypes = {
onCreateObject: PropTypes.func,
showImageOnlyButton: PropTypes.bool,
- onMediaPicked: PropTypes.func
+ onMediaPicked: PropTypes.func,
+ landscapeMode: PropTypes.bool
};
export default { TopHUD, BottomHUD };
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 30880cee9..fa1047e36 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -108,7 +108,8 @@ class UIRoot extends Component {
exited: false,
- showProfileEntry: false
+ showProfileEntry: false,
+ landscapeMode: false
};
constructor(props) {
@@ -123,6 +124,11 @@ class UIRoot extends Component {
this.props.scene.addEventListener("stateadded", this.onAframeStateChanged);
this.props.scene.addEventListener("stateremoved", this.onAframeStateChanged);
this.props.scene.addEventListener("exit", this.exit);
+ window.addEventListener("deviceorientation", () => {
+ this.setState({
+ landscapeMode: AFRAME.utils.device.isMobile() && document.body.clientWidth > document.body.clientHeight
+ });
+ });
}
componentWillUnmount() {
@@ -912,6 +918,7 @@ class UIRoot extends Component {
onCreateObject={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.create_object })}
showImageOnlyButton={AFRAME.utils.device.isMobile()}
onMediaPicked={this.handleCreateObject}
+ landscapeMode={this.state.landscapeMode}
/>
</div>
) : null}
--
GitLab