Permalink
Browse files

Change Gmail 'Unread Mode' to be 'Inbox Type' and match what Google h…

…as in their settings exactly
  • Loading branch information...
Thomas101 committed Feb 4, 2019
1 parent 6c20e49 commit b6adb786042bd063f26b24463f4ede1a2e782f30
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -74,10 +74,10 @@ class WizardConfigureGinbox extends React.Component {
const accountState = accountStore.getState()
const service = accountState.getService(nextProps.serviceId)
this.setState(service ? {
unreadMode: service.unreadMode,
inboxType: service.inboxType,
serviceId: service.id
} : {
unreadMode: undefined,
inboxType: undefined,
serviceId: undefined
})
}
@@ -92,10 +92,10 @@ class WizardConfigureGinbox extends React.Component {
const service = accountState.getService(this.props.serviceId)

return service ? {
unreadMode: service.unreadMode,
inboxType: service.inboxType,
serviceId: service.id
} : {
unreadMode: undefined,
inboxType: undefined,
serviceId: undefined
}
})()
@@ -104,10 +104,10 @@ class WizardConfigureGinbox extends React.Component {
const service = accountState.getService(this.props.serviceId)

this.setState(service ? {
unreadMode: service.unreadMode,
inboxType: service.inboxType,
serviceId: service.id
} : {
unreadMode: undefined,
inboxType: undefined,
serviceId: undefined
})
}
@@ -118,11 +118,11 @@ class WizardConfigureGinbox extends React.Component {

/**
* Handles a mode being picked by updating the mailbox
* @param unreadMode: the picked unread mode
* @param inboxType: the picked unread mode
*/
handleModePicked = (unreadMode) => {
handleModePicked = (inboxType) => {
const { serviceId } = this.state
accountActions.reduceService(serviceId, GoogleInboxServiceReducer.setUnreadMode, unreadMode)
accountActions.reduceService(serviceId, GoogleInboxServiceReducer.setInboxType, inboxType)
}

/* **************************************************************************/
@@ -136,7 +136,7 @@ class WizardConfigureGinbox extends React.Component {
classes,
...passProps
} = this.props
const { unreadMode } = this.state
const { inboxType } = this.state

return (
<WizardConfigureDefaultLayout
@@ -153,8 +153,8 @@ class WizardConfigureGinbox extends React.Component {
<WizardConfigureUnreadModeOption
className={classes.unreadOption}
color={yellow[700]}
selected={unreadMode === GoogleInboxService.UNREAD_MODES.INBOX_UNREAD_UNBUNDLED}
onSelected={() => this.handleModePicked(GoogleInboxService.UNREAD_MODES.INBOX_UNREAD_UNBUNDLED)}
selected={inboxType === GoogleInboxService.INBOX_TYPES.GINBOX_UNBUNDLED}
onSelected={() => this.handleModePicked(GoogleInboxService.INBOX_TYPES.GINBOX_UNBUNDLED)}
name='Unread Unbundled Messages'
popoverContent={(
<div className={classes.popoverContainer}>
@@ -171,8 +171,8 @@ class WizardConfigureGinbox extends React.Component {
<WizardConfigureUnreadModeOption
className={classes.unreadOption}
color={lightBlue[700]}
selected={unreadMode === GoogleInboxService.UNREAD_MODES.INBOX_UNREAD}
onSelected={() => this.handleModePicked(GoogleInboxService.UNREAD_MODES.INBOX_UNREAD)}
selected={inboxType === GoogleInboxService.INBOX_TYPES.GMAIL_UNREAD}
onSelected={() => this.handleModePicked(GoogleInboxService.INBOX_TYPES.GMAIL_UNREAD)}
name='Unread Inbox'
popoverContent={(
<div className={classes.popoverContainer}>
@@ -7,8 +7,12 @@ import { withStyles } from '@material-ui/core/styles'
import yellow from '@material-ui/core/colors/yellow'
import lightBlue from '@material-ui/core/colors/lightBlue'
import cyan from '@material-ui/core/colors/cyan'
import teal from '@material-ui/core/colors/teal'
import orange from '@material-ui/core/colors/orange'
import blue from '@material-ui/core/colors/blue'
import GoogleMailService from 'shared/Models/ACAccounts/Google/GoogleMailService'
import GoogleMailServiceReducer from 'shared/AltStores/Account/ServiceReducers/GoogleMailServiceReducer'
import electron from 'electron'

const styles = {
// Typography
@@ -44,6 +48,12 @@ const styles = {
maxWidth: '100%',
margin: '0px auto',
display: 'block'
},

link: {
textDecoration: 'underline',
cursor: 'pointer',
color: blue[600]
}
}

@@ -75,10 +85,10 @@ class WizardConfigureGmail extends React.Component {
const accountState = accountStore.getState()
const service = accountState.getService(nextProps.serviceId)
this.setState(service ? {
unreadMode: service.unreadMode,
inboxType: service.inboxType,
serviceId: service.id
} : {
unreadMode: undefined,
inboxType: undefined,
serviceId: undefined
})
}
@@ -93,10 +103,10 @@ class WizardConfigureGmail extends React.Component {
const service = accountState.getService(this.props.serviceId)

return service ? {
unreadMode: service.unreadMode,
inboxType: service.inboxType,
serviceId: service.id
} : {
unreadMode: undefined,
inboxType: undefined,
serviceId: undefined
}
})()
@@ -105,10 +115,10 @@ class WizardConfigureGmail extends React.Component {
const service = accountState.getService(this.props.serviceId)

this.setState(service ? {
unreadMode: service.unreadMode,
inboxType: service.inboxType,
serviceId: service.id
} : {
unreadMode: undefined,
inboxType: undefined,
serviceId: undefined
})
}
@@ -119,11 +129,20 @@ class WizardConfigureGmail extends React.Component {

/**
* Handles a mode being picked by updating the mailbox
* @param unreadMode: the picked unread mode
* @param inboxType: the picked inbox type
*/
handleModePicked = (unreadMode) => {
handleModePicked = (inboxType) => {
const { serviceId } = this.state
accountActions.reduceService(serviceId, GoogleMailServiceReducer.setUnreadMode, unreadMode)
accountActions.reduceService(serviceId, GoogleMailServiceReducer.setInboxType, inboxType)
}

/**
* @param evt: the event that fired
*/
handleOpenKBHelp = (evt) => {
evt.preventDefault()

electron.remote.shell.openExternal('https://wavebox.io/kb/gmail-inbox-type')
}

/* **************************************************************************/
@@ -132,73 +151,109 @@ class WizardConfigureGmail extends React.Component {

render () {
const { serviceId, onRequestCancel, classes, ...passProps } = this.props
const { unreadMode } = this.state
const { inboxType } = this.state

return (
<WizardConfigureDefaultLayout
onRequestCancel={onRequestCancel}
serviceId={serviceId}
{...passProps}>
<h2 className={classes.heading}>Choose your Inbox mode</h2>
<h2 className={classes.heading}>Choose your Inbox type</h2>
<p className={classes.subHeading}>
Your Gmail account uses one of the following modes to organise your inbox.
Select the one that matches your existing settings. Don't worry if you don't know
what it is you can change it later!
Your Gmail account has different inbox types, each organising your emails
differently. Select the one that matches your existing settings. Don't worry
if you don't know it is, you can change it later!
</p>
<div className={classes.unreadOptions}>
<WizardConfigureUnreadModeOption
className={classes.unreadOption}
color={yellow[700]}
selected={unreadMode === GoogleMailService.UNREAD_MODES.INBOX_UNREAD_PERSONAL}
onSelected={() => this.handleModePicked(GoogleMailService.UNREAD_MODES.INBOX_UNREAD_PERSONAL)}
name='Categories'
selected={inboxType === GoogleMailService.INBOX_TYPES.GMAIL_DEFAULT}
onSelected={() => this.handleModePicked(GoogleMailService.INBOX_TYPES.GMAIL_DEFAULT)}
name='Default'
popoverContent={(
<div className={classes.popoverContainer}>
<h3>Categories Inbox</h3>
<img className={classes.popoverPreviewImage} src='../../images/gmail_inbox_categories_small.png' />
<h3>Default (Categories or tabs)</h3>
<img className={classes.popoverPreviewImage} src='../../images/gmail_inboxtype_default.png' />
<p>
Your new emails are automatically sorted into Categories such as <em>Social</em>
and <em>Promotions</em> when they arrive. Typically you will see a number of
category tabs above your emails
Your new emails are automatically sorted into Categories such
as <em>Social</em> and <em>Promotions</em>. Typically
you will see a number of category tabs above your emails.
</p>
</div>
)} />
<WizardConfigureUnreadModeOption
className={classes.unreadOption}
color={lightBlue[700]}
selected={unreadMode === GoogleMailService.UNREAD_MODES.INBOX_UNREAD}
onSelected={() => this.handleModePicked(GoogleMailService.UNREAD_MODES.INBOX_UNREAD)}
name='Unread'
selected={inboxType === GoogleMailService.INBOX_TYPES.GMAIL_IMPORTANT}
onSelected={() => this.handleModePicked(GoogleMailService.INBOX_TYPES.GMAIL_IMPORTANT)}
name='Important First'
popoverContent={(
<div className={classes.popoverContainer}>
<h3>Unread Inbox</h3>
<img className={classes.popoverPreviewImage} src='../../images/gmail_inbox_unread_small.png' />
<h3>Important First</h3>
<img className={classes.popoverPreviewImage} src='../../images/gmail_inboxtype_important.png' />
<p>
Your new emails are sent directly to your Inbox and are not automatically sorted
into categories or ranked by priority. Typically the title you see above
your emails is <em>Unread</em>.
Emails are automatically given an importance flag and those deemed important will be shown
at the top of your inbox. Typically you'll see
an <em>Important</em> and <em>Everything else</em> section in your inbox.
</p>
</div>
)} />
<WizardConfigureUnreadModeOption
className={classes.unreadOption}
color={cyan[700]}
selected={unreadMode === GoogleMailService.UNREAD_MODES.INBOX_UNREAD_IMPORTANT}
onSelected={() => this.handleModePicked(GoogleMailService.UNREAD_MODES.INBOX_UNREAD_IMPORTANT)}
name='Priority'
selected={inboxType === GoogleMailService.INBOX_TYPES.GMAIL_UNREAD}
onSelected={() => this.handleModePicked(GoogleMailService.INBOX_TYPES.GMAIL_UNREAD)}
name='Unread First'
popoverContent={(
<div className={classes.popoverContainer}>
<h3>Unread First</h3>
<img className={classes.popoverPreviewImage} src='../../images/gmail_inboxtype_unread.png' />
<p>
Your new emails are sent directly to your Inbox and those that have not been read are placed
at the top. Typically you'll see a <em>Unread</em> and <em>Everything else</em> title in your inbox.
</p>
</div>
)} />
<WizardConfigureUnreadModeOption
className={classes.unreadOption}
color={teal[700]}
selected={inboxType === GoogleMailService.INBOX_TYPES.GMAIL_STARRED}
onSelected={() => this.handleModePicked(GoogleMailService.INBOX_TYPES.GMAIL_STARRED)}
name='Starred First'
popoverContent={(
<div className={classes.popoverContainer}>
<h3>Starred First</h3>
<img className={classes.popoverPreviewImage} src='../../images/gmail_inboxtype_starred.png' />
<p>
Your new emails are sent directly to your Inbox and appear in time order. Those that you've
starred will appear at the top. Typically you'll see
an <em>Starred</em> and <em>Everything else</em> section in your inbox.
</p>
</div>
)} />
<WizardConfigureUnreadModeOption
className={classes.unreadOption}
color={orange[700]}
selected={inboxType === GoogleMailService.INBOX_TYPES.GMAIL_PRIORITY}
onSelected={() => this.handleModePicked(GoogleMailService.INBOX_TYPES.GMAIL_PRIORITY)}
name='Priority Inbox'
popoverContent={(
<div className={classes.popoverContainer}>
<h3>Priority Inbox</h3>
<img className={classes.popoverPreviewImage} src='../../images/gmail_inbox_priority_small.png' />
<img className={classes.popoverPreviewImage} src='../../images/gmail_inboxtype_priority.png' />
<p>
Your new emails are either marked as important or not and the important
emails are split into their own section when they arrive. Typically the title you see above
your emails is <em>Important and unread</em>.
Emails are automatically given an importance flag and those deemed important and unread, or those that
have been starred will be shown at the top of your inbox. Typically you'll see
an <em>Important and Unread</em>, <em>Starred</em> and <em>Everything else</em> section in your inbox.
</p>
</div>
)} />
</div>
<p className={classes.extraSubHeading}>Hover over each choice for more information</p>
<p className={classes.extraSubHeading}>
Hover over each choice for more information. Still not sure or want some help for
later? <a href='#' className={classes.link} onClick={this.handleOpenKBHelp}>View the KB Article for more info.</a>
</p>
</WizardConfigureDefaultLayout>
)
}
Oops, something went wrong.

0 comments on commit b6adb78

Please sign in to comment.