diff options
Diffstat (limited to 'src/components/settings')
-rw-r--r-- | src/components/settings/SettingsLayout.jsx (renamed from src/components/settings/SettingsLayout.js) | 8 | ||||
-rw-r--r-- | src/components/settings/navigation/SettingsNavigation.jsx (renamed from src/components/settings/navigation/SettingsNavigation.js) | 96 | ||||
-rw-r--r-- | src/components/settings/recipes/RecipesDashboard.jsx (renamed from src/components/settings/recipes/RecipesDashboard.js) | 67 | ||||
-rw-r--r-- | src/components/settings/services/EditServiceForm.js | 2 | ||||
-rw-r--r-- | src/components/settings/services/ServiceError.js | 2 | ||||
-rw-r--r-- | src/components/settings/services/ServicesDashboard.js | 5 | ||||
-rw-r--r-- | src/components/settings/user/EditUserForm.js | 2 |
7 files changed, 105 insertions, 77 deletions
diff --git a/src/components/settings/SettingsLayout.js b/src/components/settings/SettingsLayout.jsx index d70f471d5..dea4bb387 100644 --- a/src/components/settings/SettingsLayout.js +++ b/src/components/settings/SettingsLayout.jsx | |||
@@ -4,8 +4,8 @@ import { observer } from 'mobx-react'; | |||
4 | import { defineMessages, injectIntl } from 'react-intl'; | 4 | import { defineMessages, injectIntl } from 'react-intl'; |
5 | 5 | ||
6 | import { mdiClose } from '@mdi/js'; | 6 | import { mdiClose } from '@mdi/js'; |
7 | import { Outlet } from 'react-router-dom'; | ||
7 | import ErrorBoundary from '../util/ErrorBoundary'; | 8 | import ErrorBoundary from '../util/ErrorBoundary'; |
8 | import { oneOrManyChildElements } from '../../prop-types'; | ||
9 | import Appear from '../ui/effects/Appear'; | 9 | import Appear from '../ui/effects/Appear'; |
10 | import Icon from '../ui/icon'; | 10 | import Icon from '../ui/icon'; |
11 | 11 | ||
@@ -19,7 +19,6 @@ const messages = defineMessages({ | |||
19 | class SettingsLayout extends Component { | 19 | class SettingsLayout extends Component { |
20 | static propTypes = { | 20 | static propTypes = { |
21 | navigation: PropTypes.element.isRequired, | 21 | navigation: PropTypes.element.isRequired, |
22 | children: oneOrManyChildElements.isRequired, | ||
23 | closeSettings: PropTypes.func.isRequired, | 22 | closeSettings: PropTypes.func.isRequired, |
24 | }; | 23 | }; |
25 | 24 | ||
@@ -44,7 +43,7 @@ class SettingsLayout extends Component { | |||
44 | } | 43 | } |
45 | 44 | ||
46 | render() { | 45 | render() { |
47 | const { navigation, children, closeSettings } = this.props; | 46 | const { navigation, closeSettings } = this.props; |
48 | 47 | ||
49 | const { intl } = this.props; | 48 | const { intl } = this.props; |
50 | 49 | ||
@@ -60,7 +59,8 @@ class SettingsLayout extends Component { | |||
60 | /> | 59 | /> |
61 | <div className="settings franz-form"> | 60 | <div className="settings franz-form"> |
62 | {navigation} | 61 | {navigation} |
63 | {children} | 62 | |
63 | <Outlet /> | ||
64 | <button | 64 | <button |
65 | type="button" | 65 | type="button" |
66 | className="settings__close" | 66 | className="settings__close" |
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.jsx index ad1cef1e4..bbbe8d888 100644 --- a/src/components/settings/navigation/SettingsNavigation.js +++ b/src/components/settings/navigation/SettingsNavigation.jsx | |||
@@ -2,10 +2,10 @@ import { Component } from 'react'; | |||
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { defineMessages, injectIntl } from 'react-intl'; | 3 | import { defineMessages, injectIntl } from 'react-intl'; |
4 | import { inject, observer } from 'mobx-react'; | 4 | import { inject, observer } from 'mobx-react'; |
5 | import { RouterStore } from 'mobx-react-router'; | 5 | import { RouterStore } from '@superwf/mobx-react-router'; |
6 | 6 | ||
7 | import { NavLink } from 'react-router-dom'; | ||
7 | import { LOCAL_SERVER, LIVE_FERDIUM_API, LIVE_FRANZ_API } from '../../../config'; | 8 | import { LOCAL_SERVER, LIVE_FERDIUM_API, LIVE_FRANZ_API } from '../../../config'; |
8 | import Link from '../../ui/Link'; | ||
9 | import UIStore from '../../../stores/UIStore'; | 9 | import UIStore from '../../../stores/UIStore'; |
10 | import SettingsStore from '../../../stores/SettingsStore'; | 10 | import SettingsStore from '../../../stores/SettingsStore'; |
11 | import UserStore from '../../../stores/UserStore'; | 11 | import UserStore from '../../../stores/UserStore'; |
@@ -90,70 +90,94 @@ class SettingsNavigation extends Component { | |||
90 | 90 | ||
91 | return ( | 91 | return ( |
92 | <div className="settings-navigation"> | 92 | <div className="settings-navigation"> |
93 | <Link | 93 | <NavLink |
94 | to="/settings/recipes" | 94 | to="/settings/recipes" |
95 | className="settings-navigation__link" | 95 | className={({ isActive }) => |
96 | activeClassName="is-active" | 96 | isActive |
97 | ? 'settings-navigation__link is-active' | ||
98 | : 'settings-navigation__link' | ||
99 | } | ||
97 | > | 100 | > |
98 | {intl.formatMessage(messages.availableServices)} | 101 | {intl.formatMessage(messages.availableServices)} |
99 | </Link> | 102 | </NavLink> |
100 | <Link | 103 | <NavLink |
101 | to="/settings/services" | 104 | to="/settings/services" |
102 | className="settings-navigation__link" | 105 | className={({ isActive }) => |
103 | activeClassName="is-active" | 106 | isActive |
107 | ? 'settings-navigation__link is-active' | ||
108 | : 'settings-navigation__link' | ||
109 | } | ||
104 | > | 110 | > |
105 | {intl.formatMessage(messages.yourServices)}{' '} | 111 | {intl.formatMessage(messages.yourServices)}{' '} |
106 | <span className="badge">{serviceCount}</span> | 112 | <span className="badge">{serviceCount}</span> |
107 | </Link> | 113 | </NavLink> |
108 | <Link | 114 | <NavLink |
109 | to="/settings/workspaces" | 115 | to="/settings/workspaces" |
110 | className="settings-navigation__link" | 116 | className={({ isActive }) => |
111 | activeClassName="is-active" | 117 | isActive |
118 | ? 'settings-navigation__link is-active' | ||
119 | : 'settings-navigation__link' | ||
120 | } | ||
112 | > | 121 | > |
113 | {intl.formatMessage(messages.yourWorkspaces)}{' '} | 122 | {intl.formatMessage(messages.yourWorkspaces)}{' '} |
114 | <span className="badge">{workspaceCount}</span> | 123 | <span className="badge">{workspaceCount}</span> |
115 | </Link> | 124 | </NavLink> |
116 | {!isUsingWithoutAccount && ( | 125 | {!isUsingWithoutAccount && ( |
117 | <Link | 126 | <NavLink |
118 | to="/settings/user" | 127 | to="/settings/user" |
119 | className="settings-navigation__link" | 128 | className={({ isActive }) => |
120 | activeClassName="is-active" | 129 | isActive |
130 | ? 'settings-navigation__link is-active' | ||
131 | : 'settings-navigation__link' | ||
132 | } | ||
121 | > | 133 | > |
122 | {intl.formatMessage(messages.account)} | 134 | {intl.formatMessage(messages.account)} |
123 | </Link> | 135 | </NavLink> |
124 | )} | 136 | )} |
125 | {isUsingFranzServer && ( | 137 | {isUsingFranzServer && ( |
126 | <Link | 138 | <NavLink |
127 | to="/settings/team" | 139 | to="/settings/team" |
128 | className="settings-navigation__link" | 140 | className={({ isActive }) => |
129 | activeClassName="is-active" | 141 | isActive |
142 | ? 'settings-navigation__link is-active' | ||
143 | : 'settings-navigation__link' | ||
144 | } | ||
130 | > | 145 | > |
131 | {intl.formatMessage(messages.team)} | 146 | {intl.formatMessage(messages.team)} |
132 | </Link> | 147 | </NavLink> |
133 | )} | 148 | )} |
134 | <Link | 149 | <NavLink |
135 | to="/settings/app" | 150 | to="/settings/app" |
136 | className="settings-navigation__link" | 151 | className={({ isActive }) => |
137 | activeClassName="is-active" | 152 | isActive |
153 | ? 'settings-navigation__link is-active' | ||
154 | : 'settings-navigation__link' | ||
155 | } | ||
138 | > | 156 | > |
139 | {intl.formatMessage(globalMessages.settings)} | 157 | {intl.formatMessage(globalMessages.settings)} |
140 | {stores.settings.app.automaticUpdates && (stores.ui.showServicesUpdatedInfoBar || | 158 | {stores.settings.app.automaticUpdates && |
141 | (stores.app.updateStatus === stores.app.updateStatusTypes.AVAILABLE || | 159 | (stores.ui.showServicesUpdatedInfoBar || |
142 | stores.app.updateStatus === stores.app.updateStatusTypes.DOWNLOADED)) && ( | 160 | stores.app.updateStatus === |
143 | <span className="update-available">•</span> | 161 | stores.app.updateStatusTypes.AVAILABLE || |
144 | )} | 162 | stores.app.updateStatus === |
145 | </Link> | 163 | stores.app.updateStatusTypes.DOWNLOADED) && ( |
146 | <Link | 164 | <span className="update-available">•</span> |
165 | )} | ||
166 | </NavLink> | ||
167 | <NavLink | ||
147 | to="/settings/support" | 168 | to="/settings/support" |
148 | className="settings-navigation__link" | 169 | className={({ isActive }) => |
149 | activeClassName="is-active" | 170 | isActive |
171 | ? 'settings-navigation__link is-active' | ||
172 | : 'settings-navigation__link' | ||
173 | } | ||
150 | > | 174 | > |
151 | {intl.formatMessage(messages.supportFerdium)} | 175 | {intl.formatMessage(messages.supportFerdium)} |
152 | </Link> | 176 | </NavLink> |
153 | <span className="settings-navigation__expander" /> | 177 | <span className="settings-navigation__expander" /> |
154 | <button | 178 | <button |
155 | type="button" | 179 | type="button" |
156 | to='/auth/logout' | 180 | to="/auth/logout" |
157 | className="settings-navigation__link" | 181 | className="settings-navigation__link" |
158 | onClick={this.handleLogout.bind(this)} | 182 | onClick={this.handleLogout.bind(this)} |
159 | > | 183 | > |
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.jsx index c05144117..589b97ecd 100644 --- a/src/components/settings/recipes/RecipesDashboard.js +++ b/src/components/settings/recipes/RecipesDashboard.jsx | |||
@@ -2,7 +2,7 @@ import { Component } from 'react'; | |||
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | 3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; |
4 | import { defineMessages, injectIntl } from 'react-intl'; | 4 | import { defineMessages, injectIntl } from 'react-intl'; |
5 | import { Link } from 'react-router'; | 5 | import { NavLink } from 'react-router-dom'; |
6 | 6 | ||
7 | import injectSheet from 'react-jss'; | 7 | import injectSheet from 'react-jss'; |
8 | 8 | ||
@@ -179,30 +179,33 @@ class RecipesDashboard extends Component { | |||
179 | throttle | 179 | throttle |
180 | /> | 180 | /> |
181 | <div className="recipes__navigation"> | 181 | <div className="recipes__navigation"> |
182 | <Link | 182 | <NavLink |
183 | to="/settings/recipes" | 183 | to="/settings/recipes" |
184 | className="badge" | 184 | className={() => |
185 | activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`} | 185 | recipeFilter === 'featured' ? 'badge badge--primary' : 'badge' |
186 | } | ||
186 | onClick={() => resetSearch()} | 187 | onClick={() => resetSearch()} |
187 | > | 188 | > |
188 | {intl.formatMessage(messages.ferdiumPicksRecipes)} | 189 | {intl.formatMessage(messages.ferdiumPicksRecipes)} |
189 | </Link> | 190 | </NavLink> |
190 | <Link | 191 | <NavLink |
191 | to="/settings/recipes/all" | 192 | to="/settings/recipes/all" |
192 | className="badge" | 193 | className={({ isActive }) => |
193 | activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`} | 194 | isActive && recipeFilter === 'all' ? 'badge badge--primary' : 'badge' |
195 | } | ||
194 | onClick={() => resetSearch()} | 196 | onClick={() => resetSearch()} |
195 | > | 197 | > |
196 | {intl.formatMessage(messages.allRecipes)} | 198 | {intl.formatMessage(messages.allRecipes)} |
197 | </Link> | 199 | </NavLink> |
198 | <Link | 200 | <NavLink |
199 | to="/settings/recipes/dev" | 201 | to="/settings/recipes/dev" |
200 | className="badge" | 202 | className={({ isActive }) => |
201 | activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`} | 203 | isActive && !searchNeedle ? 'badge badge--primary' : 'badge' |
204 | } | ||
202 | onClick={() => resetSearch()} | 205 | onClick={() => resetSearch()} |
203 | > | 206 | > |
204 | {intl.formatMessage(messages.customRecipes)} | 207 | {intl.formatMessage(messages.customRecipes)} |
205 | </Link> | 208 | </NavLink> |
206 | <a | 209 | <a |
207 | href={FERDIUM_SERVICE_REQUEST} | 210 | href={FERDIUM_SERVICE_REQUEST} |
208 | target="_blank" | 211 | target="_blank" |
@@ -257,24 +260,26 @@ class RecipesDashboard extends Component { | |||
257 | /> | 260 | /> |
258 | ))} | 261 | ))} |
259 | </div> | 262 | </div> |
260 | {hasLoadedRecipes && recipes.length === 0 && recipeFilter !== 'dev' && ( | 263 | {hasLoadedRecipes && |
261 | <div className="align-middle settings__empty-state"> | 264 | recipes.length === 0 && |
262 | {customWebsiteRecipe && customWebsiteRecipe.id && ( | 265 | recipeFilter !== 'dev' && ( |
263 | <RecipeItem | 266 | <div className="align-middle settings__empty-state"> |
264 | key={customWebsiteRecipe.id} | 267 | {customWebsiteRecipe && customWebsiteRecipe.id && ( |
265 | recipe={customWebsiteRecipe} | 268 | <RecipeItem |
266 | onClick={() => | 269 | key={customWebsiteRecipe.id} |
267 | showAddServiceInterface({ | 270 | recipe={customWebsiteRecipe} |
268 | recipeId: customWebsiteRecipe.id, | 271 | onClick={() => |
269 | }) | 272 | showAddServiceInterface({ |
270 | } | 273 | recipeId: customWebsiteRecipe.id, |
271 | /> | 274 | }) |
272 | )} | 275 | } |
273 | <p className="settings__empty-state-text"> | 276 | /> |
274 | {intl.formatMessage(messages.nothingFound)} | 277 | )} |
275 | </p> | 278 | <p className="settings__empty-state-text"> |
276 | </div> | 279 | {intl.formatMessage(messages.nothingFound)} |
277 | )} | 280 | </p> |
281 | </div> | ||
282 | )} | ||
278 | {recipeFilter === 'dev' && devRecipes.length > 0 && ( | 283 | {recipeFilter === 'dev' && devRecipes.length > 0 && ( |
279 | <div className={classes.devRecipeList}> | 284 | <div className={classes.devRecipeList}> |
280 | <H3>{intl.formatMessage(messages.headlineDevRecipes)}</H3> | 285 | <H3>{intl.formatMessage(messages.headlineDevRecipes)}</H3> |
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js index f69d86726..73136529a 100644 --- a/src/components/settings/services/EditServiceForm.js +++ b/src/components/settings/services/EditServiceForm.js | |||
@@ -1,7 +1,7 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import { Link } from 'react-router'; | 4 | import { Link } from 'react-router-dom'; |
5 | import { defineMessages, injectIntl } from 'react-intl'; | 5 | import { defineMessages, injectIntl } from 'react-intl'; |
6 | import normalizeUrl from 'normalize-url'; | 6 | import normalizeUrl from 'normalize-url'; |
7 | 7 | ||
diff --git a/src/components/settings/services/ServiceError.js b/src/components/settings/services/ServiceError.js index 991817175..fdcdb54c9 100644 --- a/src/components/settings/services/ServiceError.js +++ b/src/components/settings/services/ServiceError.js | |||
@@ -1,6 +1,6 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component } from 'react'; |
2 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
3 | import { Link } from 'react-router'; | 3 | import { Link } from 'react-router-dom'; |
4 | import { defineMessages, injectIntl } from 'react-intl'; | 4 | import { defineMessages, injectIntl } from 'react-intl'; |
5 | 5 | ||
6 | import Infobox from '../../ui/Infobox'; | 6 | import Infobox from '../../ui/Infobox'; |
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js index c5bb1433c..ac1c30ecb 100644 --- a/src/components/settings/services/ServicesDashboard.js +++ b/src/components/settings/services/ServicesDashboard.js | |||
@@ -1,7 +1,7 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | 3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; |
4 | import { Link } from 'react-router'; | 4 | import { Link } from 'react-router-dom'; |
5 | import { defineMessages, injectIntl } from 'react-intl'; | 5 | import { defineMessages, injectIntl } from 'react-intl'; |
6 | 6 | ||
7 | import SearchInput from '../../ui/SearchInput'; | 7 | import SearchInput from '../../ui/SearchInput'; |
@@ -27,8 +27,7 @@ const messages = defineMessages({ | |||
27 | }, | 27 | }, |
28 | noServiceFound: { | 28 | noServiceFound: { |
29 | id: 'settings.services.nothingFound', | 29 | id: 'settings.services.nothingFound', |
30 | defaultMessage: | 30 | defaultMessage: 'Sorry, but no service matched your search term.', |
31 | 'Sorry, but no service matched your search term.', | ||
32 | }, | 31 | }, |
33 | discoverServices: { | 32 | discoverServices: { |
34 | id: 'settings.services.discoverServices', | 33 | id: 'settings.services.discoverServices', |
diff --git a/src/components/settings/user/EditUserForm.js b/src/components/settings/user/EditUserForm.js index 436a6b76b..c2773a47d 100644 --- a/src/components/settings/user/EditUserForm.js +++ b/src/components/settings/user/EditUserForm.js | |||
@@ -2,7 +2,7 @@ import { Component } from 'react'; | |||
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | 3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; |
4 | import { defineMessages, injectIntl } from 'react-intl'; | 4 | import { defineMessages, injectIntl } from 'react-intl'; |
5 | import { Link } from 'react-router'; | 5 | import { Link } from 'react-router-dom'; |
6 | 6 | ||
7 | import Input from '../../ui/input/index'; | 7 | import Input from '../../ui/input/index'; |
8 | import Form from '../../../lib/Form'; | 8 | import Form from '../../../lib/Form'; |