diff options
author | Stefan Malzner <stefan@adlk.io> | 2017-11-23 16:17:34 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-11-23 16:17:34 +0100 |
commit | abca425e4a7b63be93132067bc335e8b6b39c2b2 (patch) | |
tree | e386f3e5d4c1c1caff19e3555e7ed1ce93e625f6 /src/components/services/tabs | |
parent | replace typeform (diff) | |
parent | Add windows notification fix to changelog (diff) | |
download | ferdium-app-abca425e4a7b63be93132067bc335e8b6b39c2b2.tar.gz ferdium-app-abca425e4a7b63be93132067bc335e8b6b39c2b2.tar.zst ferdium-app-abca425e4a7b63be93132067bc335e8b6b39c2b2.zip |
Merge pull request #330 from meetfranz/developv5.0.0-beta.14
Beta 14
Diffstat (limited to 'src/components/services/tabs')
-rw-r--r-- | src/components/services/tabs/TabBarSortableList.js | 25 | ||||
-rw-r--r-- | src/components/services/tabs/TabItem.js | 26 | ||||
-rw-r--r-- | src/components/services/tabs/Tabbar.js | 21 |
3 files changed, 50 insertions, 22 deletions
diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js index e5ae36419..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'; | |||
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,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, |
19 | enableService: PropTypes.func.isRequired, | ||
27 | } | 20 | } |
28 | 21 | ||
29 | static contextTypes = { | ||
30 | intl: intlShape, | ||
31 | }; | ||
32 | |||
33 | render() { | 22 | render() { |
34 | const { | 23 | const { |
35 | services, | 24 | services, |
36 | setActive, | 25 | setActive, |
37 | reload, | 26 | reload, |
38 | toggleNotifications, | 27 | toggleNotifications, |
28 | toggleAudio, | ||
39 | deleteService, | 29 | deleteService, |
40 | disableService, | 30 | disableService, |
31 | enableService, | ||
41 | openSettings, | 32 | openSettings, |
42 | } = this.props; | 33 | } = this.props; |
43 | 34 | ||
44 | const { intl } = this.context; | ||
45 | |||
46 | return ( | 35 | return ( |
47 | <ul | 36 | <ul |
48 | className="tabs" | 37 | className="tabs" |
@@ -56,12 +45,14 @@ class TabBarSortableList extends Component { | |||
56 | shortcutIndex={index + 1} | 45 | shortcutIndex={index + 1} |
57 | reload={() => reload({ serviceId: service.id })} | 46 | reload={() => reload({ serviceId: service.id })} |
58 | toggleNotifications={() => toggleNotifications({ serviceId: service.id })} | 47 | toggleNotifications={() => toggleNotifications({ serviceId: service.id })} |
48 | toggleAudio={() => toggleAudio({ serviceId: service.id })} | ||
59 | deleteService={() => deleteService({ serviceId: service.id })} | 49 | deleteService={() => deleteService({ serviceId: service.id })} |
60 | disableService={() => disableService({ serviceId: service.id })} | 50 | disableService={() => disableService({ serviceId: service.id })} |
51 | enableService={() => enableService({ serviceId: service.id })} | ||
61 | openSettings={openSettings} | 52 | openSettings={openSettings} |
62 | /> | 53 | /> |
63 | ))} | 54 | ))} |
64 | <li> | 55 | {/* <li> |
65 | <button | 56 | <button |
66 | className="sidebar__add-service" | 57 | className="sidebar__add-service" |
67 | onClick={() => openSettings({ path: 'recipes' })} | 58 | onClick={() => openSettings({ path: 'recipes' })} |
@@ -69,7 +60,7 @@ class TabBarSortableList extends Component { | |||
69 | > | 60 | > |
70 | <span className="mdi mdi-plus" /> | 61 | <span className="mdi mdi-plus" /> |
71 | </button> | 62 | </button> |
72 | </li> | 63 | </li> */} |
73 | </ul> | 64 | </ul> |
74 | ); | 65 | ); |
75 | } | 66 | } |
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js index 9e03d2e21..a7136c43f 100644 --- a/src/components/services/tabs/TabItem.js +++ b/src/components/services/tabs/TabItem.js | |||
@@ -28,10 +28,22 @@ 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', |
34 | }, | 42 | }, |
43 | enableService: { | ||
44 | id: 'tabs.item.enableService', | ||
45 | defaultMessage: '!!!Enable Service', | ||
46 | }, | ||
35 | deleteService: { | 47 | deleteService: { |
36 | id: 'tabs.item.deleteService', | 48 | id: 'tabs.item.deleteService', |
37 | defaultMessage: '!!!Delete Service', | 49 | defaultMessage: '!!!Delete Service', |
@@ -46,9 +58,11 @@ class TabItem extends Component { | |||
46 | shortcutIndex: PropTypes.number.isRequired, | 58 | shortcutIndex: PropTypes.number.isRequired, |
47 | reload: PropTypes.func.isRequired, | 59 | reload: PropTypes.func.isRequired, |
48 | toggleNotifications: PropTypes.func.isRequired, | 60 | toggleNotifications: PropTypes.func.isRequired, |
61 | toggleAudio: PropTypes.func.isRequired, | ||
49 | openSettings: PropTypes.func.isRequired, | 62 | openSettings: PropTypes.func.isRequired, |
50 | deleteService: PropTypes.func.isRequired, | 63 | deleteService: PropTypes.func.isRequired, |
51 | disableService: PropTypes.func.isRequired, | 64 | disableService: PropTypes.func.isRequired, |
65 | enableService: PropTypes.func.isRequired, | ||
52 | }; | 66 | }; |
53 | 67 | ||
54 | static contextTypes = { | 68 | static contextTypes = { |
@@ -62,8 +76,10 @@ class TabItem extends Component { | |||
62 | shortcutIndex, | 76 | shortcutIndex, |
63 | reload, | 77 | reload, |
64 | toggleNotifications, | 78 | toggleNotifications, |
79 | toggleAudio, | ||
65 | deleteService, | 80 | deleteService, |
66 | disableService, | 81 | disableService, |
82 | enableService, | ||
67 | openSettings, | 83 | openSettings, |
68 | } = this.props; | 84 | } = this.props; |
69 | const { intl } = this.context; | 85 | const { intl } = this.context; |
@@ -90,8 +106,13 @@ class TabItem extends Component { | |||
90 | : intl.formatMessage(messages.enableNotifications), | 106 | : intl.formatMessage(messages.enableNotifications), |
91 | click: () => toggleNotifications(), | 107 | click: () => toggleNotifications(), |
92 | }, { | 108 | }, { |
93 | label: intl.formatMessage(messages.disableService), | 109 | label: service.isMuted |
94 | click: () => disableService(), | 110 | ? intl.formatMessage(messages.enableAudio) |
111 | : intl.formatMessage(messages.disableAudio), | ||
112 | click: () => toggleAudio(), | ||
113 | }, { | ||
114 | label: intl.formatMessage(service.isEnabled ? messages.disableService : messages.enableService), | ||
115 | click: () => (service.isEnabled ? disableService() : enableService()), | ||
95 | }, { | 116 | }, { |
96 | type: 'separator', | 117 | type: 'separator', |
97 | }, { | 118 | }, { |
@@ -106,6 +127,7 @@ class TabItem extends Component { | |||
106 | 'tab-item': true, | 127 | 'tab-item': true, |
107 | 'is-active': service.isActive, | 128 | 'is-active': service.isActive, |
108 | 'has-custom-icon': service.hasCustomIcon, | 129 | 'has-custom-icon': service.hasCustomIcon, |
130 | 'is-disabled': !service.isEnabled, | ||
109 | })} | 131 | })} |
110 | onClick={clickHandler} | 132 | onClick={clickHandler} |
111 | onContextMenu={() => menu.popup(remote.getCurrentWindow())} | 133 | onContextMenu={() => menu.popup(remote.getCurrentWindow())} |
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js index fdb2c0a59..9da1090b7 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 | } |
@@ -29,20 +30,30 @@ export default class TabBar extends Component { | |||
29 | reorder({ oldIndex, newIndex }); | 30 | reorder({ oldIndex, newIndex }); |
30 | }; | 31 | }; |
31 | 32 | ||
32 | disableService = ({ serviceId }) => { | 33 | shouldPreventSorting = event => event.target.tagName !== 'LI'; |
34 | |||
35 | toggleService = ({ serviceId, isEnabled }) => { | ||
33 | const { updateService } = this.props; | 36 | const { updateService } = this.props; |
34 | 37 | ||
35 | if (serviceId) { | 38 | if (serviceId) { |
36 | updateService({ | 39 | updateService({ |
37 | serviceId, | 40 | serviceId, |
38 | serviceData: { | 41 | serviceData: { |
39 | isEnabled: false, | 42 | isEnabled, |
40 | }, | 43 | }, |
41 | redirect: false, | 44 | redirect: false, |
42 | }); | 45 | }); |
43 | } | 46 | } |
44 | } | 47 | } |
45 | 48 | ||
49 | disableService({ serviceId }) { | ||
50 | this.toggleService({ serviceId, isEnabled: false }); | ||
51 | } | ||
52 | |||
53 | enableService({ serviceId }) { | ||
54 | this.toggleService({ serviceId, isEnabled: true }); | ||
55 | } | ||
56 | |||
46 | render() { | 57 | render() { |
47 | const { | 58 | const { |
48 | services, | 59 | services, |
@@ -51,6 +62,7 @@ export default class TabBar extends Component { | |||
51 | disableToolTip, | 62 | disableToolTip, |
52 | reload, | 63 | reload, |
53 | toggleNotifications, | 64 | toggleNotifications, |
65 | toggleAudio, | ||
54 | deleteService, | 66 | deleteService, |
55 | } = this.props; | 67 | } = this.props; |
56 | 68 | ||
@@ -61,10 +73,13 @@ export default class TabBar extends Component { | |||
61 | setActive={setActive} | 73 | setActive={setActive} |
62 | onSortEnd={this.onSortEnd} | 74 | onSortEnd={this.onSortEnd} |
63 | onSortStart={disableToolTip} | 75 | onSortStart={disableToolTip} |
76 | shouldCancelStart={this.shouldPreventSorting} | ||
64 | reload={reload} | 77 | reload={reload} |
65 | toggleNotifications={toggleNotifications} | 78 | toggleNotifications={toggleNotifications} |
79 | toggleAudio={toggleAudio} | ||
66 | deleteService={deleteService} | 80 | deleteService={deleteService} |
67 | disableService={this.disableService} | 81 | disableService={args => this.disableService(args)} |
82 | enableService={args => this.enableService(args)} | ||
68 | openSettings={openSettings} | 83 | openSettings={openSettings} |
69 | distance={20} | 84 | distance={20} |
70 | axis="y" | 85 | axis="y" |