add workspace drawer

5 files changed, 199 insertions, 2 deletions

diff --git a/src/features/workspaces/actions.js b/src/features/workspaces/actions.js
index 25246de09..a85f8f57f 100644
--- a/src/features/workspaces/actions.js
+++ b/src/features/workspaces/actions.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import Workspace from './models/Workspace';
 import { createActionsFromDefinitions } from '../../actions/lib/actions';
 
-export default createActionsFromDefinitions({
+export const workspaceActions = createActionsFromDefinitions({
   edit: {
     workspace: PropTypes.instanceOf(Workspace).isRequired,
   },
@@ -19,4 +19,8 @@ export default createActionsFromDefinitions({
     workspace: PropTypes.instanceOf(Workspace).isRequired,
   },
   deactivate: {},
+  toggleWorkspaceDrawer: {},
+  openWorkspaceSettings: {},
 }, PropTypes.checkPropTypes);
+
+export default workspaceActions;
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
new file mode 100644
index 000000000..27bf08361
--- /dev/null
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -0,0 +1,94 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import { defineMessages, intlShape } from 'react-intl';
+import { H1, Icon } from '@meetfranz/ui';
+import { workspacesState } from '../state';
+import WorkspaceDrawerItem from './WorkspaceDrawerItem';
+import { workspaceActions } from '../actions';
+
+const messages = defineMessages({
+  headline: {
+    id: 'workspaceDrawer.headline',
+    defaultMessage: '!!!Workspaces',
+  },
+  allServices: {
+    id: 'workspaceDrawer.allServices',
+    defaultMessage: '!!!All services',
+  },
+});
+
+const styles = theme => ({
+  drawer: {
+    backgroundColor: theme.workspaceDrawerBackground,
+    width: theme.workspaceDrawerWidth,
+  },
+  headline: {
+    fontSize: '24px',
+    marginTop: '38px',
+    marginBottom: '25px',
+    marginLeft: '10px',
+  },
+  addWorkspaceButton: {
+    float: 'right',
+    marginRight: '10px',
+    marginTop: '2px',
+  },
+});
+
+@injectSheet(styles) @observer
+class WorkspaceDrawer extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    getServicesForWorkspace: PropTypes.func.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      classes,
+      getServicesForWorkspace,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className={classes.drawer}>
+        <H1 className={classes.headline}>
+          {intl.formatMessage(messages.headline)}
+          <span
+            className={classes.addWorkspaceButton}
+            onClick={workspaceActions.openWorkspaceSettings}
+          >
+            <Icon
+              icon="mdiPlusBox"
+              size={1.5}
+            />
+          </span>
+        </H1>
+        <div className={classes.workspaces}>
+          <WorkspaceDrawerItem
+            name={intl.formatMessage(messages.allServices)}
+            onClick={() => workspaceActions.deactivate()}
+            services={getServicesForWorkspace(null)}
+            isActive={workspacesState.activeWorkspace == null}
+          />
+          {workspacesState.workspaces.map(workspace => (
+            <WorkspaceDrawerItem
+              key={workspace.id}
+              name={workspace.name}
+              isActive={workspacesState.activeWorkspace === workspace}
+              onClick={() => workspaceActions.activate({ workspace })}
+              services={getServicesForWorkspace(workspace)}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default WorkspaceDrawer;
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js
new file mode 100644
index 000000000..00207d323
--- /dev/null
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.js
@@ -0,0 +1,88 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import classnames from 'classnames';
+
+const styles = theme => ({
+  item: {
+    height: '67px',
+    padding: '15px 10px',
+    borderBottom: `1px solid ${theme.workspaceDrawerItemBorder}`,
+    '&:first-child': {
+      borderTop: `1px solid ${theme.workspaceDrawerItemBorder}`,
+    },
+  },
+  isActiveItem: {
+    backgroundColor: theme.workspaceDrawerItemActiveBackground,
+  },
+  name: {
+    marginTop: '4px',
+    color: theme.workspaceDrawerNameColor,
+  },
+  activeName: {
+    color: theme.workspaceDrawerNameActiveColor,
+  },
+  services: {
+    display: 'block',
+    fontSize: '11px',
+    marginTop: '5px',
+    color: theme.workspaceDrawerServicesColor,
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    lineHeight: '15px',
+  },
+  activeServices: {
+    color: theme.workspaceDrawerServicesActiveColor,
+  },
+});
+
+@injectSheet(styles) @observer
+class WorkspaceDrawerItem extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    isActive: PropTypes.bool.isRequired,
+    name: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired,
+    services: PropTypes.arrayOf(PropTypes.string).isRequired,
+  };
+
+  render() {
+    const {
+      classes,
+      isActive,
+      name,
+      onClick,
+      services,
+    } = this.props;
+    return (
+      <div
+        className={classnames([
+          classes.item,
+          isActive ? classes.isActiveItem : null,
+        ])}
+        onClick={onClick}
+      >
+        <span
+          className={classnames([
+            classes.name,
+            isActive ? classes.activeName : null,
+          ])}
+        >
+          {name}
+        </span>
+        <span
+          className={classnames([
+            classes.services,
+            isActive ? classes.activeServices : null,
+          ])}
+        >
+          {services.join(', ')}
+        </span>
+      </div>
+    );
+  }
+}
+
+export default WorkspaceDrawerItem;
diff --git a/src/features/workspaces/state.js b/src/features/workspaces/state.js
index 963b96f81..68a7d8d91 100644
--- a/src/features/workspaces/state.js
+++ b/src/features/workspaces/state.js
@@ -4,6 +4,7 @@ const defaultState = {
   activeWorkspace: null,
   isLoading: false,
   isFeatureActive: false,
+  isWorkspaceDrawerOpen: false,
   workspaces: [],
   workspaceBeingEdited: null,
 };
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index a2997a0d2..1b57ba2da 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -3,7 +3,7 @@ import Store from '../../stores/lib/Store';
 import CachedRequest from '../../stores/lib/CachedRequest';
 import Workspace from './models/Workspace';
 import { matchRoute } from '../../helpers/routing-helpers';
-import workspaceActions from './actions';
+import { workspaceActions } from './actions';
 
 const debug = require('debug')('Franz:feature:workspaces');
 
@@ -55,6 +55,8 @@ export default class WorkspacesStore extends Store {
     workspaceActions.update.listen(this._update);
     workspaceActions.activate.listen(this._setActiveWorkspace);
     workspaceActions.deactivate.listen(this._deactivateActiveWorkspace);
+    workspaceActions.toggleWorkspaceDrawer.listen(this._toggleWorkspaceDrawer);
+    workspaceActions.openWorkspaceSettings.listen(this._openWorkspaceSettings);
   }
 
   _getWorkspaceById = id => this.state.workspaces.find(w => w.id === id);
@@ -111,4 +113,12 @@ export default class WorkspacesStore extends Store {
   @action _deactivateActiveWorkspace = () => {
     this.state.activeWorkspace = null;
   };
+
+  @action _toggleWorkspaceDrawer = () => {
+    this.state.isWorkspaceDrawerOpen = !this.state.isWorkspaceDrawerOpen;
+  };
+
+  @action _openWorkspaceSettings = () => {
+    this.actions.ui.openSettings({ path: 'workspaces' });
+  };
 }