From 887130df07a3ec4c0c99fb51917aa9fc3f62c54e Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Tue, 24 Apr 2018 21:27:46 -0700
Subject: [PATCH] Adds persistent help icon
---
src/assets/stylesheets/ui-root.scss | 20 ++++++++++++++++++++
src/components/stats-plus.css | 2 +-
src/react-components/ui-root.js | 14 ++++++++++++++
3 files changed, 35 insertions(+), 1 deletion(-)
diff --git a/src/assets/stylesheets/ui-root.scss b/src/assets/stylesheets/ui-root.scss
index 1cadcc233..942b7cc65 100644
--- a/src/assets/stylesheets/ui-root.scss
+++ b/src/assets/stylesheets/ui-root.scss
@@ -8,6 +8,26 @@
position: absolute;
pointer-events: none;
color: white;
+
+ &__help-icon {
+ position: absolute;
+ top: 0px;
+ left: 14px;
+
+ &__icon {
+ @extend %fa-icon-button-icon;
+ background: rgba(33, 33, 33, 0.5);
+ pointer-events: auto;
+ border-radius: 36px;
+ display: inline-block;
+ font-size: 22px;
+ vertical-align: sub;
+ line-height: 38px;
+ border: 0;
+ width: 36px;
+ height: 36px;
+ }
+ }
}
.blurred {
diff --git a/src/components/stats-plus.css b/src/components/stats-plus.css
index 9fc5a1908..46f29b12d 100644
--- a/src/components/stats-plus.css
+++ b/src/components/stats-plus.css
@@ -14,7 +14,7 @@
font-family: monospace;
cursor: pointer;
position: absolute;
- top: 0;
+ top: 10px;
right: 0;
padding: 8px 12px;
color: #aaa;
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index ab1d0229b..5ccfcd711 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -17,6 +17,9 @@ import InfoDialog from "./info-dialog.js";
import TwoDHUD from "./2d-hud";
import Footer from "./footer";
+import FontAwesomeIcon from "@fortawesome/react-fontawesome";
+import faQuestion from "@fortawesome/fontawesome-free-solid/faQuestion";
+
const mobiledetect = new MobileDetect(navigator.userAgent);
const lang = ((navigator.languages && navigator.languages[0]) || navigator.language || navigator.userLanguage)
@@ -808,6 +811,17 @@ class UIRoot extends Component {
onCloseDialog={() => this.setState({ infoDialogType: null })}
/>
+ {this.state.entryStep === ENTRY_STEPS.finished && (
+ <button
+ onClick={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.help })}
+ className="ui__help-icon"
+ >
+ <i className="ui__help-icon__icon">
+ <FontAwesomeIcon icon={faQuestion} />
+ </i>
+ </button>
+ )}
+
<div className={dialogClassNames}>
{(this.state.entryStep !== ENTRY_STEPS.finished || this.isWaitingForAutoExit()) && (
<div className={dialogBoxClassNames}>
--
GitLab