From 791b40d91f8aae8c878c041c6001c673f9de82bb Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Sun, 30 Sep 2018 21:57:48 +0000
Subject: [PATCH] Panel now visible at bottom
---
src/assets/stylesheets/entry.scss | 2 -
src/assets/stylesheets/ui-root.scss | 49 ++++++------
src/assets/translations.data.json | 2 +-
src/react-components/2d-hud.js | 14 ++--
src/react-components/profile-info-header.js | 28 -------
src/react-components/ui-root.js | 84 +++++++++------------
6 files changed, 73 insertions(+), 106 deletions(-)
delete mode 100644 src/react-components/profile-info-header.js
diff --git a/src/assets/stylesheets/entry.scss b/src/assets/stylesheets/entry.scss
index 5dc16221c..ebe099a30 100644
--- a/src/assets/stylesheets/entry.scss
+++ b/src/assets/stylesheets/entry.scss
@@ -3,7 +3,6 @@
:local(.entry-dialog) {
display: flex;
flex-direction: column;
- height: 100%;
align-items: center;
}
@@ -53,7 +52,6 @@
:local(.button-container) {
margin: auto;
- margin-top: -72px;
text-align: center;
flex: 10;
display: flex;
diff --git a/src/assets/stylesheets/ui-root.scss b/src/assets/stylesheets/ui-root.scss
index 93771621f..03ffe8717 100644
--- a/src/assets/stylesheets/ui-root.scss
+++ b/src/assets/stylesheets/ui-root.scss
@@ -1,6 +1,6 @@
@import 'shared';
-#ui-root .ui {
+:local(.ui) {
@extend %default-font;
width: 100%;
@@ -11,14 +11,14 @@
pointer-events: none;
color: white;
- &__help-icon {
+ :local(.help-icon) {
@extend %fa-icon-button;
pointer-events: auto;
position: absolute;
top: 0px;
- left: 14px;
+ right: 14px;
- &__icon {
+ i {
background: rgba(33, 33, 33, 0.5);
border-radius: 36px;
display: inline-block;
@@ -36,39 +36,37 @@
filter: blur(5px) saturate(1.1) brightness(1.1);
}
-.ui-dialog {
- display: grid;
- grid-template-columns: 1fr 20px minmax(200px, 400px) 20px 1fr;
- grid-template-rows: 1fr 20px minmax(200px, 600px) 20px 1fr;
- width: 100%;
+:local(.ui-dialog) {
+ position: absolute;
+ top: 0;
+ left: 0;
height: 100%;
+ width: 100%;
@extend %unselectable;
+ flex-direction: column;
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
&--darkened {
background-color: $dark-transparent;
}
}
-.ui-dialog-box {
- grid-column: 3;
- grid-row: 3;
- position: relative;
-}
-
-.ui-dialog-box-contents {
+:local(.ui-dialog-box-contents) {
background-color: $light-transparent;
- border-radius: 18px;
+ border-radius: 18px 18px 0 0;
width: 100%;
- height: 100%;
+ max-width: 600px;
- &--backgrounded {
+ :local(.backgrounded) {
filter: blur(1px);
opacity: 0.7;
pointer-events: none;
}
}
-.ui-interactive {
+:local(.ui-interactive) {
pointer-events: auto;
@extend %unselectable;
}
@@ -76,13 +74,13 @@
:local(.nag-button) {
@extend %unselectable;
position: absolute;
- top: 110px;
+ top: 0;
left: 0;
+ margin-top: 16px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
- height: 80px;
pointer-events: none;
button {
@@ -90,6 +88,7 @@
pointer-events: auto;
padding: 16px 28px;
height: 58px;
+ border: 0;
}
@media (max-height: 420px) {
@@ -97,6 +96,10 @@
}
}
+:local(.nag-button-below-hud) {
+ margin-top: 100px;
+}
+
:local(.nag-corner-button) {
position: absolute;
bottom: 42px;
@@ -136,7 +139,7 @@
text-align: right;
position: absolute;
top: 0;
- right: 16px;
+ left: 16px;
margin: 16px 0;
display: flex;
align-items: center;
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index d29f96029..f9d16f9d8 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -24,7 +24,7 @@
"entry.daydream-medium": "Daydream",
"entry.daydream-via-chrome": "Using Google Chrome",
"entry.invite-others": "invite others",
- "entry.invite-others-nag": "invite others here",
+ "entry.invite-others-nag": "invite",
"entry.invite-team-nag": "Invite a hubs team member",
"entry.enable-screen-sharing": "Share my desktop",
"entry.return-to-vr": "Enter in VR",
diff --git a/src/react-components/2d-hud.js b/src/react-components/2d-hud.js
index 6c31677f5..7812ec555 100644
--- a/src/react-components/2d-hud.js
+++ b/src/react-components/2d-hud.js
@@ -3,10 +3,12 @@ import PropTypes from "prop-types";
import cx from "classnames";
import styles from "../assets/stylesheets/2d-hud.scss";
+import uiStyles from "../assets/stylesheets/ui-root.scss";
const TopHUD = ({ muted, frozen, onToggleMute, onToggleFreeze, onSpawnPen, onSpawnCamera }) => (
<div className={cx(styles.container, styles.top, styles.unselectable)}>
- <div className={cx("ui-interactive", styles.panel, styles.left)}>
+ <div className={cx(uiStyles.uiInteractive, styles.panel, styles.left)}>
+ <div className={cx(styles.iconButton)} />
<div
className={cx(styles.iconButton, styles.mute, { [styles.active]: muted })}
title={muted ? "Unmute Mic" : "Mute Mic"}
@@ -14,11 +16,13 @@ const TopHUD = ({ muted, frozen, onToggleMute, onToggleFreeze, onSpawnPen, onSpa
/>
</div>
<div
- className={cx("ui-interactive", styles.iconButton, styles.large, styles.freeze, { [styles.active]: frozen })}
+ className={cx(uiStyles.uiInteractive, styles.iconButton, styles.large, styles.freeze, {
+ [styles.active]: frozen
+ })}
title={frozen ? "Resume" : "Pause"}
onClick={onToggleFreeze}
/>
- <div className={cx("ui-interactive", styles.panel, styles.right)}>
+ <div className={cx(uiStyles.uiInteractive, styles.panel, styles.right)}>
<div className={cx(styles.iconButton, styles.spawn_pen)} title={"Drawing Pen"} onClick={onSpawnPen} />
<div className={cx(styles.iconButton, styles.spawn_camera)} title={"Camera"} onClick={onSpawnCamera} />
</div>
@@ -37,7 +41,7 @@ TopHUD.propTypes = {
const BottomHUD = ({ onCreateObject, showPhotoPicker, onMediaPicked }) => (
<div className={cx(styles.container, styles.column, styles.bottom, styles.unselectable)}>
{showPhotoPicker ? (
- <div className={cx("ui-interactive", styles.panel, styles.up)}>
+ <div className={cx(uiStyles.uiInteractive, styles.panel, styles.up)}>
<input
id="media-picker-input"
className={cx(styles.hide)}
@@ -59,7 +63,7 @@ const BottomHUD = ({ onCreateObject, showPhotoPicker, onMediaPicked }) => (
)}
<div>
<div
- className={cx("ui-interactive", styles.iconButton, styles.large, styles.createObject)}
+ className={cx(uiStyles.uiInteractive, styles.iconButton, styles.large, styles.createObject)}
title={"Create Object"}
onClick={onCreateObject}
/>
diff --git a/src/react-components/profile-info-header.js b/src/react-components/profile-info-header.js
deleted file mode 100644
index 7afb16b54..000000000
--- a/src/react-components/profile-info-header.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faQuestion } from "@fortawesome/free-solid-svg-icons/faQuestion";
-
-export const ProfileInfoHeader = props => (
- <div className="profile-info-header">
- <div className="profile-info-header__menu-buttons">
- <button className="profile-info-header__menu-buttons__menu-button" onClick={props.onClickHelp}>
- <i className="profile-info-header__menu-buttons__menu-button__icon">
- <FontAwesomeIcon icon={faQuestion} />
- </i>
- </button>
- </div>
- <div className="profile-info-header__profile_display_name">
- <img src="../assets/images/account.svg" onClick={props.onClickName} className="profile-info-header__icon" />
- <div onClick={props.onClickName} title={props.name}>
- {props.name}
- </div>
- </div>
- </div>
-);
-
-ProfileInfoHeader.propTypes = {
- onClickName: PropTypes.func,
- onClickHelp: PropTypes.func,
- name: PropTypes.string
-};
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 63d32b179..d441f5d9f 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -18,7 +18,6 @@ import {
DaydreamEntryButton,
SafariEntryButton
} from "./entry-buttons.js";
-import { ProfileInfoHeader } from "./profile-info-header.js";
import ProfileEntryPanel from "./profile-entry-panel";
import HelpDialog from "./help-dialog.js";
import SafariDialog from "./safari-dialog.js";
@@ -96,6 +95,7 @@ class UIRoot extends Component {
mediaStream: null,
videoTrack: null,
audioTrack: null,
+ lowerPanelCollapsed: false,
toneInterval: null,
tonePlaying: false,
@@ -673,9 +673,6 @@ class UIRoot extends Component {
</div>
)}
{screenSharingCheckbox}
- <button className={entryStyles.inviteButton} onClick={() => this.showInviteDialog()}>
- <FormattedMessage id="entry.invite-others" />
- </button>
</div>
</div>
);
@@ -859,55 +856,54 @@ class UIRoot extends Component {
<AutoExitWarning secondsRemaining={this.state.secondsRemainingBeforeAutoExit} onCancel={this.endAutoExitTimer} />
) : (
<div className={entryStyles.entryDialog}>
- <ProfileInfoHeader
- name={this.props.store.state.profile.displayName}
- onClickName={() => this.setState({ showProfileEntry: true })}
- onClickHelp={() => this.showHelpDialog()}
- />
{entryPanel}
{micPanel}
{audioSetupPanel}
</div>
);
- const dialogBoxClassNames = classNames({ "ui-interactive": !this.state.dialog, "ui-dialog-box": true });
-
const dialogBoxContentsClassNames = classNames({
- "ui-dialog-box-contents": true,
- "ui-dialog-box-contents--backgrounded": this.state.showProfileEntry
+ [styles.uiInteractive]: !this.state.dialog,
+ [styles.uiDialogBoxContents]: true,
+ [styles.backgrounded]: this.state.showProfileEntry
});
+ const entryFinished = this.state.entryStep === ENTRY_STEPS.finished;
+
return (
<IntlProvider locale={lang} messages={messages}>
- <div className="ui">
+ <div className={styles.ui}>
{this.state.dialog}
- {this.state.entryStep === ENTRY_STEPS.finished && (
- <button onClick={() => this.showHelpDialog()} className="ui__help-icon">
- <i className="ui__help-icon__icon">
- <FontAwesomeIcon icon={faQuestion} />
- </i>
- </button>
- )}
+ <button onClick={() => this.showHelpDialog()} className={styles.helpIcon}>
+ <i>
+ <FontAwesomeIcon icon={faQuestion} />
+ </i>
+ </button>
+
+ <div className={styles.presenceInfo}>
+ <FontAwesomeIcon icon={faUsers} />
+ <span className={styles.occupantCount}>{this.props.occupantCount || "-"}</span>
+ </div>
- {this.state.entryStep === ENTRY_STEPS.finished && (
- <div className={styles.presenceInfo}>
- <FontAwesomeIcon icon={faUsers} />
- <span className={styles.occupantCount}>{this.props.occupantCount || "-"}</span>
+ {(!entryFinished || this.isWaitingForAutoExit()) && (
+ <div className={styles.uiDialog}>
+ <div className={dialogBoxContentsClassNames}>{dialogContents}</div>
+
+ {this.state.showProfileEntry && (
+ <ProfileEntryPanel finished={this.onProfileFinished} store={this.props.store} />
+ )}
</div>
)}
- <div className="ui-dialog">
- {(this.state.entryStep !== ENTRY_STEPS.finished || this.isWaitingForAutoExit()) && (
- <div className={dialogBoxClassNames}>
- <div className={dialogBoxContentsClassNames}>{dialogContents}</div>
-
- {this.state.showProfileEntry && (
- <ProfileEntryPanel finished={this.onProfileFinished} store={this.props.store} />
- )}
+ {!this.props.availableVREntryTypes.isInHMD &&
+ (!entryFinished || this.props.occupantCount <= 1) && (
+ <div className={classNames({ [styles.nagButton]: true, [styles.nagButtonBelowHud]: entryFinished })}>
+ <button onClick={() => this.showInviteDialog()}>
+ <FormattedMessage id="entry.invite-others-nag" />
+ </button>
</div>
)}
- </div>
{this.state.entryStep === ENTRY_STEPS.finished ? (
<div>
<TwoDHUD.TopHUD
@@ -920,14 +916,6 @@ class UIRoot extends Component {
onSpawnPen={this.spawnPen}
onSpawnCamera={() => this.props.scene.emit("action_spawn_camera")}
/>
- {!this.props.availableVREntryTypes.isInHMD &&
- this.props.occupantCount <= 1 && (
- <div className={styles.nagButton}>
- <button onClick={() => this.showInviteDialog()}>
- <FormattedMessage id="entry.invite-others-nag" />
- </button>
- </div>
- )}
{this.props.availableVREntryTypes.isInHMD && (
<div className={styles.nagButton}>
<button onClick={() => this.props.scene.enterVR()}>
@@ -942,11 +930,13 @@ class UIRoot extends Component {
</button>
</div>
)}
- <TwoDHUD.BottomHUD
- onCreateObject={() => this.showCreateObjectDialog()}
- showPhotoPicker={AFRAME.utils.device.isMobile()}
- onMediaPicked={this.createObject}
- />
+ {!this.isWaitingForAutoExit() && (
+ <TwoDHUD.BottomHUD
+ onCreateObject={() => this.showCreateObjectDialog()}
+ showPhotoPicker={AFRAME.utils.device.isMobile()}
+ onMediaPicked={this.createObject}
+ />
+ )}
</div>
) : null}
</div>
--
GitLab