diff --git a/internal_packages/composer-signature/styles/composer-signature.less b/internal_packages/composer-signature/styles/composer-signature.less index 3fb0bd2bb..dc79d0cd1 100644 --- a/internal_packages/composer-signature/styles/composer-signature.less +++ b/internal_packages/composer-signature/styles/composer-signature.less @@ -138,7 +138,7 @@ } img.signature-button{ display: inline-block; - background-color: #919191; + background-color: @btn-icon-color; } diff --git a/internal_packages/onboarding/lib/page-account-settings-gmail.jsx b/internal_packages/onboarding/lib/page-account-settings-gmail.jsx index dbcea43a7..b35757110 100644 --- a/internal_packages/onboarding/lib/page-account-settings-gmail.jsx +++ b/internal_packages/onboarding/lib/page-account-settings-gmail.jsx @@ -11,6 +11,8 @@ import { import OnboardingActions from './onboarding-actions'; import AccountTypes from './account-types'; +const clipboard = require('electron').clipboard + export default class AccountSettingsPageGmail extends React.Component { static displayName = "AccountSettingsPageGmail"; @@ -18,15 +20,26 @@ export default class AccountSettingsPageGmail extends React.Component { accountInfo: React.PropTypes.object, }; + constructor() { + super() + this.state = { + showAlternative: false, + } + } + componentDidMount() { // Show the "Sign in to Gmail" prompt for a moment before actually bouncing // to Gmail. (400msec animation + 200msec to read) this._sessionKey = buildGmailSessionKey(); this._pollTimer = null; + this._gmailAuthUrl = buildGmailAuthURL(this._sessionKey) this._startTimer = setTimeout(() => { - shell.openExternal(buildGmailAuthURL(this._sessionKey)); + shell.openExternal(this._gmailAuthUrl); this.startPollingForResponse(); }, 600); + setTimeout(() => { + this.setState({showAlternative: true}) + }, 1500); } componentWillUnmount() { @@ -64,6 +77,30 @@ export default class AccountSettingsPageGmail extends React.Component { this._pollTimer = setTimeout(poll, 5000); } + + _renderAlternative() { + let classnames = "input hidden" + if (this.state.showAlternative) { + classnames += " fadein" + } + + return ( +
+

Page didn't open?

+

Paste into your browser: + +

clipboard.writeText(this._gmailAuthUrl)} onMouseDown={() => this.setState({pressed: true})} onMouseUp={() => this.setState({pressed: false})}> + +
+

+
+ ) + } + + render() { const {accountInfo} = this.props; const iconName = AccountTypes.find(a => a.type === accountInfo.type).headerIcon; @@ -80,6 +117,9 @@ export default class AccountSettingsPageGmail extends React.Component {

Sign in to Google in
your browser.

+
+ {this._renderAlternative()} +
); } diff --git a/internal_packages/onboarding/stylesheets/onboarding.less b/internal_packages/onboarding/stylesheets/onboarding.less index 88657c577..6b269d1f6 100644 --- a/internal_packages/onboarding/stylesheets/onboarding.less +++ b/internal_packages/onboarding/stylesheets/onboarding.less @@ -627,3 +627,49 @@ body.platform-win32 { color: @component-active-color; img { background-color: @component-active-color; } } + + +.alternative-auth { + p { + color: @text-color-heading; + } + .url-copy-target { + width: 50%; + border: 1px solid #c6c7c7; + margin: 10px; + } + .copy-to-clipboard { + display: inline-block; + cursor: pointer; + img { + background-color: @btn-icon-color; + } + img:active { + background-color: @black; + } + } + + .hidden { + opacity: 0; + } + + .visible { + opacity: 1; + margin-bottom: 0; + } + + .fadein { + opacity: 1; + transition: opacity 2s linear; + } + + .fadeout { + opacity: 0; + transition: opacity 1s linear; + } + + input { + margin-top: 0; + } + +} diff --git a/static/images/onboarding/icon-copytoclipboard@1x.png b/static/images/onboarding/icon-copytoclipboard@1x.png new file mode 100644 index 000000000..90cc1e933 Binary files /dev/null and b/static/images/onboarding/icon-copytoclipboard@1x.png differ diff --git a/static/images/onboarding/icon-copytoclipboard@2x.png b/static/images/onboarding/icon-copytoclipboard@2x.png new file mode 100644 index 000000000..17b3c3ede Binary files /dev/null and b/static/images/onboarding/icon-copytoclipboard@2x.png differ diff --git a/static/variables/ui-variables.less b/static/variables/ui-variables.less index 2353314e6..7647d120d 100644 --- a/static/variables/ui-variables.less +++ b/static/variables/ui-variables.less @@ -163,6 +163,8 @@ rgba(253,253,253,0.75) 100%); @btn-default-bg-color: darken(@background-primary, 0.5%); @btn-default-text-color: @text-color; +@btn-icon-color: #919191; + @btn-action-bg-color: @color-success; @btn-action-text-color: @text-color;