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

fix: create a generic notice component (#3144)

Browse Source 
* fix: use unstable_fixed option

* fix: add icons in notice

* fix: create generic Notice component

* Refactor: Pull document notices into component

Co-authored-by: Tom Moor <tom.moor@gmail.com>
This commit is contained in:
Saumya Pandey
2022-02-20 00:35:56 +05:30
committed by GitHub
parent 64d4462412
commit 5db73726f7
6 changed files with 140 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/components/Notice.ts
View File

@@ -1,11 +0,0 @@
import styled from "styled-components";
const Notice = styled.p`
background: ${(props) => props.theme.sidebarBackground};
color: ${(props) => props.theme.sidebarText};
padding: 10px 12px;
border-radius: 4px;
position: relative;
`;
export default Notice;

50
app/components/Notice.tsx Normal file
View File

@@ -0,0 +1,50 @@
import React from "react";
import styled from "styled-components";
import Flex from "./Flex";
import Text from "./Text";
type Props = {
children: React.ReactNode;
icon?: JSX.Element;
description?: JSX.Element;
};
const Notice = ({ children, icon, description }: Props) => {
return (
<Container>
<Flex as="span" gap={8}>
{icon}
<span>
<Title>{children}</Title>
{description && (
<>
<br />
{description}
</>
)}
</span>
</Flex>
</Container>
);
};
const Title = styled.span`
font-weight: 500;
font-size: 16px;
`;
const Container = styled(Text)`
background: ${(props) => props.theme.sidebarBackground};
color: ${(props) => props.theme.sidebarText};
padding: 10px 12px;
border-radius: 4px;
position: relative;
font-size: 14px;
margin: 1em 0 0;
svg {
flex-shrink: 0;
}
`;
export default Notice;

61
app/scenes/Document/components/Document.tsx
View File

@@ -1,10 +1,9 @@
import { debounce } from "lodash";
import { action, observable } from "mobx";
import { observer } from "mobx-react";
import { InputIcon } from "outline-icons";
import { AllSelection } from "prosemirror-state";
import * as React from "react";
import { WithTranslation, Trans, withTranslation } from "react-i18next";
import { WithTranslation, withTranslation } from "react-i18next";
import {
Prompt,
Route,
@@ -26,11 +25,9 @@ import ErrorBoundary from "~/components/ErrorBoundary";
import Flex from "~/components/Flex";
import LoadingIndicator from "~/components/LoadingIndicator";
import Modal from "~/components/Modal";
import Notice from "~/components/Notice";
import PageTitle from "~/components/PageTitle";
import PlaceholderDocument from "~/components/PlaceholderDocument";
import RegisterKeyDown from "~/components/RegisterKeyDown";
import Time from "~/components/Time";
import withStores from "~/components/withStores";
import { NavigationNode } from "~/types";
import { client } from "~/utils/ApiClient";
@@ -50,6 +47,7 @@ import Editor from "./Editor";
import Header from "./Header";
import KeyboardShortcutsButton from "./KeyboardShortcutsButton";
import MarkAsViewed from "./MarkAsViewed";
import Notices from "./Notices";
import PublicReferences from "./PublicReferences";
import References from "./References";
@@ -534,52 +532,7 @@ class DocumentScene extends React.Component<Props> {
column
auto
>
{document.isTemplate && !readOnly && (
<Notice>
<Trans>
You’re editing a template. Highlight some text and use the{" "}
<PlaceholderIcon color="currentColor" /> control to add
placeholders that can be filled out when creating new
documents from this template.
</Trans>
</Notice>
)}
{document.archivedAt && !document.deletedAt && (
<Notice>
{t("Archived by {{userName}}", {
userName: document.updatedBy.name,
})}{" "}
<Time dateTime={document.updatedAt} addSuffix />
</Notice>
)}
{document.deletedAt && (
<Notice>
<strong>
{t("Deleted by {{userName}}", {
userName: document.updatedBy.name,
})}{" "}
<Time dateTime={document.deletedAt || ""} addSuffix />
</strong>
{document.permanentlyDeletedAt && (
<>
<br />
{document.template ? (
<Trans>
This template will be permanently deleted in{" "}
<Time dateTime={document.permanentlyDeletedAt} />{" "}
unless restored.
</Trans>
) : (
<Trans>
This document will be permanently deleted in{" "}
<Time dateTime={document.permanentlyDeletedAt} />{" "}
unless restored.
</Trans>
)}
</>
)}
</Notice>
)}
<Notices document={document} readOnly={readOnly} />
<React.Suspense fallback={<PlaceholderDocument />}>
<Flex auto={!readOnly}>
{showContents && (
@@ -651,11 +604,6 @@ class DocumentScene extends React.Component<Props> {
}
}
const PlaceholderIcon = styled(InputIcon)`
position: relative;
top: 6px;
`;
const Background = styled(Container)`
background: ${(props) => props.theme.background};
transition: ${(props) => props.theme.backgroundTransition};
@@ -677,9 +625,6 @@ type MaxWidthProps = {
};
const MaxWidth = styled(Flex)<MaxWidthProps>`
${(props) =>
props.archived && `* { color: ${props.theme.textSecondary} !important; } `};
// Adds space to the gutter to make room for heading annotations
padding: 0 32px;
transition: padding 100ms;

4
app/scenes/Document/components/Editor.tsx
View File

@@ -101,9 +101,7 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
onGoToNextInput={handleGoToNextInput}
onChange={onChangeTitle}
starrable={!shareId}
placeholder={
document.isTemplate ? t("Name your template…") : t("Untitled")
}
placeholder={t("Untitled")}
/>
{!shareId && (
<DocumentMetaWithViews

80
app/scenes/Document/components/Notices.tsx Normal file
View File

@@ -0,0 +1,80 @@
import { TrashIcon, ArchiveIcon, ShapesIcon, InputIcon } from "outline-icons";
import * as React from "react";
import { Trans, useTranslation } from "react-i18next";
import styled from "styled-components";
import Document from "~/models/Document";
import Notice from "~/components/Notice";
import Time from "~/components/Time";
type Props = {
document: Document;
readOnly: boolean;
};
export default function Notices({ document, readOnly }: Props) {
const { t } = useTranslation();
function permanentlyDeletedDescription() {
if (!document.permanentlyDeletedAt) {
return;
}
return document.template ? (
<Trans>
This template will be permanently deleted in{" "}
<Time dateTime={document.permanentlyDeletedAt} /> unless restored.
</Trans>
) : (
<Trans>
This document will be permanently deleted in{" "}
<Time dateTime={document.permanentlyDeletedAt} /> unless restored.
</Trans>
);
}
return (
<>
{document.isTemplate && !readOnly && (
<Notice
icon={<ShapesIcon />}
description={
<Trans>
Highlight some text and use the{" "}
<PlaceholderIcon color="currentColor" /> control to add
placeholders that can be filled out when creating new documents
</Trans>
}
>
{t("You’re editing a template")}
</Notice>
)}
{document.archivedAt && !document.deletedAt && (
<Notice icon={<ArchiveIcon />}>
{t("Archived by {{userName}}", {
userName: document.updatedBy.name,
})}
&nbsp;
<Time dateTime={document.updatedAt} addSuffix />
</Notice>
)}
{document.deletedAt && (
<Notice
icon={<TrashIcon />}
description={permanentlyDeletedDescription()}
>
{t("Deleted by {{userName}}", {
userName: document.updatedBy.name,
})}
&nbsp;
<Time dateTime={document.deletedAt} addSuffix />
</Notice>
)}
</>
);
}
const PlaceholderIcon = styled(InputIcon)`
position: relative;
top: 6px;
margin-top: -6px;
`;

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

@@ -364,14 +364,11 @@
"Add groups to {{ collectionName }}": "Add groups to {{ collectionName }}",
"Add people to {{ collectionName }}": "Add people to {{ collectionName }}",
"Document updated by {{userName}}": "Document updated by {{userName}}",
"You have unsaved changes.\nAre you sure you want to discard them?": "You have unsaved changes.\nAre you sure you want to discard them?",
"Images are still uploading.\nAre you sure you want to discard them?": "Images are still uploading.\nAre you sure you want to discard them?",
"You’re editing a template. Highlight some text and use the <2></2> control to add placeholders that can be filled out when creating new documents from this template.": "You’re editing a template. Highlight some text and use the <2></2> control to add placeholders that can be filled out when creating new documents from this template.",
"Archived by {{userName}}": "Archived by {{userName}}",
"Deleted by {{userName}}": "Deleted by {{userName}}",
"This template will be permanently deleted in <2></2> unless restored.": "This template will be permanently deleted in <2></2> unless restored.",
"This document will be permanently deleted in <2></2> unless restored.": "This document will be permanently deleted in <2></2> unless restored.",
"Name your template…": "Name your template…",
"You have unsaved changes.\nAre you sure you want to discard them?": "You have unsaved changes.\nAre you sure you want to discard them?",
"Images are still uploading.\nAre you sure you want to discard them?": "Images are still uploading.\nAre you sure you want to discard them?",
"Untitled template": "Untitled template",
"Type '/' to insert, or start writing…": "Type '/' to insert, or start writing…",
"Hide contents": "Hide contents",
"Show contents": "Show contents",
@@ -385,6 +382,9 @@
"Publish": "Publish",
"Publishing": "Publishing",
"Sorry, it looks like you don’t have permission to access the document": "Sorry, it looks like you don’t have permission to access the document",
"You’re editing a template. Highlight some text and use the <2></2> control to add placeholders that can be filled out when creating new documents from this template.": "You’re editing a template. Highlight some text and use the <2></2> control to add placeholders that can be filled out when creating new documents from this template.",
"Archived by {{userName}}": "Archived by {{userName}}",
"Deleted by {{userName}}": "Deleted by {{userName}}",
"Observing {{ userName }}": "Observing {{ userName }}",
"Nested documents": "Nested documents",
"Referenced by": "Referenced by",