diff options
author | Dominik Guzei <dominik.guzei@gmail.com> | 2019-04-11 16:54:01 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-04-11 16:54:01 +0200 |
commit | 47c1c99d893517efc679ab29d675cc0bf44be8be (patch) | |
tree | 9cab9697096bef0ce56d8ee8709bc1c2c3a42deb /packages/ui/src | |
parent | test package order (diff) | |
download | ferdium-app-47c1c99d893517efc679ab29d675cc0bf44be8be.tar.gz ferdium-app-47c1c99d893517efc679ab29d675cc0bf44be8be.tar.zst ferdium-app-47c1c99d893517efc679ab29d675cc0bf44be8be.zip |
feat(App): Added Workspaces for all your daily routines 🥳
* merge default and fetched feature configs
* ignore intellij project files
* basic setup for workspaces feature
* define workspaces as premium feature
* add workspaces menu item in settings dialog
* basic setup of workspaces settings screen
* fix eslint error
* assign react key prop to workspace items
* add styles for workspace table
* setup logic to display workspace edit page
* consolidate workspace feature for further development
* prepare basic workspace edit form
* add on enter key handler for form input component
* add form for creating workspaces
* small fixes
* adds flow for deleting workspaces
* stop tracking google analytics in components
* pin gulp-sass-variables version to 1.1.1
* fix merge conflict
* fix bug in form input library
* improve workspace form setup
* finish basic workspace settings
* finish workspaces mvp
* fix eslint issues
* remove dev logs
* detach service when underlying webview unmounts
* disable no-param-reassign eslint rule
* add workspace drawer
* change workspace switch shortcuts to start with zero
* add workspace drawer toggle menu item and shortcut
* improve workspace switching ux
* style add workspace icon in drawer like the sidebar icons
* improve workspace drawer layout
* add i18n messages for service loading and workspace switching
* small fixes
* add tooltip to add workspace button in drawer
* add workspaces count badge in settings navigation
* fix merge conflicts with latest develop
* refactor state management for workspace feature
* reset api requests when workspace feature is stopped
* hide workspace feature if it is disabled
* handle get workspaces request errors in the ui
* show infobox when updating workspaces
* indicate any server interaction with spinners and infoboxes
* add analytic events for workspace actions
* improve styling of workspace switch indicator
* add workspace premium notice to dashboard
* add workspace feature info in drawer for free users
* add workspace premium badge in settings nav
* fix premium workspace badge in settings menu for light theme
* fix active workspaces settings premium badge in light theme
* give upgrade account button a bit more padding
* add open last used workspace logic
* use mobx-localstorage directly in the store
* fix wrong workspace tooltip shortcut in sidebar
* fix bug in workspace feature initialization
* show workspaces intro in drawer when user has none yet
* fix issues for users that have workspace but downgraded to free
* border radius for premium intro in workspace settings
* close workspace drawer after clicking on a workspace
* add hover effect for drawer workspace items
* ensure drawer is open on workspace settings routes
* add small text label for adding new workspace to drawer
* make workspace settings list items taller
* refactor workspace table css away from legacy styles
* render workspace service list like services + toggle
* change plus icon in workspace drawer to settings icon
* autofocus create workspace input field
* add css transition to drawer workspace item hover
* fix drawer add workspace label styles
* refactors workspace theme vars into object structure
* improve contrast of workspace switching indicator
* added generic pro badge component for settings nav
* add premium badge to workspace drawer headline
* add context menu for workspace drawer items
* handle deleted services that are attached to workspaces
Diffstat (limited to 'packages/ui/src')
-rw-r--r-- | packages/ui/src/badge/ProBadge.tsx | 64 | ||||
-rw-r--r-- | packages/ui/src/index.ts | 1 | ||||
-rw-r--r-- | packages/ui/src/infobox/index.tsx | 7 | ||||
-rw-r--r-- | packages/ui/src/loader/index.tsx | 4 |
4 files changed, 75 insertions, 1 deletions
diff --git a/packages/ui/src/badge/ProBadge.tsx b/packages/ui/src/badge/ProBadge.tsx new file mode 100644 index 000000000..612e23210 --- /dev/null +++ b/packages/ui/src/badge/ProBadge.tsx | |||
@@ -0,0 +1,64 @@ | |||
1 | import { Theme } from '@meetfranz/theme'; | ||
2 | import classnames from 'classnames'; | ||
3 | import React, { Component } from 'react'; | ||
4 | import injectStyle from 'react-jss'; | ||
5 | |||
6 | import { Icon, Badge } from '../'; | ||
7 | import { IWithStyle } from '../typings/generic'; | ||
8 | |||
9 | interface IProps extends IWithStyle { | ||
10 | badgeClasses?: string; | ||
11 | iconClasses?: string; | ||
12 | inverted?: boolean; | ||
13 | } | ||
14 | |||
15 | const styles = (theme: Theme) => ({ | ||
16 | badge: { | ||
17 | height: 'auto', | ||
18 | padding: [4, 6, 2, 7], | ||
19 | borderRadius: theme.borderRadiusSmall, | ||
20 | }, | ||
21 | invertedBadge: { | ||
22 | background: theme.styleTypes.primary.contrast, | ||
23 | color: theme.styleTypes.primary.accent, | ||
24 | }, | ||
25 | icon: { | ||
26 | fill: theme.styleTypes.primary.contrast, | ||
27 | }, | ||
28 | invertedIcon: { | ||
29 | fill: theme.styleTypes.primary.accent, | ||
30 | }, | ||
31 | }); | ||
32 | |||
33 | class ProBadgeComponent extends Component<IProps> { | ||
34 | render() { | ||
35 | const { | ||
36 | classes, | ||
37 | badgeClasses, | ||
38 | iconClasses, | ||
39 | inverted, | ||
40 | } = this.props; | ||
41 | |||
42 | return ( | ||
43 | <Badge | ||
44 | type="primary" | ||
45 | className={classnames([ | ||
46 | classes.badge, | ||
47 | inverted && classes.invertedBadge, | ||
48 | badgeClasses, | ||
49 | ])} | ||
50 | > | ||
51 | <Icon | ||
52 | icon="mdiStar" | ||
53 | className={classnames([ | ||
54 | classes.icon, | ||
55 | inverted && classes.invertedIcon, | ||
56 | iconClasses, | ||
57 | ])} | ||
58 | /> | ||
59 | </Badge> | ||
60 | ); | ||
61 | } | ||
62 | } | ||
63 | |||
64 | export const ProBadge = injectStyle(styles)(ProBadgeComponent); | ||
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 1eeec5144..666495ce9 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts | |||
@@ -3,3 +3,4 @@ export { Infobox } from './infobox'; | |||
3 | export * from './headline'; | 3 | export * from './headline'; |
4 | export { Loader } from './loader'; | 4 | export { Loader } from './loader'; |
5 | export { Badge } from './badge'; | 5 | export { Badge } from './badge'; |
6 | export { ProBadge } from './badge/ProBadge'; | ||
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx index 1a442a733..9066a623e 100644 --- a/packages/ui/src/infobox/index.tsx +++ b/packages/ui/src/infobox/index.tsx | |||
@@ -11,6 +11,7 @@ interface IProps extends IWithStyle { | |||
11 | type?: string; | 11 | type?: string; |
12 | dismissable?: boolean; | 12 | dismissable?: boolean; |
13 | onDismiss?: () => void; | 13 | onDismiss?: () => void; |
14 | onUnmount?: () => void; | ||
14 | ctaOnClick?: () => void; | 15 | ctaOnClick?: () => void; |
15 | ctaLabel?: string; | 16 | ctaLabel?: string; |
16 | ctaLoading?: boolean; | 17 | ctaLoading?: boolean; |
@@ -46,6 +47,7 @@ const styles = (theme: Theme) => ({ | |||
46 | wrapper: { | 47 | wrapper: { |
47 | position: 'relative', | 48 | position: 'relative', |
48 | overflow: 'hidden', | 49 | overflow: 'hidden', |
50 | height: 'auto', | ||
49 | }, | 51 | }, |
50 | infobox: { | 52 | infobox: { |
51 | alignItems: 'center', | 53 | alignItems: 'center', |
@@ -129,6 +131,11 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
129 | }, 3000); | 131 | }, 3000); |
130 | } | 132 | } |
131 | 133 | ||
134 | componentWillUnmount(): void { | ||
135 | const { onUnmount } = this.props; | ||
136 | if (onUnmount) onUnmount(); | ||
137 | } | ||
138 | |||
132 | render() { | 139 | render() { |
133 | const { | 140 | const { |
134 | classes, | 141 | classes, |
diff --git a/packages/ui/src/loader/index.tsx b/packages/ui/src/loader/index.tsx index 46545c786..4a3c8274f 100644 --- a/packages/ui/src/loader/index.tsx +++ b/packages/ui/src/loader/index.tsx | |||
@@ -8,6 +8,7 @@ import { IWithStyle } from '../typings/generic'; | |||
8 | 8 | ||
9 | interface IProps extends IWithStyle { | 9 | interface IProps extends IWithStyle { |
10 | className?: string; | 10 | className?: string; |
11 | color?: string; | ||
11 | } | 12 | } |
12 | 13 | ||
13 | const styles = (theme: Theme) => ({ | 14 | const styles = (theme: Theme) => ({ |
@@ -22,6 +23,7 @@ class LoaderComponent extends Component<IProps> { | |||
22 | const { | 23 | const { |
23 | classes, | 24 | classes, |
24 | className, | 25 | className, |
26 | color, | ||
25 | theme, | 27 | theme, |
26 | } = this.props; | 28 | } = this.props; |
27 | 29 | ||
@@ -37,7 +39,7 @@ class LoaderComponent extends Component<IProps> { | |||
37 | loaded={false} | 39 | loaded={false} |
38 | width={4} | 40 | width={4} |
39 | scale={0.75} | 41 | scale={0.75} |
40 | color={theme.colorText} | 42 | color={color || theme.colorText} |
41 | parentClassName={classes.loader} | 43 | parentClassName={classes.loader} |
42 | /> | 44 | /> |
43 | </div> | 45 | </div> |