yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[GH-4699]: Improve share dialog for nested docs (#4719)

Browse Source 
Co-authored-by: Tom Moor <tom@getoutline.com>
This commit is contained in:
Aditya Sharma
2023-03-18 02:56:55 +05:30
committed by GitHub
parent 17f6d68707
commit b68eba4b63
2 changed files with 80 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
app/scenes/Document/components/SharePopover.tsx
View File

@@ -5,6 +5,7 @@ import { observer } from "mobx-react";
import { ExpandedIcon, GlobeIcon, PadlockIcon } from "outline-icons";
import * as React from "react";
import { useTranslation, Trans } from "react-i18next";
import { Link } from "react-router-dom";
import styled from "styled-components";
import { SHARE_URL_SLUG_REGEX } from "@shared/utils/urlHelpers";
import Document from "~/models/Document";
@@ -161,14 +162,61 @@ function SharePopover({
[t, document.id, shares]
);
const PublishToInternet = ({ canPublish }: { canPublish: boolean }) => {
if (!canPublish) {
return (
<Text type="secondary">
{t("Only members with permission can view")}
</Text>
);
}
return (
<SwitchWrapper>
<Switch
id="published"
label={t("Publish to internet")}
onChange={handlePublishedChange}
checked={share ? share.published : false}
disabled={!share}
/>
<SwitchLabel>
<SwitchText>
{share?.published
? t("Anyone with the link can view this document")
: t("Only members with permission can view")}
{share?.lastAccessedAt && (
<>
.{" "}
{t("The shared link was last accessed {{ timeAgo }}.", {
timeAgo: formatDistanceToNow(
Date.parse(share?.lastAccessedAt),
{
addSuffix: true,
locale,
}
),
})}
</>
)}
</SwitchText>
</SwitchLabel>
</SwitchWrapper>
);
};
const userLocale = useUserLocale();
const locale = userLocale ? dateLocale(userLocale) : undefined;
let shareUrl = team.sharing ? share?.url ?? "" : `${team.url}${document.url}`;
let shareUrl = team.sharing
? sharedParent?.url
? `${sharedParent.url}${document.url}`
: share?.url ?? ""
: `${team.url}${document.url}`;
if (isEditMode) {
shareUrl += "?edit=true";
}
const url = shareUrl.replace(/https?:\/\//, "");
const documentTitle = sharedParent?.documentTitle;
return (
<>
@@ -182,54 +230,21 @@ function SharePopover({
</Heading>
{sharedParent && !document.isDraft && (
<Notice>
<Trans
defaults="This document is shared because the parent <em>{{ documentTitle }}</em> is publicly shared"
values={{
documentTitle: sharedParent.documentTitle,
}}
components={{
em: <strong />,
}}
/>
</Notice>
<NoticeWrapper>
<Notice>
<Trans>
This document is shared because the parent{" "}
<StyledLink to={`/doc/${sharedParent.documentId}`}>
{documentTitle}
</StyledLink>{" "}
is publicly shared.
</Trans>
</Notice>
</NoticeWrapper>
)}
{canPublish ? (
<SwitchWrapper>
<Switch
id="published"
label={t("Publish to internet")}
onChange={handlePublishedChange}
checked={share ? share.published : false}
disabled={!share}
/>
<SwitchLabel>
<SwitchText>
{share?.published
? t("Anyone with the link can view this document")
: t("Only members with permission can view")}
{share?.lastAccessedAt && (
<>
.{" "}
{t("The shared link was last accessed {{ timeAgo }}.", {
timeAgo: formatDistanceToNow(
Date.parse(share?.lastAccessedAt),
{
addSuffix: true,
locale,
}
),
})}
</>
)}
</SwitchText>
</SwitchLabel>
</SwitchWrapper>
) : (
<Text type="secondary">
{t("Only members with permission can view")}
</Text>
{canPublish && !sharedParent?.published && (
<PublishToInternet canPublish />
)}
{canPublish && share?.published && !document.isDraft && (
@@ -254,6 +269,12 @@ function SharePopover({
{expandedOptions && (
<>
{canPublish && sharedParent?.published && (
<>
<Separator />
<PublishToInternet canPublish />
</>
)}
<Separator />
<SwitchWrapper>
<Switch
@@ -327,6 +348,11 @@ function SharePopover({
);
}
const StyledLink = styled(Link)`
color: ${(props) => props.theme.textSecondary};
text-decoration: underline;
`;
const Heading = styled.h2`
display: flex;
align-items: center;
@@ -341,6 +367,10 @@ const SwitchWrapper = styled.div`
margin: 20px 0;
`;
const NoticeWrapper = styled.div`
margin: 20px 0;
`;
const MoreOptionsButton = styled(Button)`
background: none;
font-size: 14px;

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

@@ -500,12 +500,12 @@
"Share": "Share",
"Only lowercase letters, digits and dashes allowed": "Only lowercase letters, digits and dashes allowed",
"Sorry, this link has already been used": "Sorry, this link has already been used",
"Share this document": "Share this document",
"This document is shared because the parent <em>{{ documentTitle }}</em> is publicly shared": "This document is shared because the parent <em>{{ documentTitle }}</em> is publicly shared",
"Only members with permission can view": "Only members with permission can view",
"Publish to internet": "Publish to internet",
"Anyone with the link can view this document": "Anyone with the link can view this document",
"Only members with permission can view": "Only members with permission can view",
"The shared link was last accessed {{ timeAgo }}.": "The shared link was last accessed {{ timeAgo }}.",
"Share this document": "Share this document",
"This document is shared because the parent<1>{documentTitle}</1>is publicly shared.": "This document is shared because the parent<1>{documentTitle}</1>is publicly shared.",
"Share nested documents": "Share nested documents",
"Nested documents are publicly available": "Nested documents are publicly available",
"Nested documents are not shared": "Nested documents are not shared",