diff options
author | Stefan Malzner <stefan@adlk.io> | 2017-11-10 12:08:35 +0100 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2017-11-10 12:08:35 +0100 |
commit | f5a9aa21e2ab958f60c143668f4836bc47e2b539 (patch) | |
tree | 7d7cb70dee56e6ca4a927f7789601cc428381659 /src/components | |
parent | feat(Service): Add option to mute service (diff) | |
download | ferdium-app-f5a9aa21e2ab958f60c143668f4836bc47e2b539.tar.gz ferdium-app-f5a9aa21e2ab958f60c143668f4836bc47e2b539.tar.zst ferdium-app-f5a9aa21e2ab958f60c143668f4836bc47e2b539.zip |
feat(App): Add option to mute all services in sidebar
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/layout/Sidebar.js | 52 | ||||
-rw-r--r-- | src/components/services/content/ServiceWebview.js | 4 | ||||
-rw-r--r-- | src/components/services/content/Services.js | 3 | ||||
-rw-r--r-- | src/components/services/tabs/TabBarSortableList.js | 22 | ||||
-rw-r--r-- | src/components/services/tabs/TabItem.js | 15 | ||||
-rw-r--r-- | src/components/services/tabs/Tabbar.js | 3 |
6 files changed, 62 insertions, 37 deletions
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js index 6a5c0f365..72ee2b3b7 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 | ||
16 | export default class Sidebar extends Component { | 28 | export 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 ${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" | ||
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" | ||
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 d7e0a4f38..60bdf7e47 100644 --- a/src/components/services/content/ServiceWebview.js +++ b/src/components/services/content/ServiceWebview.js | |||
@@ -15,6 +15,7 @@ export default class ServiceWebview extends Component { | |||
15 | service: PropTypes.instanceOf(ServiceModel).isRequired, | 15 | service: PropTypes.instanceOf(ServiceModel).isRequired, |
16 | setWebviewReference: PropTypes.func.isRequired, | 16 | setWebviewReference: PropTypes.func.isRequired, |
17 | reload: PropTypes.func.isRequired, | 17 | reload: PropTypes.func.isRequired, |
18 | isAppMuted: PropTypes.bool.isRequired, | ||
18 | }; | 19 | }; |
19 | 20 | ||
20 | static defaultProps = { | 21 | static defaultProps = { |
@@ -56,6 +57,7 @@ export default class ServiceWebview extends Component { | |||
56 | service, | 57 | service, |
57 | setWebviewReference, | 58 | setWebviewReference, |
58 | reload, | 59 | reload, |
60 | isAppMuted, | ||
59 | } = this.props; | 61 | } = this.props; |
60 | 62 | ||
61 | const webviewClasses = classnames({ | 63 | const webviewClasses = classnames({ |
@@ -92,7 +94,7 @@ export default class ServiceWebview extends Component { | |||
92 | })} | 94 | })} |
93 | onUpdateTargetUrl={this.updateTargetUrl} | 95 | onUpdateTargetUrl={this.updateTargetUrl} |
94 | useragent={service.userAgent} | 96 | useragent={service.userAgent} |
95 | muted={service.isMuted} | 97 | muted={isAppMuted || service.isMuted} |
96 | disablewebsecurity | 98 | disablewebsecurity |
97 | allowpopups | 99 | allowpopups |
98 | /> | 100 | /> |
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js index bad525d22..55a47cdd3 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 | }; | 30 | }; |
30 | 31 | ||
31 | static defaultProps = { | 32 | static defaultProps = { |
@@ -44,6 +45,7 @@ export default class Services extends Component { | |||
44 | setWebviewReference, | 45 | setWebviewReference, |
45 | openWindow, | 46 | openWindow, |
46 | reload, | 47 | reload, |
48 | isAppMuted, | ||
47 | } = this.props; | 49 | } = this.props; |
48 | const { intl } = this.context; | 50 | const { intl } = this.context; |
49 | 51 | ||
@@ -76,6 +78,7 @@ export default class Services extends Component { | |||
76 | setWebviewReference={setWebviewReference} | 78 | setWebviewReference={setWebviewReference} |
77 | openWindow={openWindow} | 79 | openWindow={openWindow} |
78 | reload={() => reload({ serviceId: service.id })} | 80 | reload={() => reload({ serviceId: service.id })} |
81 | isAppMuted={isAppMuted} | ||
79 | /> | 82 | /> |
80 | ))} | 83 | ))} |
81 | </div> | 84 | </div> |
diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js index e5ae36419..0146f5b35 100644 --- a/src/components/services/tabs/TabBarSortableList.js +++ b/src/components/services/tabs/TabBarSortableList.js | |||
@@ -2,17 +2,8 @@ import React, { Component } from 'react'; | |||
2 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | 2 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; |
3 | import PropTypes from 'prop-types'; | 3 | import PropTypes from 'prop-types'; |
4 | import { SortableContainer } from 'react-sortable-hoc'; | 4 | import { SortableContainer } from 'react-sortable-hoc'; |
5 | import { defineMessages, intlShape } from 'react-intl'; | ||
6 | 5 | ||
7 | import TabItem from './TabItem'; | 6 | import TabItem from './TabItem'; |
8 | import { ctrlKey } from '../../../environment'; | ||
9 | |||
10 | const messages = defineMessages({ | ||
11 | addNewService: { | ||
12 | id: 'sidebar.addNewService', | ||
13 | defaultMessage: '!!!Add new service', | ||
14 | }, | ||
15 | }); | ||
16 | 7 | ||
17 | @observer | 8 | @observer |
18 | class TabBarSortableList extends Component { | 9 | class TabBarSortableList extends Component { |
@@ -22,27 +13,23 @@ 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 | } | 19 | } |
28 | 20 | ||
29 | static contextTypes = { | ||
30 | intl: intlShape, | ||
31 | }; | ||
32 | |||
33 | render() { | 21 | render() { |
34 | const { | 22 | const { |
35 | services, | 23 | services, |
36 | setActive, | 24 | setActive, |
37 | reload, | 25 | reload, |
38 | toggleNotifications, | 26 | toggleNotifications, |
27 | toggleAudio, | ||
39 | deleteService, | 28 | deleteService, |
40 | disableService, | 29 | disableService, |
41 | openSettings, | 30 | openSettings, |
42 | } = this.props; | 31 | } = this.props; |
43 | 32 | ||
44 | const { intl } = this.context; | ||
45 | |||
46 | return ( | 33 | return ( |
47 | <ul | 34 | <ul |
48 | className="tabs" | 35 | className="tabs" |
@@ -56,12 +43,13 @@ class TabBarSortableList extends Component { | |||
56 | shortcutIndex={index + 1} | 43 | shortcutIndex={index + 1} |
57 | reload={() => reload({ serviceId: service.id })} | 44 | reload={() => reload({ serviceId: service.id })} |
58 | toggleNotifications={() => toggleNotifications({ serviceId: service.id })} | 45 | toggleNotifications={() => toggleNotifications({ serviceId: service.id })} |
46 | toggleAudio={() => toggleAudio({ serviceId: service.id })} | ||
59 | deleteService={() => deleteService({ serviceId: service.id })} | 47 | deleteService={() => deleteService({ serviceId: service.id })} |
60 | disableService={() => disableService({ serviceId: service.id })} | 48 | disableService={() => disableService({ serviceId: service.id })} |
61 | openSettings={openSettings} | 49 | openSettings={openSettings} |
62 | /> | 50 | /> |
63 | ))} | 51 | ))} |
64 | <li> | 52 | {/* <li> |
65 | <button | 53 | <button |
66 | className="sidebar__add-service" | 54 | className="sidebar__add-service" |
67 | onClick={() => openSettings({ path: 'recipes' })} | 55 | onClick={() => openSettings({ path: 'recipes' })} |
@@ -69,7 +57,7 @@ class TabBarSortableList extends Component { | |||
69 | > | 57 | > |
70 | <span className="mdi mdi-plus" /> | 58 | <span className="mdi mdi-plus" /> |
71 | </button> | 59 | </button> |
72 | </li> | 60 | </li> */} |
73 | </ul> | 61 | </ul> |
74 | ); | 62 | ); |
75 | } | 63 | } |
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js index 9e03d2e21..7b001f6ee 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', |
@@ -46,6 +54,7 @@ class TabItem extends Component { | |||
46 | shortcutIndex: PropTypes.number.isRequired, | 54 | shortcutIndex: PropTypes.number.isRequired, |
47 | reload: PropTypes.func.isRequired, | 55 | reload: PropTypes.func.isRequired, |
48 | toggleNotifications: PropTypes.func.isRequired, | 56 | toggleNotifications: PropTypes.func.isRequired, |
57 | toggleAudio: PropTypes.func.isRequired, | ||
49 | openSettings: PropTypes.func.isRequired, | 58 | openSettings: PropTypes.func.isRequired, |
50 | deleteService: PropTypes.func.isRequired, | 59 | deleteService: PropTypes.func.isRequired, |
51 | disableService: PropTypes.func.isRequired, | 60 | disableService: PropTypes.func.isRequired, |
@@ -62,6 +71,7 @@ class TabItem extends Component { | |||
62 | shortcutIndex, | 71 | shortcutIndex, |
63 | reload, | 72 | reload, |
64 | toggleNotifications, | 73 | toggleNotifications, |
74 | toggleAudio, | ||
65 | deleteService, | 75 | deleteService, |
66 | disableService, | 76 | disableService, |
67 | openSettings, | 77 | openSettings, |
@@ -90,6 +100,11 @@ class TabItem extends Component { | |||
90 | : intl.formatMessage(messages.enableNotifications), | 100 | : intl.formatMessage(messages.enableNotifications), |
91 | click: () => toggleNotifications(), | 101 | click: () => toggleNotifications(), |
92 | }, { | 102 | }, { |
103 | label: service.isMuted | ||
104 | ? intl.formatMessage(messages.enableAudio) | ||
105 | : intl.formatMessage(messages.disableAudio), | ||
106 | click: () => toggleAudio(), | ||
107 | }, { | ||
93 | label: intl.formatMessage(messages.disableService), | 108 | label: intl.formatMessage(messages.disableService), |
94 | click: () => disableService(), | 109 | click: () => disableService(), |
95 | }, { | 110 | }, { |
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js index fdb2c0a59..e8cd80e33 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 | } |
@@ -51,6 +52,7 @@ export default class TabBar extends Component { | |||
51 | disableToolTip, | 52 | disableToolTip, |
52 | reload, | 53 | reload, |
53 | toggleNotifications, | 54 | toggleNotifications, |
55 | toggleAudio, | ||
54 | deleteService, | 56 | deleteService, |
55 | } = this.props; | 57 | } = this.props; |
56 | 58 | ||
@@ -63,6 +65,7 @@ export default class TabBar extends Component { | |||
63 | onSortStart={disableToolTip} | 65 | onSortStart={disableToolTip} |
64 | reload={reload} | 66 | reload={reload} |
65 | toggleNotifications={toggleNotifications} | 67 | toggleNotifications={toggleNotifications} |
68 | toggleAudio={toggleAudio} | ||
66 | deleteService={deleteService} | 69 | deleteService={deleteService} |
67 | disableService={this.disableService} | 70 | disableService={this.disableService} |
68 | openSettings={openSettings} | 71 | openSettings={openSettings} |