feat: Pin to home (#2880)
This commit is contained in:
Tom Moor
GitHub
75
app/scenes/Collection/Actions.tsx
Normal file
75
app/scenes/Collection/Actions.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import { observer } from "mobx-react";
|
||||
import { MoreIcon, PlusIcon } from "outline-icons";
|
||||
import * as React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
import Collection from "~/models/Collection";
|
||||
import { Action, Separator } from "~/components/Actions";
|
||||
import Button from "~/components/Button";
|
||||
import InputSearchPage from "~/components/InputSearchPage";
|
||||
import Tooltip from "~/components/Tooltip";
|
||||
import useStores from "~/hooks/useStores";
|
||||
import CollectionMenu from "~/menus/CollectionMenu";
|
||||
import { newDocumentPath } from "~/utils/routeHelpers";
|
||||
|
||||
type Props = {
|
||||
collection: Collection;
|
||||
};
|
||||
|
||||
function Actions({ collection }: Props) {
|
||||
const { t } = useTranslation();
|
||||
const { policies } = useStores();
|
||||
const can = policies.abilities(collection.id);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Action>
|
||||
<InputSearchPage
|
||||
source="collection"
|
||||
placeholder={`${t("Search in collection")}…`}
|
||||
label={`${t("Search in collection")}…`}
|
||||
collectionId={collection.id}
|
||||
/>
|
||||
</Action>
|
||||
{can.update && (
|
||||
<>
|
||||
<Action>
|
||||
<Tooltip
|
||||
tooltip={t("New document")}
|
||||
shortcut="n"
|
||||
delay={500}
|
||||
placement="bottom"
|
||||
>
|
||||
<Button
|
||||
as={Link}
|
||||
to={collection ? newDocumentPath(collection.id) : ""}
|
||||
disabled={!collection}
|
||||
icon={<PlusIcon />}
|
||||
>
|
||||
{t("New doc")}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Action>
|
||||
<Separator />
|
||||
</>
|
||||
)}
|
||||
<Action>
|
||||
<CollectionMenu
|
||||
collection={collection}
|
||||
placement="bottom-end"
|
||||
label={(props) => (
|
||||
<Button
|
||||
icon={<MoreIcon />}
|
||||
{...props}
|
||||
borderOnHover
|
||||
neutral
|
||||
small
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Action>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default observer(Actions);
|
||||
98
app/scenes/Collection/DropToImport.tsx
Normal file
98
app/scenes/Collection/DropToImport.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
import { observer } from "mobx-react";
|
||||
import * as React from "react";
|
||||
import Dropzone from "react-dropzone";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import styled, { css } from "styled-components";
|
||||
import HelpText from "~/components/HelpText";
|
||||
import LoadingIndicator from "~/components/LoadingIndicator";
|
||||
import useImportDocument from "~/hooks/useImportDocument";
|
||||
import useToasts from "~/hooks/useToasts";
|
||||
|
||||
type Props = {
|
||||
children: React.ReactNode;
|
||||
disabled: boolean;
|
||||
accept: string;
|
||||
collectionId: string;
|
||||
};
|
||||
|
||||
function DropToImport({ children, disabled, accept, collectionId }: Props) {
|
||||
const { handleFiles, isImporting } = useImportDocument(collectionId);
|
||||
const { showToast } = useToasts();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const handleRejection = React.useCallback(() => {
|
||||
showToast(
|
||||
t("Document not supported – try Markdown, Plain text, HTML, or Word"),
|
||||
{
|
||||
type: "error",
|
||||
}
|
||||
);
|
||||
}, [t, showToast]);
|
||||
|
||||
return (
|
||||
<Dropzone
|
||||
accept={accept}
|
||||
onDropAccepted={handleFiles}
|
||||
onDropRejected={handleRejection}
|
||||
disabled={disabled}
|
||||
noClick
|
||||
multiple
|
||||
>
|
||||
{({ getRootProps, getInputProps, isDragActive }) => (
|
||||
<DropzoneContainer
|
||||
{...getRootProps()}
|
||||
isDragActive={isDragActive}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
{isImporting && <LoadingIndicator />}
|
||||
|
||||
{children}
|
||||
<DropMessage>{t("Drop documents to import")}</DropMessage>
|
||||
</DropzoneContainer>
|
||||
)}
|
||||
</Dropzone>
|
||||
);
|
||||
}
|
||||
|
||||
const DropMessage = styled(HelpText)`
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
`;
|
||||
|
||||
const DropzoneContainer = styled.div<{ isDragActive?: boolean }>`
|
||||
outline-color: transparent !important;
|
||||
height: calc(100% - 56px);
|
||||
position: relative;
|
||||
|
||||
${({ isDragActive, theme }) =>
|
||||
isDragActive &&
|
||||
css`
|
||||
&:after {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
left: 24px;
|
||||
height: 85vh;
|
||||
background: ${theme.background};
|
||||
border-radius: 8px;
|
||||
border: 1px dashed ${theme.divider};
|
||||
box-shadow: 0 0 0 100px white;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
${DropMessage} {
|
||||
opacity: 1;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 50vh;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
export default observer(DropToImport);
|
||||
89
app/scenes/Collection/Empty.tsx
Normal file
89
app/scenes/Collection/Empty.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import { observer } from "mobx-react";
|
||||
import { NewDocumentIcon } from "outline-icons";
|
||||
import * as React from "react";
|
||||
import { Trans, useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
import styled from "styled-components";
|
||||
import Collection from "~/models/Collection";
|
||||
import CollectionPermissions from "~/scenes/CollectionPermissions";
|
||||
import Button from "~/components/Button";
|
||||
import Flex from "~/components/Flex";
|
||||
import HelpText from "~/components/HelpText";
|
||||
import Modal from "~/components/Modal";
|
||||
import useBoolean from "~/hooks/useBoolean";
|
||||
import useCurrentTeam from "~/hooks/useCurrentTeam";
|
||||
import useStores from "~/hooks/useStores";
|
||||
import { newDocumentPath } from "~/utils/routeHelpers";
|
||||
|
||||
type Props = {
|
||||
collection: Collection;
|
||||
};
|
||||
|
||||
function EmptyCollection({ collection }: Props) {
|
||||
const { policies } = useStores();
|
||||
const { t } = useTranslation();
|
||||
const team = useCurrentTeam();
|
||||
const can = policies.abilities(team.id);
|
||||
const collectionName = collection ? collection.name : "";
|
||||
|
||||
const [
|
||||
permissionsModalOpen,
|
||||
handlePermissionsModalOpen,
|
||||
handlePermissionsModalClose,
|
||||
] = useBoolean();
|
||||
|
||||
return (
|
||||
<Centered column>
|
||||
<HelpText>
|
||||
<Trans
|
||||
defaults="<em>{{ collectionName }}</em> doesn’t contain any
|
||||
documents yet."
|
||||
values={{
|
||||
collectionName,
|
||||
}}
|
||||
components={{
|
||||
em: <strong />,
|
||||
}}
|
||||
/>
|
||||
<br />
|
||||
{can.createDocument && (
|
||||
<Trans>Get started by creating a new one!</Trans>
|
||||
)}
|
||||
</HelpText>
|
||||
<Empty>
|
||||
{can.createDocument && (
|
||||
<Link to={newDocumentPath(collection.id)}>
|
||||
<Button icon={<NewDocumentIcon color="currentColor" />}>
|
||||
{t("Create a document")}
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
<Button onClick={handlePermissionsModalOpen} neutral>
|
||||
{t("Manage permissions")}…
|
||||
</Button>
|
||||
</Empty>
|
||||
<Modal
|
||||
title={t("Collection permissions")}
|
||||
onRequestClose={handlePermissionsModalClose}
|
||||
isOpen={permissionsModalOpen}
|
||||
>
|
||||
<CollectionPermissions collection={collection} />
|
||||
</Modal>
|
||||
</Centered>
|
||||
);
|
||||
}
|
||||
|
||||
const Centered = styled(Flex)`
|
||||
text-align: center;
|
||||
margin: 40vh auto 0;
|
||||
max-width: 380px;
|
||||
transform: translateY(-50%);
|
||||
`;
|
||||
|
||||
const Empty = styled(Flex)`
|
||||
justify-content: center;
|
||||
margin: 10px 0;
|
||||
`;
|
||||
|
||||
export default observer(EmptyCollection);
|
||||
Reference in New Issue
Block a user