From 4b3b32b5f4ce7f2c2fd8418e6d34fdceee507338 Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Fri, 27 Jul 2018 21:44:49 +0000
Subject: [PATCH] Add invite nag to top of screen and entry flow
---
src/assets/stylesheets/entry.scss | 9 +++++++++
src/assets/stylesheets/shared.scss | 2 +-
src/assets/stylesheets/ui-root.scss | 19 +++++++++++++++++++
src/assets/translations.data.json | 1 +
src/react-components/ui-root.js | 13 +++++++++++++
5 files changed, 43 insertions(+), 1 deletion(-)
diff --git a/src/assets/stylesheets/entry.scss b/src/assets/stylesheets/entry.scss
index 973a30f18..6dcd41564 100644
--- a/src/assets/stylesheets/entry.scss
+++ b/src/assets/stylesheets/entry.scss
@@ -65,6 +65,15 @@
align-self: center;
width: 75%;
}
+
+ :local(.presence-info) {
+ margin: 18px;
+ font-size: 1.3em;
+
+ :local(.people) {
+ font-weight: bold;
+ }
+ }
}
:local(.webvr-link-container) {
diff --git a/src/assets/stylesheets/shared.scss b/src/assets/stylesheets/shared.scss
index 7bb016fff..b456c5c4e 100644
--- a/src/assets/stylesheets/shared.scss
+++ b/src/assets/stylesheets/shared.scss
@@ -62,7 +62,7 @@ $darkest-grey: rgba(32, 32, 32, 1.0);
font-weight: bold;
cursor: pointer;
border: 3px solid white;
- border-radius: 14px;
+ border-radius: 26px;
padding: 12px;
background: #2F80ED;
font-size: 1.3em;
diff --git a/src/assets/stylesheets/ui-root.scss b/src/assets/stylesheets/ui-root.scss
index a5b5bb4de..a0dba9659 100644
--- a/src/assets/stylesheets/ui-root.scss
+++ b/src/assets/stylesheets/ui-root.scss
@@ -1,3 +1,5 @@
+@import 'shared';
+
#ui-root .ui {
@extend %default-font;
@@ -69,3 +71,20 @@
.ui-interactive {
pointer-events: auto;
}
+
+:local(.invite-nag-button) {
+ position: absolute;
+ top: 110px;
+ left: 0;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 80px;
+ pointer-events: none;
+
+ button {
+ @extend %big-action-button;
+ pointer-events: auto;
+ }
+}
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index 1e868643b..aaefa3e3d 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -20,6 +20,7 @@
"entry.daydream-medium": "Daydream",
"entry.daydream-via-chrome": "Using Google Chrome",
"entry.invite-others": "invite others",
+ "entry.invite-others-nag": "invite others to join",
"entry.enable-screen-sharing": "Share my desktop",
"profile.save": "save",
"profile.display_name.validation_warning": "Alphanumerics and hyphens. At least 3 characters, no more than 32",
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index d4830b899..c5214cbae 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -6,6 +6,7 @@ import { IntlProvider, FormattedMessage, addLocaleData } from "react-intl";
import en from "react-intl/locale-data/en";
import MovingAverage from "moving-average";
import screenfull from "screenfull";
+import styles from "../assets/stylesheets/ui-root.scss";
import entryStyles from "../assets/stylesheets/entry.scss";
import { lang, messages } from "../utils/i18n";
@@ -637,6 +638,11 @@ class UIRoot extends Component {
this.state.entryStep === ENTRY_STEPS.start ? (
<div className={entryStyles.entryPanel}>
<div className={entryStyles.buttonContainer}>
+ {false /* TODO */ && (
+ <div className={entryStyles.presenceInfo}>
+ <span className={entryStyles.people}>2 people</span> have joined
+ </div>
+ )}
<button
className={entryStyles.inviteButton}
onClick={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.invite })}
@@ -881,6 +887,13 @@ class UIRoot extends Component {
onToggleSpaceBubble={this.toggleSpaceBubble}
onClickAddMedia={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.add_media })}
/>
+ {this.props.occupantCount <= 1 && (
+ <div className={styles.inviteNagButton}>
+ <button onClick={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.invite })}>
+ <FormattedMessage id="entry.invite-others-nag" />
+ </button>
+ </div>
+ )}
<Footer
hubName={this.props.hubName}
occupantCount={this.props.occupantCount}
--
GitLab