From 946f4e88dc4c173afd7f815f596e9f025e18b384 Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Sun, 30 Sep 2018 23:42:03 +0000
Subject: [PATCH] Entry flow first steps
---
src/assets/stylesheets/audio.scss | 2 ++
src/assets/stylesheets/entry.scss | 54 ++++++++++++++++-------------
src/assets/stylesheets/shared.scss | 10 +++++-
src/assets/stylesheets/ui-root.scss | 1 -
src/assets/translations.data.json | 3 ++
src/react-components/ui-root.js | 37 +++++++++++++++-----
6 files changed, 73 insertions(+), 34 deletions(-)
diff --git a/src/assets/stylesheets/audio.scss b/src/assets/stylesheets/audio.scss
index c12b548a2..161d71dd8 100644
--- a/src/assets/stylesheets/audio.scss
+++ b/src/assets/stylesheets/audio.scss
@@ -5,6 +5,7 @@
flex-direction: column;
height: 100%;
width: 100%;
+ margin: 24px;
&__enter-button-container {
flex: 1;
@@ -110,6 +111,7 @@
justify-content: flex-start;
align-items: center;
overflow-y: auto;
+ margin: 24px;
&__grant-container {
flex: 1;
diff --git a/src/assets/stylesheets/entry.scss b/src/assets/stylesheets/entry.scss
index ebe099a30..e9752cd38 100644
--- a/src/assets/stylesheets/entry.scss
+++ b/src/assets/stylesheets/entry.scss
@@ -4,31 +4,32 @@
display: flex;
flex-direction: column;
align-items: center;
+ height: 100%;
}
:local(.entry-button) {
+ @extend %action-button;
display: flex;
- margin: 20px 0;
- margin-bottom: 0;
+ flex-direction: row;
cursor: pointer;
- background: none;
color: white;
- border: none;
align-items: center;
@extend %default-font;
+ border: 0;
+ border-radius: 12px;
+ margin: 6px;
+ padding: 12px 18px;
:local(.icon) {
- @extend %glass-icon;
- flex: 1 1 90px;
- min-width: 90px;
- min-height: 90px;
+ height: 40px;
+ width: 40px;
}
:local(.label) {
@extend %glass-text;
flex: 10 1 auto;
margin-left: 20px;
- font-size: 1.5em;
+ font-size: 0.8em;
display: flex;
flex-direction: column;
justify-content: center;
@@ -49,30 +50,35 @@
display: flex;
flex-direction: column;
flex: 1;
+ text-align: center;
+ margin: 24px;
+ min-height: 150px;
+ height: 100%;
+
+ :local(.title) {
+ @extend %top-title;
+ @extend %glass-text;
+ margin-bottom: 12px;
+ }
+
+ :local(.center) {
+ @extend %glass-text;
+ flex: 10;
+ }
:local(.button-container) {
- margin: auto;
text-align: center;
- flex: 10;
display: flex;
flex-direction: column;
- min-height: max-content;
- justify-content: center;
+ height: 100%;
+ justify-content: flex-end;
- :local(.invite-button) {
+ :local(.action-button) {
@extend %action-button;
- align-self: center;
- width: 75%;
- margin-top: 28px;
}
- :local(.presence-info) {
- margin: 18px;
- font-size: 1.3em;
-
- :local(.people) {
- font-weight: bold;
- }
+ :local(.wide-button) {
+ @extend %wide-button;
}
}
diff --git a/src/assets/stylesheets/shared.scss b/src/assets/stylesheets/shared.scss
index 1a494fc65..ddfaa1e32 100644
--- a/src/assets/stylesheets/shared.scss
+++ b/src/assets/stylesheets/shared.scss
@@ -62,12 +62,20 @@ $darkest-grey: rgba(32, 32, 32, 1.0);
margin: 16px 0;
}
+%wide-button {
+ width: 512px;
+
+ @media (max-width: 768px) {
+ width: 327px;
+ }
+}
+
%action-button {
@extend %default-font;
outline-style: none;
font-weight: bold;
cursor: pointer;
- border: 3px solid white;
+ border: 0;
border-radius: 26px;
height: 64px;
padding: 12px;
diff --git a/src/assets/stylesheets/ui-root.scss b/src/assets/stylesheets/ui-root.scss
index 03ffe8717..2ceeacef1 100644
--- a/src/assets/stylesheets/ui-root.scss
+++ b/src/assets/stylesheets/ui-root.scss
@@ -88,7 +88,6 @@
pointer-events: auto;
padding: 16px 28px;
height: 58px;
- border: 0;
}
@media (max-height: 420px) {
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index f9d16f9d8..5f2587d2e 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -4,6 +4,8 @@
"auth.verified-title": "E-Mail Verified!",
"auth.verified": "Your email has been verified!",
"auth.spoke-verified": "You email has been verified! {br} You can now close this browser tab and return to Spoke.",
+ "entry.enter-room-title": "Lobby",
+ "entry.enter-room": "enter room",
"entry.screen-prefix": "Enter on ",
"entry.desktop-screen": "Screen",
"entry.mobile-screen": "Phone",
@@ -13,6 +15,7 @@
"entry.generic-subtitle-desktop": "Oculus or SteamVR",
"entry.gearvr-prefix": "Enter on ",
"entry.gearvr-medium": "Gear VR",
+ "entry.choose-device": "Choose Device",
"entry.device-prefix-desktop": "Use a ",
"entry.device-prefix-mobile": "Use a ",
"entry.device-medium": "Mobile Headset",
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index d441f5d9f..3ed43792b 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -36,6 +36,7 @@ addLocaleData([...en]);
const ENTRY_STEPS = {
start: "start",
+ device: "device",
mic_grant: "mic_grant",
mic_granted: "mic_granted",
audio_setup: "audio_setup",
@@ -638,7 +639,26 @@ class UIRoot extends Component {
);
};
- renderDeviceSelector = () => {
+ renderEntryStartPanel = () => {
+ return (
+ <div className={entryStyles.entryPanel}>
+ <div className={entryStyles.center}>
+ <FormattedMessage id="entry.enter-room-title" />
+ </div>
+
+ <div className={entryStyles.buttonContainer}>
+ <button
+ className={classNames([entryStyles.actionButton, entryStyles.wideButton])}
+ onClick={() => this.setState({ entryStep: ENTRY_STEPS.device })}
+ >
+ <FormattedMessage id="entry.enter-room" />
+ </button>
+ </div>
+ </div>
+ );
+ };
+
+ renderDevicePanel = () => {
// Only screen sharing in desktop firefox since other browsers/platforms will ignore the "screen" media constraint and will attempt to share your webcam instead!
const isFireFox = /firefox/i.test(navigator.userAgent);
const isNonMobile = !AFRAME.utils.device.isMobile();
@@ -648,12 +668,11 @@ class UIRoot extends Component {
return (
<div className={entryStyles.entryPanel}>
+ <div className={entryStyles.title}>
+ <FormattedMessage id="entry.choose-device" />
+ </div>
+
<div className={entryStyles.buttonContainer}>
- {false /* TODO */ && (
- <div className={entryStyles.presenceInfo}>
- <span className={entryStyles.people}>2 people</span> have joined
- </div>
- )}
{this.props.availableVREntryTypes.screen === VR_DEVICE_AVAILABILITY.yes && (
<TwoDEntryButton onClick={this.enter2D} />
)}
@@ -844,7 +863,8 @@ class UIRoot extends Component {
if (isLoading) return this.renderLoader();
if (this.props.isBotMode) return this.renderBotMode();
- const entryPanel = this.state.entryStep === ENTRY_STEPS.start && this.renderDeviceSelector();
+ const startPanel = this.state.entryStep === ENTRY_STEPS.start && this.renderEntryStartPanel();
+ const devicePanel = this.state.entryStep === ENTRY_STEPS.device && this.renderDevicePanel();
const micPanel =
(this.state.entryStep === ENTRY_STEPS.mic_grant || this.state.entryStep === ENTRY_STEPS.mic_granted) &&
@@ -856,7 +876,8 @@ class UIRoot extends Component {
<AutoExitWarning secondsRemaining={this.state.secondsRemainingBeforeAutoExit} onCancel={this.endAutoExitTimer} />
) : (
<div className={entryStyles.entryDialog}>
- {entryPanel}
+ {startPanel}
+ {devicePanel}
{micPanel}
{audioSetupPanel}
</div>
--
GitLab