From 1bb5332089537ff73a52d8feb0dcce249e6e1f73 Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Tue, 17 Apr 2018 11:13:28 -0700
Subject: [PATCH] Add dialogs for links at bottom of homepage
---
src/assets/stylesheets/index.scss | 76 +++++++++++++++++++
src/assets/translations.data.json | 5 +-
src/react-components/home-root.js | 122 ++++++++++++++++++++++++++++--
3 files changed, 196 insertions(+), 7 deletions(-)
diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index b3f74e2eb..19cf66f85 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -34,6 +34,10 @@ body {
display: flex;
flex-direction: column;
z-index: 2;
+
+ &--noninteractive {
+ pointer-events: none;
+ }
}
.background-video {
@@ -217,3 +221,75 @@ body {
}
}
}
+
+.overlay {
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ position: absolute;
+ pointer-events: none;
+ color: white;
+ z-index: 2;
+}
+
+.dialog {
+ display: grid;
+ grid-template-columns: 1fr 20px minmax(200px,500px) 20px 1fr;
+ grid-template-rows: 1fr 20px 320px 20px 1fr;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0,0,0,.6);
+
+ &__box {
+ grid-column: 3;
+ grid-row: 3;
+ position: relative;
+ pointer-events: auto;
+
+ &__contents {
+ background-color: rgba(0,0,0,0.8);
+ border-radius: 8px;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+
+ &__title {
+ @extend %top-title;
+ margin-top: 20px;
+ }
+
+ &__body {
+ margin: 40px;
+ font-size: 1.1em;
+ margin-top: 20px;
+ color: $grey-text;
+
+ a { color: white }
+ }
+
+ &__button-container {
+ flex: 10;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ width: 111px;
+ height: 111px;
+
+ &__button {
+ @extend %bottom-button;
+ background: none;
+ cursor: pointer;
+ border: none;
+ }
+ }
+ }
+ }
+}
+
+
+
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index 1b9844c8a..f42de20e4 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -50,7 +50,8 @@
"home.get_updates": "Get Updates",
"home.hero_title": "A new way to get together online.",
"home.hero_subtitle": "Laugh, play, get stuff done, or just hang out.",
- "home.made_with_love": "made with â¤ï¸ by ",
- "home.environment_author_by": " by "
+ "home.made_with_love": "made with 🦆 by ",
+ "home.environment_author_by": " by ",
+ "home.dialog.close": "CLOSE"
}
}
diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js
index af896b643..d043fc1dd 100644
--- a/src/react-components/home-root.js
+++ b/src/react-components/home-root.js
@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
import { IntlProvider, FormattedMessage, addLocaleData } from "react-intl";
import en from "react-intl/locale-data/en";
import homeVideo from "../assets/video/home.webm";
+import classNames from "classnames";
import HubCreatePanel from "./hub-create-panel.js";
@@ -28,7 +29,8 @@ class HomeRoot extends Component {
};
state = {
- environments: []
+ environments: [],
+ dialogType: null
};
componentDidMount() {
@@ -36,6 +38,18 @@ class HomeRoot extends Component {
document.querySelector("#background-video").playbackRate = 0.5;
}
+ showDialog = dialogType => {
+ return e => {
+ e.preventDefault();
+ this.setState({ dialogType });
+ return false;
+ };
+ };
+
+ closeDialog = () => {
+ this.setState({ dialogType: null });
+ };
+
loadEnvironments = () => {
const environments = [];
@@ -52,10 +66,74 @@ class HomeRoot extends Component {
};
render() {
+ let dialogTitle = null;
+ let dialogBody = null;
+
+ switch (this.state.dialogType) {
+ // TODO i18n, FormattedMessage doesn't play nicely with links
+ case "slack":
+ dialogTitle = "Join us on Slack";
+ dialogBody = (
+ <span>
+ Want to join the conversation?
+ <p />
+ Join us on the{" "}
+ <a href="http://webvr-slack.herokuapp.com/" target="_blank">
+ WebVR Slack
+ </a>{" "}
+ in the #social channel.
+ </span>
+ );
+ break;
+ case "updates":
+ dialogTitle = "Get Updates";
+ dialogBody = (
+ <span>
+ We're adding more features to Hubs every week.
+ <p />
+ To receive regular release notes, join our{" "}
+ <a href="#" target="_blank">
+ mailing list
+ </a>.
+ <p />
+ You can also follow us on Twitter{" "}
+ <a href="https://twitter.com/mozillareality" target="_blank">
+ @mozillareality
+ </a>{" "}
+ or on the{" "}
+ <a href="https://blog.mozvr.com/" target="_blank">
+ Mozilla Mixed Reality Blog
+ </a>.
+ </span>
+ );
+ break;
+ case "report":
+ dialogTitle = "Report an Issue";
+ dialogBody = (
+ <span>
+ Need to report a problem?
+ <p />
+ You can file a{" "}
+ <a href="https://github.com/mozilla/mr-social-client/issues" target="_blank">
+ Github Issue
+ </a>{" "}
+ or e-mail us for support at <a href="mailto:hubs@mozilla.com">hubs@mozilla.com</a>.
+ <p />
+ You can also find us in #social on the{" "}
+ <a href="http://webvr-slack.herokuapp.com/" target="_blank">
+ WebVR Slack
+ </a>.
+ </span>
+ );
+ break;
+ }
+
+ const mainContentClassNames = classNames({ "main-content": true, "main-content--noninteractive": !!dialogTitle });
+
return (
<IntlProvider locale={lang} messages={messages}>
<div className="home">
- <div className="main-content">
+ <div className={mainContentClassNames}>
<div className="header-content">
<div className="header-content__title">
<img className="header-content__title__name" src="../assets/images/logo.svg" />
@@ -110,13 +188,28 @@ class HomeRoot extends Component {
<div className="footer-content">
<div className="footer-content__links">
<div className="footer-content__links__top">
- <a className="footer-content__links__link" rel="noopener noreferrer" target="_blank" href="#">
+ <a
+ className="footer-content__links__link"
+ rel="noopener noreferrer"
+ href="#"
+ onClick={this.showDialog("slack")}
+ >
<FormattedMessage id="home.join_on_slack" />
</a>
- <a className="footer-content__links__link" rel="noopener noreferrer" target="_blank" href="#">
+ <a
+ className="footer-content__links__link"
+ rel="noopener noreferrer"
+ href="#"
+ onClick={this.showDialog("updates")}
+ >
<FormattedMessage id="home.get_updates" />
</a>
- <a className="footer-content__links__link" rel="noopener noreferrer" target="_blank" href="#">
+ <a
+ className="footer-content__links__link"
+ rel="noopener noreferrer"
+ href="#"
+ onClick={this.showDialog("report")}
+ >
<FormattedMessage id="home.report_issue" />
</a>
</div>
@@ -130,6 +223,25 @@ class HomeRoot extends Component {
<video playsInline autoPlay muted loop className="background-video" id="background-video">
<source src={homeVideo} type="video/webm" />
</video>
+ {dialogTitle && (
+ <div className="overlay">
+ <div className="dialog">
+ <div className="dialog__box">
+ <div className="dialog__box__contents">
+ <div className="dialog__box__contents__title">{dialogTitle}</div>
+ <div className="dialog__box__contents__body">{dialogBody}</div>
+ <div className="dialog__box__contents__button-container">
+ <button className="dialog__box__contents__button-container__button" onClick={this.closeDialog}>
+ <span>
+ <FormattedMessage id="home.dialog.close" />
+ </span>
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ )}
</div>
</IntlProvider>
);
--
GitLab