diff options
author | 2017-11-10 12:08:35 +0100 | |
---|---|---|
committer | 2017-11-10 12:08:35 +0100 | |
commit | f5a9aa21e2ab958f60c143668f4836bc47e2b539 (patch) | |
tree | 7d7cb70dee56e6ca4a927f7789601cc428381659 /src/components/layout/Sidebar.js | |
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/layout/Sidebar.js')
-rw-r--r-- | src/components/layout/Sidebar.js | 52 |
1 files changed, 33 insertions, 19 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" /> |