feat(Todos): Move todos toggle to sidebar

5 files changed, 108 insertions, 79 deletions

diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 36c1f2e39..128f94959 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -8,6 +8,8 @@ import Tabbar from '../services/tabs/Tabbar';
 import { ctrlKey } from '../../environment';
 import { GA_CATEGORY_WORKSPACES, workspaceStore } from '../../features/workspaces';
 import { gaEvent } from '../../lib/analytics';
+import { todosStore, GA_CATEGORY_TODOS } from '../../features/todos';
+import todoActions from '../../features/todos/actions';
 
 const messages = defineMessages({
   settings: {
@@ -34,6 +36,14 @@ const messages = defineMessages({
     id: 'sidebar.closeWorkspaceDrawer',
     defaultMessage: '!!!Close workspace drawer',
   },
+  openTodosDrawer: {
+    id: 'sidebar.openTodosDrawer',
+    defaultMessage: '!!!Open Franz Todos',
+  },
+  closeTodosDrawer: {
+    id: 'sidebar.closeTodosDrawer',
+    defaultMessage: '!!!Close Franz Todos',
+  },
 });
 
 export default @observer class Sidebar extends Component {
@@ -79,6 +89,10 @@ export default @observer class Sidebar extends Component {
       toggleWorkspaceDrawer,
     } = this.props;
     const { intl } = this.context;
+    const todosToggleMessage = (
+      todosStore.isTodosPanelVisible ? messages.closeTodosDrawer : messages.openTodosDrawer
+    );
+
     const workspaceToggleMessage = (
       isWorkspaceDrawerOpen ? messages.closeWorkspaceDrawer : messages.openWorkspaceDrawer
     );
@@ -90,6 +104,20 @@ export default @observer class Sidebar extends Component {
           enableToolTip={() => this.enableToolTip()}
           disableToolTip={() => this.disableToolTip()}
         />
+        {todosStore.isFeatureEnabled && todosStore.isFeatureEnabledByUser ? (
+          <button
+            type="button"
+            onClick={() => {
+              todoActions.toggleTodosPanel();
+              this.updateToolTip();
+              gaEvent(GA_CATEGORY_TODOS, 'toggleDrawer', 'sidebar');
+            }}
+            className="sidebar__button sidebar__button--workspaces"
+            data-tip={`${intl.formatMessage(todosToggleMessage)} (${ctrlKey}+T)`}
+          >
+            <i className="mdi mdi-check-all" />
+          </button>
+        ) : null}
         {workspaceStore.isFeatureEnabled ? (
           <button
             type="button"
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index c06183e37..aed1a8834 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -61,50 +61,6 @@ const styles = theme => ({
     background: theme.todos.dragIndicator.background,
 
   },
-  openTodosButton: {
-    width: OPEN_TODOS_BUTTON_SIZE,
-    height: OPEN_TODOS_BUTTON_SIZE,
-    background: theme.todos.toggleButton.background,
-    position: 'absolute',
-    bottom: 120,
-    right: props => (props.width + (props.isVisible ? -OPEN_TODOS_BUTTON_SIZE / 2 : 0)),
-    borderRadius: OPEN_TODOS_BUTTON_SIZE / 2,
-    opacity: props => (props.isVisible ? 0 : 1),
-    transition: 'right 0.5s',
-    zIndex: 600,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    boxShadow: [0, 0, 10, theme.todos.toggleButton.shadowColor],
-
-    borderTopRightRadius: props => (props.isVisible ? null : 0),
-    borderBottomRightRadius: props => (props.isVisible ? null : 0),
-
-    '& svg': {
-      fill: theme.todos.toggleButton.textColor,
-      transition: 'all 0.5s',
-    },
-  },
-  closeTodosButton: {
-    width: CLOSE_TODOS_BUTTON_SIZE,
-    height: CLOSE_TODOS_BUTTON_SIZE,
-    background: theme.todos.toggleButton.background,
-    position: 'absolute',
-    bottom: 120,
-    right: ({ width }) => (width + -CLOSE_TODOS_BUTTON_SIZE / 2),
-    borderRadius: CLOSE_TODOS_BUTTON_SIZE / 2,
-    opacity: ({ isTodosIncludedInCurrentPlan }) => (!isTodosIncludedInCurrentPlan ? 1 : 0),
-    transition: 'opacity 0.5s',
-    zIndex: 600,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    boxShadow: [0, 0, 10, theme.todos.toggleButton.shadowColor],
-
-    '& svg': {
-      fill: theme.todos.toggleButton.textColor,
-    },
-  },
   premiumContainer: {
     display: 'flex',
     flexDirection: 'column',
@@ -132,7 +88,6 @@ class TodosWebview extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     isVisible: PropTypes.bool.isRequired,
-    togglePanel: PropTypes.func.isRequired,
     handleClientMessage: PropTypes.func.isRequired,
     setTodosWebview: PropTypes.func.isRequired,
     resize: PropTypes.func.isRequired,
@@ -228,7 +183,6 @@ class TodosWebview extends Component {
     const {
       classes,
       isVisible,
-      togglePanel,
       isTodosIncludedInCurrentPlan,
     } = this.props;
 
@@ -247,13 +201,6 @@ class TodosWebview extends Component {
         onMouseUp={() => this.stopResize()}
         ref={(node) => { this.node = node; }}
       >
-        <button
-          onClick={() => togglePanel()}
-          className={isVisible ? classes.closeTodosButton : classes.openTodosButton}
-          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/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index fe09fea46..f2293ead2 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -765,78 +765,104 @@
         "defaultMessage": "!!!Settings",
         "end": {
           "column": 3,
-          "line": 16
+          "line": 18
         },
         "file": "src/components/layout/Sidebar.js",
         "id": "sidebar.settings",
         "start": {
           "column": 12,
-          "line": 13
+          "line": 15
         }
       },
       {
         "defaultMessage": "!!!Add new service",
         "end": {
           "column": 3,
-          "line": 20
+          "line": 22
         },
         "file": "src/components/layout/Sidebar.js",
         "id": "sidebar.addNewService",
         "start": {
           "column": 17,
-          "line": 17
+          "line": 19
         }
       },
       {
         "defaultMessage": "!!!Disable notifications & audio",
         "end": {
           "column": 3,
-          "line": 24
+          "line": 26
         },
         "file": "src/components/layout/Sidebar.js",
         "id": "sidebar.muteApp",
         "start": {
           "column": 8,
-          "line": 21
+          "line": 23
         }
       },
       {
         "defaultMessage": "!!!Enable notifications & audio",
         "end": {
           "column": 3,
-          "line": 28
+          "line": 30
         },
         "file": "src/components/layout/Sidebar.js",
         "id": "sidebar.unmuteApp",
         "start": {
           "column": 10,
-          "line": 25
+          "line": 27
         }
       },
       {
         "defaultMessage": "!!!Open workspace drawer",
         "end": {
           "column": 3,
-          "line": 32
+          "line": 34
         },
         "file": "src/components/layout/Sidebar.js",
         "id": "sidebar.openWorkspaceDrawer",
         "start": {
           "column": 23,
-          "line": 29
+          "line": 31
         }
       },
       {
         "defaultMessage": "!!!Close workspace drawer",
         "end": {
           "column": 3,
-          "line": 36
+          "line": 38
         },
         "file": "src/components/layout/Sidebar.js",
         "id": "sidebar.closeWorkspaceDrawer",
         "start": {
           "column": 24,
-          "line": 33
+          "line": 35
+        }
+      },
+      {
+        "defaultMessage": "!!!Open Franz Todos",
+        "end": {
+          "column": 3,
+          "line": 42
+        },
+        "file": "src/components/layout/Sidebar.js",
+        "id": "sidebar.openTodosDrawer",
+        "start": {
+          "column": 19,
+          "line": 39
+        }
+      },
+      {
+        "defaultMessage": "!!!Close Franz Todos",
+        "end": {
+          "column": 3,
+          "line": 46
+        },
+        "file": "src/components/layout/Sidebar.js",
+        "id": "sidebar.closeTodosDrawer",
+        "start": {
+          "column": 20,
+          "line": 43
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 609076e88..e9f2c9cc1 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -93,7 +93,7 @@
   "menu.services.addNewService": "Add New Service...",
   "menu.services.setNextServiceActive": "Activate next service",
   "menu.todos": "Todos",
-  "menu.todos.enableTodos": "!!!Enable Todos",
+  "menu.todos.enableTodos": "Enable Todos",
   "menu.view": "View",
   "menu.view.enterFullScreen": "Enter Full Screen",
   "menu.view.exitFullScreen": "Exit Full Screen",
@@ -329,8 +329,10 @@
   "settings.workspaces.workspaceFeatureInfo": "Franz Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time. You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.",
   "settings.workspaces.workspacesRequestFailed": "Could not load your workspaces",
   "sidebar.addNewService": "Add new service",
+  "sidebar.closeTodosDrawer": "Close Franz Todos",
   "sidebar.closeWorkspaceDrawer": "Close workspace drawer",
   "sidebar.muteApp": "Disable notifications & audio",
+  "sidebar.openTodosDrawer": "Open Franz Todos",
   "sidebar.openWorkspaceDrawer": "Open workspace drawer",
   "sidebar.settings": "Settings",
   "sidebar.unmuteApp": "Enable notifications & audio",
@@ -380,4 +382,4 @@
   "workspaceDrawer.workspaceFeatureInfo": "<p>Franz Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>",
   "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings",
   "workspaces.switchingIndicator.switchingTo": "Switching to"
-}
\ No newline at end of file
+}
diff --git a/src/i18n/messages/src/components/layout/Sidebar.json b/src/i18n/messages/src/components/layout/Sidebar.json
index d67adc96e..837dc54bc 100644
--- a/src/i18n/messages/src/components/layout/Sidebar.json
+++ b/src/i18n/messages/src/components/layout/Sidebar.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Settings",
     "file": "src/components/layout/Sidebar.js",
     "start": {
-      "line": 13,
+      "line": 15,
       "column": 12
     },
     "end": {
-      "line": 16,
+      "line": 18,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Add new service",
     "file": "src/components/layout/Sidebar.js",
     "start": {
-      "line": 17,
+      "line": 19,
       "column": 17
     },
     "end": {
-      "line": 20,
+      "line": 22,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Disable notifications & audio",
     "file": "src/components/layout/Sidebar.js",
     "start": {
-      "line": 21,
+      "line": 23,
       "column": 8
     },
     "end": {
-      "line": 24,
+      "line": 26,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Enable notifications & audio",
     "file": "src/components/layout/Sidebar.js",
     "start": {
-      "line": 25,
+      "line": 27,
       "column": 10
     },
     "end": {
-      "line": 28,
+      "line": 30,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Open workspace drawer",
     "file": "src/components/layout/Sidebar.js",
     "start": {
-      "line": 29,
+      "line": 31,
       "column": 23
     },
     "end": {
-      "line": 32,
+      "line": 34,
       "column": 3
     }
   },
@@ -69,11 +69,37 @@
     "defaultMessage": "!!!Close workspace drawer",
     "file": "src/components/layout/Sidebar.js",
     "start": {
-      "line": 33,
+      "line": 35,
       "column": 24
     },
     "end": {
-      "line": 36,
+      "line": 38,
+      "column": 3
+    }
+  },
+  {
+    "id": "sidebar.openTodosDrawer",
+    "defaultMessage": "!!!Open Franz Todos",
+    "file": "src/components/layout/Sidebar.js",
+    "start": {
+      "line": 39,
+      "column": 19
+    },
+    "end": {
+      "line": 42,
+      "column": 3
+    }
+  },
+  {
+    "id": "sidebar.closeTodosDrawer",
+    "defaultMessage": "!!!Close Franz Todos",
+    "file": "src/components/layout/Sidebar.js",
+    "start": {
+      "line": 43,
+      "column": 20
+    },
+    "end": {
+      "line": 46,
       "column": 3
     }
   }