forked from mozilla-services/screenshots
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fixes mozilla-services#4790 - NonFxA Shot takers should be briefly on…
…boarded
- Loading branch information
1 parent
9659805
commit 1afc2bd
Showing
12 changed files
with
258 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| const React = require("react"); | ||
| const PropTypes = require("prop-types"); | ||
| const { Localized } = require("fluent-react/compat"); | ||
| const sendEvent = require("./browser-send-event.js"); | ||
|
|
||
| exports.FxAOnboardingPromo = class FxAOnboardingPromo extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| showPromo: false, | ||
| }; | ||
| } | ||
|
|
||
| shouldShowOnboardingPromo() { | ||
| let show = false; | ||
| const count = localStorage.hasSeenOnboardingPromo; | ||
| if (!count) { | ||
| localStorage.hasSeenOnboardingPromo = 1; | ||
| show = true; | ||
| } else if (count < 3) { | ||
| localStorage.hasSeenOnboardingPromo = parseInt(count, 10) + 1; | ||
| show = true; | ||
| } | ||
| return show; | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| const showPromo = this.shouldShowOnboardingPromo(); | ||
| this.setState({showPromo}); | ||
| } | ||
|
|
||
| render() { | ||
| if (this.state.showPromo) { | ||
| return <div className="onboarding-promo-panel right-align"> | ||
| <div className="triangle"><div className="triangle-inner"></div></div> | ||
| <div className="promo-header"> | ||
| <span className="promo-logo" /> | ||
| <Localized id="onboardingPromoTitle"> | ||
| <span className="promo-title">What’s new with Firefox Screenshots?</span> | ||
| </Localized> | ||
| </div> | ||
| <div className="promo-message"> | ||
| <Localized id="onboardingPromoMessage"> | ||
| <p> | ||
| Now, sign in to Screenshots with a Firefox Account and | ||
| do more: | ||
| </p> | ||
| </Localized> | ||
| <ul> | ||
| <Localized id="onboardingPromoMessageListItem1"> | ||
| <li>Access your library on all of your devices</li> | ||
| </Localized> | ||
| <Localized id="onboardingPromoMessageListItem2"> | ||
| <li>Store your favorite shots forever</li> | ||
| </Localized> | ||
| </ul> | ||
| </div> | ||
| <div className="promo-footer"> | ||
| <Localized id="onboardingPromoDismissButton" attrs={{title: true}}> | ||
| <a href="#" title="Dismiss" onClick={ this.onClosePanel.bind(this) }>Dismiss</a> | ||
| </Localized> | ||
| <Localized id="onboardingPromoSigninButton" attrs={{title: true}}> | ||
| <button className="button primary" title="Sign in" onClick={ this.onConfirm.bind(this) }>Sign in</button> | ||
| </Localized> | ||
| </div> | ||
| </div>; | ||
| } | ||
| return null; | ||
| } | ||
|
|
||
| onClosePanel(event) { | ||
| const showPromo = !this.state.showPromo; | ||
| this.setState({showPromo}); | ||
| sendEvent("onboarding-promo-closed"); | ||
| } | ||
|
|
||
| onConfirm(event) { | ||
| const showPromo = !this.state.showPromo; | ||
| this.setState({showPromo}); | ||
| sendEvent("fxa-signin-onboarding-promo"); | ||
| location.href = this.props.logInURI; | ||
| } | ||
| }; | ||
|
|
||
| exports.FxAOnboardingPromo.propTypes = { | ||
| logInURI: PropTypes.string, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| .onboarding-promo-panel { | ||
| background: #f7f7f7; | ||
| border: 1px solid $light-border; | ||
| border-radius: 3px; | ||
| box-shadow: $medium-box-shadow; | ||
| color: #0c0c0d; | ||
| min-height: 200px; | ||
| position: absolute; | ||
| inset-inline-start: 3px; | ||
| top: 47px; | ||
| z-index: 2; | ||
|
|
||
| .triangle { | ||
| position: absolute; | ||
| width: 0; | ||
| height: 0; | ||
| border-inline-start: 9px solid transparent; | ||
| border-inline-end: 9px solid transparent; | ||
| border-bottom: 15px solid $light-border; | ||
| top: -15px; | ||
| inset-inline-start: 8px; | ||
|
|
||
| .triangle-inner { | ||
| position: absolute; | ||
| width: 0; | ||
| height: 0; | ||
| border-inline-start: 8px solid transparent; | ||
| border-inline-end: 8px solid transparent; | ||
| border-bottom: 13px solid $white; | ||
| inset-inline-start: -8px; | ||
| top: 2px; | ||
| } | ||
| } | ||
|
|
||
| &.right-align { | ||
| top: 70px; | ||
| width: 360px; | ||
| inset-inline-start: -300px; | ||
|
|
||
| @include respond-to("large") { | ||
| top: 85px; | ||
| width: 400px; | ||
| inset-inline-start: -310px; | ||
| } | ||
|
|
||
| .triangle { | ||
| inset-inline-start: 325px; | ||
| @include respond-to("large") { | ||
| inset-inline-start: 347px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .promo-header { | ||
| display: flex; | ||
| align-items: center; | ||
| height: 60px; | ||
| background: $white; | ||
|
|
||
| .promo-logo { | ||
| background-position: center; | ||
| background-image: url("../img/icon-promo.svg"); | ||
| background-repeat: no-repeat; | ||
| background-size: 30px auto; | ||
| background-color: #0684ff; | ||
| width: 60px; | ||
| height: 100%; | ||
| display: block; | ||
| } | ||
|
|
||
| .promo-title { | ||
| display: block; | ||
| font-size: 16px; | ||
| font-weight: bold; | ||
| padding: 0 16px; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| .promo-message { | ||
| padding: 0 16px; | ||
| font-size: 14px; | ||
|
|
||
| ul { | ||
| padding-left: 16px; | ||
| } | ||
| } | ||
|
|
||
| .promo-footer { | ||
| height: 70px; | ||
| display: flex; | ||
| justify-content: flex-end; | ||
| align-items: center; | ||
|
|
||
| a { | ||
| font-weight: bold; | ||
| cursor: pointer; | ||
|
|
||
| &:hover { | ||
| text-decoration: underline; | ||
| } | ||
| } | ||
|
|
||
| button { | ||
| margin: 0 16px; | ||
| width: 120px; | ||
| height: 40px; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -12,3 +12,4 @@ | |
| @import "share-panel"; | ||
| @import "theme"; | ||
| @import "header"; | ||
| @import "fxa-onboarding-promo"; | ||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.