From ceac567a4cdd91e9bc62ef2897fbaba60724c634 Mon Sep 17 00:00:00 2001
From: Brian Peiris <brianpeiris@gmail.com>
Date: Wed, 18 Apr 2018 17:25:46 -0700
Subject: [PATCH] style footer and propagate hub name
---
src/assets/stylesheets/footer.css | 2 --
src/hub.js | 7 +++++--
src/react-components/footer.js | 21 ++++++++++++---------
src/react-components/ui-root.js | 5 +++--
webpack.config.js | 6 ++++--
5 files changed, 24 insertions(+), 17 deletions(-)
delete mode 100644 src/assets/stylesheets/footer.css
diff --git a/src/assets/stylesheets/footer.css b/src/assets/stylesheets/footer.css
deleted file mode 100644
index ffab91afb..000000000
--- a/src/assets/stylesheets/footer.css
+++ /dev/null
@@ -1,2 +0,0 @@
-:local(.container) {
-}
diff --git a/src/hub.js b/src/hub.js
index cf096150c..6a889632a 100644
--- a/src/hub.js
+++ b/src/hub.js
@@ -287,7 +287,10 @@ const onReady = async () => {
if (qs.room) {
// If ?room is set, this is `yarn start`, so just use a default environment and query string room.
- remountUI({ janusRoomId: qs.room && !isNaN(parseInt(qs.room)) ? parseInt(qs.room) : 1 });
+ remountUI({
+ janusRoomId: qs.room && !isNaN(parseInt(qs.room)) ? parseInt(qs.room) : 1,
+ hubName: "My Super Test Hub"
+ });
initialEnvironmentEl.setAttribute("gltf-bundle", {
src: "https://asset-bundles-prod.reticulum.io/rooms/meetingroom/MeetingRoom.bundle.json"
// src: "https://asset-bundles-prod.reticulum.io/rooms/theater/TheaterMeshes.bundle.json"
@@ -318,7 +321,7 @@ const onReady = async () => {
const hub = data.hubs[0];
const defaultSpaceTopic = hub.topics[0];
const gltfBundleUrl = defaultSpaceTopic.assets.find(a => a.asset_type === "gltf_bundle").src;
- remountUI({ janusRoomId: defaultSpaceTopic.janus_room_id });
+ remountUI({ janusRoomId: defaultSpaceTopic.janus_room_id, hubName: hub.name });
initialEnvironmentEl.setAttribute("gltf-bundle", `src: ${gltfBundleUrl}`);
hubChannel.setPhoenixChannel(channel);
})
diff --git a/src/react-components/footer.js b/src/react-components/footer.js
index 1045da49f..86728e614 100644
--- a/src/react-components/footer.js
+++ b/src/react-components/footer.js
@@ -1,9 +1,10 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import FontAwesomeIcon from "@fortawesome/react-fontawesome";
-import faAngleLeft from "@fortawesome/fontawesome-free-solid/faAngleLeft";
+import faShare from "@fortawesome/fontawesome-free-solid/faShare";
+import faUsers from "@fortawesome/fontawesome-free-solid/faUsers";
-import styles from "../assets/stylesheets/footer.css";
+import styles from "../assets/stylesheets/footer.scss";
export default class Footer extends Component {
static propTypes = {
@@ -13,13 +14,15 @@ export default class Footer extends Component {
render() {
return (
<div className={styles.container}>
- <span className={styles.hubName}>{this.props.hubName}</span>
- <button className="{styles.shareButton}" onClick={this.emitChangeToPrevious}>
- <FontAwesomeIcon icon={faAngleLeft} />
- </button>
- <div>
- <FontAwesomeIcon icon={faAngleLeft} />
- <span>{this.props.participantCount}</span>
+ <div className={styles.hubInfo}>
+ <span className={styles.hubName}>{this.props.hubName}</span>
+ <button className={styles.shareButton} onClick={this.emitChangeToPrevious}>
+ <FontAwesomeIcon icon={faShare} className={styles.shareButtonIcon} />
+ </button>
+ </div>
+ <div className={styles.hubStats}>
+ <FontAwesomeIcon icon={faUsers} />
+ <span className={styles.hubParticipantCount}>{this.props.participantCount}</span>
</div>
</div>
);
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index fa4f0ee17..0734bdf61 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -65,7 +65,8 @@ class UIRoot extends Component {
showProfileEntry: PropTypes.bool,
availableVREntryTypes: PropTypes.object,
initialEnvironmentLoaded: PropTypes.bool,
- janusRoomId: PropTypes.number
+ janusRoomId: PropTypes.number,
+ hubName: PropTypes.string
};
state = {
@@ -767,7 +768,7 @@ class UIRoot extends Component {
{this.state.entryStep === ENTRY_STEPS.finished ? (
<div>
<TwoDHUD muted={this.state.muted} onToggleMute={this.toggleMute} />
- <Footer />
+ <Footer hubName={this.props.hubName} />
</div>
) : null}
</div>
diff --git a/webpack.config.js b/webpack.config.js
index 4f9b26d26..ad98143b5 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -141,7 +141,8 @@ const config = {
loader: "css-loader",
options: {
name: "[path][name]-[hash].[ext]",
- minimize: process.env.NODE_ENV === "production"
+ minimize: process.env.NODE_ENV === "production",
+ camelCase: true
}
},
"sass-loader"
@@ -156,7 +157,8 @@ const config = {
loader: "css-loader",
options: {
name: "[path][name]-[hash].[ext]",
- minimize: process.env.NODE_ENV === "production"
+ minimize: process.env.NODE_ENV === "production",
+ camelCase: true
}
}
})
--
GitLab