feat: Improved viewers popover (#2106)

* refactoring popover

* feat: DocumentViews popover

* i18n

* fix: tab focus warnings

* test: Add tests around users.info changes

* snapshots
This commit is contained in:
Tom Moor
2021-05-05 19:35:23 -07:00
committed by GitHub
parent e984a3dcdb
commit 896ee5c20d
18 changed files with 388 additions and 191 deletions

View File

@ -3,11 +3,10 @@ import { observer } from "mobx-react";
import { GlobeIcon } from "outline-icons";
import * as React from "react";
import { useTranslation, Trans } from "react-i18next";
import { usePopoverState, Popover, PopoverDisclosure } from "reakit/Popover";
import styled from "styled-components";
import { fadeAndScaleIn } from "shared/styles/animations";
import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
import Document from "models/Document";
import Button from "components/Button";
import Popover from "components/Popover";
import Tooltip from "components/Tooltip";
import SharePopover from "./SharePopover";
import useStores from "hooks/useStores";
@ -55,28 +54,14 @@ function ShareButton({ document }: Props) {
)}
</PopoverDisclosure>
<Popover {...popover} aria-label={t("Share")}>
<Contents>
<SharePopover
document={document}
share={share}
onSubmit={popover.hide}
/>
</Contents>
<SharePopover
document={document}
share={share}
onSubmit={popover.hide}
/>
</Popover>
</>
);
}
const Contents = styled.div`
animation: ${fadeAndScaleIn} 200ms ease;
transform-origin: 75% 0;
background: ${(props) => props.theme.menuBackground};
border-radius: 6px;
padding: 24px 24px 12px;
width: 380px;
box-shadow: ${(props) => props.theme.menuShadow};
border: ${(props) =>
props.theme.menuBorder ? `1px solid ${props.theme.menuBorder}` : "none"};
`;
export default observer(ShareButton);