mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-23 00:36:50 +08:00
d40f3e3fdb
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
97 lines
3.3 KiB
CoffeeScript
97 lines
3.3 KiB
CoffeeScript
React = require 'react'
|
|
Page = require './page'
|
|
path = require 'path'
|
|
fs = require 'fs'
|
|
{RetinaImg, Flexbox, ConfigPropContainer} = require 'nylas-component-kit'
|
|
{EdgehillAPI} = require 'nylas-exports'
|
|
OnboardingActions = require './onboarding-actions'
|
|
|
|
# NOTE: Temporarily copied from preferences module
|
|
class AppearanceModeOption extends React.Component
|
|
@propTypes:
|
|
mode: React.PropTypes.string.isRequired
|
|
active: React.PropTypes.bool
|
|
onClick: React.PropTypes.func
|
|
|
|
render: =>
|
|
classname = "appearance-mode"
|
|
classname += " active" if @props.active
|
|
<div className={classname} onClick={@props.onClick}>
|
|
<RetinaImg name={"appearance-mode-#{@props.mode}.png"} mode={RetinaImg.Mode.ContentIsMask}/>
|
|
<div>{@props.mode} View</div>
|
|
</div>
|
|
|
|
class InitialPreferencesOptions extends React.Component
|
|
@propTypes:
|
|
config: React.PropTypes.object
|
|
|
|
constructor: (@props) ->
|
|
@state =
|
|
templates: []
|
|
@_loadTemplates()
|
|
|
|
_loadTemplates: =>
|
|
templatesDir = path.join(atom.getLoadSettings().resourcePath, 'keymaps', 'templates')
|
|
fs.readdir templatesDir, (err, files) =>
|
|
return unless files and files instanceof Array
|
|
templates = files.filter (filename) =>
|
|
path.extname(filename) is '.cson' or path.extname(filename) is '.json'
|
|
templates = templates.map (filename) =>
|
|
path.parse(filename).name
|
|
@setState(templates: templates)
|
|
|
|
render: =>
|
|
return false unless @props.config
|
|
|
|
<div style={display:'flex', width:600, marginBottom: 50, marginLeft:150, marginRight: 150, textAlign: 'left'}>
|
|
<div style={flex:1}>
|
|
<p>
|
|
Do you prefer a single-panel Gmail-style
|
|
layout or a dual panel layout?
|
|
</p>
|
|
<Flexbox direction="row" style={alignItems: "center"}>
|
|
{['list', 'split'].map (mode) =>
|
|
<AppearanceModeOption
|
|
mode={mode} key={mode}
|
|
active={@props.config.get('core.workspace.mode') is mode}
|
|
onClick={ => @props.config.set('core.workspace.mode', mode)} />
|
|
}
|
|
</Flexbox>
|
|
</div>
|
|
<div key="divider" style={marginLeft:20, marginRight:20, borderLeft:'1px solid #ccc'}></div>
|
|
<div style={flex:1}>
|
|
<p>
|
|
We see you're a Gmail user, so N1 is set up to use
|
|
Gmail keyboard shortcuts. You can also pick another set:
|
|
</p>
|
|
<select
|
|
style={margin:0}
|
|
value={@props.config.get('core.keymapTemplate')}
|
|
onChange={ (event) => @props.config.set('core.keymapTemplate', event.target.value) }>
|
|
{ @state.templates.map (template) =>
|
|
<option key={template} value={template}>{template}</option>
|
|
}
|
|
</select>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
class InitialPreferencesPage extends Page
|
|
@displayName: "InitialPreferencesPage"
|
|
|
|
render: =>
|
|
<div className="page no-top opaque" style={width:900, height:620}>
|
|
<h1 style={paddingTop: 100}>Welcome to N1</h1>
|
|
<h4 style={marginBottom: 70}>Let's set things up to your liking.</h4>
|
|
<ConfigPropContainer>
|
|
<InitialPreferencesOptions />
|
|
</ConfigPropContainer>
|
|
<button className="btn btn-large" style={marginBottom:60} onClick={@_onNextPage}>Looks Good!</button>
|
|
</div>
|
|
|
|
_onNextPage: =>
|
|
OnboardingActions.moveToPage("initial-packages")
|
|
|
|
module.exports = InitialPreferencesPage
|