1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactTooltip from 'react-tooltip';
import { defineMessages, intlShape } from 'react-intl';
import { observer } from 'mobx-react';
import Tabbar from '../services/tabs/Tabbar';
import { ctrlKey } from '../../environment';
const messages = defineMessages({
settings: {
id: 'sidebar.settings',
defaultMessage: '!!!Settings',
},
addNewService: {
id: 'sidebar.addNewService',
defaultMessage: '!!!Add new service',
},
mute: {
id: 'sidebar.muteApp',
defaultMessage: '!!!Disable notifications & audio',
},
unmute: {
id: 'sidebar.unmuteApp',
defaultMessage: '!!!Enable notifications & audio',
},
});
export default @observer class Sidebar extends Component {
static propTypes = {
openSettings: PropTypes.func.isRequired,
toggleMuteApp: PropTypes.func.isRequired,
isAppMuted: PropTypes.bool.isRequired,
}
static contextTypes = {
intl: intlShape,
};
state = {
tooltipEnabled: true,
};
componentDidUpdate() {
ReactTooltip.rebuild();
}
enableToolTip() {
this.setState({ tooltipEnabled: true });
}
disableToolTip() {
this.setState({ tooltipEnabled: false });
}
render() {
const { openSettings, toggleMuteApp, isAppMuted } = this.props;
const { intl } = this.context;
return (
<div className="sidebar">
<Tabbar
{...this.props}
enableToolTip={() => this.enableToolTip()}
disableToolTip={() => this.disableToolTip()}
/>
<button
type="button"
onClick={toggleMuteApp}
className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`}
data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`}
>
<i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} />
</button>
<button
type="button"
onClick={() => openSettings({ path: 'recipes' })}
className="sidebar__button sidebar__button--new-service"
data-tip={`${intl.formatMessage(messages.addNewService)} (${ctrlKey}+N)`}
>
<i className="mdi mdi-plus-box" />
</button>
<button
type="button"
onClick={() => openSettings({ path: 'app' })}
className="sidebar__button sidebar__button--settings"
data-tip={`${intl.formatMessage(messages.settings)} (${ctrlKey}+,)`}
>
<i className="mdi mdi-settings" />
</button>
{this.state.tooltipEnabled && (
<ReactTooltip place="right" type="dark" effect="solid" />
)}
</div>
);
}
}
|
