coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: Share flyover (#2065)

Browse Source 
* feat: Implement share as flyover instead of modal

* refactor

* i18n
This commit is contained in:
Tom Moor
2021-04-23 17:31:27 -07:00
committed by GitHub
parent c8055e40bb
commit f64d0ce660
7 changed files with 249 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/menus/DocumentMenu.js
View File

@ -9,7 +9,6 @@ import styled from "styled-components";
import Document from "models/Document";
import DocumentDelete from "scenes/DocumentDelete";
import DocumentMove from "scenes/DocumentMove";
import DocumentShare from "scenes/DocumentShare";
import DocumentTemplatize from "scenes/DocumentTemplatize";
import CollectionIcon from "components/CollectionIcon";
import ContextMenu from "components/ContextMenu";
@ -17,7 +16,6 @@ import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
import Template from "components/ContextMenu/Template";
import Flex from "components/Flex";
import Modal from "components/Modal";
import useCurrentTeam from "hooks/useCurrentTeam";
import useStores from "hooks/useStores";
import getDataTransferFiles from "utils/getDataTransferFiles";
import {
@ -52,7 +50,6 @@ function DocumentMenu({
onOpen,
onClose,
}: Props) {
const team = useCurrentTeam();
const { policies, collections, ui, documents } = useStores();
const menu = useMenuState({
modal,
@ -66,7 +63,6 @@ function DocumentMenu({
const [showDeleteModal, setShowDeleteModal] = React.useState(false);
const [showMoveModal, setShowMoveModal] = React.useState(false);
const [showTemplateModal, setShowTemplateModal] = React.useState(false);
const [showShareModal, setShowShareModal] = React.useState(false);
const file = React.useRef<?HTMLInputElement>();
const handleOpen = React.useCallback(() => {
@ -133,17 +129,8 @@ function DocumentMenu({
[document]
);
const handleShareLink = React.useCallback(
async (ev: SyntheticEvent<>) => {
await document.share();
setShowShareModal(true);
},
[document]
);
const collection = collections.get(document.collectionId);
const can = policies.abilities(document.id);
const canShareDocuments = !!(can.share && team.sharing);
const canViewHistory = can.read && !can.restore;
const stopPropagation = React.useCallback((ev: SyntheticEvent<>) => {
@ -290,11 +277,6 @@ function DocumentMenu({
onClick: handleStar,
visible: !document.isStarred && !!can.star,
},
{
title: `${t("Share link")}…`,
onClick: handleShareLink,
visible: canShareDocuments,
},
{
title: t("Enable embeds"),
onClick: document.enableEmbeds,
@ -414,16 +396,6 @@ function DocumentMenu({
onSubmit={() => setShowTemplateModal(false)}
/>
</Modal>
<Modal
title={t("Share document")}
onRequestClose={() => setShowShareModal(false)}
isOpen={showShareModal}
>
<DocumentShare
document={document}
onSubmit={() => setShowShareModal(false)}
/>
</Modal>
</>
)}
</>

54
app/scenes/Document/components/Header.js
View File

@ -3,16 +3,14 @@ import { observer } from "mobx-react";
import {
TableOfContentsIcon,
EditIcon,
GlobeIcon,
PlusIcon,
MoreIcon,
} from "outline-icons";
import * as React from "react";
import { Trans, useTranslation } from "react-i18next";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import styled from "styled-components";
import Document from "models/Document";
import DocumentShare from "scenes/DocumentShare";
import { Action, Separator } from "components/Actions";
import Badge from "components/Badge";
import Breadcrumb, { Slash } from "components/Breadcrumb";
@ -20,8 +18,8 @@ import Button from "components/Button";
import Collaborators from "components/Collaborators";
import Fade from "components/Fade";
import Header from "components/Header";
import Modal from "components/Modal";
import Tooltip from "components/Tooltip";
import ShareButton from "./ShareButton";
import useMobile from "hooks/useMobile";
import useStores from "hooks/useStores";
import DocumentMenu from "menus/DocumentMenu";
@ -61,9 +59,8 @@ function DocumentHeader({
onSave,
}: Props) {
const { t } = useTranslation();
const { auth, ui, shares, policies } = useStores();
const { auth, ui, policies } = useStores();
const isMobile = useMobile();
const [showShareModal, setShowShareModal] = React.useState(false);
const handleSave = React.useCallback(() => {
onSave({ done: true });
@ -73,21 +70,6 @@ function DocumentHeader({
onSave({ done: true, publish: true });
}, [onSave]);
const handleShareLink = React.useCallback(
async (ev: SyntheticEvent<>) => {
await document.share();
setShowShareModal(true);
},
[document]
);
const handleCloseShareModal = React.useCallback(() => {
setShowShareModal(false);
}, []);
const share = shares.getByDocumentId(document.id);
const isPubliclyShared = share && share.published;
const isNew = document.isNew;
const isTemplate = document.isTemplate;
const can = policies.abilities(document.id);
@ -146,13 +128,6 @@ function DocumentHeader({
return (
<>
<Modal
isOpen={showShareModal}
onRequestClose={handleCloseShareModal}
title={t("Share document")}
>
<DocumentShare document={document} onSubmit={handleCloseShareModal} />
</Modal>
<Header
breadcrumb={
<Breadcrumb document={document}>
@ -186,28 +161,7 @@ function DocumentHeader({
)}
{!isEditing && canShareDocument && (!isMobile || !isTemplate) && (
<Action>
<Tooltip
tooltip={
isPubliclyShared ? (
<Trans>
Anyone with the link <br />
can view this document
</Trans>
) : (
""
)
}
delay={500}
placement="bottom"
>
<Button
icon={isPubliclyShared ? <GlobeIcon /> : undefined}
onClick={handleShareLink}
neutral
>
{t("Share")}
</Button>
</Tooltip>
<ShareButton document={document} />
</Action>
)}
{isEditing && (

82
app/scenes/Document/components/ShareButton.js Normal file
View File

@ -0,0 +1,82 @@
// @flow
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 Document from "models/Document";
import Button from "components/Button";
import Tooltip from "components/Tooltip";
import SharePopover from "./SharePopover";
import useStores from "hooks/useStores";
type Props = {|
document: Document,
|};
function ShareButton({ document }: Props) {
const { t } = useTranslation();
const { shares } = useStores();
const share = shares.getByDocumentId(document.id);
const isPubliclyShared = share && share.published;
const popover = usePopoverState({
gutter: 0,
placement: "bottom-end",
});
return (
<>
<PopoverDisclosure {...popover}>
{(props) => (
<Tooltip
tooltip={
isPubliclyShared ? (
<Trans>
Anyone with the link <br />
can view this document
</Trans>
) : (
""
)
}
delay={500}
placement="bottom"
>
<Button
icon={isPubliclyShared ? <GlobeIcon /> : undefined}
neutral
{...props}
>
{t("Share")}
</Button>
</Tooltip>
)}
</PopoverDisclosure>
<Popover {...popover} aria-label={t("Share")}>
<Contents>
<SharePopover
document={document}
share={share}
onSubmit={popover.hide}
/>
</Contents>
</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);

155
app/scenes/Document/components/SharePopover.js Normal file
View File

@ -0,0 +1,155 @@
// @flow
import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
import invariant from "invariant";
import { observer } from "mobx-react";
import { GlobeIcon, PadlockIcon } from "outline-icons";
import * as React from "react";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import Document from "models/Document";
import Share from "models/Share";
import Button from "components/Button";
import CopyToClipboard from "components/CopyToClipboard";
import Flex from "components/Flex";
import HelpText from "components/HelpText";
import Input from "components/Input";
import Switch from "components/Switch";
import useStores from "hooks/useStores";
type Props = {|
document: Document,
share: Share,
onSubmit: () => void,
|};
function DocumentShare({ document, share, onSubmit }: Props) {
const { t } = useTranslation();
const { policies, shares, ui } = useStores();
const [isCopied, setIsCopied] = React.useState(false);
const [isSaving, setIsSaving] = React.useState(false);
const timeout = React.useRef<?TimeoutID>();
const can = policies.abilities(share ? share.id : "");
const canPublish = can.update && !document.isTemplate;
React.useEffect(() => {
document.share();
return () => clearTimeout(timeout.current);
}, [document]);
const handlePublishedChange = React.useCallback(
async (event) => {
const share = shares.getByDocumentId(document.id);
invariant(share, "Share must exist");
setIsSaving(true);
try {
await share.save({ published: event.currentTarget.checked });
} catch (err) {
ui.showToast(err.message, { type: "error" });
} finally {
setIsSaving(false);
}
},
[document.id, shares, ui]
);
const handleCopied = React.useCallback(() => {
setIsCopied(true);
timeout.current = setTimeout(() => {
setIsCopied(false);
onSubmit();
ui.showToast(t("Share link copied"), { type: "info" });
}, 250);
}, [t, onSubmit, ui]);
return (
<>
<Heading>
{share && share.published ? (
<GlobeIcon size={28} color="currentColor" />
) : (
<PadlockIcon size={28} color="currentColor" />
)}{" "}
{t("Share this document")}
</Heading>
{canPublish && (
<PrivacySwitch>
<Switch
id="published"
label={t("Publish to internet")}
onChange={handlePublishedChange}
checked={share ? share.published : false}
disabled={!share || isSaving}
/>
<Privacy>
<PrivacyText>
{share.published
? t("Anyone with the link can view this document")
: t("Only team members with access can view")}
{share.lastAccessedAt && (
<>
.{" "}
{t("The shared link was last accessed {{ timeAgo }}.", {
timeAgo: distanceInWordsToNow(share.lastAccessedAt, {
addSuffix: true,
}),
})}
</>
)}
</PrivacyText>
</Privacy>
</PrivacySwitch>
)}
<Flex>
<InputLink
type="text"
label={t("Link")}
placeholder={`${t("Loading")}…`}
value={share ? share.url : undefined}
labelHidden
readOnly
/>
<CopyToClipboard text={share ? share.url : ""} onCopy={handleCopied}>
<Button type="submit" disabled={isCopied || !share} primary>
{t("Copy link")}
</Button>
</CopyToClipboard>
</Flex>
</>
);
}
const Heading = styled.h2`
display: flex;
align-items: center;
margin-top: 0;
margin-left: -4px;
`;
const PrivacySwitch = styled.div`
margin: 20px 0;
`;
const InputLink = styled(Input)`
flex-grow: 1;
margin-right: 8px;
`;
const Privacy = styled(Flex)`
flex-align: center;
svg {
flex-shrink: 0;
}
`;
const PrivacyText = styled(HelpText)`
margin: 0;
font-size: 15px;
`;
export default observer(DocumentShare);

137
app/scenes/DocumentShare.js
View File

@ -1,137 +0,0 @@
// @flow
import invariant from "invariant";
import { observable } from "mobx";
import { observer, inject } from "mobx-react";
import { GlobeIcon, PadlockIcon } from "outline-icons";
import * as React from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";
import PoliciesStore from "stores/PoliciesStore";
import SharesStore from "stores/SharesStore";
import UiStore from "stores/UiStore";
import Document from "models/Document";
import Button from "components/Button";
import CopyToClipboard from "components/CopyToClipboard";
import Flex from "components/Flex";
import HelpText from "components/HelpText";
import Input from "components/Input";
import Switch from "components/Switch";
type Props = {
document: Document,
shares: SharesStore,
ui: UiStore,
policies: PoliciesStore,
onSubmit: () => void,
};
@observer
class DocumentShare extends React.Component<Props> {
@observable isCopied: boolean;
@observable isSaving: boolean = false;
timeout: TimeoutID;
componentWillUnmount() {
clearTimeout(this.timeout);
}
handlePublishedChange = async (event) => {
const { document, shares } = this.props;
const share = shares.getByDocumentId(document.id);
invariant(share, "Share must exist");
this.isSaving = true;
try {
await share.save({ published: event.currentTarget.checked });
} catch (err) {
this.props.ui.showToast(err.message, { type: "error" });
} finally {
this.isSaving = false;
}
};
handleCopied = () => {
this.isCopied = true;
this.timeout = setTimeout(() => {
this.isCopied = false;
this.props.onSubmit();
}, 1500);
};
render() {
const { document, policies, shares, onSubmit } = this.props;
const share = shares.getByDocumentId(document.id);
const can = policies.abilities(share ? share.id : "");
const canPublish = can.update && !document.isTemplate;
return (
<div>
<HelpText>
The link below provides a read-only version of the document{" "}
<strong>{document.titleWithDefault}</strong>.{" "}
{canPublish
? "You can optionally make it accessible to anyone with the link."
: "It is only viewable by those that already have access to the collection."}{" "}
<Link to="/settings/shares" onClick={onSubmit}>
Manage all share links
</Link>
.
</HelpText>
{canPublish && (
<>
<Switch
id="published"
label="Publish to internet"
onChange={this.handlePublishedChange}
checked={share ? share.published : false}
disabled={!share || this.isSaving}
/>
<Privacy>
{share.published ? <GlobeIcon /> : <PadlockIcon />}
<PrivacyText>
{share.published
? "Anyone with the link can view this document"
: "Only team members with access can view this document"}
</PrivacyText>
</Privacy>
</>
)}
<br />
<Input
type="text"
label="Get link"
value={share ? share.url : "Loading…"}
labelHidden
readOnly
/>
<CopyToClipboard
text={share ? share.url : ""}
onCopy={this.handleCopied}
>
<Button type="submit" disabled={this.isCopied || !share} primary>
{this.isCopied ? "Copied!" : "Copy Link"}
</Button>
</CopyToClipboard>
&nbsp;&nbsp;&nbsp;
<a href={share.url} target="_blank" rel="noreferrer">
Preview
</a>
</div>
);
}
}
const Privacy = styled(Flex)`
flex-align: center;
margin-left: -4px;
`;
const PrivacyText = styled(HelpText)`
margin: 0;
margin-left: 2px;
font-size: 15px;
`;
export default inject("shares", "ui", "policies")(DocumentShare);

11
shared/i18n/locales/en_US/translation.json
View File

@ -159,7 +159,6 @@
"Choose a collection": "Choose a collection",
"Unpin": "Unpin",
"Pin to collection": "Pin to collection",
"Share link": "Share link",
"Enable embeds": "Enable embeds",
"Disable embeds": "Disable embeds",
"New nested document": "New nested document",
@ -172,7 +171,6 @@
"Print": "Print",
"Move {{ documentName }}": "Move {{ documentName }}",
"Delete {{ documentName }}": "Delete {{ documentName }}",
"Share document": "Share document",
"Edit group": "Edit group",
"Delete group": "Delete group",
"Group options": "Group options",
@ -272,13 +270,18 @@
"Show contents": "Show contents",
"Edit {{noun}}": "Edit {{noun}}",
"Archived": "Archived",
"Anyone with the link <1></1>can view this document": "Anyone with the link <1></1>can view this document",
"Share": "Share",
"Save Draft": "Save Draft",
"Done Editing": "Done Editing",
"New from template": "New from template",
"Publish": "Publish",
"Publishing": "Publishing",
"Anyone with the link <1></1>can view this document": "Anyone with the link <1></1>can view this document",
"Share": "Share",
"Share this document": "Share this document",
"Publish to internet": "Publish to internet",
"Anyone with the link can view this document": "Anyone with the link can view this document",
"Only team members with access can view": "Only team members with access can view",
"The shared link was last accessed {{ timeAgo }}.": "The shared link was last accessed {{ timeAgo }}.",
"Are you sure you want to delete the <em>{{ documentTitle }}</em> template?": "Are you sure you want to delete the <em>{{ documentTitle }}</em> template?",
"Are you sure about that? Deleting the <em>{{ documentTitle }}</em> document will delete all of its history and any nested documents.": "Are you sure about that? Deleting the <em>{{ documentTitle }}</em> document will delete all of its history and any nested documents.",
"If you’d like the option of referencing or restoring the {{noun}} in the future, consider archiving it instead.": "If you’d like the option of referencing or restoring the {{noun}} in the future, consider archiving it instead.",

2
shared/styles/theme.js
View File

@ -141,7 +141,7 @@ export const light = {
menuBackground: colors.white,
menuShadow:
"0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08)",
"0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08), 0 30px 40px rgb(0 0 0 / 8%)",
divider: colors.slateLight,
titleBarDivider: colors.slateLight,
inputBorder: colors.slateLight,