From 39072f10c231e8cea45aaa039b1355f806009fbd Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Thu, 26 Jul 2018 00:55:16 +0000
Subject: [PATCH] New options dialog for room creation
---
src/assets/stylesheets/hub-create.scss | 5 ++-
src/assets/stylesheets/info-dialog.scss | 40 ++++++++++++------------
src/assets/translations.data.json | 2 +-
src/react-components/hub-create-panel.js | 4 +--
src/react-components/info-dialog.js | 20 +++++++++---
5 files changed, 40 insertions(+), 31 deletions(-)
diff --git a/src/assets/stylesheets/hub-create.scss b/src/assets/stylesheets/hub-create.scss
index b9a69e4bc..e3810f19e 100644
--- a/src/assets/stylesheets/hub-create.scss
+++ b/src/assets/stylesheets/hub-create.scss
@@ -149,13 +149,12 @@
@extend %default-font;
cursor: pointer;
position: absolute;
- bottom: 14px;
- left: 12px;
+ top: 14px;
+ right: 12px;
font-size: 1.3em;
text-shadow: 0px 0px 6px #202020;
color: $light-text;
appearance: none;
- text-decoration: underline;
-moz-appearance: none;
-webkit-appearance: none;
background: transparent;
diff --git a/src/assets/stylesheets/info-dialog.scss b/src/assets/stylesheets/info-dialog.scss
index 05aec48c4..3f321a7c9 100644
--- a/src/assets/stylesheets/info-dialog.scss
+++ b/src/assets/stylesheets/info-dialog.scss
@@ -11,7 +11,7 @@
.dialog {
display: grid;
grid-template-columns: 1fr 20px minmax(200px, 525px) 20px 1fr;
- grid-template-rows: 1fr 20px 275px 20px 1fr;
+ grid-template-rows: 1fr 20px 350px 20px 1fr;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.6);
@@ -38,19 +38,19 @@
position: relative;
&__title {
- @extend %top-title;
- margin-bottom: 20px;
+ @extend %top-title;
+ margin-bottom: 20px;
}
&__body {
- font-size: 1.1em;
- color: $grey-text;
- display: flex;
- flex-direction: column;
- height: 100%;
- overflow-y: auto;
-
- a { color: white }
+ font-size: 1.1em;
+ color: $grey-text;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ overflow-y: auto;
+
+ a { color: white }
}
&__links {
@@ -65,15 +65,15 @@
&__close {
- position: absolute;
- left: 12px;
- top: 6px;
- color: white;
- font-size: 1.4em;
-
- background: none;
- cursor: pointer;
- border: none;
+ position: absolute;
+ left: 12px;
+ top: 6px;
+ color: white;
+ font-size: 1.4em;
+
+ background: none;
+ cursor: pointer;
+ border: none;
}
}
}
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index 0dfe136d1..cc77ac477 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -45,7 +45,7 @@
"autoexit.title_units": " seconds",
"autoexit.subtitle": "You have started another session.",
"autoexit.cancel": "CANCEL",
- "home.room_create_options": "Options",
+ "home.room_create_options": "options",
"home.create_name.validation_warning": "Invalid name, limited to 4 to 64 characters and limited symbols.",
"home.webvr_disclaimer_pre": "A ",
"home.webvr_disclaimer_post": " experiment by ",
diff --git a/src/react-components/hub-create-panel.js b/src/react-components/hub-create-panel.js
index 8d8321834..a5e67d34f 100644
--- a/src/react-components/hub-create-panel.js
+++ b/src/react-components/hub-create-panel.js
@@ -259,8 +259,8 @@ class HubCreatePanel extends Component {
<InfoDialog
dialogType={dialogTypes.custom_scene}
onCloseDialog={() => this.setState({ showCustomSceneDialog: false })}
- onCustomScene={url => {
- this.setState({ showCustomSceneDialog: false, customSceneUrl: url }, () => this.createHub());
+ onCustomScene={(name, url) => {
+ this.setState({ showCustomSceneDialog: false, name: name, customSceneUrl: url }, () => this.createHub());
}}
/>
)}
diff --git a/src/react-components/info-dialog.js b/src/react-components/info-dialog.js
index 2111626fb..cc73d8ce6 100644
--- a/src/react-components/info-dialog.js
+++ b/src/react-components/info-dialog.js
@@ -6,6 +6,7 @@ import { FormattedMessage } from "react-intl";
import formurlencoded from "form-urlencoded";
import LinkDialog from "./link-dialog.js";
import MediaToolsDialog from "./media-tools-dialog.js";
+const HUB_NAME_PATTERN = "^[A-Za-z0-9-'\":!@#$%^&*(),.?~ ]{4,64}$";
// TODO i18n
@@ -62,7 +63,7 @@ class InfoDialog extends Component {
};
onCustomSceneClicked = () => {
- this.props.onCustomScene(this.state.customSceneUrl);
+ this.props.onCustomScene(this.state.customRoomName, this.state.customSceneUrl);
this.props.onCloseDialog();
};
@@ -83,6 +84,7 @@ class InfoDialog extends Component {
mailingListPrivacy: false,
copyLinkButtonText: "Copy",
addMediaUrl: "",
+ customRoomName: "",
customSceneUrl: ""
};
@@ -201,19 +203,27 @@ class InfoDialog extends Component {
dialogBody = <MediaToolsDialog onAddMedia={this.props.onAddMedia} onCloseDialog={this.props.onCloseDialog} />;
break;
case InfoDialog.dialogTypes.custom_scene:
- dialogTitle = "Use Custom Scene";
+ dialogTitle = "Create a Room";
dialogBody = (
<div>
- <div>Enter a URL to a GLTF file to use for your room's scene:</div>
+ <div>Choose a name and GLTF URL for your room's scene:</div>
<form onSubmit={this.onCustomSceneClicked}>
<div className="custom-scene-form">
+ <input
+ type="text"
+ placeholder="Room name"
+ className="custom-scene-form__link_field"
+ value={this.state.customRoomName}
+ pattern={HUB_NAME_PATTERN}
+ onChange={e => this.setState({ customRoomName: e.target.value })}
+ required
+ />
<input
type="url"
- placeholder="URL to Scene GLTF or GLB"
+ placeholder="URL to Scene GLTF or GLB (Optional)"
className="custom-scene-form__link_field"
value={this.state.customSceneUrl}
onChange={e => this.setState({ customSceneUrl: e.target.value })}
- required
/>
<div className="custom-scene-form__buttons">
<button className="custom-scene-form__action-button">
--
GitLab