diff options
author | Dominik Guzei <dominik.guzei@gmail.com> | 2019-04-11 12:00:07 +0200 |
---|---|---|
committer | Dominik Guzei <dominik.guzei@gmail.com> | 2019-04-11 12:00:07 +0200 |
commit | e43d6bd80b3d76aae627fa8174eea98c14016549 (patch) | |
tree | de1d0a3ba10100ce68d0cb1ed618095e362fe573 /packages | |
parent | implements basic release announcement feature (diff) | |
parent | handle deleted services that are attached to workspaces (diff) | |
download | ferdium-app-e43d6bd80b3d76aae627fa8174eea98c14016549.tar.gz ferdium-app-e43d6bd80b3d76aae627fa8174eea98c14016549.tar.zst ferdium-app-e43d6bd80b3d76aae627fa8174eea98c14016549.zip |
merge-in workspace feature
Diffstat (limited to 'packages')
-rw-r--r-- | packages/forms/package.json | 6 | ||||
-rw-r--r-- | packages/forms/src/button/index.tsx | 1 | ||||
-rw-r--r-- | packages/forms/src/input/index.tsx | 20 | ||||
-rw-r--r-- | packages/forms/src/input/styles.ts | 7 | ||||
-rw-r--r-- | packages/forms/src/label/index.tsx | 6 | ||||
-rw-r--r-- | packages/forms/src/label/styles.ts | 4 | ||||
-rw-r--r-- | packages/forms/src/select/index.tsx | 8 | ||||
-rw-r--r-- | packages/forms/src/toggle/index.tsx | 4 | ||||
-rw-r--r-- | packages/forms/src/typings/generic.ts | 1 | ||||
-rw-r--r-- | packages/theme/package.json | 4 | ||||
-rw-r--r-- | packages/theme/src/themes/dark/index.ts | 67 | ||||
-rw-r--r-- | packages/theme/src/themes/default/index.ts | 82 | ||||
-rw-r--r-- | packages/typings/package.json | 4 | ||||
-rw-r--r-- | packages/ui/package.json | 6 | ||||
-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 | 14 | ||||
-rw-r--r-- | packages/ui/src/loader/index.tsx | 4 |
18 files changed, 282 insertions, 21 deletions
diff --git a/packages/forms/package.json b/packages/forms/package.json index e78929777..0ac9a846f 100644 --- a/packages/forms/package.json +++ b/packages/forms/package.json | |||
@@ -1,6 +1,6 @@ | |||
1 | { | 1 | { |
2 | "name": "@meetfranz/forms", | 2 | "name": "@meetfranz/forms", |
3 | "version": "1.0.9", | 3 | "version": "1.0.15", |
4 | "description": "React form components for Franz", | 4 | "description": "React form components for Franz", |
5 | "main": "lib/index.js", | 5 | "main": "lib/index.js", |
6 | "scripts": { | 6 | "scripts": { |
@@ -25,7 +25,7 @@ | |||
25 | "dependencies": { | 25 | "dependencies": { |
26 | "@mdi/js": "^3.3.92", | 26 | "@mdi/js": "^3.3.92", |
27 | "@mdi/react": "^1.1.0", | 27 | "@mdi/react": "^1.1.0", |
28 | "@meetfranz/theme": "^1.0.7", | 28 | "@meetfranz/theme": "^1.0.13", |
29 | "react-html-attributes": "^1.4.3", | 29 | "react-html-attributes": "^1.4.3", |
30 | "react-loader": "^2.4.5" | 30 | "react-loader": "^2.4.5" |
31 | }, | 31 | }, |
@@ -35,5 +35,5 @@ | |||
35 | "react-dom": "16.7.0", | 35 | "react-dom": "16.7.0", |
36 | "react-jss": "^8.6.1" | 36 | "react-jss": "^8.6.1" |
37 | }, | 37 | }, |
38 | "gitHead": "14b151cad6a5a849bb476aaa3fc53bf1eead7f4b" | 38 | "gitHead": "e9b9079dc921e85961954727a7b2a8eabe5b9798" |
39 | } | 39 | } |
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx index 7a7f83dab..6959cde73 100644 --- a/packages/forms/src/button/index.tsx +++ b/packages/forms/src/button/index.tsx | |||
@@ -44,6 +44,7 @@ const styles = (theme: Theme) => ({ | |||
44 | width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.WidthProperty<string>, | 44 | width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.WidthProperty<string>, |
45 | fontSize: theme.uiFontSize, | 45 | fontSize: theme.uiFontSize, |
46 | textDecoration: 'none', | 46 | textDecoration: 'none', |
47 | height: theme.buttonHeight, | ||
47 | 48 | ||
48 | '&:hover': { | 49 | '&:hover': { |
49 | opacity: 0.8, | 50 | opacity: 0.8, |
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx index 478738cad..a2d7c62d5 100644 --- a/packages/forms/src/input/index.tsx +++ b/packages/forms/src/input/index.tsx | |||
@@ -25,6 +25,7 @@ interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField | |||
25 | showPasswordToggle?: boolean; | 25 | showPasswordToggle?: boolean; |
26 | data: IData; | 26 | data: IData; |
27 | inputClassName?: string; | 27 | inputClassName?: string; |
28 | onEnterKey?: Function; | ||
28 | } | 29 | } |
29 | 30 | ||
30 | interface IState { | 31 | interface IState { |
@@ -33,7 +34,7 @@ interface IState { | |||
33 | } | 34 | } |
34 | 35 | ||
35 | class InputComponent extends Component<IProps, IState> { | 36 | class InputComponent extends Component<IProps, IState> { |
36 | public static defaultProps = { | 37 | static defaultProps = { |
37 | focus: false, | 38 | focus: false, |
38 | onChange: () => {}, | 39 | onChange: () => {}, |
39 | onBlur: () => {}, | 40 | onBlur: () => {}, |
@@ -81,6 +82,13 @@ class InputComponent extends Component<IProps, IState> { | |||
81 | } | 82 | } |
82 | } | 83 | } |
83 | 84 | ||
85 | onInputKeyPress(e: React.KeyboardEvent) { | ||
86 | if (e.key === "Enter") { | ||
87 | const { onEnterKey } = this.props; | ||
88 | onEnterKey && onEnterKey(); | ||
89 | } | ||
90 | } | ||
91 | |||
84 | render() { | 92 | render() { |
85 | const { | 93 | const { |
86 | classes, | 94 | classes, |
@@ -102,6 +110,10 @@ class InputComponent extends Component<IProps, IState> { | |||
102 | spellCheck, | 110 | spellCheck, |
103 | onBlur, | 111 | onBlur, |
104 | onFocus, | 112 | onFocus, |
113 | min, | ||
114 | max, | ||
115 | step, | ||
116 | required, | ||
105 | } = this.props; | 117 | } = this.props; |
106 | 118 | ||
107 | const { | 119 | const { |
@@ -120,6 +132,8 @@ class InputComponent extends Component<IProps, IState> { | |||
120 | title={label} | 132 | title={label} |
121 | showLabel={showLabel} | 133 | showLabel={showLabel} |
122 | htmlFor={id} | 134 | htmlFor={id} |
135 | className={classes.label} | ||
136 | isRequired={required} | ||
123 | > | 137 | > |
124 | <div | 138 | <div |
125 | className={classnames({ | 139 | className={classnames({ |
@@ -147,6 +161,10 @@ class InputComponent extends Component<IProps, IState> { | |||
147 | onFocus={onFocus} | 161 | onFocus={onFocus} |
148 | onBlur={onBlur} | 162 | onBlur={onBlur} |
149 | disabled={disabled} | 163 | disabled={disabled} |
164 | onKeyPress={this.onInputKeyPress.bind(this)} | ||
165 | min={min} | ||
166 | max={max} | ||
167 | step={step} | ||
150 | /> | 168 | /> |
151 | {suffix && ( | 169 | {suffix && ( |
152 | <span className={classes.suffix}> | 170 | <span className={classes.suffix}> |
diff --git a/packages/forms/src/input/styles.ts b/packages/forms/src/input/styles.ts index a64d2c340..e2ab30a4f 100644 --- a/packages/forms/src/input/styles.ts +++ b/packages/forms/src/input/styles.ts | |||
@@ -4,12 +4,17 @@ import CSS from 'csstype'; | |||
4 | const prefixStyles = (theme: Theme) => ({ | 4 | const prefixStyles = (theme: Theme) => ({ |
5 | background: theme.inputPrefixBackground, | 5 | background: theme.inputPrefixBackground, |
6 | color: theme.inputPrefixColor, | 6 | color: theme.inputPrefixColor, |
7 | lineHeight: theme.inputHeight, | 7 | lineHeight: `${theme.inputHeight}px`, |
8 | padding: '0 10px', | 8 | padding: '0 10px', |
9 | fontSize: theme.uiFontSize, | 9 | fontSize: theme.uiFontSize, |
10 | }); | 10 | }); |
11 | 11 | ||
12 | export default (theme: Theme) => ({ | 12 | export default (theme: Theme) => ({ |
13 | label: { | ||
14 | '& > div': { | ||
15 | marginTop: 5, | ||
16 | } | ||
17 | }, | ||
13 | disabled: { | 18 | disabled: { |
14 | opacity: theme.inputDisabledOpacity, | 19 | opacity: theme.inputDisabledOpacity, |
15 | }, | 20 | }, |
diff --git a/packages/forms/src/label/index.tsx b/packages/forms/src/label/index.tsx index 36fcfbedf..1b33ba22c 100644 --- a/packages/forms/src/label/index.tsx +++ b/packages/forms/src/label/index.tsx | |||
@@ -9,6 +9,7 @@ import styles from './styles'; | |||
9 | 9 | ||
10 | interface ILabel extends IFormField, React.LabelHTMLAttributes<HTMLLabelElement> { | 10 | interface ILabel extends IFormField, React.LabelHTMLAttributes<HTMLLabelElement> { |
11 | classes: Classes; | 11 | classes: Classes; |
12 | isRequired: boolean; | ||
12 | } | 13 | } |
13 | 14 | ||
14 | class LabelComponent extends Component<ILabel> { | 15 | class LabelComponent extends Component<ILabel> { |
@@ -24,8 +25,11 @@ class LabelComponent extends Component<ILabel> { | |||
24 | className, | 25 | className, |
25 | children, | 26 | children, |
26 | htmlFor, | 27 | htmlFor, |
28 | isRequired, | ||
27 | } = this.props; | 29 | } = this.props; |
28 | 30 | ||
31 | if (!showLabel) return children; | ||
32 | |||
29 | return ( | 33 | return ( |
30 | <label | 34 | <label |
31 | className={classnames({ | 35 | className={classnames({ |
@@ -34,7 +38,7 @@ class LabelComponent extends Component<ILabel> { | |||
34 | htmlFor={htmlFor} | 38 | htmlFor={htmlFor} |
35 | > | 39 | > |
36 | {showLabel && ( | 40 | {showLabel && ( |
37 | <span className={classes.label}>{title}</span> | 41 | <span className={classes.label}>{title}{isRequired && ' *'}</span> |
38 | )} | 42 | )} |
39 | <div className={classes.content}> | 43 | <div className={classes.content}> |
40 | {children} | 44 | {children} |
diff --git a/packages/forms/src/label/styles.ts b/packages/forms/src/label/styles.ts index f3998de04..c64c9b285 100644 --- a/packages/forms/src/label/styles.ts +++ b/packages/forms/src/label/styles.ts | |||
@@ -1,9 +1,7 @@ | |||
1 | import { Theme } from '../../../theme/lib'; | 1 | import { Theme } from '../../../theme/lib'; |
2 | 2 | ||
3 | export default (theme: Theme) => ({ | 3 | export default (theme: Theme) => ({ |
4 | content: { | 4 | content: {}, |
5 | marginTop: 5, | ||
6 | }, | ||
7 | label: { | 5 | label: { |
8 | color: theme.labelColor, | 6 | color: theme.labelColor, |
9 | fontSize: theme.uiFontSize, | 7 | fontSize: theme.uiFontSize, |
diff --git a/packages/forms/src/select/index.tsx b/packages/forms/src/select/index.tsx index 4a9e3c56e..0e5ded176 100644 --- a/packages/forms/src/select/index.tsx +++ b/packages/forms/src/select/index.tsx | |||
@@ -56,6 +56,11 @@ const styles = (theme: Theme) => ({ | |||
56 | textAlign: 'left', | 56 | textAlign: 'left', |
57 | color: theme.selectColor, | 57 | color: theme.selectColor, |
58 | }, | 58 | }, |
59 | label: { | ||
60 | '& > div': { | ||
61 | marginTop: 5, | ||
62 | } | ||
63 | }, | ||
59 | popup: { | 64 | popup: { |
60 | opacity: 0, | 65 | opacity: 0, |
61 | height: 0, | 66 | height: 0, |
@@ -306,6 +311,7 @@ class SelectComponent extends Component<IProps> { | |||
306 | showLabel, | 311 | showLabel, |
307 | showSearch, | 312 | showSearch, |
308 | onChange, | 313 | onChange, |
314 | required, | ||
309 | } = this.props; | 315 | } = this.props; |
310 | 316 | ||
311 | const { | 317 | const { |
@@ -334,6 +340,8 @@ class SelectComponent extends Component<IProps> { | |||
334 | title={label} | 340 | title={label} |
335 | showLabel={showLabel} | 341 | showLabel={showLabel} |
336 | htmlFor={id} | 342 | htmlFor={id} |
343 | className={classes.label} | ||
344 | isRequired={required} | ||
337 | > | 345 | > |
338 | <div | 346 | <div |
339 | className={classnames({ | 347 | className={classnames({ |
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx index 6487f1d07..d84508a5f 100644 --- a/packages/forms/src/toggle/index.tsx +++ b/packages/forms/src/toggle/index.tsx | |||
@@ -1,7 +1,7 @@ | |||
1 | import { Theme } from '@meetfranz/theme'; | 1 | import { Theme } from '@meetfranz/theme'; |
2 | import classnames from 'classnames'; | 2 | import classnames from 'classnames'; |
3 | import CSS from 'csstype'; | 3 | import CSS from 'csstype'; |
4 | import React, { Component, createRef } from 'react'; | 4 | import React, { Component } from 'react'; |
5 | import injectStyle from 'react-jss'; | 5 | import injectStyle from 'react-jss'; |
6 | 6 | ||
7 | import { IFormField, IWithStyle, Omit } from '../typings/generic'; | 7 | import { IFormField, IWithStyle, Omit } from '../typings/generic'; |
@@ -45,11 +45,11 @@ const styles = (theme: Theme) => ({ | |||
45 | }, | 45 | }, |
46 | toggleLabel: { | 46 | toggleLabel: { |
47 | display: 'flex', | 47 | display: 'flex', |
48 | alignItems: 'center', | ||
48 | 49 | ||
49 | '& > span': { | 50 | '& > span': { |
50 | order: 1, | 51 | order: 1, |
51 | marginLeft: 15, | 52 | marginLeft: 15, |
52 | marginTop: 2, | ||
53 | }, | 53 | }, |
54 | }, | 54 | }, |
55 | }); | 55 | }); |
diff --git a/packages/forms/src/typings/generic.ts b/packages/forms/src/typings/generic.ts index b7f2fc452..9688ce2c7 100644 --- a/packages/forms/src/typings/generic.ts +++ b/packages/forms/src/typings/generic.ts | |||
@@ -5,6 +5,7 @@ export interface IFormField { | |||
5 | showLabel?: boolean; | 5 | showLabel?: boolean; |
6 | label?: string; | 6 | label?: string; |
7 | error?: string; | 7 | error?: string; |
8 | required?: boolean; | ||
8 | } | 9 | } |
9 | 10 | ||
10 | export interface IWithStyle { | 11 | export interface IWithStyle { |
diff --git a/packages/theme/package.json b/packages/theme/package.json index 5c21a787f..642904089 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json | |||
@@ -1,6 +1,6 @@ | |||
1 | { | 1 | { |
2 | "name": "@meetfranz/theme", | 2 | "name": "@meetfranz/theme", |
3 | "version": "1.0.9", | 3 | "version": "1.0.13", |
4 | "description": "Theme configuration for Franz", | 4 | "description": "Theme configuration for Franz", |
5 | "author": "Stefan Malzner <stefan@adlk.io>", | 5 | "author": "Stefan Malzner <stefan@adlk.io>", |
6 | "homepage": "https://github.com/meetfranz/franz", | 6 | "homepage": "https://github.com/meetfranz/franz", |
@@ -25,5 +25,5 @@ | |||
25 | "dependencies": { | 25 | "dependencies": { |
26 | "color": "^3.1.0" | 26 | "color": "^3.1.0" |
27 | }, | 27 | }, |
28 | "gitHead": "14b151cad6a5a849bb476aaa3fc53bf1eead7f4b" | 28 | "gitHead": "e9b9079dc921e85961954727a7b2a8eabe5b9798" |
29 | } | 29 | } |
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts index 3a56719b2..fd04b106c 100644 --- a/packages/theme/src/themes/dark/index.ts +++ b/packages/theme/src/themes/dark/index.ts | |||
@@ -1,4 +1,5 @@ | |||
1 | import color from 'color'; | 1 | import color from 'color'; |
2 | import { merge, cloneDeep } from 'lodash'; | ||
2 | 3 | ||
3 | import * as defaultStyles from '../default'; | 4 | import * as defaultStyles from '../default'; |
4 | import * as legacyStyles from '../legacy'; | 5 | import * as legacyStyles from '../legacy'; |
@@ -63,3 +64,69 @@ export const selectSearchColor = inputBackground; | |||
63 | 64 | ||
64 | // Modal | 65 | // Modal |
65 | export const colorModalOverlayBackground = color(legacyStyles.darkThemeBlack).alpha(0.8).rgb().string(); | 66 | export const colorModalOverlayBackground = color(legacyStyles.darkThemeBlack).alpha(0.8).rgb().string(); |
67 | |||
68 | // Services | ||
69 | export const services = merge({}, defaultStyles.services, { | ||
70 | listItems: { | ||
71 | borderColor: legacyStyles.darkThemeGrayDarker, | ||
72 | hoverBgColor: legacyStyles.darkThemeGrayDarker, | ||
73 | disabled: { | ||
74 | color: legacyStyles.darkThemeGray, | ||
75 | }, | ||
76 | }, | ||
77 | }); | ||
78 | |||
79 | // Service Icon | ||
80 | export const serviceIcon = merge({}, defaultStyles.serviceIcon, { | ||
81 | isCustom: { | ||
82 | border: `1px solid ${legacyStyles.darkThemeGrayDark}`, | ||
83 | }, | ||
84 | }); | ||
85 | |||
86 | // Workspaces | ||
87 | const drawerBg = color(colorBackground).lighten(0.3).hex(); | ||
88 | |||
89 | export const workspaces = merge({}, defaultStyles.workspaces, { | ||
90 | settings: { | ||
91 | listItems: cloneDeep(services.listItems), | ||
92 | }, | ||
93 | drawer: { | ||
94 | background: drawerBg, | ||
95 | addButton: { | ||
96 | color: legacyStyles.darkThemeGrayLighter, | ||
97 | hoverColor: legacyStyles.darkThemeGraySmoke, | ||
98 | }, | ||
99 | listItem: { | ||
100 | border: color(drawerBg).lighten(0.2).hex(), | ||
101 | hoverBackground: color(drawerBg).lighten(0.2).hex(), | ||
102 | activeBackground: defaultStyles.brandPrimary, | ||
103 | name: { | ||
104 | color: colorText, | ||
105 | activeColor: 'white', | ||
106 | }, | ||
107 | services: { | ||
108 | color: color(colorText).darken(0.5).hex(), | ||
109 | active: color(defaultStyles.brandPrimary).lighten(0.5).hex(), | ||
110 | }, | ||
111 | }, | ||
112 | }, | ||
113 | }); | ||
114 | |||
115 | // // Workspace settings | ||
116 | // export const workspaceSettings = merge({}, defaultStyles.workspaceSettings, { | ||
117 | // listItemBorderColor: legacyStyles.darkThemeGrayDarker, | ||
118 | // listItemHoverBgColor: legacyStyles.darkThemeGrayDarker, | ||
119 | // }); | ||
120 | // | ||
121 | // // Workspace Drawer | ||
122 | // export const workspaceDrawerBackground = color(colorBackground).lighten(0.3).hex(); | ||
123 | // export const workspaceDrawerAddButtonColor = legacyStyles.darkThemeGrayLighter; | ||
124 | // export const workspaceDrawerAddButtonHoverColor = legacyStyles.darkThemeGraySmoke; | ||
125 | // export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).lighten(0.2).hex(); | ||
126 | // export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).lighten(0.2).hex(); | ||
127 | // export const workspaceDrawerItemActiveBackground = defaultStyles.brandPrimary; | ||
128 | // export const workspaceDrawerItemNameColor = colorText; | ||
129 | // export const workspaceDrawerItemNameActiveColor = 'white'; | ||
130 | // export const workspaceDrawerServicesColor = color(colorText).darken(0.5).hex(); | ||
131 | // export const workspaceDrawerServicesActiveColor = color(defaultStyles.brandPrimary).lighten(0.5).hex(); | ||
132 | // | ||
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts index 8a71e61cf..d0493b82f 100644 --- a/packages/theme/src/themes/default/index.ts +++ b/packages/theme/src/themes/default/index.ts | |||
@@ -1,4 +1,5 @@ | |||
1 | import color from 'color'; | 1 | import color from 'color'; |
2 | import { cloneDeep } from 'lodash'; | ||
2 | 3 | ||
3 | import * as legacyStyles from '../legacy'; | 4 | import * as legacyStyles from '../legacy'; |
4 | 5 | ||
@@ -42,7 +43,7 @@ export const colorWebviewLoaderBackground = color(legacyStyles.themeGrayLighter) | |||
42 | // Input | 43 | // Input |
43 | export const labelColor = legacyStyles.themeGrayLight; | 44 | export const labelColor = legacyStyles.themeGrayLight; |
44 | export const inputColor = legacyStyles.themeGray; | 45 | export const inputColor = legacyStyles.themeGray; |
45 | export const inputHeight = '35px'; | 46 | export const inputHeight = 40; |
46 | export const inputBackground = legacyStyles.themeGrayLightest; | 47 | export const inputBackground = legacyStyles.themeGrayLightest; |
47 | export const inputBorder = `1px solid ${legacyStyles.themeGrayLighter}`; | 48 | export const inputBorder = `1px solid ${legacyStyles.themeGrayLighter}`; |
48 | export const inputModifierColor = legacyStyles.themeGrayLight; | 49 | export const inputModifierColor = legacyStyles.themeGrayLight; |
@@ -108,6 +109,8 @@ export const buttonInvertedBackground = 'none'; | |||
108 | export const buttonInvertedTextColor = brandPrimary; | 109 | export const buttonInvertedTextColor = brandPrimary; |
109 | export const buttonInvertedBorder = `1px solid ${brandPrimary}`; | 110 | export const buttonInvertedBorder = `1px solid ${brandPrimary}`; |
110 | 111 | ||
112 | export const buttonHeight = inputHeight; | ||
113 | |||
111 | export const buttonLoaderColor = { | 114 | export const buttonLoaderColor = { |
112 | primary: '#FFF', | 115 | primary: '#FFF', |
113 | secondary: buttonSecondaryTextColor, | 116 | secondary: buttonSecondaryTextColor, |
@@ -140,3 +143,80 @@ export const badgeBorderRadius = 50; | |||
140 | 143 | ||
141 | // Modal | 144 | // Modal |
142 | export const colorModalOverlayBackground = color('#000').alpha(0.5).rgb().string(); | 145 | export const colorModalOverlayBackground = color('#000').alpha(0.5).rgb().string(); |
146 | |||
147 | // Services | ||
148 | export const services = { | ||
149 | listItems: { | ||
150 | padding: 10, | ||
151 | height: 57, | ||
152 | borderColor: legacyStyles.themeGrayLightest, | ||
153 | hoverBgColor: legacyStyles.themeGrayLightest, | ||
154 | disabled: { | ||
155 | color: legacyStyles.themeGrayLight, | ||
156 | }, | ||
157 | }, | ||
158 | }; | ||
159 | |||
160 | // Service Icon | ||
161 | export const serviceIcon = { | ||
162 | width: 35, | ||
163 | isCustom: { | ||
164 | border: `1px solid ${legacyStyles.themeGrayLighter}`, | ||
165 | borderRadius: legacyStyles.themeBorderRadius, | ||
166 | width: 37, | ||
167 | }, | ||
168 | }; | ||
169 | |||
170 | // Workspaces | ||
171 | const drawerBg = color(colorBackground).lighten(0.1).hex(); | ||
172 | |||
173 | export const workspaces = { | ||
174 | settings: { | ||
175 | listItems: cloneDeep(services.listItems), | ||
176 | }, | ||
177 | drawer: { | ||
178 | width: 300, | ||
179 | padding: 20, | ||
180 | background: drawerBg, | ||
181 | buttons: { | ||
182 | color: color(legacyStyles.themeGrayLight).lighten(0.1).hex(), | ||
183 | hoverColor: legacyStyles.themeGrayLight, | ||
184 | }, | ||
185 | listItem: { | ||
186 | hoverBackground: color(drawerBg).darken(0.01).hex(), | ||
187 | activeBackground: legacyStyles.themeGrayLightest, | ||
188 | border: color(drawerBg).darken(0.05).hex(), | ||
189 | name: { | ||
190 | color: colorText, | ||
191 | activeColor: colorText, | ||
192 | }, | ||
193 | services: { | ||
194 | color: color(colorText).lighten(1.5).hex(), | ||
195 | active: color(colorText).lighten(1.5).hex(), | ||
196 | }, | ||
197 | }, | ||
198 | }, | ||
199 | switchingIndicator: { | ||
200 | spinnerColor: 'white', | ||
201 | }, | ||
202 | }; | ||
203 | |||
204 | // export const workspaceSettings = { | ||
205 | // listItemHeight: 57, | ||
206 | // listItemBorderColor: legacyStyles.themeGrayLightest, | ||
207 | // listItemHoverBgColor: legacyStyles.themeGrayLightest, | ||
208 | // }; | ||
209 | // | ||
210 | // // Workspace Drawer | ||
211 | // export const workspaceDrawerWidth = 300; | ||
212 | // export const workspaceDrawerPadding = 20; | ||
213 | // export const workspaceDrawerBackground = color(colorBackground).lighten(0.1).hex(); | ||
214 | // export const workspaceDrawerAddButtonColor = legacyStyles.themeGrayLight; | ||
215 | // export const workspaceDrawerAddButtonHoverColor = color(legacyStyles.themeGrayLight).lighten(0.1).hex(); | ||
216 | // export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).darken(0.01).hex(); | ||
217 | // export const workspaceDrawerItemActiveBackground = legacyStyles.themeGrayLightest; | ||
218 | // export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).darken(0.05).hex(); | ||
219 | // export const workspaceDrawerItemNameColor = colorText; | ||
220 | // export const workspaceDrawerItemNameActiveColor = colorText; | ||
221 | // export const workspaceDrawerServicesColor = color(colorText).lighten(1.5).hex(); | ||
222 | // export const workspaceDrawerServicesActiveColor = workspaceDrawerServicesColor; | ||
diff --git a/packages/typings/package.json b/packages/typings/package.json index 54257c54c..5da8389d6 100644 --- a/packages/typings/package.json +++ b/packages/typings/package.json | |||
@@ -1,6 +1,6 @@ | |||
1 | { | 1 | { |
2 | "name": "@meetfranz/typings", | 2 | "name": "@meetfranz/typings", |
3 | "version": "0.0.7", | 3 | "version": "0.0.11", |
4 | "description": "TypeScript typings for internal and external projects", | 4 | "description": "TypeScript typings for internal and external projects", |
5 | "author": "Stefan Malzner <stefan@adlk.io>", | 5 | "author": "Stefan Malzner <stefan@adlk.io>", |
6 | "homepage": "https://github.com/meetfranz/franz", | 6 | "homepage": "https://github.com/meetfranz/franz", |
@@ -18,5 +18,5 @@ | |||
18 | "bugs": { | 18 | "bugs": { |
19 | "url": "https://github.com/meetfranz/franz/issues" | 19 | "url": "https://github.com/meetfranz/franz/issues" |
20 | }, | 20 | }, |
21 | "gitHead": "14b151cad6a5a849bb476aaa3fc53bf1eead7f4b" | 21 | "gitHead": "e9b9079dc921e85961954727a7b2a8eabe5b9798" |
22 | } | 22 | } |
diff --git a/packages/ui/package.json b/packages/ui/package.json index 62a1e5a6e..514b2cc7c 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json | |||
@@ -1,6 +1,6 @@ | |||
1 | { | 1 | { |
2 | "name": "@meetfranz/ui", | 2 | "name": "@meetfranz/ui", |
3 | "version": "0.0.4", | 3 | "version": "0.0.8", |
4 | "description": "React UI components for Franz", | 4 | "description": "React UI components for Franz", |
5 | "main": "lib/index.js", | 5 | "main": "lib/index.js", |
6 | "scripts": { | 6 | "scripts": { |
@@ -25,7 +25,7 @@ | |||
25 | "dependencies": { | 25 | "dependencies": { |
26 | "@mdi/js": "^3.3.92", | 26 | "@mdi/js": "^3.3.92", |
27 | "@mdi/react": "^1.1.0", | 27 | "@mdi/react": "^1.1.0", |
28 | "@meetfranz/theme": "^1.0.7", | 28 | "@meetfranz/theme": "^1.0.13", |
29 | "react-loader": "^2.4.5" | 29 | "react-loader": "^2.4.5" |
30 | }, | 30 | }, |
31 | "peerDependencies": { | 31 | "peerDependencies": { |
@@ -34,5 +34,5 @@ | |||
34 | "react-dom": "16.7.0", | 34 | "react-dom": "16.7.0", |
35 | "react-jss": "^8.6.1" | 35 | "react-jss": "^8.6.1" |
36 | }, | 36 | }, |
37 | "gitHead": "14b151cad6a5a849bb476aaa3fc53bf1eead7f4b" | 37 | "gitHead": "e9b9079dc921e85961954727a7b2a8eabe5b9798" |
38 | } | 38 | } |
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 53ed16341..9066a623e 100644 --- a/packages/ui/src/infobox/index.tsx +++ b/packages/ui/src/infobox/index.tsx | |||
@@ -11,10 +11,12 @@ 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; |
17 | children: React.ReactNode; | 18 | children: React.ReactNode; |
19 | className: string; | ||
18 | } | 20 | } |
19 | 21 | ||
20 | interface IState { | 22 | interface IState { |
@@ -45,6 +47,7 @@ const styles = (theme: Theme) => ({ | |||
45 | wrapper: { | 47 | wrapper: { |
46 | position: 'relative', | 48 | position: 'relative', |
47 | overflow: 'hidden', | 49 | overflow: 'hidden', |
50 | height: 'auto', | ||
48 | }, | 51 | }, |
49 | infobox: { | 52 | infobox: { |
50 | alignItems: 'center', | 53 | alignItems: 'center', |
@@ -128,6 +131,11 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
128 | }, 3000); | 131 | }, 3000); |
129 | } | 132 | } |
130 | 133 | ||
134 | componentWillUnmount(): void { | ||
135 | const { onUnmount } = this.props; | ||
136 | if (onUnmount) onUnmount(); | ||
137 | } | ||
138 | |||
131 | render() { | 139 | render() { |
132 | const { | 140 | const { |
133 | classes, | 141 | classes, |
@@ -138,6 +146,7 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
138 | ctaLoading, | 146 | ctaLoading, |
139 | ctaOnClick, | 147 | ctaOnClick, |
140 | dismissable, | 148 | dismissable, |
149 | className, | ||
141 | } = this.props; | 150 | } = this.props; |
142 | 151 | ||
143 | const { | 152 | const { |
@@ -150,7 +159,10 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
150 | } | 159 | } |
151 | 160 | ||
152 | return ( | 161 | return ( |
153 | <div className={classes.wrapper}> | 162 | <div className={classnames({ |
163 | [classes.wrapper]: true, | ||
164 | [`${className}`]: className, | ||
165 | })}> | ||
154 | <div | 166 | <div |
155 | className={classnames({ | 167 | className={classnames({ |
156 | [classes.infobox]: true, | 168 | [classes.infobox]: true, |
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> |