From b29f19639aef2f84e5837a2a3dce4813b73a11e6 Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Wed, 5 Aug 2020 16:28:00 +0300
Subject: [PATCH] Contacts: implement FAB for adding contacts.

---
 src/Contacts/Main.tsx |  7 ++++++-
 src/Pim/helpers.tsx   | 31 +++++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/Contacts/Main.tsx b/src/Contacts/Main.tsx
index 4ed5be2..23b2616 100644
--- a/src/Contacts/Main.tsx
+++ b/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")}
diff --git a/src/Pim/helpers.tsx b/src/Pim/helpers.tsx
index 3ba0ed1..cc668b0 100644
--- a/src/Pim/helpers.tsx
+++ b/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>
+  );
+}