diff options
Diffstat (limited to 'src/components/layout/Sidebar.js')
-rw-r--r-- | src/components/layout/Sidebar.js | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js new file mode 100644 index 000000000..4aee1ec60 --- /dev/null +++ b/src/components/layout/Sidebar.js | |||
@@ -0,0 +1,75 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import ReactTooltip from 'react-tooltip'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | |||
6 | import Tabbar from '../services/tabs/Tabbar'; | ||
7 | import { ctrlKey } from '../../environment'; | ||
8 | |||
9 | const messages = defineMessages({ | ||
10 | settings: { | ||
11 | id: 'sidebar.settings', | ||
12 | defaultMessage: '!!!Settings', | ||
13 | }, | ||
14 | }); | ||
15 | |||
16 | export default class Sidebar extends Component { | ||
17 | static propTypes = { | ||
18 | openSettings: PropTypes.func.isRequired, | ||
19 | isPremiumUser: PropTypes.bool, | ||
20 | } | ||
21 | |||
22 | static defaultProps = { | ||
23 | isPremiumUser: false, | ||
24 | } | ||
25 | |||
26 | static contextTypes = { | ||
27 | intl: intlShape, | ||
28 | }; | ||
29 | |||
30 | state = { | ||
31 | tooltipEnabled: true, | ||
32 | }; | ||
33 | |||
34 | enableToolTip() { | ||
35 | this.setState({ tooltipEnabled: true }); | ||
36 | } | ||
37 | |||
38 | disableToolTip() { | ||
39 | this.setState({ tooltipEnabled: false }); | ||
40 | } | ||
41 | |||
42 | render() { | ||
43 | const { openSettings, isPremiumUser } = this.props; | ||
44 | const { intl } = this.context; | ||
45 | return ( | ||
46 | <div className="sidebar"> | ||
47 | <Tabbar | ||
48 | {...this.props} | ||
49 | enableToolTip={() => this.enableToolTip()} | ||
50 | disableToolTip={() => this.disableToolTip()} | ||
51 | /> | ||
52 | <button | ||
53 | onClick={openSettings} | ||
54 | className="sidebar__settings-button" | ||
55 | data-tip={`Settings (${ctrlKey}+,)`} | ||
56 | > | ||
57 | {isPremiumUser && ( | ||
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> | ||
69 | {this.state.tooltipEnabled && ( | ||
70 | <ReactTooltip place="right" type="dark" effect="solid" /> | ||
71 | )} | ||
72 | </div> | ||
73 | ); | ||
74 | } | ||
75 | } | ||