diff options
Diffstat (limited to 'src/components/services/tabs/TabItem.js')
-rw-r--r-- | src/components/services/tabs/TabItem.js | 87 |
1 files changed, 83 insertions, 4 deletions
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js index efa5fa60c..479f151a6 100644 --- a/src/components/services/tabs/TabItem.js +++ b/src/components/services/tabs/TabItem.js | |||
@@ -5,9 +5,14 @@ import PropTypes from 'prop-types'; | |||
5 | import { observer } from 'mobx-react'; | 5 | import { observer } from 'mobx-react'; |
6 | import classnames from 'classnames'; | 6 | import classnames from 'classnames'; |
7 | import { SortableElement } from 'react-sortable-hoc'; | 7 | import { SortableElement } from 'react-sortable-hoc'; |
8 | import injectSheet from 'react-jss'; | ||
9 | import ms from 'ms'; | ||
8 | 10 | ||
11 | import { observable, autorun } from 'mobx'; | ||
9 | import ServiceModel from '../../../models/Service'; | 12 | import ServiceModel from '../../../models/Service'; |
10 | import { ctrlKey } from '../../../environment'; | 13 | import { ctrlKey, cmdKey } from '../../../environment'; |
14 | |||
15 | const IS_SERVICE_DEBUGGING_ENABLED = (localStorage.getItem('debug') || '').includes('Franz:Service'); | ||
11 | 16 | ||
12 | const { Menu } = remote; | 17 | const { Menu } = remote; |
13 | 18 | ||
@@ -50,9 +55,38 @@ const messages = defineMessages({ | |||
50 | }, | 55 | }, |
51 | }); | 56 | }); |
52 | 57 | ||
53 | @observer | 58 | const styles = { |
54 | class TabItem extends Component { | 59 | pollIndicator: { |
60 | position: 'absolute', | ||
61 | bottom: 2, | ||
62 | width: 10, | ||
63 | height: 10, | ||
64 | borderRadius: 5, | ||
65 | background: 'gray', | ||
66 | transition: 'background 0.5s', | ||
67 | }, | ||
68 | pollIndicatorPoll: { | ||
69 | left: 2, | ||
70 | }, | ||
71 | pollIndicatorAnswer: { | ||
72 | left: 14, | ||
73 | }, | ||
74 | polled: { | ||
75 | background: 'yellow !important', | ||
76 | transition: 'background 0.1s', | ||
77 | }, | ||
78 | pollAnswered: { | ||
79 | background: 'green !important', | ||
80 | transition: 'background 0.1s', | ||
81 | }, | ||
82 | stale: { | ||
83 | background: 'red !important', | ||
84 | }, | ||
85 | }; | ||
86 | |||
87 | @injectSheet(styles) @observer class TabItem extends Component { | ||
55 | static propTypes = { | 88 | static propTypes = { |
89 | classes: PropTypes.object.isRequired, | ||
56 | service: PropTypes.instanceOf(ServiceModel).isRequired, | 90 | service: PropTypes.instanceOf(ServiceModel).isRequired, |
57 | clickHandler: PropTypes.func.isRequired, | 91 | clickHandler: PropTypes.func.isRequired, |
58 | shortcutIndex: PropTypes.number.isRequired, | 92 | shortcutIndex: PropTypes.number.isRequired, |
@@ -71,8 +105,33 @@ class TabItem extends Component { | |||
71 | intl: intlShape, | 105 | intl: intlShape, |
72 | }; | 106 | }; |
73 | 107 | ||
108 | @observable isPolled = false; | ||
109 | |||
110 | @observable isPollAnswered = false; | ||
111 | |||
112 | componentDidMount() { | ||
113 | const { service } = this.props; | ||
114 | |||
115 | if (IS_SERVICE_DEBUGGING_ENABLED) { | ||
116 | autorun(() => { | ||
117 | if (Date.now() - service.lastPoll < ms('0.2s')) { | ||
118 | this.isPolled = true; | ||
119 | |||
120 | setTimeout(() => { this.isPolled = false; }, ms('1s')); | ||
121 | } | ||
122 | |||
123 | if (Date.now() - service.lastPollAnswer < ms('0.2s')) { | ||
124 | this.isPollAnswered = true; | ||
125 | |||
126 | setTimeout(() => { this.isPollAnswered = false; }, ms('1s')); | ||
127 | } | ||
128 | }); | ||
129 | } | ||
130 | } | ||
131 | |||
74 | render() { | 132 | render() { |
75 | const { | 133 | const { |
134 | classes, | ||
76 | service, | 135 | service, |
77 | clickHandler, | 136 | clickHandler, |
78 | shortcutIndex, | 137 | shortcutIndex, |
@@ -97,6 +156,7 @@ class TabItem extends Component { | |||
97 | }, { | 156 | }, { |
98 | label: intl.formatMessage(messages.reload), | 157 | label: intl.formatMessage(messages.reload), |
99 | click: reload, | 158 | click: reload, |
159 | accelerator: `${cmdKey}+R`, | ||
100 | }, { | 160 | }, { |
101 | label: intl.formatMessage(messages.edit), | 161 | label: intl.formatMessage(messages.edit), |
102 | click: () => openSettings({ | 162 | click: () => openSettings({ |
@@ -141,7 +201,7 @@ class TabItem extends Component { | |||
141 | • | 201 | • |
142 | </span> | 202 | </span> |
143 | )} | 203 | )} |
144 | {service.isHibernating && !service.disableHibernation && ( | 204 | {service.isHibernating && !service.isHibernationEnabled && ( |
145 | <span className="tab-item__message-count hibernating"> | 205 | <span className="tab-item__message-count hibernating"> |
146 | • | 206 | • |
147 | </span> | 207 | </span> |
@@ -153,6 +213,7 @@ class TabItem extends Component { | |||
153 | return ( | 213 | return ( |
154 | <li | 214 | <li |
155 | className={classnames({ | 215 | className={classnames({ |
216 | [classes.stale]: IS_SERVICE_DEBUGGING_ENABLED && service.lostRecipeConnection, | ||
156 | 'tab-item': true, | 217 | 'tab-item': true, |
157 | 'is-active': service.isActive, | 218 | 'is-active': service.isActive, |
158 | 'has-custom-icon': service.hasCustomIcon, | 219 | 'has-custom-icon': service.hasCustomIcon, |
@@ -168,6 +229,24 @@ class TabItem extends Component { | |||
168 | alt="" | 229 | alt="" |
169 | /> | 230 | /> |
170 | {notificationBadge} | 231 | {notificationBadge} |
232 | {IS_SERVICE_DEBUGGING_ENABLED && ( | ||
233 | <> | ||
234 | <div | ||
235 | className={classnames({ | ||
236 | [classes.pollIndicator]: true, | ||
237 | [classes.pollIndicatorPoll]: true, | ||
238 | [classes.polled]: this.isPolled, | ||
239 | })} | ||
240 | /> | ||
241 | <div | ||
242 | className={classnames({ | ||
243 | [classes.pollIndicator]: true, | ||
244 | [classes.pollIndicatorAnswer]: true, | ||
245 | [classes.pollAnswered]: this.isPollAnswered, | ||
246 | })} | ||
247 | /> | ||
248 | </> | ||
249 | )} | ||
171 | </li> | 250 | </li> |
172 | ); | 251 | ); |
173 | } | 252 | } |