5 files changed, 72 insertions, 3 deletions

diff --git a/src/features/todos/actions.js b/src/features/todos/actions.js
index a6090a259..dc63d5fcd 100644
--- a/src/features/todos/actions.js
+++ b/src/features/todos/actions.js
@@ -5,6 +5,7 @@ export const todoActions = createActionsFromDefinitions({
   resize: {
     width: PropTypes.number.isRequired,
   },
+  toggleTodosPanel: {},
   setTodosWebview: {
     webview: PropTypes.instanceOf(Element).isRequired,
   },
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index bc32ae728..819e599ca 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -3,16 +3,31 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import Webview from 'react-electron-web-view';
+import { Icon } from '@meetfranz/ui';
 import * as environment from '../../../environment';
 
+const TOGGLE_SIZE = 45;
+
 const styles = theme => ({
   root: {
     background: theme.colorBackground,
     position: 'relative',
     borderLeft: [1, 'solid', theme.todos.todosLayer.borderLeftColor],
+    zIndex: 300,
+
+    transition: 'all 0.5s',
+    transform: props => `translateX(${props.isVisible ? 0 : props.width}px)`,
+
+    '&:hover $toggleTodosButton': {
+      opacity: 1,
+    },
   },
   webview: {
     height: '100%',
+
+    '& webview': {
+      height: '100%',
+    },
   },
   resizeHandler: {
     position: 'absolute',
@@ -29,6 +44,31 @@ const styles = theme => ({
     zIndex: 400,
     background: theme.todos.dragIndicator.background,
   },
+  toggleTodosButton: {
+    width: TOGGLE_SIZE,
+    height: TOGGLE_SIZE,
+    background: theme.todos.toggleButton.background,
+    position: 'absolute',
+    bottom: 80,
+    right: props => (props.width + (props.isVisible ? -TOGGLE_SIZE / 2 : 0)),
+    borderRadius: TOGGLE_SIZE / 2,
+    opacity: props => (props.isVisible ? 0 : 1),
+    transition: 'all 0.5s',
+    zIndex: 600,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxShadow: [0, 0, 10, theme.todos.toggleButton.shadowColor],
+    // border: [1, 'solid', theme.todos.toggleButton.borderColor],
+
+    borderTopRightRadius: props => (props.isVisible ? null : 0),
+    borderBottomRightRadius: props => (props.isVisible ? null : 0),
+
+    '& svg': {
+      fill: theme.todos.toggleButton.textColor,
+      transition: 'all 0.5s',
+    },
+  },
 });
 
 @injectSheet(styles) @observer
@@ -36,6 +76,8 @@ class TodosWebview extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     authToken: PropTypes.string.isRequired,
+    isVisible: PropTypes.bool.isRequired,
+    togglePanel: PropTypes.func.isRequired,
     handleClientMessage: PropTypes.func.isRequired,
     setTodosWebview: PropTypes.func.isRequired,
     resize: PropTypes.func.isRequired,
@@ -123,16 +165,26 @@ class TodosWebview extends Component {
   }
 
   render() {
-    const { authToken, classes } = this.props;
+    const {
+      authToken, classes, isVisible, togglePanel,
+    } = this.props;
     const { width, delta, isDragging } = this.state;
+
     return (
       <>
         <div
           className={classes.root}
-          style={{ width }}
+          style={{ width: isVisible ? width : 0 }}
           onMouseUp={() => this.stopResize()}
           ref={(node) => { this.node = node; }}
         >
+          <button
+            onClick={() => togglePanel()}
+            className={classes.toggleTodosButton}
+            type="button"
+          >
+            <Icon icon={isVisible ? 'mdiChevronRight' : 'mdiCheckAll'} size={2} />
+          </button>
           <div
             className={classes.resizeHandler}
             style={Object.assign({ left: delta }, isDragging ? { width: 600, marginLeft: -200 } : {})} // This hack is required as resizing with webviews beneath behaves quite bad
diff --git a/src/features/todos/containers/TodosScreen.js b/src/features/todos/containers/TodosScreen.js
index 2b81bd728..48acd19f4 100644
--- a/src/features/todos/containers/TodosScreen.js
+++ b/src/features/todos/containers/TodosScreen.js
@@ -27,6 +27,8 @@ class TodosScreen extends Component {
       <ErrorBoundary>
         <TodosWebview
           authToken={stores.user.authToken}
+          isVisible={todosStore.isTodosPanelVisible}
+          togglePanel={todoActions.toggleTodosPanel}
           handleClientMessage={todoActions.handleClientMessage}
           setTodosWebview={webview => todoActions.setTodosWebview({ webview })}
           width={todosStore.width}
diff --git a/src/features/todos/index.js b/src/features/todos/index.js
index f741561d6..00b165cc5 100644
--- a/src/features/todos/index.js
+++ b/src/features/todos/index.js
@@ -7,6 +7,7 @@ export const GA_CATEGORY_TODOS = 'Todos';
 
 export const DEFAULT_TODOS_WIDTH = 300;
 export const TODOS_MIN_WIDTH = 200;
+export const DEFAULT_TODOS_VISIBLE = true;
 
 export const todosStore = new TodoStore();
 
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
index cd9c8e5f6..79c218b65 100644
--- a/src/features/todos/store.js
+++ b/src/features/todos/store.js
@@ -9,7 +9,7 @@ import { todoActions } from './actions';
 import { FeatureStore } from '../utils/FeatureStore';
 import { createReactions } from '../../stores/lib/Reaction';
 import { createActionBindings } from '../utils/ActionBinding';
-import { DEFAULT_TODOS_WIDTH, TODOS_MIN_WIDTH } from '.';
+import { DEFAULT_TODOS_WIDTH, TODOS_MIN_WIDTH, DEFAULT_TODOS_VISIBLE } from '.';
 
 const debug = require('debug')('Franz:feature:todos:store');
 
@@ -26,6 +26,12 @@ export default class TodoStore extends FeatureStore {
     return width < TODOS_MIN_WIDTH ? TODOS_MIN_WIDTH : width;
   }
 
+  @computed get isTodosPanelVisible() {
+    if (this.settings.isTodosPanelVisible === undefined) return DEFAULT_TODOS_VISIBLE;
+
+    return this.settings.isTodosPanelVisible;
+  }
+
   @computed get settings() {
     return localStorage.getItem('todos') || {};
   }
@@ -41,6 +47,7 @@ export default class TodoStore extends FeatureStore {
 
     this._registerActions(createActionBindings([
       [todoActions.resize, this._resize],
+      [todoActions.toggleTodosPanel, this._toggleTodosPanel],
       [todoActions.setTodosWebview, this._setTodosWebview],
       [todoActions.handleHostMessage, this._handleHostMessage],
       [todoActions.handleClientMessage, this._handleClientMessage],
@@ -81,6 +88,12 @@ export default class TodoStore extends FeatureStore {
     });
   };
 
+  @action _toggleTodosPanel = () => {
+    this._updateSettings({
+      isTodosPanelVisible: !this.isTodosPanelVisible,
+    });
+  };
+
   @action _setTodosWebview = ({ webview }) => {
     debug('_setTodosWebview', webview);
     this.webview = webview;