this.props.onSave(evt, this.refs.editor.getValue())} />)
60 | ]
61 |
62 | return (
63 |
87 | )
88 | }
89 | })
90 |
--------------------------------------------------------------------------------
/src/scenes/mailboxes/src/ui/Settings/General/DownloadSettingsSection.js:
--------------------------------------------------------------------------------
1 | const React = require('react')
2 | const ReactDOM = require('react-dom')
3 | const { Toggle, Paper, RaisedButton, FontIcon } = require('material-ui')
4 | const settingsActions = require('../../../stores/settings/settingsActions')
5 | const styles = require('../settingStyles')
6 | const shallowCompare = require('react-addons-shallow-compare')
7 |
8 | module.exports = React.createClass({
9 | /* **************************************************************************/
10 | // Class
11 | /* **************************************************************************/
12 |
13 | displayName: 'DownloadSettingsSection',
14 | propTypes: {
15 | os: React.PropTypes.object.isRequired
16 | },
17 |
18 | /* **************************************************************************/
19 | // Component Lifecycle
20 | /* **************************************************************************/
21 |
22 | componentDidMount () {
23 | ReactDOM.findDOMNode(this.refs.defaultDownloadInput).setAttribute('webkitdirectory', 'webkitdirectory')
24 | },
25 |
26 | componentDidUpdate () {
27 | ReactDOM.findDOMNode(this.refs.defaultDownloadInput).setAttribute('webkitdirectory', 'webkitdirectory')
28 | },
29 |
30 | /* **************************************************************************/
31 | // Rendering
32 | /* **************************************************************************/
33 |
34 | shouldComponentUpdate (nextProps, nextState) {
35 | return shallowCompare(this, nextProps, nextState)
36 | },
37 |
38 | render () {
39 | const {os, ...passProps} = this.props
40 |
41 | return (
42 |
43 | Downloads
44 |
45 | settingsActions.setAlwaysAskDownloadLocation(toggled)} />
50 |
51 |
52 | folder}
55 | containerElement='label'
56 | disabled={os.alwaysAskDownloadLocation}
57 | style={styles.fileInputButton}>
58 | settingsActions.setDefaultDownloadLocation(evt.target.files[0].path)} />
64 |
65 | {os.alwaysAskDownloadLocation ? undefined : {os.defaultDownloadLocation}}
66 |
67 |
68 | )
69 | }
70 | })
71 |
--------------------------------------------------------------------------------
/src/scenes/mailboxes/src/ui/Settings/General/NotificationSettingsSection.js:
--------------------------------------------------------------------------------
1 | const React = require('react')
2 | const { Toggle, Paper } = require('material-ui')
3 | const settingsActions = require('../../../stores/settings/settingsActions')
4 | const styles = require('../settingStyles')
5 | const shallowCompare = require('react-addons-shallow-compare')
6 |
7 | module.exports = React.createClass({
8 | /* **************************************************************************/
9 | // Rendering
10 | /* **************************************************************************/
11 |
12 | displayName: 'NotificationSettingsSection',
13 | propTypes: {
14 | os: React.PropTypes.object.isRequired
15 | },
16 |
17 | /* **************************************************************************/
18 | // Rendering
19 | /* **************************************************************************/
20 |
21 | shouldComponentUpdate (nextProps, nextState) {
22 | return shallowCompare(this, nextProps, nextState)
23 | },
24 |
25 | render () {
26 | const { os, ...passProps } = this.props
27 |
28 | return (
29 |
30 | Notifications
31 | settingsActions.setNotificationsEnabled(toggled)} />
36 | settingsActions.setNotificationsSilent(!toggled)} />
42 |
43 | )
44 | }
45 | })
46 |
--------------------------------------------------------------------------------
/src/scenes/mailboxes/src/ui/Settings/General/PlatformSettingsSection.js:
--------------------------------------------------------------------------------
1 | const React = require('react')
2 | const { Toggle, Paper, SelectField, MenuItem } = require('material-ui')
3 | const platformActions = require('../../../stores/platform/platformActions')
4 | const styles = require('../settingStyles')
5 | const shallowCompare = require('react-addons-shallow-compare')
6 |
7 | const LOGIN_OPEN_MODES = {
8 | OFF: 'false|false',
9 | ON: 'true|false',
10 | ON_BACKGROUND: 'true|true'
11 | }
12 |
13 | module.exports = React.createClass({
14 | /* **************************************************************************/
15 | // Rendering
16 | /* **************************************************************************/
17 |
18 | displayName: 'PlatformSettingsSection',
19 | propTypes: {
20 | mailtoLinkHandlerSupported: React.PropTypes.bool.isRequired,
21 | isMailtoLinkHandler: React.PropTypes.bool.isRequired,
22 | openAtLoginSupported: React.PropTypes.bool.isRequired,
23 | openAtLogin: React.PropTypes.bool.isRequired,
24 | openAsHiddenAtLogin: React.PropTypes.bool.isRequired
25 | },
26 |
27 | /* **************************************************************************/
28 | // UI Events
29 | /* **************************************************************************/
30 |
31 | /**
32 | * Handles the open at login state chaning
33 | */
34 | handleOpenAtLoginChanged (evt, index, value) {
35 | switch (value) {
36 | case LOGIN_OPEN_MODES.OFF:
37 | platformActions.changeLoginPref(false, false)
38 | break
39 | case LOGIN_OPEN_MODES.ON:
40 | platformActions.changeLoginPref(true, false)
41 | break
42 | case LOGIN_OPEN_MODES.ON_BACKGROUND:
43 | platformActions.changeLoginPref(true, true)
44 | break
45 | }
46 | },
47 |
48 | /* **************************************************************************/
49 | // Rendering
50 | /* **************************************************************************/
51 |
52 | shouldComponentUpdate (nextProps, nextState) {
53 | return shallowCompare(this, nextProps, nextState)
54 | },
55 |
56 | render () {
57 | const {
58 | mailtoLinkHandlerSupported,
59 | isMailtoLinkHandler,
60 | openAtLoginSupported,
61 | openAtLogin,
62 | openAsHiddenAtLogin,
63 | ...passProps
64 | } = this.props
65 |
66 | if (!mailtoLinkHandlerSupported && !openAtLoginSupported) { return null }
67 |
68 | return (
69 |
70 | Platform
71 | {mailtoLinkHandlerSupported ? (
72 | platformActions.changeMailtoLinkHandler(toggled)} />
77 | ) : undefined}
78 | {openAtLoginSupported ? (
79 |
84 |
85 |
86 |
87 |
88 | ) : undefined}
89 |
90 | )
91 | }
92 | })
93 |
--------------------------------------------------------------------------------
/src/scenes/mailboxes/src/ui/Settings/General/TraySettingsSection.js:
--------------------------------------------------------------------------------
1 | const React = require('react')
2 | const { Toggle, Paper, SelectField, MenuItem } = require('material-ui')
3 | const { TrayIconEditor } = require('../../../Components')
4 | const settingsActions = require('../../../stores/settings/settingsActions')
5 | const styles = require('../settingStyles')
6 | const shallowCompare = require('react-addons-shallow-compare')
7 | const Tray = require('../../Tray')
8 |
9 | module.exports = React.createClass({
10 | /* **************************************************************************/
11 | // Class
12 | /* **************************************************************************/
13 |
14 | displayName: 'TraySettingsSection',
15 | propTypes: {
16 | tray: React.PropTypes.object.isRequired
17 | },
18 |
19 | /* **************************************************************************/
20 | // Rendering
21 | /* **************************************************************************/
22 |
23 | shouldComponentUpdate (nextProps, nextState) {
24 | return shallowCompare(this, nextProps, nextState)
25 | },
26 |
27 | render () {
28 | const {tray, ...passProps} = this.props
29 |
30 | return (
31 |
32 | {process.platform === 'darwin' ? 'Menu Bar' : 'Tray'}
33 |
34 | settingsActions.setShowTrayIcon(toggled)} />
39 | settingsActions.setShowTrayUnreadCount(toggled)} />
45 | {Tray.platformSupportsDpiMultiplier() ? (
46 | settingsActions.setDpiMultiplier(value)}>
50 |
51 |
52 |
53 |
54 |
55 |
56 | ) : undefined }
57 |
58 |
59 |
60 |
61 | )
62 | }
63 | })
64 |
--------------------------------------------------------------------------------
/src/scenes/mailboxes/src/ui/Settings/settingStyles.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | /* **************************************************************************/
3 | // Modal
4 | /* **************************************************************************/
5 | dialog: {
6 | width: '90%',
7 | maxWidth: 1200
8 | },
9 | tabToggles: {
10 | display: 'flex',
11 | flexDirection: 'row',
12 | alignContent: 'stretch'
13 | },
14 | tabToggle: {
15 | height: 50,
16 | borderRadius: 0,
17 | flex: 1,
18 | borderBottomWidth: 2,
19 | borderBottomStyle: 'solid'
20 | },
21 |
22 | /* **************************************************************************/
23 | // General
24 | /* **************************************************************************/
25 | paper: {
26 | padding: 15,
27 | marginBottom: 5,
28 | marginTop: 5
29 | },
30 | subheading: {
31 | marginTop: 0,
32 | marginBottom: 10,
33 | color: '#CCC',
34 | fontWeight: '300',
35 | fontSize: 16
36 | },
37 | fileInputButton: {
38 | marginRight: 15,
39 | position: 'relative',
40 | overflow: 'hidden'
41 | },
42 | fileInput: {
43 | position: 'absolute',
44 | top: 0,
45 | left: 0,
46 | right: 0,
47 | bottom: 0,
48 | opacity: 0,
49 | width: '100%',
50 | cursor: 'pointer'
51 | },
52 | button: {
53 | marginTop: 5,
54 | marginBottom: 5
55 | },
56 |
57 | /* **************************************************************************/
58 | // Account
59 | /* **************************************************************************/
60 |
61 | accountPicker: {
62 | position: 'relative',
63 | height: 100
64 | },
65 | accountPickerAvatar: {
66 | position: 'absolute',
67 | top: 20,
68 | left: 20,
69 | boxShadow: 'rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px' // copied from paper
70 | },
71 | accountPickerContainer: {
72 | position: 'absolute',
73 | top: 25,
74 | left: 100,
75 | right: 0
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/src/scenes/mailboxes/src/ui/Sidelist/SidelistItemAddMailbox.js:
--------------------------------------------------------------------------------
1 | const React = require('react')
2 | const { IconButton } = require('material-ui')
3 | const Colors = require('material-ui/styles/colors')
4 | const styles = require('./SidelistStyles')
5 | const ReactTooltip = require('react-tooltip')
6 | const { mailboxWizardActions } = require('../../stores/mailboxWizard')
7 |
8 | module.exports = React.createClass({
9 |
10 | /* **************************************************************************/
11 | // Class
12 | /* **************************************************************************/
13 |
14 | displayName: 'SidelistItemAddMailbox',
15 |
16 | /* **************************************************************************/
17 | // Rendering
18 | /* **************************************************************************/
19 |
20 | render () {
21 | const { style, ...passProps } = this.props
22 | return (
23 |
28 | mailboxWizardActions.openAddMailbox()}
31 | iconStyle={{ color: Colors.blueGrey400 }}>
32 | add_circle
33 |
34 |
39 |
40 | )
41 | }
42 | })
43 |
--------------------------------------------------------------------------------
/src/scenes/mailboxes/src/ui/Sidelist/SidelistItemMailbox/SidelistItemMailboxAvatar.js:
--------------------------------------------------------------------------------
1 | const React = require('react')
2 | const { Avatar } = require('material-ui')
3 | const { mailboxStore } = require('../../../stores/mailbox')
4 | const shallowCompare = require('react-addons-shallow-compare')
5 | const styles = require('../SidelistStyles')
6 |
7 | module.exports = React.createClass({
8 | /* **************************************************************************/
9 | // Class
10 | /* **************************************************************************/
11 |
12 | displayName: 'SidelistItemMailboxAvatar',
13 | propTypes: {
14 | isActive: React.PropTypes.bool.isRequired,
15 | isHovering: React.PropTypes.bool.isRequired,
16 | mailbox: React.PropTypes.object.isRequired,
17 | index: React.PropTypes.number.isRequired,
18 | onClick: React.PropTypes.func.isRequired
19 | },
20 |
21 | /* **************************************************************************/
22 | // Rendering
23 | /* **************************************************************************/
24 |
25 | shouldComponentUpdate (nextProps, nextState) {
26 | return shallowCompare(this, nextProps, nextState)
27 | },
28 |
29 | render () {
30 | const { isActive, isHovering, mailbox, index, ...passProps } = this.props
31 |
32 | let url
33 | let children
34 | let backgroundColor
35 | const borderColor = isActive || isHovering ? mailbox.color : 'white'
36 | if (mailbox.hasCustomAvatar) {
37 | url = mailboxStore.getState().getAvatar(mailbox.customAvatarId)
38 | backgroundColor = 'white'
39 | } else if (mailbox.avatarURL) {
40 | url = mailbox.avatarURL
41 | backgroundColor = 'white'
42 | } else {
43 | children = index
44 | backgroundColor = mailbox.color
45 | }
46 |
47 | return (
48 |
56 | {children}
57 |
58 | )
59 | }
60 | })
61 |
--------------------------------------------------------------------------------
/src/scenes/mailboxes/src/ui/Sidelist/SidelistItemMailbox/SidelistItemMailboxServices.js:
--------------------------------------------------------------------------------
1 | const React = require('react')
2 | const shallowCompare = require('react-addons-shallow-compare')
3 | const styles = require('../SidelistStyles')
4 | const SidelistItemMailboxService = require('./SidelistItemMailboxService')
5 |
6 | module.exports = React.createClass({
7 | /* **************************************************************************/
8 | // Class
9 | /* **************************************************************************/
10 |
11 | displayName: 'SidelistItemMailboxServices',
12 | propTypes: {
13 | mailbox: React.PropTypes.object.isRequired,
14 | isActiveMailbox: React.PropTypes.bool.isRequired,
15 | activeService: React.PropTypes.string.isRequired,
16 | onOpenService: React.PropTypes.func.isRequired
17 | },
18 |
19 | /* **************************************************************************/
20 | // Rendering
21 | /* **************************************************************************/
22 |
23 | shouldComponentUpdate (nextProps, nextState) {
24 | return shallowCompare(this, nextProps, nextState)
25 | },
26 |
27 | render () {
28 | const { mailbox, isActiveMailbox, activeService, onOpenService, onContextMenu } = this.props
29 | if (!mailbox.hasEnabledServices) { return null }
30 |
31 | return (
32 |
33 | {mailbox.enabledServies.map((service) => {
34 | return (
35 |
43 | )
44 | })}
45 |
46 | )
47 | }
48 | })
49 |
--------------------------------------------------------------------------------
/src/scenes/mailboxes/src/ui/Sidelist/SidelistItemMailbox/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./SidelistItemMailbox')
2 |
--------------------------------------------------------------------------------
/src/scenes/mailboxes/src/ui/Sidelist/SidelistItemNews.js:
--------------------------------------------------------------------------------
1 | const React = require('react')
2 | const { IconButton, Badge } = require('material-ui')
3 | const Colors = require('material-ui/styles/colors')
4 | const {navigationDispatch} = require('../../Dispatch')
5 | const styles = require('./SidelistStyles')
6 | const ReactTooltip = require('react-tooltip')
7 | const { settingsStore } = require('../../stores/settings')
8 |
9 | module.exports = React.createClass({
10 |
11 | /* **************************************************************************/
12 | // Class
13 | /* **************************************************************************/
14 |
15 | displayName: 'SidelistItemNews',
16 |
17 | /* **************************************************************************/
18 | // Component Lifecycle
19 | /* **************************************************************************/
20 |
21 | componentDidMount () {
22 | settingsStore.listen(this.settingsUpdated)
23 | },
24 |
25 | componentWillUnmount () {
26 | settingsStore.unlisten(this.settingsUpdated)
27 | },
28 |
29 | /* **************************************************************************/
30 | // Data Lifecycle
31 | /* **************************************************************************/
32 |
33 | getInitialState () {
34 | return {
35 | hasUnopenedNewsId: settingsStore.getState().news.hasUnopenedNewsId,
36 | newsLevel: settingsStore.getState().news.newsLevel
37 | }
38 | },
39 |
40 | settingsUpdated (settingsState) {
41 | this.setState({
42 | hasUnopenedNewsId: settingsState.news.hasUnopenedNewsId,
43 | newsLevel: settingsState.news.newsLevel
44 | })
45 | },
46 |
47 | /* **************************************************************************/
48 | // UI Events
49 | /* **************************************************************************/
50 |
51 | handleClick () {
52 | navigationDispatch.openNews()
53 | },
54 |
55 | /* **************************************************************************/
56 | // Rendering
57 | /* **************************************************************************/
58 |
59 | render () {
60 | const { style, ...passProps } = this.props
61 | const { hasUnopenedNewsId, newsLevel } = this.state
62 | return (
63 |
68 |
72 | {hasUnopenedNewsId && newsLevel === 'notify' ? (
73 |
78 | ) : undefined}
79 |
84 |
85 | )
86 | }
87 | })
88 |
--------------------------------------------------------------------------------
/src/scenes/mailboxes/src/ui/Sidelist/SidelistItemSettings.js:
--------------------------------------------------------------------------------
1 | const React = require('react')
2 | const { IconButton } = require('material-ui')
3 | const Colors = require('material-ui/styles/colors')
4 | const {navigationDispatch} = require('../../Dispatch')
5 | const styles = require('./SidelistStyles')
6 | const ReactTooltip = require('react-tooltip')
7 |
8 | module.exports = React.createClass({
9 |
10 | /* **************************************************************************/
11 | // Class
12 | /* **************************************************************************/
13 |
14 | displayName: 'SidelistItemSettings',
15 |
16 | /* **************************************************************************/
17 | // Rendering
18 | /* **************************************************************************/
19 |
20 | /**
21 | * Renders the app
22 | */
23 | render () {
24 | const { style, ...passProps } = this.props
25 | return (
26 |
31 | navigationDispatch.openSettings()}
34 | iconStyle={{ color: Colors.blueGrey400 }}>
35 | settings
36 |
37 |
42 |
43 | )
44 | }
45 | })
46 |
--------------------------------------------------------------------------------
/src/scenes/mailboxes/src/ui/Sidelist/SidelistItemWizard.js:
--------------------------------------------------------------------------------
1 | const React = require('react')
2 | const { IconButton } = require('material-ui')
3 | const Colors = require('material-ui/styles/colors')
4 | const { appWizardActions } = require('../../stores/appWizard')
5 | const styles = require('./SidelistStyles')
6 | const ReactTooltip = require('react-tooltip')
7 |
8 | module.exports = React.createClass({
9 |
10 | /* **************************************************************************/
11 | // Class
12 | /* **************************************************************************/
13 |
14 | displayName: 'SidelistItemWizard',
15 |
16 | /* **************************************************************************/
17 | // Rendering
18 | /* **************************************************************************/
19 |
20 | /**
21 | * Renders the app
22 | */
23 | render () {
24 | const { style, ...passProps } = this.props
25 | return (
26 |
31 | appWizardActions.startWizard()}
34 | iconStyle={{ color: Colors.yellow600 }} />
35 |
40 |
41 | )
42 | }
43 | })
44 |
--------------------------------------------------------------------------------
/src/scenes/mailboxes/src/ui/Sidelist/SidelistMailboxes.js:
--------------------------------------------------------------------------------
1 | const React = require('react')
2 | const { mailboxStore } = require('../../stores/mailbox')
3 | const SidelistItemMailbox = require('./SidelistItemMailbox')
4 |
5 | module.exports = React.createClass({
6 |
7 | /* **************************************************************************/
8 | // Class
9 | /* **************************************************************************/
10 |
11 | displayName: 'SidelistMailboxes',
12 |
13 | /* **************************************************************************/
14 | // Lifecycle
15 | /* **************************************************************************/
16 |
17 | componentDidMount () {
18 | mailboxStore.listen(this.mailboxesChanged)
19 | },
20 |
21 | componentWillUnmount () {
22 | mailboxStore.unlisten(this.mailboxesChanged)
23 | },
24 |
25 | /* **************************************************************************/
26 | // Data lifecycle
27 | /* **************************************************************************/
28 |
29 | getInitialState () {
30 | return {
31 | mailboxIds: mailboxStore.getState().mailboxIds()
32 | }
33 | },
34 |
35 | mailboxesChanged (store) {
36 | this.setState({
37 | mailboxIds: store.mailboxIds()
38 | })
39 | },
40 |
41 | /* **************************************************************************/
42 | // Rendering
43 | /* **************************************************************************/
44 |
45 | shouldComponentUpdate (nextProps, nextState) {
46 | if (JSON.stringify(this.state.mailboxIds) !== JSON.stringify(nextState.mailboxIds)) { return true }
47 | return false
48 | },
49 |
50 | render () {
51 | const { styles, ...passProps } = this.props
52 | const { mailboxIds } = this.state
53 | return (
54 |
55 | {mailboxIds.map((mailboxId, index, arr) => {
56 | return (
57 | )
63 | })}
64 |
65 | )
66 | }
67 | })
68 |
--------------------------------------------------------------------------------
/src/scenes/mailboxes/src/ui/Sidelist/SidelistStyles.less:
--------------------------------------------------------------------------------
1 | .ReactComponent-Sidelist-Scroller {
2 | &::-webkit-scrollbar { display: none; }
3 | }
4 |
--------------------------------------------------------------------------------
/src/scenes/mailboxes/src/ui/Sidelist/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./Sidelist')
2 |
--------------------------------------------------------------------------------
/src/scenes/mailboxes/src/ui/Welcome/Welcome.js:
--------------------------------------------------------------------------------
1 | const React = require('react')
2 | const { mailboxWizardActions } = require('../../stores/mailboxWizard')
3 | const { RaisedButton, FontIcon } = require('material-ui')
4 | const Colors = require('material-ui/styles/colors')
5 |
6 | const styles = {
7 | icon: {
8 | height: 80,
9 | width: 80,
10 | display: 'inline-block',
11 | marginLeft: 10,
12 | marginRight: 10,
13 | backgroundSize: 'contain',
14 | backgroundPosition: 'center',
15 | backgroundRepeat: 'no-repeat',
16 | backgroundImage: 'url("../../icons/app_512.png")'
17 | },
18 | container: {
19 | textAlign: 'center',
20 | overflow: 'auto'
21 | },
22 | heading: {
23 | backgroundColor: Colors.red400,
24 | color: 'white',
25 | paddingTop: 40,
26 | paddingBottom: 20
27 | },
28 | headingTitle: {
29 | fontWeight: '200',
30 | fontSize: '30px',
31 | marginBottom: 0
32 | },
33 | headingSubtitle: {
34 | fontWeight: '200',
35 | fontSize: '18px'
36 | },
37 | setupItem: {
38 | marginTop: 32
39 | },
40 | setupItemExtended: {
41 | fontSize: '85%',
42 | color: Colors.grey600
43 | }
44 | }
45 |
46 | module.exports = React.createClass({
47 |
48 | /* **************************************************************************/
49 | // Class
50 | /* **************************************************************************/
51 |
52 | displayName: 'Welcome',
53 |
54 | /* **************************************************************************/
55 | // Rendering
56 | /* **************************************************************************/
57 |
58 | render () {
59 | return (
60 |
61 |
62 |
63 |
Welcome to WMail
64 |
...the open-source desktop client for Gmail and Google Inbox
65 |
66 |
67 |
mail_outline)}
70 | primary
71 | onClick={() => mailboxWizardActions.openAddMailbox()} />
72 |
73 | Get started by adding your first Gmail or Google Inbox accout
74 |
75 |
76 |