From b90adaffb50eb2c5cbf2d0b1967850d84ad47be3 Mon Sep 17 00:00:00 2001
From: Andrew P Maney <amaney@usc.edu>
Date: Mon, 23 Mar 2020 04:24:04 -0700
Subject: [PATCH] Tasks: improve positioning of Toolbar menus

Merges #105
---
 src/components/Tasks/Toolbar.tsx |  4 ++--
 src/widgets/Menu.tsx             | 28 ++++++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 src/widgets/Menu.tsx

diff --git a/src/components/Tasks/Toolbar.tsx b/src/components/Tasks/Toolbar.tsx
index 5737afb..301b15e 100644
--- a/src/components/Tasks/Toolbar.tsx
+++ b/src/components/Tasks/Toolbar.tsx
@@ -6,7 +6,6 @@ import Switch from '@material-ui/core/Switch';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import IconButton from '@material-ui/core/IconButton';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
-import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import SortIcon from '@material-ui/icons/Sort';
 
@@ -19,6 +18,8 @@ import { useSelector, useDispatch } from 'react-redux';
 import { setSettings } from '../../store/actions';
 import { StoreState } from '../../store';
 
+import Menu from '../../widgets/Menu';
+
 interface PropsType {
   defaultCollection: EteSync.CollectionInfo;
   onItemSave: (item: PimType, journalUid: string, originalItem?: PimType) => Promise<void>;
@@ -85,7 +86,6 @@ export default function Toolbar(props: PropsType) {
           <MoreVertIcon />
         </IconButton>
         <Menu
-          id="simple-menu"
           anchorEl={optionsAnchorEl}
           keepMounted
           open={!!optionsAnchorEl}
diff --git a/src/widgets/Menu.tsx b/src/widgets/Menu.tsx
new file mode 100644
index 0000000..89a236b
--- /dev/null
+++ b/src/widgets/Menu.tsx
@@ -0,0 +1,28 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from 'react';
+
+import MuiMenu, { MenuProps } from '@material-ui/core/Menu';
+import { PopoverOrigin } from '@material-ui/core/Popover';
+
+const anchorOrigin: PopoverOrigin = {
+  vertical: 'bottom',
+  horizontal: 'right',
+};
+
+const transferOrigin: PopoverOrigin = {
+  vertical: 'top',
+  horizontal: 'right',
+};
+
+export default function Menu(props: MenuProps) {
+  return (
+    <MuiMenu
+      getContentAnchorEl={null}
+      anchorOrigin={anchorOrigin}
+      transformOrigin={transferOrigin}
+      {...props}
+    />
+  );
+}
\ No newline at end of file