diff options
author | 2019-04-07 19:50:40 +0200 | |
---|---|---|
committer | 2019-04-07 19:50:40 +0200 | |
commit | b3afb9f45d47ebc352b28eb106b22fffc2f17707 (patch) | |
tree | 1cdcd243eba4e797c75747379f2ed8ad8a392cdc | |
parent | refactor workspace table css away from legacy styles (diff) | |
download | ferdium-app-b3afb9f45d47ebc352b28eb106b22fffc2f17707.tar.gz ferdium-app-b3afb9f45d47ebc352b28eb106b22fffc2f17707.tar.zst ferdium-app-b3afb9f45d47ebc352b28eb106b22fffc2f17707.zip |
render workspace service list like services + toggle
-rw-r--r-- | packages/forms/src/input/index.tsx | 1 | ||||
-rw-r--r-- | packages/forms/src/input/styles.ts | 5 | ||||
-rw-r--r-- | packages/forms/src/label/styles.ts | 4 | ||||
-rw-r--r-- | packages/forms/src/select/index.tsx | 6 | ||||
-rw-r--r-- | packages/forms/src/toggle/index.tsx | 4 | ||||
-rw-r--r-- | packages/theme/src/themes/dark/index.ts | 52 | ||||
-rw-r--r-- | packages/theme/src/themes/default/index.ts | 57 | ||||
-rw-r--r-- | src/components/ui/ServiceIcon.js | 67 | ||||
-rw-r--r-- | src/features/workspaces/components/EditWorkspaceForm.js | 4 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspaceItem.js | 6 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspaceServiceListItem.js (renamed from src/features/workspaces/components/ServiceListItem.js) | 6 |
11 files changed, 197 insertions, 15 deletions
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx index f89c91be5..e410f8fef 100644 --- a/packages/forms/src/input/index.tsx +++ b/packages/forms/src/input/index.tsx | |||
@@ -131,6 +131,7 @@ class InputComponent extends Component<IProps, IState> { | |||
131 | title={label} | 131 | title={label} |
132 | showLabel={showLabel} | 132 | showLabel={showLabel} |
133 | htmlFor={id} | 133 | htmlFor={id} |
134 | className={classes.label} | ||
134 | > | 135 | > |
135 | <div | 136 | <div |
136 | className={classnames({ | 137 | className={classnames({ |
diff --git a/packages/forms/src/input/styles.ts b/packages/forms/src/input/styles.ts index a64d2c340..2f7ea65f2 100644 --- a/packages/forms/src/input/styles.ts +++ b/packages/forms/src/input/styles.ts | |||
@@ -10,6 +10,11 @@ const prefixStyles = (theme: Theme) => ({ | |||
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/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..cfbe91dda 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, |
@@ -334,6 +339,7 @@ class SelectComponent extends Component<IProps> { | |||
334 | title={label} | 339 | title={label} |
335 | showLabel={showLabel} | 340 | showLabel={showLabel} |
336 | htmlFor={id} | 341 | htmlFor={id} |
342 | className={classes.label} | ||
337 | > | 343 | > |
338 | <div | 344 | <div |
339 | className={classnames({ | 345 | 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/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts index a9d1e1b46..73ffa7f5e 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'; |
@@ -64,11 +65,51 @@ export const selectSearchColor = inputBackground; | |||
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(); |
66 | 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 | // Workspaces | ||
80 | const drawerBg = color(colorBackground).lighten(0.3).hex(); | ||
81 | |||
82 | export const workspaces = merge({}, defaultStyles.workspaces, { | ||
83 | settings: { | ||
84 | listItems: cloneDeep(services.listItems), | ||
85 | }, | ||
86 | drawer: { | ||
87 | background: drawerBg, | ||
88 | addButton: { | ||
89 | color: legacyStyles.darkThemeGrayLighter, | ||
90 | hoverColor: legacyStyles.darkThemeGraySmoke, | ||
91 | }, | ||
92 | listItem: { | ||
93 | border: color(drawerBg).lighten(0.2).hex(), | ||
94 | hoverBackground: color(drawerBg).lighten(0.2).hex(), | ||
95 | activeBackground: defaultStyles.brandPrimary, | ||
96 | name: { | ||
97 | color: colorText, | ||
98 | activeColor: 'white', | ||
99 | }, | ||
100 | services: { | ||
101 | color: color(colorText).darken(0.5).hex(), | ||
102 | active: color(defaultStyles.brandPrimary).lighten(0.5).hex(), | ||
103 | }, | ||
104 | }, | ||
105 | }, | ||
106 | }); | ||
107 | |||
67 | // Workspace settings | 108 | // Workspace settings |
68 | export const workspaceSettings = { | 109 | export const workspaceSettings = merge({}, defaultStyles.workspaceSettings, { |
69 | listItemBorderColor: legacyStyles.darkThemeGrayDarker, | 110 | listItemBorderColor: legacyStyles.darkThemeGrayDarker, |
70 | listItemHoverBgColor: legacyStyles.darkThemeGrayDarker, | 111 | listItemHoverBgColor: legacyStyles.darkThemeGrayDarker, |
71 | }; | 112 | }); |
72 | 113 | ||
73 | // Workspace Drawer | 114 | // Workspace Drawer |
74 | export const workspaceDrawerBackground = color(colorBackground).lighten(0.3).hex(); | 115 | export const workspaceDrawerBackground = color(colorBackground).lighten(0.3).hex(); |
@@ -81,3 +122,10 @@ export const workspaceDrawerItemNameColor = colorText; | |||
81 | export const workspaceDrawerItemNameActiveColor = 'white'; | 122 | export const workspaceDrawerItemNameActiveColor = 'white'; |
82 | export const workspaceDrawerServicesColor = color(colorText).darken(0.5).hex(); | 123 | export const workspaceDrawerServicesColor = color(colorText).darken(0.5).hex(); |
83 | export const workspaceDrawerServicesActiveColor = color(defaultStyles.brandPrimary).lighten(0.5).hex(); | 124 | export const workspaceDrawerServicesActiveColor = color(defaultStyles.brandPrimary).lighten(0.5).hex(); |
125 | |||
126 | // Service Icon | ||
127 | export const serviceIcon = merge({}, defaultStyles.serviceIcon, { | ||
128 | isCustom: { | ||
129 | border: `1px solid ${legacyStyles.darkThemeGrayDark}`, | ||
130 | }, | ||
131 | }); | ||
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts index e4c74a5c9..d2b9014b4 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 | ||
@@ -143,8 +144,52 @@ export const badgeBorderRadius = 50; | |||
143 | // Modal | 144 | // Modal |
144 | export const colorModalOverlayBackground = color('#000').alpha(0.5).rgb().string(); | 145 | export const colorModalOverlayBackground = color('#000').alpha(0.5).rgb().string(); |
145 | 146 | ||
146 | // Workspace settings | 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 | // Workspaces | ||
161 | const drawerBg = color(colorBackground).lighten(0.1).hex(); | ||
162 | |||
163 | export const workspaces = { | ||
164 | settings: { | ||
165 | listItems: cloneDeep(services.listItems), | ||
166 | }, | ||
167 | drawer: { | ||
168 | width: 300, | ||
169 | padding: 20, | ||
170 | background: drawerBg, | ||
171 | addButton: { | ||
172 | color: legacyStyles.themeGrayLight, | ||
173 | hoverColor: color(legacyStyles.themeGrayLight).lighten(0.1).hex(), | ||
174 | }, | ||
175 | listItem: { | ||
176 | hoverBackground: color(drawerBg).darken(0.01).hex(), | ||
177 | activeBackground: legacyStyles.themeGrayLightest, | ||
178 | border: color(drawerBg).darken(0.05).hex(), | ||
179 | name: { | ||
180 | color: colorText, | ||
181 | activeColor: colorText, | ||
182 | }, | ||
183 | services: { | ||
184 | color: color(colorText).lighten(1.5).hex(), | ||
185 | active: color(colorText).lighten(1.5).hex(), | ||
186 | }, | ||
187 | }, | ||
188 | }, | ||
189 | }; | ||
190 | |||
147 | export const workspaceSettings = { | 191 | export const workspaceSettings = { |
192 | listItemHeight: 57, | ||
148 | listItemBorderColor: legacyStyles.themeGrayLightest, | 193 | listItemBorderColor: legacyStyles.themeGrayLightest, |
149 | listItemHoverBgColor: legacyStyles.themeGrayLightest, | 194 | listItemHoverBgColor: legacyStyles.themeGrayLightest, |
150 | }; | 195 | }; |
@@ -162,3 +207,13 @@ export const workspaceDrawerItemNameColor = colorText; | |||
162 | export const workspaceDrawerItemNameActiveColor = colorText; | 207 | export const workspaceDrawerItemNameActiveColor = colorText; |
163 | export const workspaceDrawerServicesColor = color(colorText).lighten(1.5).hex(); | 208 | export const workspaceDrawerServicesColor = color(colorText).lighten(1.5).hex(); |
164 | export const workspaceDrawerServicesActiveColor = workspaceDrawerServicesColor; | 209 | export const workspaceDrawerServicesActiveColor = workspaceDrawerServicesColor; |
210 | |||
211 | // Service Icon | ||
212 | export const serviceIcon = { | ||
213 | width: 35, | ||
214 | isCustom: { | ||
215 | border: `1px solid ${legacyStyles.themeGrayLighter}`, | ||
216 | borderRadius: legacyStyles.themeBorderRadius, | ||
217 | width: 37, | ||
218 | }, | ||
219 | }; | ||
diff --git a/src/components/ui/ServiceIcon.js b/src/components/ui/ServiceIcon.js new file mode 100644 index 000000000..0b9155a4e --- /dev/null +++ b/src/components/ui/ServiceIcon.js | |||
@@ -0,0 +1,67 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import injectSheet from 'react-jss'; | ||
5 | import classnames from 'classnames'; | ||
6 | |||
7 | import ServiceModel from '../../models/Service'; | ||
8 | |||
9 | const styles = theme => ({ | ||
10 | root: { | ||
11 | height: 'auto', | ||
12 | }, | ||
13 | icon: { | ||
14 | width: theme.serviceIcon.width, | ||
15 | }, | ||
16 | isCustomIcon: { | ||
17 | width: theme.serviceIcon.isCustom.width, | ||
18 | border: theme.serviceIcon.isCustom.border, | ||
19 | borderRadius: theme.serviceIcon.isCustom.borderRadius, | ||
20 | }, | ||
21 | isDisabled: { | ||
22 | filter: 'grayscale(100%)', | ||
23 | opacity: '.5', | ||
24 | }, | ||
25 | }); | ||
26 | |||
27 | @injectSheet(styles) @observer | ||
28 | class ServiceIcon extends Component { | ||
29 | static propTypes = { | ||
30 | classes: PropTypes.object.isRequired, | ||
31 | service: PropTypes.instanceOf(ServiceModel).isRequired, | ||
32 | className: PropTypes.string, | ||
33 | }; | ||
34 | |||
35 | static defaultProps = { | ||
36 | className: '', | ||
37 | }; | ||
38 | |||
39 | render() { | ||
40 | const { | ||
41 | classes, | ||
42 | className, | ||
43 | service, | ||
44 | } = this.props; | ||
45 | |||
46 | return ( | ||
47 | <div | ||
48 | className={classnames([ | ||
49 | classes.root, | ||
50 | className, | ||
51 | ])} | ||
52 | > | ||
53 | <img | ||
54 | src={service.icon} | ||
55 | className={classnames([ | ||
56 | classes.icon, | ||
57 | service.isEnabled ? null : classes.isDisabled, | ||
58 | service.hasCustomIcon ? classes.isCustomIcon : null, | ||
59 | ])} | ||
60 | alt="" | ||
61 | /> | ||
62 | </div> | ||
63 | ); | ||
64 | } | ||
65 | } | ||
66 | |||
67 | export default ServiceIcon; | ||
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js index e4bf44248..bba4485ff 100644 --- a/src/features/workspaces/components/EditWorkspaceForm.js +++ b/src/features/workspaces/components/EditWorkspaceForm.js | |||
@@ -10,7 +10,7 @@ import Workspace from '../models/Workspace'; | |||
10 | import Service from '../../../models/Service'; | 10 | import Service from '../../../models/Service'; |
11 | import Form from '../../../lib/Form'; | 11 | import Form from '../../../lib/Form'; |
12 | import { required } from '../../../helpers/validation-helpers'; | 12 | import { required } from '../../../helpers/validation-helpers'; |
13 | import ServiceListItem from './ServiceListItem'; | 13 | import WorkspaceServiceListItem from './WorkspaceServiceListItem'; |
14 | import Request from '../../../stores/lib/Request'; | 14 | import Request from '../../../stores/lib/Request'; |
15 | import { gaEvent } from '../../../lib/analytics'; | 15 | import { gaEvent } from '../../../lib/analytics'; |
16 | import { GA_CATEGORY_WORKSPACES } from '../index'; | 16 | import { GA_CATEGORY_WORKSPACES } from '../index'; |
@@ -151,7 +151,7 @@ class EditWorkspaceForm extends Component { | |||
151 | <h2>{intl.formatMessage(messages.servicesInWorkspaceHeadline)}</h2> | 151 | <h2>{intl.formatMessage(messages.servicesInWorkspaceHeadline)}</h2> |
152 | <div className={classes.serviceList}> | 152 | <div className={classes.serviceList}> |
153 | {services.map(s => ( | 153 | {services.map(s => ( |
154 | <ServiceListItem | 154 | <WorkspaceServiceListItem |
155 | key={s.id} | 155 | key={s.id} |
156 | service={s} | 156 | service={s} |
157 | isInWorkspace={workspaceServices.includes(s.id)} | 157 | isInWorkspace={workspaceServices.includes(s.id)} |
diff --git a/src/features/workspaces/components/WorkspaceItem.js b/src/features/workspaces/components/WorkspaceItem.js index a950a981a..cc4b1a3ba 100644 --- a/src/features/workspaces/components/WorkspaceItem.js +++ b/src/features/workspaces/components/WorkspaceItem.js | |||
@@ -8,10 +8,10 @@ import Workspace from '../models/Workspace'; | |||
8 | 8 | ||
9 | const styles = theme => ({ | 9 | const styles = theme => ({ |
10 | row: { | 10 | row: { |
11 | height: 57, | 11 | height: theme.workspaces.settings.listItems.height, |
12 | borderBottom: `1px solid ${theme.workspaceSettings.listItemBorderColor}`, | 12 | borderBottom: `1px solid ${theme.workspaces.settings.listItems.borderColor}`, |
13 | '&:hover': { | 13 | '&:hover': { |
14 | background: theme.workspaceSettings.listItemHoverBgColor, | 14 | background: theme.workspaces.settings.listItems.hoverBgColor, |
15 | }, | 15 | }, |
16 | }, | 16 | }, |
17 | columnName: {}, | 17 | columnName: {}, |
diff --git a/src/features/workspaces/components/ServiceListItem.js b/src/features/workspaces/components/WorkspaceServiceListItem.js index 146cc5a36..7b516d056 100644 --- a/src/features/workspaces/components/ServiceListItem.js +++ b/src/features/workspaces/components/WorkspaceServiceListItem.js | |||
@@ -5,10 +5,11 @@ import injectSheet from 'react-jss'; | |||
5 | import { Toggle } from '@meetfranz/forms'; | 5 | import { Toggle } from '@meetfranz/forms'; |
6 | 6 | ||
7 | import Service from '../../../models/Service'; | 7 | import Service from '../../../models/Service'; |
8 | import ServiceIcon from '../../../components/ui/ServiceIcon'; | ||
8 | 9 | ||
9 | const styles = () => ({ | 10 | const styles = theme => ({ |
10 | service: { | 11 | service: { |
11 | height: 'auto', | 12 | height: theme.workspaceSettings.listItemHeight, |
12 | display: 'flex', | 13 | display: 'flex', |
13 | }, | 14 | }, |
14 | name: { | 15 | name: { |
@@ -35,6 +36,7 @@ class ServiceListItem extends Component { | |||
35 | 36 | ||
36 | return ( | 37 | return ( |
37 | <div className={classes.service}> | 38 | <div className={classes.service}> |
39 | <ServiceIcon service={service} /> | ||
38 | <Toggle | 40 | <Toggle |
39 | checked={isInWorkspace} | 41 | checked={isInWorkspace} |
40 | onChange={onToggle} | 42 | onChange={onToggle} |