Contacts: implement FAB for adding contacts.

master
Tom Hacohen 4 years ago
parent 36e5f2ccff
commit b29f19639a

@ -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")}

@ -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>
);
}

Loading…
Cancel
Save