From d227543a8ec74dc6eb0217e115044e8c5d35da5b Mon Sep 17 00:00:00 2001
From: johnshaughnessy <johnfshaughnessy@gmail.com>
Date: Tue, 4 Sep 2018 18:42:25 -0700
Subject: [PATCH] Restyle the bottom HUD to be a vertical version of the top
---
src/assets/stylesheets/2d-hud.scss | 37 +++++++++----------
src/components/virtual-gamepad-controls.css | 4 +-
src/react-components/2d-hud.js | 41 ++++++---------------
src/react-components/ui-root.js | 11 +-----
4 files changed, 33 insertions(+), 60 deletions(-)
diff --git a/src/assets/stylesheets/2d-hud.scss b/src/assets/stylesheets/2d-hud.scss
index 3c8ed5788..67fbc0ada 100644
--- a/src/assets/stylesheets/2d-hud.scss
+++ b/src/assets/stylesheets/2d-hud.scss
@@ -5,31 +5,26 @@
display: flex;
justify-content: center;
align-items: center;
- height: 80px;
width: 100%;
user-select: none;
&:local(.top) {
top: 10px;
+ height: 80px;
}
- &:local(.bottom) {
+ &:local(.column) {
+ flex-direction: column;
bottom: 20px;
}
+}
- &:local(.aboveBottom) {
- bottom: 110px;
- }
-
- &:local(.bottomLeft) {
- bottom: 10px;
- right: 35px;
- }
+:local(.bottom) {
+ margin-bottom: 20px;
+}
- &:local(.bottomRight) {
- bottom: 10px;
- left: 35px;
- }
+:local(.hide) {
+ display: none;
}
:local(.panel) {
@@ -56,6 +51,14 @@
margin-left: -40px;
}
+:local(.panel.up) {
+ border-top-right-radius: 30px;
+ border-top-left-radius: 30px;
+ padding-top: 5px;
+ padding-bottom: 45px;
+ margin-bottom: -40px;
+}
+
:local(.iconButton) {
width: 40px;
height: 40px;
@@ -72,12 +75,6 @@
height: 30px;
}
-:local(.iconButton.medium) {
- width: 60px;
- height: 60px;
- z-index: 1;
-}
-
:local(.iconButton.large) {
width: 80px;
height: 80px;
diff --git a/src/components/virtual-gamepad-controls.css b/src/components/virtual-gamepad-controls.css
index 4270c36ad..3a5ed3c9c 100644
--- a/src/components/virtual-gamepad-controls.css
+++ b/src/components/virtual-gamepad-controls.css
@@ -6,11 +6,11 @@
:local(.touchZone.left) {
left: 0;
- right: 50%;
+ right: 55%;
}
:local(.touchZone.right) {
- left: 50%;
+ left: 55%;
right: 0;
}
diff --git a/src/react-components/2d-hud.js b/src/react-components/2d-hud.js
index e533be11c..ee5d75df5 100644
--- a/src/react-components/2d-hud.js
+++ b/src/react-components/2d-hud.js
@@ -37,13 +37,13 @@ TopHUD.propTypes = {
onToggleSpaceBubble: PropTypes.func
};
-const mediaPickerInput = "media-picker-input";
-const BottomHUD = ({ onCreateObject, showImageOnlyButton, onMediaPicked, landscapeMode }) => (
- <div>
- {showImageOnlyButton ? (
- <div>
+const BottomHUD = ({ onCreateObject, showPhotoPicker, onMediaPicked }) => (
+ <div className={cx(styles.container, styles.column, styles.bottom)}>
+ {showPhotoPicker ? (
+ <div className={cx("ui-interactive", styles.panel, styles.up)}>
<input
- id={mediaPickerInput}
+ id="media-picker-input"
+ className={cx(styles.hide)}
type="file"
accept="image/*"
multiple
@@ -53,32 +53,16 @@ const BottomHUD = ({ onCreateObject, showImageOnlyButton, onMediaPicked, landsca
}
}}
/>
- <label
- htmlFor={mediaPickerInput}
- className={cx(styles.container, landscapeMode ? styles.bottomLeft : styles.aboveBottom)}
- >
- <div
- className={cx(
- "ui-interactive",
- styles.iconButton,
- landscapeMode ? styles.medium : styles.large,
- styles.mobileMediaPicker
- )}
- title={"Pick Media"}
- />
+ <label htmlFor="media-picker-input">
+ <div className={cx(styles.iconButton, styles.mobileMediaPicker)} title={"Pick Media"} />
</label>
</div>
) : (
<div />
)}
- <div className={cx(styles.container, landscapeMode ? styles.bottomRight : styles.bottom)}>
+ <div>
<div
- className={cx(
- "ui-interactive",
- styles.iconButton,
- landscapeMode ? styles.medium : styles.large,
- styles.createObject
- )}
+ className={cx("ui-interactive", styles.iconButton, styles.large, styles.createObject)}
title={"Create Object"}
onClick={onCreateObject}
/>
@@ -88,9 +72,8 @@ const BottomHUD = ({ onCreateObject, showImageOnlyButton, onMediaPicked, landsca
BottomHUD.propTypes = {
onCreateObject: PropTypes.func,
- showImageOnlyButton: PropTypes.bool,
- onMediaPicked: PropTypes.func,
- landscapeMode: PropTypes.bool
+ showPhotoPicker: PropTypes.bool,
+ onMediaPicked: PropTypes.func
};
export default { TopHUD, BottomHUD };
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index fa1047e36..4c2a9ffdf 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -108,8 +108,7 @@ class UIRoot extends Component {
exited: false,
- showProfileEntry: false,
- landscapeMode: false
+ showProfileEntry: false
};
constructor(props) {
@@ -124,11 +123,6 @@ 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() {
@@ -916,9 +910,8 @@ class UIRoot extends Component {
)}
<TwoDHUD.BottomHUD
onCreateObject={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.create_object })}
- showImageOnlyButton={AFRAME.utils.device.isMobile()}
+ showPhotoPicker={AFRAME.utils.device.isMobile()}
onMediaPicked={this.handleCreateObject}
- landscapeMode={this.state.landscapeMode}
/>
</div>
) : null}
--
GitLab