diff options
author | 2023-10-27 02:19:31 +0200 | |
---|---|---|
committer | 2023-10-27 01:19:31 +0100 | |
commit | 78cb67c641e5723af59e0cf8a172a443aafa6f33 (patch) | |
tree | ec121e8efecf027717ce4e58b29c72fa93ed3315 /src/components/ui | |
parent | 6.5.3-nightly.4 [skip ci] (diff) | |
download | ferdium-app-78cb67c641e5723af59e0cf8a172a443aafa6f33.tar.gz ferdium-app-78cb67c641e5723af59e0cf8a172a443aafa6f33.tar.zst ferdium-app-78cb67c641e5723af59e0cf8a172a443aafa6f33.zip |
feat: change loader component (#1410)
* CHANGED react-loater to react-loader-spinner
* CHANGED brandColor to primary
* feat: change loader component
- remove redundant /index path from Loader imports in multiple files
- remove commented out braces in RecipesDashboard
- remove redundant color which is default from Loader in InfoBar
- update size of Loader in InfoBar to be the same as InfoBox
- change passed size prop from string to number in Button component
- add slight gap for FullscreenLoader to styles.ts
- fix Loader to check for color primary which is passed rather than brandColor
- remove hardcoded width and height from WorkspaceSwitchingIndicator which lead to elements not being vertically centered
- remove color prop from Loader in WorkspaceSwitchingIndicator since white is already the default
- remove switchingIndicator.spinnerColor from default theme since white is already the default
* implement PR feedback
* re-add color to WorkspaceSwitchingIndicator
---------
Co-authored-by: MCMXC <16797721+mcmxcdev@users.noreply.github.com>
Diffstat (limited to 'src/components/ui')
-rw-r--r-- | src/components/ui/FullscreenLoader/index.tsx | 8 | ||||
-rw-r--r-- | src/components/ui/FullscreenLoader/styles.ts | 1 | ||||
-rw-r--r-- | src/components/ui/InfoBar.tsx | 18 | ||||
-rw-r--r-- | src/components/ui/Infobox.tsx | 18 | ||||
-rw-r--r-- | src/components/ui/Loader.tsx | 46 | ||||
-rw-r--r-- | src/components/ui/button/index.tsx | 27 | ||||
-rw-r--r-- | src/components/ui/loader/index.tsx | 41 |
7 files changed, 53 insertions, 106 deletions
diff --git a/src/components/ui/FullscreenLoader/index.tsx b/src/components/ui/FullscreenLoader/index.tsx index 002ee7932..09c1d5fbb 100644 --- a/src/components/ui/FullscreenLoader/index.tsx +++ b/src/components/ui/FullscreenLoader/index.tsx | |||
@@ -2,7 +2,7 @@ import { Component, ReactElement, ReactNode } from 'react'; | |||
2 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
3 | import withStyles, { WithStylesProps } from 'react-jss'; | 3 | import withStyles, { WithStylesProps } from 'react-jss'; |
4 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
5 | import Loader from '../Loader'; | 5 | import Loader from '../loader/index'; |
6 | import styles from './styles'; | 6 | import styles from './styles'; |
7 | import { H1 } from '../headline'; | 7 | import { H1 } from '../headline'; |
8 | import { Theme } from '../../../themes'; | 8 | import { Theme } from '../../../themes'; |
@@ -21,7 +21,7 @@ class FullscreenLoader extends Component<IProps> { | |||
21 | render(): ReactElement { | 21 | render(): ReactElement { |
22 | const { | 22 | const { |
23 | classes, | 23 | classes, |
24 | theme = '', | 24 | theme, |
25 | className = '', | 25 | className = '', |
26 | spinnerColor = '', | 26 | spinnerColor = '', |
27 | children = null, | 27 | children = null, |
@@ -39,9 +39,7 @@ class FullscreenLoader extends Component<IProps> { | |||
39 | > | 39 | > |
40 | <H1 className={classes.title}>{title}</H1> | 40 | <H1 className={classes.title}>{title}</H1> |
41 | <Loader | 41 | <Loader |
42 | color={ | 42 | color={spinnerColor || theme?.colorFullscreenLoaderSpinner} |
43 | spinnerColor || (theme && theme.colorFullscreenLoaderSpinner) | ||
44 | } | ||
45 | loaded={loaded} | 43 | loaded={loaded} |
46 | /> | 44 | /> |
47 | {children && <div className={classes.content}>{children}</div>} | 45 | {children && <div className={classes.content}>{children}</div>} |
diff --git a/src/components/ui/FullscreenLoader/styles.ts b/src/components/ui/FullscreenLoader/styles.ts index 64d24e4ce..9a1b24400 100644 --- a/src/components/ui/FullscreenLoader/styles.ts +++ b/src/components/ui/FullscreenLoader/styles.ts | |||
@@ -12,6 +12,7 @@ export default { | |||
12 | alignItems: 'center', | 12 | alignItems: 'center', |
13 | textAlign: 'center', | 13 | textAlign: 'center', |
14 | height: 'auto', | 14 | height: 'auto', |
15 | gap: 8, | ||
15 | }, | 16 | }, |
16 | title: { | 17 | title: { |
17 | fontSize: 35, | 18 | fontSize: 35, |
diff --git a/src/components/ui/InfoBar.tsx b/src/components/ui/InfoBar.tsx index b7bfe0fa6..ae37546df 100644 --- a/src/components/ui/InfoBar.tsx +++ b/src/components/ui/InfoBar.tsx | |||
@@ -1,11 +1,11 @@ | |||
1 | import { Component, MouseEventHandler, ReactNode } from 'react'; | 1 | import { Component, MouseEventHandler, ReactNode } from 'react'; |
2 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
3 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
4 | import Loader from 'react-loader'; | ||
5 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | 4 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
6 | 5 | ||
7 | import { mdiClose } from '@mdi/js'; | 6 | import { mdiClose } from '@mdi/js'; |
8 | import { noop } from 'lodash'; | 7 | import { noop } from 'lodash'; |
8 | import Loader from './loader/index'; | ||
9 | import Appear from './effects/Appear'; | 9 | import Appear from './effects/Appear'; |
10 | import Icon from './icon'; | 10 | import Icon from './icon'; |
11 | 11 | ||
@@ -67,15 +67,13 @@ class InfoBar extends Component<IProps> { | |||
67 | {children} | 67 | {children} |
68 | {ctaLabel && ( | 68 | {ctaLabel && ( |
69 | <button type="button" className="info-bar__cta" onClick={onClick}> | 69 | <button type="button" className="info-bar__cta" onClick={onClick}> |
70 | <Loader | 70 | <div |
71 | loaded={!ctaLoading} | 71 | className="contentWrapper" |
72 | lines={10} | 72 | style={{ display: 'flex', gap: '8px' }} |
73 | scale={0.3} | 73 | > |
74 | color="#FFF" | 74 | <Loader size={18} loaded={!ctaLoading} color="#FFFFFF" /> |
75 | // @ts-expect-error Property 'component' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps> | 75 | {ctaLabel} |
76 | component="span" | 76 | </div> |
77 | /> | ||
78 | {ctaLabel} | ||
79 | </button> | 77 | </button> |
80 | )} | 78 | )} |
81 | {!sticky && ( | 79 | {!sticky && ( |
diff --git a/src/components/ui/Infobox.tsx b/src/components/ui/Infobox.tsx index a794a5e9b..742717ed7 100644 --- a/src/components/ui/Infobox.tsx +++ b/src/components/ui/Infobox.tsx | |||
@@ -1,10 +1,10 @@ | |||
1 | import { Component, MouseEventHandler, ReactElement, ReactNode } from 'react'; | 1 | import { Component, MouseEventHandler, ReactElement, ReactNode } from 'react'; |
2 | import classnames from 'classnames'; | 2 | import classnames from 'classnames'; |
3 | import Loader from 'react-loader'; | ||
4 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | 3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
5 | import { mdiAlert, mdiCheckboxMarkedCircleOutline, mdiClose } from '@mdi/js'; | 4 | import { mdiAlert, mdiCheckboxMarkedCircleOutline, mdiClose } from '@mdi/js'; |
6 | import { noop } from 'lodash'; | 5 | import { noop } from 'lodash'; |
7 | import { observer } from 'mobx-react'; | 6 | import { observer } from 'mobx-react'; |
7 | import Loader from './loader/index'; | ||
8 | import Icon from './icon'; | 8 | import Icon from './icon'; |
9 | 9 | ||
10 | const icons = { | 10 | const icons = { |
@@ -80,15 +80,13 @@ class Infobox extends Component<IProps, IState> { | |||
80 | <div className="infobox__content">{children}</div> | 80 | <div className="infobox__content">{children}</div> |
81 | {ctaLabel && ( | 81 | {ctaLabel && ( |
82 | <button className="infobox__cta" onClick={ctaOnClick} type="button"> | 82 | <button className="infobox__cta" onClick={ctaOnClick} type="button"> |
83 | <Loader | 83 | <div |
84 | loaded={!ctaLoading} | 84 | className="contentWrapper" |
85 | lines={10} | 85 | style={{ display: 'flex', gap: '8px' }} |
86 | scale={0.3} | 86 | > |
87 | color="#FFF" | 87 | <Loader size={18} loaded={!ctaLoading} color="#FFFFFF" /> |
88 | // @ts-expect-error Property 'component' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps> | 88 | {ctaLabel} |
89 | component="span" | 89 | </div> |
90 | /> | ||
91 | {ctaLabel} | ||
92 | </button> | 90 | </button> |
93 | )} | 91 | )} |
94 | {dismissible && ( | 92 | {dismissible && ( |
diff --git a/src/components/ui/Loader.tsx b/src/components/ui/Loader.tsx deleted file mode 100644 index d4457ae5f..000000000 --- a/src/components/ui/Loader.tsx +++ /dev/null | |||
@@ -1,46 +0,0 @@ | |||
1 | import { Component, ReactElement, ReactNode } from 'react'; | ||
2 | import { observer, inject } from 'mobx-react'; | ||
3 | import Loader from 'react-loader'; | ||
4 | |||
5 | import { FerdiumStores } from '../../@types/stores.types'; | ||
6 | |||
7 | interface IProps { | ||
8 | className?: string; | ||
9 | color?: string; | ||
10 | loaded?: boolean; | ||
11 | stores?: FerdiumStores; | ||
12 | children?: ReactNode; | ||
13 | } | ||
14 | |||
15 | // TODO: Can this file be merged into the './loader/index.tsx' file? | ||
16 | @inject('stores') | ||
17 | @observer | ||
18 | class LoaderComponent extends Component<IProps> { | ||
19 | render(): ReactElement { | ||
20 | const { | ||
21 | loaded = false, | ||
22 | color = 'ACCENT', | ||
23 | className, | ||
24 | children, | ||
25 | } = this.props; | ||
26 | |||
27 | const loaderColor = | ||
28 | color === 'ACCENT' ? this.props.stores!.settings.app.accentColor : color; | ||
29 | |||
30 | return ( | ||
31 | // @ts-expect-error Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps>' | ||
32 | <Loader | ||
33 | loaded={loaded} | ||
34 | width={4} | ||
35 | scale={0.6} | ||
36 | color={loaderColor} | ||
37 | component="span" | ||
38 | className={className} | ||
39 | > | ||
40 | {children} | ||
41 | </Loader> | ||
42 | ); | ||
43 | } | ||
44 | } | ||
45 | |||
46 | export default LoaderComponent; | ||
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx index c37a88afa..f8bcf76b2 100644 --- a/src/components/ui/button/index.tsx +++ b/src/components/ui/button/index.tsx | |||
@@ -5,7 +5,7 @@ import { Property } from 'csstype'; | |||
5 | import { noop } from 'lodash'; | 5 | import { noop } from 'lodash'; |
6 | import { Component, MouseEventHandler } from 'react'; | 6 | import { Component, MouseEventHandler } from 'react'; |
7 | import withStyles, { WithStylesProps } from 'react-jss'; | 7 | import withStyles, { WithStylesProps } from 'react-jss'; |
8 | import Loader from 'react-loader'; | 8 | import Loader from '../loader/index'; |
9 | import { Theme } from '../../../themes'; | 9 | import { Theme } from '../../../themes'; |
10 | import { IFormField } from '../typings/generic'; | 10 | import { IFormField } from '../typings/generic'; |
11 | 11 | ||
@@ -111,16 +111,8 @@ const styles = (theme: Theme) => ({ | |||
111 | disabled: { | 111 | disabled: { |
112 | opacity: theme.inputDisabledOpacity, | 112 | opacity: theme.inputDisabledOpacity, |
113 | }, | 113 | }, |
114 | loader: { | ||
115 | position: 'relative' as Property.Position, | ||
116 | width: 20, | ||
117 | height: 18, | ||
118 | zIndex: 9999, | ||
119 | }, | ||
120 | loaderContainer: { | 114 | loaderContainer: { |
121 | width: (props: IProps): string => (props.busy ? '40px' : '0'), | ||
122 | height: 20, | 115 | height: 20, |
123 | overflow: 'hidden', | ||
124 | transition: loaderContainerTransition, | 116 | transition: loaderContainerTransition, |
125 | marginLeft: (props: IProps): number => (props.busy ? 20 : 10), | 117 | marginLeft: (props: IProps): number => (props.busy ? 20 : 10), |
126 | marginRight: (props: IProps): number => (props.busy ? -20 : -10), | 118 | marginRight: (props: IProps): number => (props.busy ? -20 : -10), |
@@ -200,18 +192,11 @@ class ButtonComponent extends Component<IProps, IState> { | |||
200 | 192 | ||
201 | const content = ( | 193 | const content = ( |
202 | <> | 194 | <> |
203 | <div className={classes.loaderContainer}> | 195 | {showLoader && ( |
204 | {showLoader && ( | 196 | <div className={classes.loaderContainer}> |
205 | <Loader | 197 | <Loader size={18} color="#FFFFFF" /> |
206 | loaded={false} | 198 | </div> |
207 | width={4} | 199 | )} |
208 | scale={0.45} | ||
209 | // color={theme.buttonLoaderColor[buttonType!]} | ||
210 | // @ts-expect-error Property 'parentClassName' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps> | ||
211 | parentClassName={classes.loader} | ||
212 | /> | ||
213 | )} | ||
214 | </div> | ||
215 | <div className={classes.label}> | 200 | <div className={classes.label}> |
216 | {icon && <Icon path={icon} size={0.8} className={classes.icon} />} | 201 | {icon && <Icon path={icon} size={0.8} className={classes.icon} />} |
217 | {label} | 202 | {label} |
diff --git a/src/components/ui/loader/index.tsx b/src/components/ui/loader/index.tsx index 957899bdc..2cee00d96 100644 --- a/src/components/ui/loader/index.tsx +++ b/src/components/ui/loader/index.tsx | |||
@@ -1,26 +1,39 @@ | |||
1 | import classnames from 'classnames'; | 1 | import classnames from 'classnames'; |
2 | import { Component } from 'react'; | 2 | import { Component } from 'react'; |
3 | import injectStyle, { WithStylesProps } from 'react-jss'; | 3 | import injectStyle, { WithStylesProps } from 'react-jss'; |
4 | import ReactLoader from 'react-loader'; | 4 | import { Oval } from 'react-loader-spinner'; |
5 | import { Theme } from '../../../themes'; | 5 | import { inject } from 'mobx-react'; |
6 | import { FerdiumStores } from '../../../@types/stores.types'; | ||
6 | 7 | ||
7 | const styles = (theme: Theme) => ({ | 8 | const styles = () => ({ |
8 | container: { | 9 | container: { |
9 | position: 'relative', | 10 | position: 'relative', |
10 | height: 60, | 11 | display: 'flex', |
12 | justifyContent: 'center', | ||
13 | alignItems: 'center', | ||
14 | height: 'inherit', | ||
11 | }, | 15 | }, |
12 | loader: {}, | ||
13 | color: theme.colorText, | ||
14 | }); | 16 | }); |
15 | 17 | ||
16 | interface IProps extends WithStylesProps<typeof styles> { | 18 | interface IProps extends WithStylesProps<typeof styles> { |
17 | className?: string; | 19 | className?: string; |
18 | color?: string; | 20 | color?: string; |
21 | size?: number; | ||
22 | loaded?: boolean; | ||
23 | stores?: FerdiumStores; | ||
19 | } | 24 | } |
20 | 25 | ||
26 | @inject('stores') | ||
21 | class LoaderComponent extends Component<IProps> { | 27 | class LoaderComponent extends Component<IProps> { |
22 | render() { | 28 | render() { |
23 | const { classes, className, color } = this.props; | 29 | const { |
30 | classes, | ||
31 | className, | ||
32 | size = 36, | ||
33 | color = this.props.stores?.settings.app.accentColor, | ||
34 | loaded = false, | ||
35 | } = this.props; | ||
36 | const loaderColor = color || '#FFFFFF'; | ||
24 | 37 | ||
25 | return ( | 38 | return ( |
26 | <div | 39 | <div |
@@ -30,13 +43,13 @@ class LoaderComponent extends Component<IProps> { | |||
30 | })} | 43 | })} |
31 | data-type="franz-loader" | 44 | data-type="franz-loader" |
32 | > | 45 | > |
33 | <ReactLoader | 46 | <Oval |
34 | loaded={false} | 47 | strokeWidth={5} |
35 | width={4} | 48 | color={loaderColor} |
36 | scale={0.75} | 49 | secondaryColor={loaderColor} |
37 | color={color || classes.color} | 50 | height={size} |
38 | // @ts-expect-error Property 'parentClassName' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps></LoaderProps> | 51 | width={size} |
39 | parentClassName={classes.loader} | 52 | visible={!loaded} |
40 | /> | 53 | /> |
41 | </div> | 54 | </div> |
42 | ); | 55 | ); |