From bd4f21120e8212a237f9d6c404179ca302bb1c95 Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Mon, 1 Oct 2018 02:20:22 +0000
Subject: [PATCH] Collapse panel

---
 src/assets/stylesheets/entry.scss    | 15 +++++++++
 src/assets/stylesheets/scene-ui.scss |  3 +-
 src/assets/stylesheets/shared.scss   |  5 +++
 src/react-components/ui-root.js      | 50 ++++++++++++++++++++++------
 4 files changed, 60 insertions(+), 13 deletions(-)

diff --git a/src/assets/stylesheets/entry.scss b/src/assets/stylesheets/entry.scss
index 28ceef6a6..08f3144d6 100644
--- a/src/assets/stylesheets/entry.scss
+++ b/src/assets/stylesheets/entry.scss
@@ -5,6 +5,21 @@
   flex-direction: column;
   align-items: center;
   height: 100%;
+  position: relative;
+
+  :local(.collapse) {
+    @extend %fa-icon-button;
+    position: absolute;
+    top: 4px;
+    right: 24px;
+  }
+
+  :local(.expand) {
+    @extend %fa-icon-button;
+    position: absolute;
+    top: -32px;
+    right: 24px;
+  }
 }
 
 :local(.entry-button) {
diff --git a/src/assets/stylesheets/scene-ui.scss b/src/assets/stylesheets/scene-ui.scss
index 476f4e545..2f48ccee5 100644
--- a/src/assets/stylesheets/scene-ui.scss
+++ b/src/assets/stylesheets/scene-ui.scss
@@ -45,8 +45,7 @@
 }
 
 :local(.logoTagline) {
-  color: black;
-  text-shadow: 0px 0px 10px #888;
+  @extend %background-agnostic;
   font-weight: bold;
   text-align: center;
   font-size: 1.2em;
diff --git a/src/assets/stylesheets/shared.scss b/src/assets/stylesheets/shared.scss
index d69411fdd..44155ae2e 100644
--- a/src/assets/stylesheets/shared.scss
+++ b/src/assets/stylesheets/shared.scss
@@ -141,6 +141,11 @@ $action-text: #2F80ED;
   outline-offset: -18px;
 }
 
+%background-agnostic {
+  color: black;
+  text-shadow: 0px 0px 10px #888;
+}
+
 %fa-icon-button {
   @extend %default-font;
   margin: 16px 0;
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index b83bfce33..0c3fa5e8d 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -31,6 +31,8 @@ import { faUsers } from "@fortawesome/free-solid-svg-icons/faUsers";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faQuestion } from "@fortawesome/free-solid-svg-icons/faQuestion";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
+import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
 
 addLocaleData([...en]);
 
@@ -96,7 +98,7 @@ class UIRoot extends Component {
     mediaStream: null,
     videoTrack: null,
     audioTrack: null,
-    lowerPanelCollapsed: false,
+    entryPanelCollapsed: false,
 
     toneInterval: null,
     tonePlaying: false,
@@ -880,16 +882,42 @@ class UIRoot extends Component {
 
     const audioSetupPanel = this.state.entryStep === ENTRY_STEPS.audio_setup && this.renderAudioSetupPanel();
 
-    const dialogContents = this.isWaitingForAutoExit() ? (
-      <AutoExitWarning secondsRemaining={this.state.secondsRemainingBeforeAutoExit} onCancel={this.endAutoExitTimer} />
-    ) : (
-      <div className={entryStyles.entryDialog}>
-        {startPanel}
-        {devicePanel}
-        {micPanel}
-        {audioSetupPanel}
-      </div>
-    );
+    // Dialog is empty if coll
+    let dialogContents = null;
+
+    if (this.state.entryPanelCollapsed && !this.isWaitingForAutoExit()) {
+      dialogContents = (
+        <div className={entryStyles.entryDialog}>
+          <div>&nbsp;</div>
+          <button onClick={() => this.setState({ entryPanelCollapsed: false })} className={entryStyles.expand}>
+            <i>
+              <FontAwesomeIcon icon={faChevronUp} />
+            </i>
+          </button>
+        </div>
+      );
+    } else {
+      dialogContents = this.isWaitingForAutoExit() ? (
+        <AutoExitWarning
+          secondsRemaining={this.state.secondsRemainingBeforeAutoExit}
+          onCancel={this.endAutoExitTimer}
+        />
+      ) : (
+        <div className={entryStyles.entryDialog}>
+          {!this.state.entryPanelCollapsed && (
+            <button onClick={() => this.setState({ entryPanelCollapsed: true })} className={entryStyles.collapse}>
+              <i>
+                <FontAwesomeIcon icon={faChevronDown} />
+              </i>
+            </button>
+          )}
+          {startPanel}
+          {devicePanel}
+          {micPanel}
+          {audioSetupPanel}
+        </div>
+      );
+    }
 
     const dialogBoxContentsClassNames = classNames({
       [styles.uiInteractive]: !this.state.dialog,
-- 
GitLab