diff options
author | vantezzen <properly@protonmail.com> | 2019-09-07 15:50:23 +0200 |
---|---|---|
committer | vantezzen <properly@protonmail.com> | 2019-09-07 15:50:23 +0200 |
commit | e7a74514c1e7c3833dfdcf5900cb87f9e6e8354e (patch) | |
tree | b8314e4155503b135dcb07e8b4a0e847e25c19cf /packages | |
parent | Update CHANGELOG.md (diff) | |
parent | Update CHANGELOG.md (diff) | |
download | ferdium-app-e7a74514c1e7c3833dfdcf5900cb87f9e6e8354e.tar.gz ferdium-app-e7a74514c1e7c3833dfdcf5900cb87f9e6e8354e.tar.zst ferdium-app-e7a74514c1e7c3833dfdcf5900cb87f9e6e8354e.zip |
Merge branch 'master' of https://github.com/meetfranz/franz into franz-5.3.0
Diffstat (limited to 'packages')
-rw-r--r-- | packages/forms/package.json | 4 | ||||
-rw-r--r-- | packages/forms/src/button/index.tsx | 12 | ||||
-rw-r--r-- | packages/theme/src/themes/dark/index.ts | 27 | ||||
-rw-r--r-- | packages/theme/src/themes/default/index.ts | 30 | ||||
-rw-r--r-- | packages/ui/package.json | 4 | ||||
-rw-r--r-- | packages/ui/src/badge/ProBadge.tsx | 8 | ||||
-rw-r--r-- | packages/ui/src/icon/index.tsx | 12 | ||||
-rw-r--r-- | packages/ui/src/infobox/index.tsx | 5 |
8 files changed, 76 insertions, 26 deletions
diff --git a/packages/forms/package.json b/packages/forms/package.json index d50f4c756..bb76462d8 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.16", | 3 | "version": "1.1.0", |
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": { |
@@ -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": "9f2ab40b7602bc3df26ebb093b484b9917768f69" | 38 | "gitHead": "e1e46986d902adc4c19ee009016290f9733a7d61" |
39 | } | 39 | } |
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx index 3f129d0ff..b81154a43 100644 --- a/packages/forms/src/button/index.tsx +++ b/packages/forms/src/button/index.tsx | |||
@@ -1,4 +1,3 @@ | |||
1 | import * as mdiIcons from '@mdi/js'; | ||
2 | import Icon from '@mdi/react'; | 1 | import Icon from '@mdi/react'; |
3 | import { Theme } from '@meetfranz/theme'; | 2 | import { Theme } from '@meetfranz/theme'; |
4 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
@@ -21,7 +20,7 @@ interface IProps extends IFormField, IWithStyle { | |||
21 | stretch?: boolean; | 20 | stretch?: boolean; |
22 | loaded?: boolean; | 21 | loaded?: boolean; |
23 | busy?: boolean; | 22 | busy?: boolean; |
24 | icon?: keyof typeof mdiIcons; | 23 | icon?: string; |
25 | href?: string; | 24 | href?: string; |
26 | target?: string; | 25 | target?: string; |
27 | } | 26 | } |
@@ -175,7 +174,7 @@ class ButtonComponent extends Component<IProps> { | |||
175 | onClick, | 174 | onClick, |
176 | buttonType, | 175 | buttonType, |
177 | loaded, | 176 | loaded, |
178 | icon: iconName, | 177 | icon, |
179 | busy: busyProp, | 178 | busy: busyProp, |
180 | href, | 179 | href, |
181 | target, | 180 | target, |
@@ -185,13 +184,6 @@ class ButtonComponent extends Component<IProps> { | |||
185 | busy, | 184 | busy, |
186 | } = this.state; | 185 | } = this.state; |
187 | 186 | ||
188 | let icon = ''; | ||
189 | if (iconName && mdiIcons[iconName]) { | ||
190 | icon = mdiIcons[iconName]; | ||
191 | } else if (iconName && !mdiIcons[iconName]) { | ||
192 | console.warn(`Icon '${iconName}' was not found`); | ||
193 | } | ||
194 | |||
195 | let showLoader = false; | 187 | let showLoader = false; |
196 | if (loaded) { | 188 | if (loaded) { |
197 | showLoader = !loaded; | 189 | showLoader = !loaded; |
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts index bd9f001e8..e94f54c55 100644 --- a/packages/theme/src/themes/dark/index.ts +++ b/packages/theme/src/themes/dark/index.ts | |||
@@ -11,6 +11,8 @@ export const colorBackgroundSubscriptionContainer = legacyStyles.themeBrandInfo; | |||
11 | export const colorHeadline = legacyStyles.darkThemeTextColor; | 11 | export const colorHeadline = legacyStyles.darkThemeTextColor; |
12 | export const colorText = legacyStyles.darkThemeTextColor; | 12 | export const colorText = legacyStyles.darkThemeTextColor; |
13 | 13 | ||
14 | export const defaultContentBorder = legacyStyles.themeGrayDark; | ||
15 | |||
14 | // Loader | 16 | // Loader |
15 | export const colorFullscreenLoaderSpinner = '#FFF'; | 17 | export const colorFullscreenLoaderSpinner = '#FFF'; |
16 | export const colorWebviewLoaderBackground = color(legacyStyles.darkThemeGrayDarkest).alpha(0.5).rgb().string(); | 18 | export const colorWebviewLoaderBackground = color(legacyStyles.darkThemeGrayDarkest).alpha(0.5).rgb().string(); |
@@ -118,3 +120,28 @@ export const announcements = merge({}, defaultStyles.announcements, { | |||
118 | background: legacyStyles.darkThemeGrayDark, | 120 | background: legacyStyles.darkThemeGrayDark, |
119 | }, | 121 | }, |
120 | }); | 122 | }); |
123 | |||
124 | // Signup | ||
125 | export const signup = merge({}, defaultStyles.signup, { | ||
126 | pricing: { | ||
127 | feature: { | ||
128 | background: legacyStyles.darkThemeGrayLight, | ||
129 | border: color(legacyStyles.darkThemeGrayLight).lighten(0.2).hex(), | ||
130 | }, | ||
131 | }, | ||
132 | }); | ||
133 | |||
134 | // Todos | ||
135 | export const todos = merge({}, defaultStyles.todos, { | ||
136 | todosLayer: { | ||
137 | borderLeftColor: legacyStyles.darkThemeGrayDarker, | ||
138 | }, | ||
139 | toggleButton: { | ||
140 | background: defaultStyles.styleTypes.primary.accent, | ||
141 | textColor: defaultStyles.styleTypes.primary.contrast, | ||
142 | shadowColor: 'rgba(0, 0, 0, 0.2)', | ||
143 | }, | ||
144 | dragIndicator: { | ||
145 | background: legacyStyles.themeGrayLight, | ||
146 | }, | ||
147 | }); | ||
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts index 53f810f00..79a6d676f 100644 --- a/packages/theme/src/themes/default/index.ts +++ b/packages/theme/src/themes/default/index.ts | |||
@@ -28,6 +28,8 @@ export const colorHeadline = legacyStyles.themeGrayDark; | |||
28 | 28 | ||
29 | export const colorText = legacyStyles.themeTextColor; | 29 | export const colorText = legacyStyles.themeTextColor; |
30 | 30 | ||
31 | export const defaultContentBorder = color(legacyStyles.themeGrayLighter).darken(0.1).rgb().string(); | ||
32 | |||
31 | // Subscription Container Component | 33 | // Subscription Container Component |
32 | export const colorSubscriptionContainerBackground = 'none'; | 34 | export const colorSubscriptionContainerBackground = 'none'; |
33 | export const colorSubscriptionContainerBorder = `1px solid ${brandPrimary}`; | 35 | export const colorSubscriptionContainerBorder = `1px solid ${brandPrimary}`; |
@@ -207,3 +209,31 @@ export const announcements = { | |||
207 | background: legacyStyles.themeGrayLightest, | 209 | background: legacyStyles.themeGrayLightest, |
208 | }, | 210 | }, |
209 | }; | 211 | }; |
212 | |||
213 | // Signup | ||
214 | export const signup = { | ||
215 | pricing: { | ||
216 | feature: { | ||
217 | background: legacyStyles.themeGrayLightest, | ||
218 | border: legacyStyles.themeGrayLighter, | ||
219 | }, | ||
220 | }, | ||
221 | }; | ||
222 | |||
223 | // Todos | ||
224 | export const todos = { | ||
225 | todosLayer: { | ||
226 | borderLeftColor: legacyStyles.themeGrayLighter, | ||
227 | }, | ||
228 | toggleButton: { | ||
229 | background: styleTypes.primary.accent, | ||
230 | textColor: styleTypes.primary.contrast, | ||
231 | shadowColor: 'rgba(0, 0, 0, 0.2)', | ||
232 | }, | ||
233 | dragIndicator: { | ||
234 | background: legacyStyles.themeGrayLight, | ||
235 | }, | ||
236 | resizeHandler: { | ||
237 | backgroundHover: styleTypes.primary.accent, | ||
238 | }, | ||
239 | }; | ||
diff --git a/packages/ui/package.json b/packages/ui/package.json index a851ed9cf..4f42b21b5 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.9", | 3 | "version": "1.0.0", |
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": { |
@@ -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": "9f2ab40b7602bc3df26ebb093b484b9917768f69" | 37 | "gitHead": "e1e46986d902adc4c19ee009016290f9733a7d61" |
38 | } | 38 | } |
diff --git a/packages/ui/src/badge/ProBadge.tsx b/packages/ui/src/badge/ProBadge.tsx index 612e23210..5cc41f5b2 100644 --- a/packages/ui/src/badge/ProBadge.tsx +++ b/packages/ui/src/badge/ProBadge.tsx | |||
@@ -1,15 +1,17 @@ | |||
1 | import { mdiStar } from '@mdi/js'; | ||
1 | import { Theme } from '@meetfranz/theme'; | 2 | import { Theme } from '@meetfranz/theme'; |
2 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
3 | import React, { Component } from 'react'; | 4 | import React, { Component } from 'react'; |
4 | import injectStyle from 'react-jss'; | 5 | import injectStyle from 'react-jss'; |
5 | 6 | ||
6 | import { Icon, Badge } from '../'; | 7 | import { Badge, Icon } from '../'; |
7 | import { IWithStyle } from '../typings/generic'; | 8 | import { IWithStyle } from '../typings/generic'; |
8 | 9 | ||
9 | interface IProps extends IWithStyle { | 10 | interface IProps extends IWithStyle { |
10 | badgeClasses?: string; | 11 | badgeClasses?: string; |
11 | iconClasses?: string; | 12 | iconClasses?: string; |
12 | inverted?: boolean; | 13 | inverted?: boolean; |
14 | className?: string; | ||
13 | } | 15 | } |
14 | 16 | ||
15 | const styles = (theme: Theme) => ({ | 17 | const styles = (theme: Theme) => ({ |
@@ -37,6 +39,7 @@ class ProBadgeComponent extends Component<IProps> { | |||
37 | badgeClasses, | 39 | badgeClasses, |
38 | iconClasses, | 40 | iconClasses, |
39 | inverted, | 41 | inverted, |
42 | className, | ||
40 | } = this.props; | 43 | } = this.props; |
41 | 44 | ||
42 | return ( | 45 | return ( |
@@ -46,10 +49,11 @@ class ProBadgeComponent extends Component<IProps> { | |||
46 | classes.badge, | 49 | classes.badge, |
47 | inverted && classes.invertedBadge, | 50 | inverted && classes.invertedBadge, |
48 | badgeClasses, | 51 | badgeClasses, |
52 | className, | ||
49 | ])} | 53 | ])} |
50 | > | 54 | > |
51 | <Icon | 55 | <Icon |
52 | icon="mdiStar" | 56 | icon={mdiStar} |
53 | className={classnames([ | 57 | className={classnames([ |
54 | classes.icon, | 58 | classes.icon, |
55 | inverted && classes.invertedIcon, | 59 | inverted && classes.invertedIcon, |
diff --git a/packages/ui/src/icon/index.tsx b/packages/ui/src/icon/index.tsx index e30d3396d..af467c085 100644 --- a/packages/ui/src/icon/index.tsx +++ b/packages/ui/src/icon/index.tsx | |||
@@ -1,4 +1,3 @@ | |||
1 | import * as mdiIcons from '@mdi/js'; | ||
2 | import MdiIcon from '@mdi/react'; | 1 | import MdiIcon from '@mdi/react'; |
3 | import { Theme } from '@meetfranz/theme'; | 2 | import { Theme } from '@meetfranz/theme'; |
4 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
@@ -8,7 +7,7 @@ import injectStyle from 'react-jss'; | |||
8 | import { IWithStyle } from '../typings/generic'; | 7 | import { IWithStyle } from '../typings/generic'; |
9 | 8 | ||
10 | interface IProps extends IWithStyle { | 9 | interface IProps extends IWithStyle { |
11 | icon: keyof typeof mdiIcons; | 10 | icon: string; |
12 | size?: number; | 11 | size?: number; |
13 | className?: string; | 12 | className?: string; |
14 | } | 13 | } |
@@ -27,16 +26,13 @@ class IconComponent extends Component<IProps> { | |||
27 | render() { | 26 | render() { |
28 | const { | 27 | const { |
29 | classes, | 28 | classes, |
30 | icon: iconName, | 29 | icon, |
31 | size, | 30 | size, |
32 | className, | 31 | className, |
33 | } = this.props; | 32 | } = this.props; |
34 | 33 | ||
35 | let icon = ''; | 34 | if (!icon) { |
36 | if (iconName && mdiIcons[iconName]) { | 35 | console.warn('No Icon specified'); |
37 | icon = mdiIcons[iconName]; | ||
38 | } else if (iconName && !mdiIcons[iconName]) { | ||
39 | console.warn(`Icon '${iconName}' was not found`); | ||
40 | } | 36 | } |
41 | 37 | ||
42 | return ( | 38 | return ( |
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx index 9066a623e..e4c2c5a3e 100644 --- a/packages/ui/src/infobox/index.tsx +++ b/packages/ui/src/infobox/index.tsx | |||
@@ -1,3 +1,4 @@ | |||
1 | import { mdiClose } from '@mdi/js'; | ||
1 | import { Theme } from '@meetfranz/theme'; | 2 | import { Theme } from '@meetfranz/theme'; |
2 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
3 | import React, { Component } from 'react'; | 4 | import React, { Component } from 'react'; |
@@ -48,13 +49,13 @@ const styles = (theme: Theme) => ({ | |||
48 | position: 'relative', | 49 | position: 'relative', |
49 | overflow: 'hidden', | 50 | overflow: 'hidden', |
50 | height: 'auto', | 51 | height: 'auto', |
52 | marginBottom: 30, | ||
51 | }, | 53 | }, |
52 | infobox: { | 54 | infobox: { |
53 | alignItems: 'center', | 55 | alignItems: 'center', |
54 | borderRadius: theme.borderRadiusSmall, | 56 | borderRadius: theme.borderRadiusSmall, |
55 | display: 'flex', | 57 | display: 'flex', |
56 | height: 'auto', | 58 | height: 'auto', |
57 | marginBottom: 30, | ||
58 | padding: '15px 20px', | 59 | padding: '15px 20px', |
59 | top: 0, | 60 | top: 0, |
60 | transition: 'all 0.5s', | 61 | transition: 'all 0.5s', |
@@ -192,7 +193,7 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
192 | onClick={this.dismiss.bind(this)} | 193 | onClick={this.dismiss.bind(this)} |
193 | className={classes.close} | 194 | className={classes.close} |
194 | > | 195 | > |
195 | <Icon icon="mdiClose" /> | 196 | <Icon icon={mdiClose} /> |
196 | </button> | 197 | </button> |
197 | )} | 198 | )} |
198 | </div> | 199 | </div> |