diff --git a/src/assets/stylesheets/entry.scss b/src/assets/stylesheets/entry.scss index 973a30f183a63b309303108e583e6bb5a6f6d581..6dcd4156495a9c3efcfc355de6cd27a6ac9d08ba 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 7bb016fff35aa6590474013cabfbbfab1f7ffde3..b456c5c4e581b2dae15fbb5e1c947f815db91c22 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 a5b5bb4de929ea516bf9ebfd498db7daac6e8dd3..a0dba96590331b1b407a88d1a2f54cbc190259ee 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 1e868643be0e4f4f603371d6c17b6ad0373f0609..aaefa3e3de60040413bb250b2d621b8e13866d48 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 d4830b899cf0f616e6cd8caa2bb6902d66a2868d..c5214cbae016067e59beb8fca459208d636e6a73 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}