From b3afb9f45d47ebc352b28eb106b22fffc2f17707 Mon Sep 17 00:00:00 2001 From: Dominik Guzei Date: Sun, 7 Apr 2019 19:50:40 +0200 Subject: render workspace service list like services + toggle --- packages/forms/src/input/index.tsx | 1 + packages/forms/src/input/styles.ts | 5 ++ packages/forms/src/label/styles.ts | 4 +- packages/forms/src/select/index.tsx | 6 ++ packages/forms/src/toggle/index.tsx | 4 +- packages/theme/src/themes/dark/index.ts | 52 ++++++++++++++++- packages/theme/src/themes/default/index.ts | 57 +++++++++++++++++- src/components/ui/ServiceIcon.js | 67 ++++++++++++++++++++++ .../workspaces/components/EditWorkspaceForm.js | 4 +- .../workspaces/components/ServiceListItem.js | 48 ---------------- .../workspaces/components/WorkspaceItem.js | 6 +- .../components/WorkspaceServiceListItem.js | 50 ++++++++++++++++ 12 files changed, 243 insertions(+), 61 deletions(-) create mode 100644 src/components/ui/ServiceIcon.js delete mode 100644 src/features/workspaces/components/ServiceListItem.js create mode 100644 src/features/workspaces/components/WorkspaceServiceListItem.js 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 { title={label} showLabel={showLabel} htmlFor={id} + className={classes.label} >
({ }); export default (theme: Theme) => ({ + label: { + '& > div': { + marginTop: 5, + } + }, disabled: { opacity: theme.inputDisabledOpacity, }, 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 @@ import { Theme } from '../../../theme/lib'; export default (theme: Theme) => ({ - content: { - marginTop: 5, - }, + content: {}, label: { color: theme.labelColor, 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) => ({ textAlign: 'left', color: theme.selectColor, }, + label: { + '& > div': { + marginTop: 5, + } + }, popup: { opacity: 0, height: 0, @@ -334,6 +339,7 @@ class SelectComponent extends Component { title={label} showLabel={showLabel} htmlFor={id} + className={classes.label} >
({ }, toggleLabel: { display: 'flex', + alignItems: 'center', '& > span': { order: 1, marginLeft: 15, - marginTop: 2, }, }, }); 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 @@ import color from 'color'; +import { merge, cloneDeep } from 'lodash'; import * as defaultStyles from '../default'; import * as legacyStyles from '../legacy'; @@ -64,11 +65,51 @@ export const selectSearchColor = inputBackground; // Modal export const colorModalOverlayBackground = color(legacyStyles.darkThemeBlack).alpha(0.8).rgb().string(); +// Services +export const services = merge({}, defaultStyles.services, { + listItems: { + borderColor: legacyStyles.darkThemeGrayDarker, + hoverBgColor: legacyStyles.darkThemeGrayDarker, + disabled: { + color: legacyStyles.darkThemeGray, + }, + }, +}); + +// Workspaces +const drawerBg = color(colorBackground).lighten(0.3).hex(); + +export const workspaces = merge({}, defaultStyles.workspaces, { + settings: { + listItems: cloneDeep(services.listItems), + }, + drawer: { + background: drawerBg, + addButton: { + color: legacyStyles.darkThemeGrayLighter, + hoverColor: legacyStyles.darkThemeGraySmoke, + }, + listItem: { + border: color(drawerBg).lighten(0.2).hex(), + hoverBackground: color(drawerBg).lighten(0.2).hex(), + activeBackground: defaultStyles.brandPrimary, + name: { + color: colorText, + activeColor: 'white', + }, + services: { + color: color(colorText).darken(0.5).hex(), + active: color(defaultStyles.brandPrimary).lighten(0.5).hex(), + }, + }, + }, +}); + // Workspace settings -export const workspaceSettings = { +export const workspaceSettings = merge({}, defaultStyles.workspaceSettings, { listItemBorderColor: legacyStyles.darkThemeGrayDarker, listItemHoverBgColor: legacyStyles.darkThemeGrayDarker, -}; +}); // Workspace Drawer export const workspaceDrawerBackground = color(colorBackground).lighten(0.3).hex(); @@ -81,3 +122,10 @@ export const workspaceDrawerItemNameColor = colorText; export const workspaceDrawerItemNameActiveColor = 'white'; export const workspaceDrawerServicesColor = color(colorText).darken(0.5).hex(); export const workspaceDrawerServicesActiveColor = color(defaultStyles.brandPrimary).lighten(0.5).hex(); + +// Service Icon +export const serviceIcon = merge({}, defaultStyles.serviceIcon, { + isCustom: { + border: `1px solid ${legacyStyles.darkThemeGrayDark}`, + }, +}); 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 @@ import color from 'color'; +import { cloneDeep } from 'lodash'; import * as legacyStyles from '../legacy'; @@ -143,8 +144,52 @@ export const badgeBorderRadius = 50; // Modal export const colorModalOverlayBackground = color('#000').alpha(0.5).rgb().string(); -// Workspace settings +// Services +export const services = { + listItems: { + padding: 10, + height: 57, + borderColor: legacyStyles.themeGrayLightest, + hoverBgColor: legacyStyles.themeGrayLightest, + disabled: { + color: legacyStyles.themeGrayLight, + }, + }, +}; + +// Workspaces +const drawerBg = color(colorBackground).lighten(0.1).hex(); + +export const workspaces = { + settings: { + listItems: cloneDeep(services.listItems), + }, + drawer: { + width: 300, + padding: 20, + background: drawerBg, + addButton: { + color: legacyStyles.themeGrayLight, + hoverColor: color(legacyStyles.themeGrayLight).lighten(0.1).hex(), + }, + listItem: { + hoverBackground: color(drawerBg).darken(0.01).hex(), + activeBackground: legacyStyles.themeGrayLightest, + border: color(drawerBg).darken(0.05).hex(), + name: { + color: colorText, + activeColor: colorText, + }, + services: { + color: color(colorText).lighten(1.5).hex(), + active: color(colorText).lighten(1.5).hex(), + }, + }, + }, +}; + export const workspaceSettings = { + listItemHeight: 57, listItemBorderColor: legacyStyles.themeGrayLightest, listItemHoverBgColor: legacyStyles.themeGrayLightest, }; @@ -162,3 +207,13 @@ export const workspaceDrawerItemNameColor = colorText; export const workspaceDrawerItemNameActiveColor = colorText; export const workspaceDrawerServicesColor = color(colorText).lighten(1.5).hex(); export const workspaceDrawerServicesActiveColor = workspaceDrawerServicesColor; + +// Service Icon +export const serviceIcon = { + width: 35, + isCustom: { + border: `1px solid ${legacyStyles.themeGrayLighter}`, + borderRadius: legacyStyles.themeBorderRadius, + width: 37, + }, +}; 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 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { observer } from 'mobx-react'; +import injectSheet from 'react-jss'; +import classnames from 'classnames'; + +import ServiceModel from '../../models/Service'; + +const styles = theme => ({ + root: { + height: 'auto', + }, + icon: { + width: theme.serviceIcon.width, + }, + isCustomIcon: { + width: theme.serviceIcon.isCustom.width, + border: theme.serviceIcon.isCustom.border, + borderRadius: theme.serviceIcon.isCustom.borderRadius, + }, + isDisabled: { + filter: 'grayscale(100%)', + opacity: '.5', + }, +}); + +@injectSheet(styles) @observer +class ServiceIcon extends Component { + static propTypes = { + classes: PropTypes.object.isRequired, + service: PropTypes.instanceOf(ServiceModel).isRequired, + className: PropTypes.string, + }; + + static defaultProps = { + className: '', + }; + + render() { + const { + classes, + className, + service, + } = this.props; + + return ( +
+ +
+ ); + } +} + +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'; import Service from '../../../models/Service'; import Form from '../../../lib/Form'; import { required } from '../../../helpers/validation-helpers'; -import ServiceListItem from './ServiceListItem'; +import WorkspaceServiceListItem from './WorkspaceServiceListItem'; import Request from '../../../stores/lib/Request'; import { gaEvent } from '../../../lib/analytics'; import { GA_CATEGORY_WORKSPACES } from '../index'; @@ -151,7 +151,7 @@ class EditWorkspaceForm extends Component {

{intl.formatMessage(messages.servicesInWorkspaceHeadline)}

{services.map(s => ( - ({ - service: { - height: 'auto', - display: 'flex', - }, - name: { - marginTop: '4px', - }, -}); - -@injectSheet(styles) @observer -class ServiceListItem extends Component { - static propTypes = { - classes: PropTypes.object.isRequired, - isInWorkspace: PropTypes.bool.isRequired, - onToggle: PropTypes.func.isRequired, - service: PropTypes.instanceOf(Service).isRequired, - }; - - render() { - const { - classes, - isInWorkspace, - onToggle, - service, - } = this.props; - - return ( -
- -
- ); - } -} - -export default ServiceListItem; 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'; const styles = theme => ({ row: { - height: 57, - borderBottom: `1px solid ${theme.workspaceSettings.listItemBorderColor}`, + height: theme.workspaces.settings.listItems.height, + borderBottom: `1px solid ${theme.workspaces.settings.listItems.borderColor}`, '&:hover': { - background: theme.workspaceSettings.listItemHoverBgColor, + background: theme.workspaces.settings.listItems.hoverBgColor, }, }, columnName: {}, diff --git a/src/features/workspaces/components/WorkspaceServiceListItem.js b/src/features/workspaces/components/WorkspaceServiceListItem.js new file mode 100644 index 000000000..7b516d056 --- /dev/null +++ b/src/features/workspaces/components/WorkspaceServiceListItem.js @@ -0,0 +1,50 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { observer } from 'mobx-react'; +import injectSheet from 'react-jss'; +import { Toggle } from '@meetfranz/forms'; + +import Service from '../../../models/Service'; +import ServiceIcon from '../../../components/ui/ServiceIcon'; + +const styles = theme => ({ + service: { + height: theme.workspaceSettings.listItemHeight, + display: 'flex', + }, + name: { + marginTop: '4px', + }, +}); + +@injectSheet(styles) @observer +class ServiceListItem extends Component { + static propTypes = { + classes: PropTypes.object.isRequired, + isInWorkspace: PropTypes.bool.isRequired, + onToggle: PropTypes.func.isRequired, + service: PropTypes.instanceOf(Service).isRequired, + }; + + render() { + const { + classes, + isInWorkspace, + onToggle, + service, + } = this.props; + + return ( +
+ + +
+ ); + } +} + +export default ServiceListItem; -- cgit v1.2.3-54-g00ecf