aboutsummaryrefslogtreecommitdiffstats
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/layout/Sidebar.js52
-rw-r--r--src/components/services/content/ServiceWebview.js44
-rw-r--r--src/components/services/content/Services.js3
-rw-r--r--src/components/services/tabs/TabBarSortableList.js22
-rw-r--r--src/components/services/tabs/TabItem.js15
-rw-r--r--src/components/services/tabs/Tabbar.js3
-rw-r--r--src/components/settings/navigation/SettingsNavigation.js1
-rw-r--r--src/components/settings/services/EditServiceForm.js12
-rw-r--r--src/components/settings/services/ServiceItem.js22
-rw-r--r--src/components/settings/settings/EditSettingsForm.js29
-rw-r--r--src/components/ui/AppLoader.js2
-rw-r--r--src/components/ui/Loader.js5
-rw-r--r--src/components/ui/Subscription.js20
13 files changed, 150 insertions, 80 deletions
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 6a5c0f365..ea34e8702 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -11,16 +11,25 @@ const messages = defineMessages({
11 id: 'sidebar.settings', 11 id: 'sidebar.settings',
12 defaultMessage: '!!!Settings', 12 defaultMessage: '!!!Settings',
13 }, 13 },
14 addNewService: {
15 id: 'sidebar.addNewService',
16 defaultMessage: '!!!Add new service',
17 },
18 mute: {
19 id: 'sidebar.mute',
20 defaultMessage: '!!!Disable audio',
21 },
22 unmute: {
23 id: 'sidebar.unmute',
24 defaultMessage: '!!!Enable audio',
25 },
14}); 26});
15 27
16export default class Sidebar extends Component { 28export default class Sidebar extends Component {
17 static propTypes = { 29 static propTypes = {
18 openSettings: PropTypes.func.isRequired, 30 openSettings: PropTypes.func.isRequired,
19 isPremiumUser: PropTypes.bool, 31 toggleMuteApp: PropTypes.func.isRequired,
20 } 32 isAppMuted: PropTypes.bool.isRequired,
21
22 static defaultProps = {
23 isPremiumUser: false,
24 } 33 }
25 34
26 static contextTypes = { 35 static contextTypes = {
@@ -40,8 +49,9 @@ export default class Sidebar extends Component {
40 } 49 }
41 50
42 render() { 51 render() {
43 const { openSettings, isPremiumUser } = this.props; 52 const { openSettings, toggleMuteApp, isAppMuted } = this.props;
44 const { intl } = this.context; 53 const { intl } = this.context;
54
45 return ( 55 return (
46 <div className="sidebar"> 56 <div className="sidebar">
47 <Tabbar 57 <Tabbar
@@ -50,21 +60,25 @@ export default class Sidebar extends Component {
50 disableToolTip={() => this.disableToolTip()} 60 disableToolTip={() => this.disableToolTip()}
51 /> 61 />
52 <button 62 <button
53 onClick={openSettings} 63 onClick={toggleMuteApp}
54 className="sidebar__settings-button" 64 className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`}
65 data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`}
66 >
67 <i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} />
68 </button>
69 <button
70 onClick={() => openSettings({ path: 'recipes' })}
71 className="sidebar__button sidebar__button--new-service"
72 data-tip={`${intl.formatMessage(messages.addNewService)} (${ctrlKey}+N)`}
73 >
74 <i className="mdi mdi-plus-box" />
75 </button>
76 <button
77 onClick={() => openSettings({ path: 'app' })}
78 className="sidebar__button sidebar__button--settings"
55 data-tip={`${intl.formatMessage(messages.settings)} (${ctrlKey}+,)`} 79 data-tip={`${intl.formatMessage(messages.settings)} (${ctrlKey}+,)`}
56 > 80 >
57 {isPremiumUser && ( 81 <i className="mdi mdi-settings" />
58 <span className="emoji">
59 <img src="./assets/images/emoji/star.png" alt="" />
60 </span>
61 )}
62 <img
63 src="./assets/images/logo.svg"
64 className="sidebar__logo"
65 alt=""
66 />
67 {intl.formatMessage(messages.settings)}
68 </button> 82 </button>
69 {this.state.tooltipEnabled && ( 83 {this.state.tooltipEnabled && (
70 <ReactTooltip place="right" type="dark" effect="solid" /> 84 <ReactTooltip place="right" type="dark" effect="solid" />
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index a71017a6e..abbf21dee 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -16,6 +16,7 @@ export default class ServiceWebview extends Component {
16 service: PropTypes.instanceOf(ServiceModel).isRequired, 16 service: PropTypes.instanceOf(ServiceModel).isRequired,
17 setWebviewReference: PropTypes.func.isRequired, 17 setWebviewReference: PropTypes.func.isRequired,
18 reload: PropTypes.func.isRequired, 18 reload: PropTypes.func.isRequired,
19 isAppMuted: PropTypes.bool.isRequired,
19 enable: PropTypes.func.isRequired, 20 enable: PropTypes.func.isRequired,
20 }; 21 };
21 22
@@ -58,6 +59,7 @@ export default class ServiceWebview extends Component {
58 service, 59 service,
59 setWebviewReference, 60 setWebviewReference,
60 reload, 61 reload,
62 isAppMuted,
61 enable, 63 enable,
62 } = this.props; 64 } = this.props;
63 65
@@ -90,31 +92,23 @@ export default class ServiceWebview extends Component {
90 enable={enable} 92 enable={enable}
91 /> 93 />
92 )} 94 )}
93 {service.isEnabled && ( 95 <Webview
94 <div className="services__webview-wrapper"> 96 ref={(element) => { this.webview = element; }}
95 <Webview 97 autosize
96 ref={(element) => { this.webview = element; }} 98 src={service.url}
97 99 preload="./webview/plugin.js"
98 autosize 100 partition={`persist:service-${service.id}`}
99 src={service.url} 101 onDidAttach={() => setWebviewReference({
100 preload="./webview/plugin.js" 102 serviceId: service.id,
101 partition={`persist:service-${service.id}`} 103 webview: this.webview.view,
102 104 })}
103 onDidAttach={() => setWebviewReference({ 105 onUpdateTargetUrl={this.updateTargetUrl}
104 serviceId: service.id, 106 useragent={service.userAgent}
105 webview: this.webview.view, 107 muted={isAppMuted || service.isMuted}
106 })} 108 disablewebsecurity
107 109 allowpopups
108 onUpdateTargetUrl={this.updateTargetUrl} 110 />
109 111 {statusBar}
110 useragent={service.userAgent}
111
112 disablewebsecurity
113 allowpopups
114 />
115 {statusBar}
116 </div>
117 )}
118 </div> 112 </div>
119 ); 113 );
120 } 114 }
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 5230508f7..b1322afc2 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -26,6 +26,7 @@ export default class Services extends Component {
26 handleIPCMessage: PropTypes.func.isRequired, 26 handleIPCMessage: PropTypes.func.isRequired,
27 openWindow: PropTypes.func.isRequired, 27 openWindow: PropTypes.func.isRequired,
28 reload: PropTypes.func.isRequired, 28 reload: PropTypes.func.isRequired,
29 isAppMuted: PropTypes.bool.isRequired,
29 update: PropTypes.func.isRequired, 30 update: PropTypes.func.isRequired,
30 }; 31 };
31 32
@@ -45,6 +46,7 @@ export default class Services extends Component {
45 setWebviewReference, 46 setWebviewReference,
46 openWindow, 47 openWindow,
47 reload, 48 reload,
49 isAppMuted,
48 update, 50 update,
49 } = this.props; 51 } = this.props;
50 const { intl } = this.context; 52 const { intl } = this.context;
@@ -78,6 +80,7 @@ export default class Services extends Component {
78 setWebviewReference={setWebviewReference} 80 setWebviewReference={setWebviewReference}
79 openWindow={openWindow} 81 openWindow={openWindow}
80 reload={() => reload({ serviceId: service.id })} 82 reload={() => reload({ serviceId: service.id })}
83 isAppMuted={isAppMuted}
81 enable={() => update({ 84 enable={() => update({
82 serviceId: service.id, 85 serviceId: service.id,
83 serviceData: { 86 serviceData: {
diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js
index 3340cbbbb..2daf55676 100644
--- a/src/components/services/tabs/TabBarSortableList.js
+++ b/src/components/services/tabs/TabBarSortableList.js
@@ -2,17 +2,8 @@ import React, { Component } from 'react';
2import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; 2import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
3import PropTypes from 'prop-types'; 3import PropTypes from 'prop-types';
4import { SortableContainer } from 'react-sortable-hoc'; 4import { SortableContainer } from 'react-sortable-hoc';
5import { defineMessages, intlShape } from 'react-intl';
6 5
7import TabItem from './TabItem'; 6import TabItem from './TabItem';
8import { ctrlKey } from '../../../environment';
9
10const messages = defineMessages({
11 addNewService: {
12 id: 'sidebar.addNewService',
13 defaultMessage: '!!!Add new service',
14 },
15});
16 7
17@observer 8@observer
18class TabBarSortableList extends Component { 9class TabBarSortableList extends Component {
@@ -22,29 +13,25 @@ class TabBarSortableList extends Component {
22 openSettings: PropTypes.func.isRequired, 13 openSettings: PropTypes.func.isRequired,
23 reload: PropTypes.func.isRequired, 14 reload: PropTypes.func.isRequired,
24 toggleNotifications: PropTypes.func.isRequired, 15 toggleNotifications: PropTypes.func.isRequired,
16 toggleAudio: PropTypes.func.isRequired,
25 deleteService: PropTypes.func.isRequired, 17 deleteService: PropTypes.func.isRequired,
26 disableService: PropTypes.func.isRequired, 18 disableService: PropTypes.func.isRequired,
27 enableService: PropTypes.func.isRequired, 19 enableService: PropTypes.func.isRequired,
28 } 20 }
29 21
30 static contextTypes = {
31 intl: intlShape,
32 };
33
34 render() { 22 render() {
35 const { 23 const {
36 services, 24 services,
37 setActive, 25 setActive,
38 reload, 26 reload,
39 toggleNotifications, 27 toggleNotifications,
28 toggleAudio,
40 deleteService, 29 deleteService,
41 disableService, 30 disableService,
42 enableService, 31 enableService,
43 openSettings, 32 openSettings,
44 } = this.props; 33 } = this.props;
45 34
46 const { intl } = this.context;
47
48 return ( 35 return (
49 <ul 36 <ul
50 className="tabs" 37 className="tabs"
@@ -58,13 +45,14 @@ class TabBarSortableList extends Component {
58 shortcutIndex={index + 1} 45 shortcutIndex={index + 1}
59 reload={() => reload({ serviceId: service.id })} 46 reload={() => reload({ serviceId: service.id })}
60 toggleNotifications={() => toggleNotifications({ serviceId: service.id })} 47 toggleNotifications={() => toggleNotifications({ serviceId: service.id })}
48 toggleAudio={() => toggleAudio({ serviceId: service.id })}
61 deleteService={() => deleteService({ serviceId: service.id })} 49 deleteService={() => deleteService({ serviceId: service.id })}
62 disableService={() => disableService({ serviceId: service.id })} 50 disableService={() => disableService({ serviceId: service.id })}
63 enableService={() => enableService({ serviceId: service.id })} 51 enableService={() => enableService({ serviceId: service.id })}
64 openSettings={openSettings} 52 openSettings={openSettings}
65 /> 53 />
66 ))} 54 ))}
67 <li> 55 {/* <li>
68 <button 56 <button
69 className="sidebar__add-service" 57 className="sidebar__add-service"
70 onClick={() => openSettings({ path: 'recipes' })} 58 onClick={() => openSettings({ path: 'recipes' })}
@@ -72,7 +60,7 @@ class TabBarSortableList extends Component {
72 > 60 >
73 <span className="mdi mdi-plus" /> 61 <span className="mdi mdi-plus" />
74 </button> 62 </button>
75 </li> 63 </li> */}
76 </ul> 64 </ul>
77 ); 65 );
78 } 66 }
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index 638e17d95..a7136c43f 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -28,6 +28,14 @@ const messages = defineMessages({
28 id: 'tabs.item.enableNotification', 28 id: 'tabs.item.enableNotification',
29 defaultMessage: '!!!Enable notifications', 29 defaultMessage: '!!!Enable notifications',
30 }, 30 },
31 disableAudio: {
32 id: 'tabs.item.disableAudio',
33 defaultMessage: '!!!Disable audio',
34 },
35 enableAudio: {
36 id: 'tabs.item.enableAudio',
37 defaultMessage: '!!!Enable audio',
38 },
31 disableService: { 39 disableService: {
32 id: 'tabs.item.disableService', 40 id: 'tabs.item.disableService',
33 defaultMessage: '!!!Disable Service', 41 defaultMessage: '!!!Disable Service',
@@ -50,6 +58,7 @@ class TabItem extends Component {
50 shortcutIndex: PropTypes.number.isRequired, 58 shortcutIndex: PropTypes.number.isRequired,
51 reload: PropTypes.func.isRequired, 59 reload: PropTypes.func.isRequired,
52 toggleNotifications: PropTypes.func.isRequired, 60 toggleNotifications: PropTypes.func.isRequired,
61 toggleAudio: PropTypes.func.isRequired,
53 openSettings: PropTypes.func.isRequired, 62 openSettings: PropTypes.func.isRequired,
54 deleteService: PropTypes.func.isRequired, 63 deleteService: PropTypes.func.isRequired,
55 disableService: PropTypes.func.isRequired, 64 disableService: PropTypes.func.isRequired,
@@ -67,6 +76,7 @@ class TabItem extends Component {
67 shortcutIndex, 76 shortcutIndex,
68 reload, 77 reload,
69 toggleNotifications, 78 toggleNotifications,
79 toggleAudio,
70 deleteService, 80 deleteService,
71 disableService, 81 disableService,
72 enableService, 82 enableService,
@@ -96,6 +106,11 @@ class TabItem extends Component {
96 : intl.formatMessage(messages.enableNotifications), 106 : intl.formatMessage(messages.enableNotifications),
97 click: () => toggleNotifications(), 107 click: () => toggleNotifications(),
98 }, { 108 }, {
109 label: service.isMuted
110 ? intl.formatMessage(messages.enableAudio)
111 : intl.formatMessage(messages.disableAudio),
112 click: () => toggleAudio(),
113 }, {
99 label: intl.formatMessage(service.isEnabled ? messages.disableService : messages.enableService), 114 label: intl.formatMessage(service.isEnabled ? messages.disableService : messages.enableService),
100 click: () => (service.isEnabled ? disableService() : enableService()), 115 click: () => (service.isEnabled ? disableService() : enableService()),
101 }, { 116 }, {
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index 5f63aed16..fd4325107 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -15,6 +15,7 @@ export default class TabBar extends Component {
15 reorder: PropTypes.func.isRequired, 15 reorder: PropTypes.func.isRequired,
16 reload: PropTypes.func.isRequired, 16 reload: PropTypes.func.isRequired,
17 toggleNotifications: PropTypes.func.isRequired, 17 toggleNotifications: PropTypes.func.isRequired,
18 toggleAudio: PropTypes.func.isRequired,
18 deleteService: PropTypes.func.isRequired, 19 deleteService: PropTypes.func.isRequired,
19 updateService: PropTypes.func.isRequired, 20 updateService: PropTypes.func.isRequired,
20 } 21 }
@@ -59,6 +60,7 @@ export default class TabBar extends Component {
59 disableToolTip, 60 disableToolTip,
60 reload, 61 reload,
61 toggleNotifications, 62 toggleNotifications,
63 toggleAudio,
62 deleteService, 64 deleteService,
63 } = this.props; 65 } = this.props;
64 66
@@ -71,6 +73,7 @@ export default class TabBar extends Component {
71 onSortStart={disableToolTip} 73 onSortStart={disableToolTip}
72 reload={reload} 74 reload={reload}
73 toggleNotifications={toggleNotifications} 75 toggleNotifications={toggleNotifications}
76 toggleAudio={toggleAudio}
74 deleteService={deleteService} 77 deleteService={deleteService}
75 disableService={args => this.disableService(args)} 78 disableService={args => this.disableService(args)}
76 enableService={args => this.enableService(args)} 79 enableService={args => this.enableService(args)}
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 3b21a7765..fea8d682d 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -74,7 +74,6 @@ export default class SettingsNavigation extends Component {
74 <Link 74 <Link
75 to="/auth/logout" 75 to="/auth/logout"
76 className="settings-navigation__link" 76 className="settings-navigation__link"
77 activeClassName="is-active"
78 > 77 >
79 {intl.formatMessage(messages.logout)} 78 {intl.formatMessage(messages.logout)}
80 </Link> 79 </Link>
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 9b359a78e..753781507 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -61,7 +61,11 @@ const messages = defineMessages({
61 }, 61 },
62 indirectMessageInfo: { 62 indirectMessageInfo: {
63 id: 'settings.service.form.indirectMessageInfo', 63 id: 'settings.service.form.indirectMessageInfo',
64 defaultMessage: '!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...', // eslint-disable-line 64 defaultMessage: '!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...',
65 },
66 isMutedInfo: {
67 id: 'settings.service.form.isMutedInfo',
68 defaultMessage: '!!!When disabled, all notification sounds and audio playback are muted',
65 }, 69 },
66}); 70});
67 71
@@ -231,11 +235,15 @@ export default class EditServiceForm extends Component {
231 {recipe.hasIndirectMessages && ( 235 {recipe.hasIndirectMessages && (
232 <div> 236 <div>
233 <Toggle field={form.$('isIndirectMessageBadgeEnabled')} /> 237 <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
234 <p className="settings__indirect-message-help"> 238 <p className="settings__help">
235 {intl.formatMessage(messages.indirectMessageInfo)} 239 {intl.formatMessage(messages.indirectMessageInfo)}
236 </p> 240 </p>
237 </div> 241 </div>
238 )} 242 )}
243 <Toggle field={form.$('isMuted')} />
244 <p className="settings__help">
245 {intl.formatMessage(messages.isMutedInfo)}
246 </p>
239 <Toggle field={form.$('isEnabled')} /> 247 <Toggle field={form.$('isEnabled')} />
240 </div> 248 </div>
241 {recipe.message && ( 249 {recipe.message && (
diff --git a/src/components/settings/services/ServiceItem.js b/src/components/settings/services/ServiceItem.js
index 20d8581d0..9743315b0 100644
--- a/src/components/settings/services/ServiceItem.js
+++ b/src/components/settings/services/ServiceItem.js
@@ -16,6 +16,10 @@ const messages = defineMessages({
16 id: 'settings.services.tooltip.notificationsDisabled', 16 id: 'settings.services.tooltip.notificationsDisabled',
17 defaultMessage: '!!!Notifications are disabled', 17 defaultMessage: '!!!Notifications are disabled',
18 }, 18 },
19 tooltipIsMuted: {
20 id: 'settings.services.tooltip.isMuted',
21 defaultMessage: '!!!All sounds are muted',
22 },
19}); 23});
20 24
21@observer 25@observer
@@ -66,6 +70,17 @@ export default class ServiceItem extends Component {
66 className="service-table__column-info" 70 className="service-table__column-info"
67 onClick={goToServiceForm} 71 onClick={goToServiceForm}
68 > 72 >
73 {service.isMuted && (
74 <span
75 className="mdi mdi-bell-off"
76 data-tip={intl.formatMessage(messages.tooltipIsMuted)}
77 />
78 )}
79 </td>
80 <td
81 className="service-table__column-info"
82 onClick={goToServiceForm}
83 >
69 {!service.isEnabled && ( 84 {!service.isEnabled && (
70 <span 85 <span
71 className="mdi mdi-power" 86 className="mdi mdi-power"
@@ -85,13 +100,6 @@ export default class ServiceItem extends Component {
85 )} 100 )}
86 <ReactTooltip place="top" type="dark" effect="solid" /> 101 <ReactTooltip place="top" type="dark" effect="solid" />
87 </td> 102 </td>
88 {/* <td className="service-table__column-action">
89 <input
90 type="checkbox"
91 onChange={toggleAction}
92 checked={service.isEnabled}
93 />
94 </td> */}
95 </tr> 103 </tr>
96 ); 104 );
97 } 105 }
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index ba07b1a5b..601d57c81 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -30,6 +30,10 @@ const messages = defineMessages({
30 id: 'settings.app.headlineAppearance', 30 id: 'settings.app.headlineAppearance',
31 defaultMessage: '!!!Appearance', 31 defaultMessage: '!!!Appearance',
32 }, 32 },
33 headlineAdvanced: {
34 id: 'settings.app.headlineAdvanced',
35 defaultMessage: '!!!Advanced',
36 },
33 buttonSearchForUpdate: { 37 buttonSearchForUpdate: {
34 id: 'settings.app.buttonSearchForUpdate', 38 id: 'settings.app.buttonSearchForUpdate',
35 defaultMessage: '!!!Check for updates', 39 defaultMessage: '!!!Check for updates',
@@ -54,6 +58,10 @@ const messages = defineMessages({
54 id: 'settings.app.currentVersion', 58 id: 'settings.app.currentVersion',
55 defaultMessage: '!!!Current version:', 59 defaultMessage: '!!!Current version:',
56 }, 60 },
61 restartRequired: {
62 id: 'settings.app.restartRequired',
63 defaultMessage: '!!!Changes require restart',
64 },
57}); 65});
58 66
59@observer 67@observer
@@ -116,18 +124,31 @@ export default class EditSettingsForm extends Component {
116 onChange={e => this.submit(e)} 124 onChange={e => this.submit(e)}
117 id="form" 125 id="form"
118 > 126 >
119 <h2>{intl.formatMessage(messages.headlineGeneral)}</h2> 127 {/* General */}
128 <h2 id="general">{intl.formatMessage(messages.headlineGeneral)}</h2>
120 <Toggle field={form.$('autoLaunchOnStart')} /> 129 <Toggle field={form.$('autoLaunchOnStart')} />
121 <Toggle field={form.$('runInBackground')} /> 130 <Toggle field={form.$('runInBackground')} />
122 <Toggle field={form.$('enableSystemTray')} /> 131 <Toggle field={form.$('enableSystemTray')} />
123 {process.platform === 'win32' && ( 132 {process.platform === 'win32' && (
124 <Toggle field={form.$('minimizeToSystemTray')} /> 133 <Toggle field={form.$('minimizeToSystemTray')} />
125 )} 134 )}
126 <h2>{intl.formatMessage(messages.headlineAppearance)}</h2> 135
136 {/* Appearance */}
137 <h2 id="apperance">{intl.formatMessage(messages.headlineAppearance)}</h2>
127 <Toggle field={form.$('showDisabledServices')} /> 138 <Toggle field={form.$('showDisabledServices')} />
128 <h2>{intl.formatMessage(messages.headlineLanguage)}</h2> 139
140 {/* Language */}
141 <h2 id="language">{intl.formatMessage(messages.headlineLanguage)}</h2>
129 <Select field={form.$('locale')} showLabel={false} /> 142 <Select field={form.$('locale')} showLabel={false} />
130 <h2>{intl.formatMessage(messages.headlineUpdates)}</h2> 143
144 {/* Advanced */}
145 <h2 id="advanced">{intl.formatMessage(messages.headlineAdvanced)}</h2>
146 <Toggle field={form.$('enableSpellchecking')} />
147 <p className="settings__help">{intl.formatMessage(messages.restartRequired)}</p>
148 {/* <Select field={form.$('spellcheckingLanguage')} /> */}
149
150 {/* Updates */}
151 <h2 id="updates">{intl.formatMessage(messages.headlineUpdates)}</h2>
131 {updateIsReadyToInstall ? ( 152 {updateIsReadyToInstall ? (
132 <Button 153 <Button
133 label={intl.formatMessage(messages.buttonInstallUpdate)} 154 label={intl.formatMessage(messages.buttonInstallUpdate)}
diff --git a/src/components/ui/AppLoader.js b/src/components/ui/AppLoader.js
index 64a212969..ac3cdcb05 100644
--- a/src/components/ui/AppLoader.js
+++ b/src/components/ui/AppLoader.js
@@ -8,7 +8,7 @@ export default function () {
8 <div className="app-loader"> 8 <div className="app-loader">
9 <Appear> 9 <Appear>
10 <h1 className="app-loader__title">Franz</h1> 10 <h1 className="app-loader__title">Franz</h1>
11 <Loader /> 11 <Loader color="#FFF" />
12 </Appear> 12 </Appear>
13 </div> 13 </div>
14 ); 14 );
diff --git a/src/components/ui/Loader.js b/src/components/ui/Loader.js
index e4fbd96a2..f73296bb6 100644
--- a/src/components/ui/Loader.js
+++ b/src/components/ui/Loader.js
@@ -9,12 +9,14 @@ export default class LoaderComponent extends Component {
9 children: oneOrManyChildElements, 9 children: oneOrManyChildElements,
10 loaded: PropTypes.bool, 10 loaded: PropTypes.bool,
11 className: PropTypes.string, 11 className: PropTypes.string,
12 color: PropTypes.string,
12 }; 13 };
13 14
14 static defaultProps = { 15 static defaultProps = {
15 children: null, 16 children: null,
16 loaded: false, 17 loaded: false,
17 className: '', 18 className: '',
19 color: '#373a3c',
18 }; 20 };
19 21
20 render() { 22 render() {
@@ -22,6 +24,7 @@ export default class LoaderComponent extends Component {
22 children, 24 children,
23 loaded, 25 loaded,
24 className, 26 className,
27 color,
25 } = this.props; 28 } = this.props;
26 29
27 return ( 30 return (
@@ -30,7 +33,7 @@ export default class LoaderComponent extends Component {
30 // lines={10} 33 // lines={10}
31 width={4} 34 width={4}
32 scale={0.6} 35 scale={0.6}
33 color="#373a3c" 36 color={color}
34 component="span" 37 component="span"
35 className={className} 38 className={className}
36 > 39 >
diff --git a/src/components/ui/Subscription.js b/src/components/ui/Subscription.js
index fe0925a26..80ee2d9d2 100644
--- a/src/components/ui/Subscription.js
+++ b/src/components/ui/Subscription.js
@@ -7,6 +7,7 @@ import Form from '../../lib/Form';
7import Radio from '../ui/Radio'; 7import Radio from '../ui/Radio';
8import Button from '../ui/Button'; 8import Button from '../ui/Button';
9import Loader from '../ui/Loader'; 9import Loader from '../ui/Loader';
10import { isWindows } from '../../environment';
10 11
11import { required } from '../../helpers/validation-helpers'; 12import { required } from '../../helpers/validation-helpers';
12 13
@@ -93,6 +94,10 @@ const messages = defineMessages({
93 id: 'subscription.mining.moreInformation', 94 id: 'subscription.mining.moreInformation',
94 defaultMessage: '!!!Get more information about this plan', 95 defaultMessage: '!!!Get more information about this plan',
95 }, 96 },
97 euTaxInfo: {
98 id: 'subscription.euTaxInfo',
99 defaultMessage: '!!!EU residents: local sales tax may apply',
100 },
96}); 101});
97 102
98@observer 103@observer
@@ -144,14 +149,18 @@ export default class SubscriptionForm extends Component {
144 label: `€ ${Object.hasOwnProperty.call(this.props.plan, 'year') 149 label: `€ ${Object.hasOwnProperty.call(this.props.plan, 'year')
145 ? `${this.props.plan.year.price} / ${intl.formatMessage(messages.typeYearly)}` 150 ? `${this.props.plan.year.price} / ${intl.formatMessage(messages.typeYearly)}`
146 : 'yearly'}`, 151 : 'yearly'}`,
147 }, {
148 value: 'mining',
149 label: intl.formatMessage(messages.typeMining),
150 }], 152 }],
151 }, 153 },
152 }, 154 },
153 }; 155 };
154 156
157 if (!isWindows) {
158 form.fields.paymentTier.options.push({
159 value: 'mining',
160 label: intl.formatMessage(messages.typeMining),
161 });
162 }
163
155 if (this.props.showSkipOption) { 164 if (this.props.showSkipOption) {
156 form.fields.paymentTier.options.unshift({ 165 form.fields.paymentTier.options.unshift({
157 value: 'skip', 166 value: 'skip',
@@ -259,6 +268,11 @@ export default class SubscriptionForm extends Component {
259 onClick={() => handlePayment(this.form.$('paymentTier').value)} 268 onClick={() => handlePayment(this.form.$('paymentTier').value)}
260 /> 269 />
261 )} 270 )}
271 {this.form.$('paymentTier').value !== 'skip' && this.form.$('paymentTier').value !== 'mining' && (
272 <p className="legal">
273 {intl.formatMessage(messages.euTaxInfo)}
274 </p>
275 )}
262 </Loader> 276 </Loader>
263 ); 277 );
264 } 278 }