Contacts: implement FAB for adding contacts.

src/Contacts/Main.tsx

@@ -20,7 +20,7 @@ import LoadingIndicator from "../widgets/LoadingIndicator";
 import ContactEdit from "./ContactEdit";
 import PageNotFound from "../PageNotFound";
 
-import { CachedCollection, getItemNavigationUid, getDecryptCollectionsFunction, getDecryptItemsFunction } from "../Pim/helpers";
+import { CachedCollection, getItemNavigationUid, getDecryptCollectionsFunction, getDecryptItemsFunction, PimFab } from "../Pim/helpers";
 
 const colType = "etebase.vcard";
 
@@ -133,6 +133,11 @@ export default function ContactsMain() {
             routeResolver.getRoute("pim.contacts._id", { itemUid: getItemNavigationUid(item) })
           )}
         />
+        <PimFab
+          onClick={() => history.push(
+            routeResolver.getRoute("pim.contacts.new")
+          )}
+        />
       </Route>
       <Route
         path={routeResolver.getRoute("pim.contacts.new")}

src/Pim/helpers.tsx

@@ -1,6 +1,10 @@
 // SPDX-FileCopyrightText: © 2020 EteSync Authors
 // SPDX-License-Identifier: AGPL-3.0-only
 
+import * as React from "react";
+import { Fab } from "@material-ui/core";
+import ContentAdd from "@material-ui/icons/Add";
+
 import memoize from "memoizee";
 
 import * as Etebase from "etebase";
@@ -58,3 +62,30 @@ export function getDecryptItemsFunction<T extends PimType>(_colType: string, par
     { max: 1 }
   );
 }
+
+interface PimFabPropsType {
+  onClick: () => void;
+}
+
+export function PimFab(props: PimFabPropsType) {
+  const style = {
+    floatingButton: {
+      margin: 0,
+      top: "auto",
+      right: 20,
+      bottom: 20,
+      left: "auto",
+      position: "fixed",
+    },
+  };
+
+  return (
+    <Fab
+      color="primary"
+      style={style.floatingButton as any}
+      onClick={props.onClick}
+    >
+      <ContentAdd />
+    </Fab>
+  );
+}