From 7c025fe509c10c4bcd61a06c3b53ec8add502aca Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Sun, 22 Apr 2018 11:34:54 -0700
Subject: [PATCH] Add invite button to entry flow
---
src/assets/stylesheets/profile.scss | 15 ++++++++----
src/react-components/profile-info-header.js | 27 ++++++++++++++-------
src/react-components/ui-root.js | 6 +++--
3 files changed, 32 insertions(+), 16 deletions(-)
diff --git a/src/assets/stylesheets/profile.scss b/src/assets/stylesheets/profile.scss
index 1284175c7..c7e2cbf5a 100644
--- a/src/assets/stylesheets/profile.scss
+++ b/src/assets/stylesheets/profile.scss
@@ -89,13 +89,18 @@
justify-content: space-between;
min-height: 80px;
- &__menu-button {
- @extend %fa-icon-button;
+ &__menu-buttons {
+ display: flex;
margin: 0 20px;
- &__icon {
- @extend %fa-icon-button-icon;
- background: transparent;
+ &__menu-button {
+ @extend %fa-icon-button;
+ margin-left: 16px;
+
+ &__icon {
+ @extend %fa-icon-button-icon;
+ background: transparent;
+ }
}
}
diff --git a/src/react-components/profile-info-header.js b/src/react-components/profile-info-header.js
index 39cfb052c..f5c23dd6b 100644
--- a/src/react-components/profile-info-header.js
+++ b/src/react-components/profile-info-header.js
@@ -2,25 +2,34 @@ import React from "react";
import PropTypes from "prop-types";
import FontAwesomeIcon from "@fortawesome/react-fontawesome";
import faQuestion from "@fortawesome/fontawesome-free-solid/faQuestion";
+import faShareAlt from "@fortawesome/fontawesome-free-solid/faShareAlt";
export const ProfileInfoHeader = props => (
<div className="profile-info-header">
<div className="profile-info-header__profile_display_name">
- <img src="../assets/images/account.svg" onClick={props.onNameClick} className="profile-info-header__icon" />
- <div onClick={props.onNameClick} title={props.name}>
+ <img src="../assets/images/account.svg" onClick={props.onClickName} className="profile-info-header__icon" />
+ <div onClick={props.onClickName} title={props.name}>
{props.name}
</div>
</div>
- <button className="profile-info-header__menu-button" onClick={props.onHelpClick}>
- <i className="profile-info-header__menu-button__icon">
- <FontAwesomeIcon icon={faQuestion} />
- </i>
- </button>
+ <div className="profile-info-header__menu-buttons">
+ <button className="profile-info-header__menu-buttons__menu-button" onClick={props.onClickInvite}>
+ <i className="profile-info-header__menu-buttons__menu-button__icon">
+ <FontAwesomeIcon icon={faShareAlt} />
+ </i>
+ </button>
+ <button className="profile-info-header__menu-buttons__menu-button" onClick={props.onClickHelp}>
+ <i className="profile-info-header__menu-buttons__menu-button__icon">
+ <FontAwesomeIcon icon={faQuestion} />
+ </i>
+ </button>
+ </div>
</div>
);
ProfileInfoHeader.propTypes = {
- onNameClick: PropTypes.func,
- onHelpClick: PropTypes.func,
+ onClickName: PropTypes.func,
+ onClickInvite: PropTypes.func,
+ onClickHelp: PropTypes.func,
name: PropTypes.string
};
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 54123679a..a26e1cee5 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -753,8 +753,9 @@ class UIRoot extends Component {
<div className="entry-dialog">
<ProfileInfoHeader
name={this.props.store.state.profile.displayName}
- onNameClick={() => this.setState({ showProfileEntry: true })}
- onHelpClick={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.help })}
+ onClickName={() => this.setState({ showProfileEntry: true })}
+ onClickInvite={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.invite })}
+ onClickHelp={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.help })}
/>
{entryPanel}
{micPanel}
@@ -778,6 +779,7 @@ class UIRoot extends Component {
<div className="ui">
<InfoDialog
dialogType={this.state.infoDialogType}
+ onSubmittedEmail={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.email_submitted })}
onCloseDialog={() => this.setState({ infoDialogType: null })}
/>
--
GitLab