feat(Todos): Move todos toggle to sidebar

adlk · adlk · commit 7ffcf8cf417e · 2019-09-11T13:46:00.000+02:00
diff --git 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
@@ -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
@@ -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
@@ -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"
-}
+}
diff --git 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
     }
   }
