From 3f9792bcc6b6175ef3941f48568b45e3f28f6b4a Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Tue, 20 Mar 2018 15:18:46 -0700
Subject: [PATCH] Audio setup panel styling half way finished
---
src/assets/images/mic_small.png | Bin 0 -> 400 bytes
src/assets/translations.data.json | 6 +++-
src/react-components/ui-root.js | 27 ++++++++++-----
src/room.js | 6 ++--
src/room.scss | 53 +++++++++++++++++++++++++++++-
5 files changed, 79 insertions(+), 13 deletions(-)
create mode 100755 src/assets/images/mic_small.png
diff --git a/src/assets/images/mic_small.png b/src/assets/images/mic_small.png
new file mode 100755
index 0000000000000000000000000000000000000000..c6831f4f320d34f3550fdb0afc64845ed38ab83b
GIT binary patch
literal 400
zcmV;B0dM|^P)<h;3K|Lk000e1NJLTq000jF000*V1^@s6)Ke9_00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0VPR9K~#7F?Nh;V
zg&+`RQh`<wN^r&kv;#ePg;MCiNd@HQkrFK7mp}>r4#<0`8OD)>Nv{9RtiZBwdAouT
zHwYn&ut(UzQHc^DP=|YrCFC_jUazrlH+-4ND@(}5c#;1=mM{xz3OPM&K6t`utwUYc
z8|D=*gU?(Ne-JjMRKOT7%?5<Sp?)EcK=9r(cBAYHI3-m-$bG`z0U>2nT#@_)n34{D
zJ~HG_?l(<C!kJ90K-7f|$}yPE7s+gp!HIF<ocpd>_kF(?g<2TE?oZRCmSxdx+ft3C
zpZmlx46#3_BtOslVQikYHZUOx9E~y2A0;4;@o7CWO^`!El-GvD1YOs~lT&a_KlUFY
u|K1}sn{n26{8I-TL@AQX;&U<odKh0;L0iUY#H1?#0000<MNUMnLSTX-6P^bE
literal 0
HcmV?d00001
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index e20dbf127..0a60d285b 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -12,6 +12,10 @@
"entry.daydream-medium": "Daydream",
"profile.save": "SAVE",
"profile.display_name.validation_warning": "Alphanumerics and hyphens. At least 3 characters, no more than 32",
- "profile.header": "Your identity"
+ "profile.header": "Your identity",
+ "audio.title": "Test your audio",
+ "audio.subtitle-desktop": "Confirm HMD speaker output",
+ "audio.subtitle-mobile": "Earphones are recommended",
+ "audio.enter-now": "ENTER NOW"
}
}
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 335198556..61dda7b6f 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -15,7 +15,6 @@ const lang = ((navigator.languages && navigator.languages[0]) ||
navigator.language || navigator.userLanguage).toLowerCase().split(/[_-]+/)[0];
import localeData from '../assets/translations.data.json';
-console.log(localeData);
addLocaleData([...en]);
const messages = localeData[lang] || localeData.en;
@@ -449,19 +448,29 @@ class UIRoot extends Component {
const audioSetupPanel = this.state.entryStep === ENTRY_STEPS.audio_setup
? (
- <div>
- Audio setup
- <select value={selectedMicDeviceId} onChange={this.micDeviceChanged}>
- { this.state.micDevices.map(d => (<option key={ d.deviceId } value={ d.deviceId }>{d.label}</option>)) }
- </select>
+ <div className="audio-setup-panel">
+ <div className="audio-setup-panel--title">
+ <FormattedMessage id="audio.title"/>
+ </div>
+ <div className="audio-setup-panel--subtitle">
+ { mobiledetect.mobile() || this.state.enterInVR && (<FormattedMessage id={ mobiledetect.mobile() ? "audio.subtitle-mobile" : "audio.subtitle-desktop" }/>) }
+ </div>
+ <div className="audio-setup-panel--device-chooser">
+ <select className="audio-setup-panel--device-chooser--dropdown" value={selectedMicDeviceId} onChange={this.micDeviceChanged}>
+ { this.state.micDevices.map(d => (<option key={ d.deviceId } value={ d.deviceId }> {d.label}</option>)) }
+ </select>
+ <div className="audio-setup-panel--device-chooser--mic-icon">
+ <img src="./src/assets/images/mic_small.png"/>
+ </div>
+ </div>
<br/>
{ this.state.tonePlaying && (<div>Tone</div>) }
<br/>
{ this.state.micLevel }
<br/>
- <button onClick={this.onAudioReadyButton}>
- Audio Ready
- </button>
+ <div className="audio-setup-panel--enter-button" onClick={this.onAudioReadyButton}>
+ <FormattedMessage id="audio.enter-now"/>
+ </div>
</div>
) : null;
diff --git a/src/room.js b/src/room.js
index 715dbf7ba..64c1e9a29 100644
--- a/src/room.js
+++ b/src/room.js
@@ -235,11 +235,13 @@ function mountUI(scene) {
});
}
-document.addEventListener("DOMContentLoaded", () => {
+const onReady = () => {
registerNetworkSchemas();
const scene = document.querySelector("a-scene");
document.querySelector("a-scene canvas").classList.add("blurred");
window.APP.scene = scene;
mountUI(scene);
-});
+};
+
+document.addEventListener("DOMContentLoaded", onReady);
diff --git a/src/room.scss b/src/room.scss
index 4eb696f08..75a99a2dd 100644
--- a/src/room.scss
+++ b/src/room.scss
@@ -18,6 +18,14 @@ $darker-grey: rgba(64, 64, 64, 1.0);
border-radius: 14px;
}
+%bottom-button {
+ font-size: 1em;
+ font-weight: bold;
+ margin-top: auto;
+ margin-bottom: 30px;
+ cursor: pointer;
+}
+
.a-enter-vr {
display: none;
}
@@ -209,5 +217,48 @@ $darker-grey: rgba(64, 64, 64, 1.0);
justify-content: center;
}
-.entry-button__label__contents {
+.audio-setup-panel {
+ display: flex;
+ flex-direction: column;
+ flex: 10 1 auto;
+ justify-content: flex-start;
+ align-items: center;
+}
+
+.audio-setup-panel--title {
+ font-size: 1.3em;
+}
+
+.audio-setup-panel--subtitle {
+ font-size: 1.0em;
+ padding-top: 4px;
+}
+
+.audio-setup-panel--device-chooser {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+}
+
+.audio-setup-panel--enter-button {
+ @extend %bottom-button;
+}
+
+.audio-setup-panel--device-chooser--dropdown {
+ @extend %rounded-border;
+ @extend %default-font;
+
+ background-color: black;
+ padding: 6px;
+ color: white;
+ font-size: 1.1em;
+ width: 90%;
+}
+
+.audio-setup-panel--device-chooser--mic-icon {
+ position: absolute;
+ left: 7.5%;
+ top: 10px;
}
--
GitLab