mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 08:16:09 +08:00
5533755b03
Summary: Depends on D2049 This change replaces the onboarding flow to include new graphics, copy, and support for the new Nylas auth flow. New account choosing UI presents a list of account types, rather than guessing based on an entered email. Pages before and after introduce the user to different features of the client. Known issue: Polling for gmail account connection works, but continues even if you leave the page. Test Plan: Manual testing. Reviewers: evan Reviewed By: evan Differential Revision: https://phab.nylas.com/D2050
90 lines
2.9 KiB
CoffeeScript
90 lines
2.9 KiB
CoffeeScript
React = require 'react'
|
|
Page = require './page'
|
|
{RetinaImg, ConfigPropContainer} = require 'nylas-component-kit'
|
|
{EdgehillAPI} = require 'nylas-exports'
|
|
OnboardingActions = require './onboarding-actions'
|
|
|
|
InitialPackages = [{
|
|
'name': 'Templates',
|
|
'description': 'Templates let you fill an email with a pre-set body of text and a snumber of fields you can fill quickly to save time.'
|
|
'icon': 'setup-icon-templates.png'
|
|
}, {
|
|
'name': 'Signatures',
|
|
'description': 'Select from and edit mutiple signatures that N1 will automatically append to your sent messages.'
|
|
'icon': 'setup-icon-signatures.png'
|
|
},{
|
|
'name': 'Github',
|
|
'description': 'Adds Github quick actions to many emails, and allows you to see the Github profiles of the people you email.'
|
|
'icon': 'setup-icon-github.png'
|
|
}]
|
|
|
|
class SlideSwitch extends React.Component
|
|
@propTypes:
|
|
active: React.PropTypes.bool.isRequired
|
|
|
|
constructor: (@props) ->
|
|
|
|
render: =>
|
|
classnames = "slide-switch"
|
|
if @props.active
|
|
classnames += " active"
|
|
|
|
<div className={classnames} onClick={@props.onChange}>
|
|
<div className="handle"></div>
|
|
</div>
|
|
|
|
|
|
class InitialPackagesList extends React.Component
|
|
@displayName: "InitialPackagesList"
|
|
|
|
render: =>
|
|
<div>
|
|
{InitialPackages.map (item) =>
|
|
<div className="initial-package" key={item.name}>
|
|
<RetinaImg name={item.icon} mode={RetinaImg.Mode.ContentPreserve} />
|
|
<div className="name">{item.name}</div>
|
|
<div className="description">{item.description}</div>
|
|
<SlideSwitch active={@_isPackageEnabled(item.packageName)} onChange={ => @_togglePackageEnabled(item.packageName)}/>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
_isPackageEnabled: (packageName) =>
|
|
!atom.packages.isPackageDisabled(packageName)
|
|
|
|
_togglePackageEnabled: (packageName) =>
|
|
if atom.packages.isPackageDisabled(packageName)
|
|
atom.packages.enablePackage(packageName)
|
|
else
|
|
atom.packages.disablePackage(packageName)
|
|
|
|
class InitialPackagesPage extends Page
|
|
@displayName: "InitialPackagesPage"
|
|
|
|
render: =>
|
|
<div className="page no-top opaque" style={width:900, height:650}>
|
|
<div className="back" onClick={@_onPrevPage}>
|
|
<RetinaImg name="onboarding-back.png" mode={RetinaImg.Mode.ContentPreserve}/>
|
|
</div>
|
|
<h1 style={paddingTop: 20}>Welcome to N1</h1>
|
|
<h4 style={marginBottom: 50}>Explore packages</h4>
|
|
<p>
|
|
Packages lie at the heart of N1—you can enable community packages or build<br/>
|
|
your own to create the perfect workflow. Want to enable a few packages now?
|
|
</p>
|
|
|
|
<ConfigPropContainer>
|
|
<InitialPackagesList />
|
|
</ConfigPropContainer>
|
|
<button className="btn btn-large" onClick={@_onGetStarted}>Start Using N1</button>
|
|
</div>
|
|
|
|
_onPrevPage: =>
|
|
OnboardingActions.moveToPage('initial-preferences')
|
|
|
|
_onGetStarted: =>
|
|
ipc = require 'ipc'
|
|
ipc.send('login-successful')
|
|
|
|
module.exports = InitialPackagesPage
|