diff --git a/src/assets/stylesheets/entry.scss b/src/assets/stylesheets/entry.scss index 28ceef6a6f97b1cfc06fd12ba44536c451bd1803..08f3144d61d0b8c5ccf24057cc67a404431417a0 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 476f4e545012bb99411d6882950df6bcd3686217..2f48ccee5dae1e9abc7a63258d5955838f1c16c1 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 d69411fddce1f74da2236b728bfb31b82d4f2d90..44155ae2ed6e7f48ea4ce9d78fecca10a1859d99 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 b83bfce33fa05344dd2266d7b66fac911ed7e4a9..0c3fa5e8d463aa68b88c5736b358a13654e36fbc 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> </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,