diff options
Diffstat (limited to 'src/components/layout')
-rw-r--r-- | src/components/layout/AppLayout.js | 22 | ||||
-rw-r--r-- | src/components/layout/Sidebar.js | 86 |
2 files changed, 70 insertions, 38 deletions
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js index 200777ae6..ed004d07e 100644 --- a/src/components/layout/AppLayout.js +++ b/src/components/layout/AppLayout.js | |||
@@ -6,7 +6,6 @@ import { TitleBar } from 'electron-react-titlebar'; | |||
6 | import injectSheet from 'react-jss'; | 6 | import injectSheet from 'react-jss'; |
7 | 7 | ||
8 | import InfoBar from '../ui/InfoBar'; | 8 | import InfoBar from '../ui/InfoBar'; |
9 | import { Component as DelayApp } from '../../features/delayApp'; | ||
10 | import { Component as BasicAuth } from '../../features/basicAuth'; | 9 | import { Component as BasicAuth } from '../../features/basicAuth'; |
11 | import { Component as ShareFranz } from '../../features/shareFranz'; | 10 | import { Component as ShareFranz } from '../../features/shareFranz'; |
12 | import ErrorBoundary from '../util/ErrorBoundary'; | 11 | import ErrorBoundary from '../util/ErrorBoundary'; |
@@ -37,6 +36,10 @@ const messages = defineMessages({ | |||
37 | id: 'infobar.requiredRequestsFailed', | 36 | id: 'infobar.requiredRequestsFailed', |
38 | defaultMessage: '!!!Could not load services and user information', | 37 | defaultMessage: '!!!Could not load services and user information', |
39 | }, | 38 | }, |
39 | authRequestFailed: { | ||
40 | id: 'infobar.authRequestFailed', | ||
41 | defaultMessage: '!!!There were errors while trying to perform an authenticated request. Please try logging out and back in if this error persists.', | ||
42 | }, | ||
40 | }); | 43 | }); |
41 | 44 | ||
42 | const styles = theme => ({ | 45 | const styles = theme => ({ |
@@ -63,6 +66,7 @@ class AppLayout extends Component { | |||
63 | showServicesUpdatedInfoBar: PropTypes.bool.isRequired, | 66 | showServicesUpdatedInfoBar: PropTypes.bool.isRequired, |
64 | appUpdateIsDownloaded: PropTypes.bool.isRequired, | 67 | appUpdateIsDownloaded: PropTypes.bool.isRequired, |
65 | nextAppReleaseVersion: PropTypes.string, | 68 | nextAppReleaseVersion: PropTypes.string, |
69 | authRequestFailed: PropTypes.bool.isRequired, | ||
66 | removeNewsItem: PropTypes.func.isRequired, | 70 | removeNewsItem: PropTypes.func.isRequired, |
67 | reloadServicesAfterUpdate: PropTypes.func.isRequired, | 71 | reloadServicesAfterUpdate: PropTypes.func.isRequired, |
68 | installAppUpdate: PropTypes.func.isRequired, | 72 | installAppUpdate: PropTypes.func.isRequired, |
@@ -95,6 +99,7 @@ class AppLayout extends Component { | |||
95 | showServicesUpdatedInfoBar, | 99 | showServicesUpdatedInfoBar, |
96 | appUpdateIsDownloaded, | 100 | appUpdateIsDownloaded, |
97 | nextAppReleaseVersion, | 101 | nextAppReleaseVersion, |
102 | authRequestFailed, | ||
98 | removeNewsItem, | 103 | removeNewsItem, |
99 | reloadServicesAfterUpdate, | 104 | reloadServicesAfterUpdate, |
100 | installAppUpdate, | 105 | installAppUpdate, |
@@ -111,7 +116,7 @@ class AppLayout extends Component { | |||
111 | return ( | 116 | return ( |
112 | <ErrorBoundary> | 117 | <ErrorBoundary> |
113 | <div className="app"> | 118 | <div className="app"> |
114 | {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />} | 119 | {isWindows && !isFullScreen && <TitleBar menu={window.ferdi.menu.template} icon="assets/images/logo.svg" />} |
115 | <div className={`app__content ${classes.appContent}`}> | 120 | <div className={`app__content ${classes.appContent}`}> |
116 | {workspacesDrawer} | 121 | {workspacesDrawer} |
117 | {sidebar} | 122 | {sidebar} |
@@ -151,6 +156,18 @@ class AppLayout extends Component { | |||
151 | {intl.formatMessage(messages.requiredRequestsFailed)} | 156 | {intl.formatMessage(messages.requiredRequestsFailed)} |
152 | </InfoBar> | 157 | </InfoBar> |
153 | )} | 158 | )} |
159 | {authRequestFailed && ( | ||
160 | <InfoBar | ||
161 | type="danger" | ||
162 | ctaLabel="Try again" | ||
163 | ctaLoading={areRequiredRequestsLoading} | ||
164 | sticky | ||
165 | onClick={retryRequiredRequests} | ||
166 | > | ||
167 | <span className="mdi mdi-flash" /> | ||
168 | {intl.formatMessage(messages.authRequestFailed)} | ||
169 | </InfoBar> | ||
170 | )} | ||
154 | {showServicesUpdatedInfoBar && ( | 171 | {showServicesUpdatedInfoBar && ( |
155 | <InfoBar | 172 | <InfoBar |
156 | type="primary" | 173 | type="primary" |
@@ -168,7 +185,6 @@ class AppLayout extends Component { | |||
168 | onInstallUpdate={installAppUpdate} | 185 | onInstallUpdate={installAppUpdate} |
169 | /> | 186 | /> |
170 | )} | 187 | )} |
171 | {isDelayAppScreenVisible && (<DelayApp />)} | ||
172 | <BasicAuth /> | 188 | <BasicAuth /> |
173 | <ShareFranz /> | 189 | <ShareFranz /> |
174 | {services} | 190 | {services} |
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js index 36c1f2e39..1bf2554b5 100644 --- a/src/components/layout/Sidebar.js +++ b/src/components/layout/Sidebar.js | |||
@@ -3,11 +3,11 @@ import PropTypes from 'prop-types'; | |||
3 | import ReactTooltip from 'react-tooltip'; | 3 | import ReactTooltip from 'react-tooltip'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
5 | import { observer } from 'mobx-react'; | 5 | import { observer } from 'mobx-react'; |
6 | import { Link } from 'react-router'; | ||
6 | 7 | ||
7 | import Tabbar from '../services/tabs/Tabbar'; | 8 | import Tabbar from '../services/tabs/Tabbar'; |
8 | import { ctrlKey } from '../../environment'; | 9 | import { ctrlKey } from '../../environment'; |
9 | import { GA_CATEGORY_WORKSPACES, workspaceStore } from '../../features/workspaces'; | 10 | import { workspaceStore } from '../../features/workspaces'; |
10 | import { gaEvent } from '../../lib/analytics'; | ||
11 | 11 | ||
12 | const messages = defineMessages({ | 12 | const messages = defineMessages({ |
13 | settings: { | 13 | settings: { |
@@ -82,6 +82,7 @@ export default @observer class Sidebar extends Component { | |||
82 | const workspaceToggleMessage = ( | 82 | const workspaceToggleMessage = ( |
83 | isWorkspaceDrawerOpen ? messages.closeWorkspaceDrawer : messages.openWorkspaceDrawer | 83 | isWorkspaceDrawerOpen ? messages.closeWorkspaceDrawer : messages.openWorkspaceDrawer |
84 | ); | 84 | ); |
85 | const isLoggedIn = Boolean(localStorage.getItem('authToken')); | ||
85 | 86 | ||
86 | return ( | 87 | return ( |
87 | <div className="sidebar"> | 88 | <div className="sidebar"> |
@@ -90,39 +91,54 @@ export default @observer class Sidebar extends Component { | |||
90 | enableToolTip={() => this.enableToolTip()} | 91 | enableToolTip={() => this.enableToolTip()} |
91 | disableToolTip={() => this.disableToolTip()} | 92 | disableToolTip={() => this.disableToolTip()} |
92 | /> | 93 | /> |
93 | {workspaceStore.isFeatureEnabled ? ( | 94 | { |
94 | <button | 95 | isLoggedIn ? ( |
95 | type="button" | 96 | <> |
96 | onClick={() => { | 97 | {workspaceStore.isFeatureEnabled ? ( |
97 | toggleWorkspaceDrawer(); | 98 | <button |
98 | this.updateToolTip(); | 99 | type="button" |
99 | gaEvent(GA_CATEGORY_WORKSPACES, 'toggleDrawer', 'sidebar'); | 100 | onClick={() => { |
100 | }} | 101 | toggleWorkspaceDrawer(); |
101 | className={`sidebar__button sidebar__button--workspaces ${isWorkspaceDrawerOpen ? 'is-active' : ''}`} | 102 | this.updateToolTip(); |
102 | data-tip={`${intl.formatMessage(workspaceToggleMessage)} (${ctrlKey}+D)`} | 103 | }} |
103 | > | 104 | className={`sidebar__button sidebar__button--workspaces ${isWorkspaceDrawerOpen ? 'is-active' : ''}`} |
104 | <i className="mdi mdi-view-grid" /> | 105 | data-tip={`${intl.formatMessage(workspaceToggleMessage)} (${ctrlKey}+D)`} |
105 | </button> | 106 | > |
106 | ) : null} | 107 | <i className="mdi mdi-view-grid" /> |
107 | <button | 108 | </button> |
108 | type="button" | 109 | ) : null} |
109 | onClick={() => { | 110 | |
110 | toggleMuteApp(); | 111 | <button |
111 | this.updateToolTip(); | 112 | type="button" |
112 | }} | 113 | onClick={() => { |
113 | className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`} | 114 | toggleMuteApp(); |
114 | data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`} | 115 | this.updateToolTip(); |
115 | > | 116 | }} |
116 | <i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} /> | 117 | className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`} |
117 | </button> | 118 | data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`} |
118 | <button | 119 | > |
119 | type="button" | 120 | <i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} /> |
120 | onClick={() => openSettings({ path: 'recipes' })} | 121 | </button> |
121 | className="sidebar__button sidebar__button--new-service" | 122 | <button |
122 | data-tip={`${intl.formatMessage(messages.addNewService)} (${ctrlKey}+N)`} | 123 | type="button" |
123 | > | 124 | onClick={() => openSettings({ path: 'recipes' })} |
124 | <i className="mdi mdi-plus-box" /> | 125 | className="sidebar__button sidebar__button--new-service" |
125 | </button> | 126 | data-tip={`${intl.formatMessage(messages.addNewService)} (${ctrlKey}+N)`} |
127 | > | ||
128 | <i className="mdi mdi-plus-box" /> | ||
129 | </button> | ||
130 | </> | ||
131 | ) : ( | ||
132 | <Link | ||
133 | to="/auth/welcome" | ||
134 | className="sidebar__button sidebar__button--new-service" | ||
135 | data-tip="Login" | ||
136 | > | ||
137 | <i className="mdi mdi-login-variant" /> | ||
138 | </Link> | ||
139 | ) | ||
140 | } | ||
141 | |||
126 | <button | 142 | <button |
127 | type="button" | 143 | type="button" |
128 | onClick={() => openSettings({ path: 'app' })} | 144 | onClick={() => openSettings({ path: 'app' })} |