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

feat: I18n (#1653)

Browse Source 
* feat: i18n

* Changing language single source of truth from TEAM to USER

* Changes according to @tommoor comments on PR

* Changed package.json for build:i18n and translation label

* Finished 1st MVP of i18n for outline

* new translation labels & Portuguese from Portugal translation

* Fixes from PR request

* Described language dropdown as an experimental feature

* Set keySeparator to false in order to cowork with html keys

* Added useTranslation to Breadcrumb

* Repositioned <strong> element

* Removed extra space from TemplatesMenu

* Fortified the test suite for i18n

* Fixed trans component problematic

* Check if selected language is available

* Update yarn.lock

* Removed unused Trans

* Removing debug variable from i18n init

* Removed debug variable

* test: update snapshots

* flow: Remove decorator usage to get proper flow typing
It's a shame, but hopefully we'll move to Typescript in the next 6 months and we can forget this whole Flow mistake ever happened

* translate: Drafts

* More translatable strings

* Mo translation strings

* translation: Search

* async translations loading

* cache translations in client

* Revert "cache translations in client"

This reverts commit 08fb61ce36384ff90a704faffe4761eccfb76da1.

* Revert localStorage cache for cache headers

* Update Crowdin configuration file

* Moved translation files to locales folder and fixed english text

* Added CONTRIBUTING File for CrowdIn

* chore: Move translations again to please CrowdIn

* fix: loading paths
chore: Add strings for editor

* fix: Improve validation on documents.import endpoint

* test: mock bull

* fix: Unknown mimetype should fallback to Markdown parsing if markdown extension (#1678)

* closes #1675

* Update CONTRIBUTING

* chore: Add link to translation portal from app UI

* refactor: Centralize language config

* fix: Ensure creation of i18n directory in build

* feat: Add language prompt

* chore: Improve contributing guidelines, add link from README

* chore: Normalize tab header casing

* chore: More string externalization

* fix: Language prompt in dark mode

Co-authored-by: André Glatzl <andreglatzl@gmail.com>
This commit is contained in:
Tom Moor
2020-11-29 20:04:58 -08:00
committed by GitHub
parent 63c73c9a51
commit 1285efc49a
85 changed files with 6432 additions and 2613 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/components/Authenticated.js
View File

@@ -1,18 +1,30 @@
// @flow
import { observer, inject } from "mobx-react";
import { observer } from "mobx-react";
import * as React from "react";
import { useTranslation } from "react-i18next";
import { Redirect } from "react-router-dom";
import { isCustomSubdomain } from "shared/utils/domains";
import AuthStore from "stores/AuthStore";
import LoadingIndicator from "components/LoadingIndicator";
import useStores from "../hooks/useStores";
import env from "env";
type Props = {
auth: AuthStore,
children?: React.Node,
children: React.Node,
};
const Authenticated = observer(({ auth, children }: Props) => {
const Authenticated = ({ children }: Props) => {
const { auth } = useStores();
const { i18n } = useTranslation();
const language = auth.user && auth.user.language;
// Watching for language changes here as this is the earliest point we have
// the user available and means we can start loading translations faster
React.useEffect(() => {
if (i18n.language !== language) {
i18n.changeLanguage(language);
}
}, [i18n, language]);
if (auth.authenticated) {
const { user, team } = auth;
const { hostname } = window.location;
@@ -43,6 +55,6 @@ const Authenticated = observer(({ auth, children }: Props) => {
auth.logout(true);
return <Redirect to="/" />;
});
};
export default inject("auth")(Authenticated);
export default observer(Authenticated);

21
app/components/Avatar/AvatarWithPresence.js
View File

@@ -4,6 +4,7 @@ import { observable } from "mobx";
import { observer } from "mobx-react";
import { EditIcon } from "outline-icons";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import styled from "styled-components";
import User from "models/User";
import UserProfile from "scenes/UserProfile";
@@ -16,6 +17,7 @@ type Props = {
isEditing: boolean,
isCurrentUser: boolean,
lastViewedAt: string,
t: TFunction,
};
@observer
@@ -37,20 +39,25 @@ class AvatarWithPresence extends React.Component<Props> {
isPresent,
isEditing,
isCurrentUser,
t,
} = this.props;
const action = isPresent
? isEditing
? t("currently editing")
: t("currently viewing")
: t("viewed {{ timeAgo }} ago", {
timeAgo: distanceInWordsToNow(new Date(lastViewedAt)),
});
return (
<>
<Tooltip
tooltip={
<Centered>
<strong>{user.name}</strong> {isCurrentUser && "(You)"}
<strong>{user.name}</strong> {isCurrentUser && `(${t("You")})`}
<br />
{isPresent
? isEditing
? "currently editing"
: "currently viewing"
: `viewed ${distanceInWordsToNow(new Date(lastViewedAt))} ago`}
{action}
</Centered>
}
placement="bottom"
@@ -83,4 +90,4 @@ const AvatarWrapper = styled.div`
transition: opacity 250ms ease-in-out;
`;
export default AvatarWithPresence;
export default withTranslation()<AvatarWithPresence>(AvatarWithPresence);

25
app/components/Breadcrumb.js
View File

@@ -1,5 +1,5 @@
// @flow
import { observer, inject } from "mobx-react";
import { observer } from "mobx-react";
import {
ArchiveIcon,
EditIcon,
@@ -10,6 +10,7 @@ import {
TrashIcon,
} from "outline-icons";
import * as React from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import styled from "styled-components";
import breakpoint from "styled-components-breakpoint";
@@ -19,6 +20,7 @@ import Document from "models/Document";
import CollectionIcon from "components/CollectionIcon";
import Flex from "components/Flex";
import BreadcrumbMenu from "./BreadcrumbMenu";
import useStores from "hooks/useStores";
import { collectionUrl } from "utils/routeHelpers";
type Props = {
@@ -28,13 +30,15 @@ type Props = {
};
function Icon({ document }) {
const { t } = useTranslation();
if (document.isDeleted) {
return (
<>
<CollectionName to="/trash">
<TrashIcon color="currentColor" />
&nbsp;
<span>Trash</span>
<span>{t("Trash")}</span>
</CollectionName>
<Slash />
</>
@@ -46,7 +50,7 @@ function Icon({ document }) {
<CollectionName to="/archive">
<ArchiveIcon color="currentColor" />
&nbsp;
<span>Archive</span>
<span>{t("Archive")}</span>
</CollectionName>
<Slash />
</>
@@ -58,7 +62,7 @@ function Icon({ document }) {
<CollectionName to="/drafts">
<EditIcon color="currentColor" />
&nbsp;
<span>Drafts</span>
<span>{t("Drafts")}</span>
</CollectionName>
<Slash />
</>
@@ -70,7 +74,7 @@ function Icon({ document }) {
<CollectionName to="/templates">
<ShapesIcon color="currentColor" />
&nbsp;
<span>Templates</span>
<span>{t("Templates")}</span>
</CollectionName>
<Slash />
</>
@@ -79,14 +83,17 @@ function Icon({ document }) {
return null;
}
const Breadcrumb = observer(({ document, collections, onlyText }: Props) => {
const Breadcrumb = ({ document, onlyText }: Props) => {
const { collections } = useStores();
const { t } = useTranslation();
let collection = collections.get(document.collectionId);
if (!collection) {
if (!document.deletedAt) return <div />;
collection = {
id: document.collectionId,
name: "Deleted Collection",
name: t("Deleted Collection"),
color: "currentColor",
};
}
@@ -141,7 +148,7 @@ const Breadcrumb = observer(({ document, collections, onlyText }: Props) => {
)}
</Wrapper>
);
});
};
const Wrapper = styled(Flex)`
display: none;
@@ -202,4 +209,4 @@ const CollectionName = styled(Link)`
overflow: hidden;
`;
export default inject("collections")(Breadcrumb);
export default observer(Breadcrumb);

34
app/components/DocumentMeta.js
View File

@@ -1,14 +1,14 @@
// @flow
import { inject, observer } from "mobx-react";
import { observer } from "mobx-react";
import * as React from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import styled from "styled-components";
import AuthStore from "stores/AuthStore";
import CollectionsStore from "stores/CollectionsStore";
import Document from "models/Document";
import Breadcrumb from "components/Breadcrumb";
import Flex from "components/Flex";
import Time from "components/Time";
import useStores from "hooks/useStores";
const Container = styled(Flex)`
color: ${(props) => props.theme.textTertiary};
@@ -23,8 +23,6 @@ const Modified = styled.span`
`;
type Props = {
collections: CollectionsStore,
auth: AuthStore,
showCollection?: boolean,
showPublished?: boolean,
showLastViewed?: boolean,
@@ -34,8 +32,6 @@ type Props = {
};
function DocumentMeta({
auth,
collections,
showPublished,
showCollection,
showLastViewed,
@@ -44,6 +40,8 @@ function DocumentMeta({
to,
...rest
}: Props) {
const { t } = useTranslation();
const { collections, auth } = useStores();
const {
modifiedSinceViewed,
updatedAt,
@@ -67,37 +65,37 @@ function DocumentMeta({
if (deletedAt) {
content = (
<span>
deleted <Time dateTime={deletedAt} addSuffix />
{t("deleted")} <Time dateTime={deletedAt} addSuffix />
</span>
);
} else if (archivedAt) {
content = (
<span>
archived <Time dateTime={archivedAt} addSuffix />
{t("archived")} <Time dateTime={archivedAt} addSuffix />
</span>
);
} else if (createdAt === updatedAt) {
content = (
<span>
created <Time dateTime={updatedAt} addSuffix />
{t("created")} <Time dateTime={updatedAt} addSuffix />
</span>
);
} else if (publishedAt && (publishedAt === updatedAt || showPublished)) {
content = (
<span>
published <Time dateTime={publishedAt} addSuffix />
{t("published")} <Time dateTime={publishedAt} addSuffix />
</span>
);
} else if (isDraft) {
content = (
<span>
saved <Time dateTime={updatedAt} addSuffix />
{t("saved")} <Time dateTime={updatedAt} addSuffix />
</span>
);
} else {
content = (
<Modified highlight={modifiedSinceViewed}>
updated <Time dateTime={updatedAt} addSuffix />
{t("updated")} <Time dateTime={updatedAt} addSuffix />
</Modified>
);
}
@@ -112,25 +110,25 @@ function DocumentMeta({
if (!lastViewedAt) {
return (
<>
•&nbsp;<Modified highlight>Never viewed</Modified>
•&nbsp;<Modified highlight>{t("Never viewed")}</Modified>
</>
);
}
return (
<span>
•&nbsp;Viewed <Time dateTime={lastViewedAt} addSuffix shorten />
•&nbsp;{t("Viewed")} <Time dateTime={lastViewedAt} addSuffix shorten />
</span>
);
};
return (
<Container align="center" {...rest}>
{updatedByMe ? "You" : updatedBy.name}&nbsp;
{updatedByMe ? t("You") : updatedBy.name}&nbsp;
{to ? <Link to={to}>{content}</Link> : content}
{showCollection && collection && (
<span>
&nbsp;in&nbsp;
&nbsp;{t("in")}&nbsp;
<strong>
<Breadcrumb document={document} onlyText />
</strong>
@@ -142,4 +140,4 @@ function DocumentMeta({
);
}
export default inject("collections", "auth")(observer(DocumentMeta));
export default observer(DocumentMeta);

19
app/components/DocumentPreview/DocumentPreview.js
View File

@@ -3,6 +3,7 @@ import { observable } from "mobx";
import { observer } from "mobx-react";
import { StarredIcon, PlusIcon } from "outline-icons";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { Link, Redirect } from "react-router-dom";
import styled, { withTheme } from "styled-components";
import Document from "models/Document";
@@ -25,6 +26,7 @@ type Props = {
showPin?: boolean,
showDraft?: boolean,
showTemplate?: boolean,
t: TFunction,
};
const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;
@@ -72,6 +74,7 @@ class DocumentPreview extends React.Component<Props> {
showTemplate,
highlight,
context,
t,
} = this.props;
if (this.redirectTo) {
@@ -91,7 +94,7 @@ class DocumentPreview extends React.Component<Props> {
>
<Heading>
<Title text={document.titleWithDefault} highlight={highlight} />
{document.isNew && <Badge yellow>New</Badge>}
{document.isNew && <Badge yellow>{t("New")}</Badge>}
{!document.isDraft &&
!document.isArchived &&
!document.isTemplate && (
@@ -104,12 +107,16 @@ class DocumentPreview extends React.Component<Props> {
</Actions>
)}
{document.isDraft && showDraft && (
<Tooltip tooltip="Only visible to you" delay={500} placement="top">
<Badge>Draft</Badge>
<Tooltip
tooltip={t("Only visible to you")}
delay={500}
placement="top"
>
<Badge>{t("Draft")}</Badge>
</Tooltip>
)}
{document.isTemplate && showTemplate && (
<Badge primary>Template</Badge>
<Badge primary>{t("Template")}</Badge>
)}
<SecondaryActions>
{document.isTemplate &&
@@ -120,7 +127,7 @@ class DocumentPreview extends React.Component<Props> {
icon={<PlusIcon />}
neutral
>
New doc
{t("New doc")}
</Button>
)}
&nbsp;
@@ -237,4 +244,4 @@ const ResultContext = styled(Highlight)`
margin-bottom: 0.25em;
`;
export default DocumentPreview;
export default withTranslation()<DocumentPreview>(DocumentPreview);

8
app/components/DropdownMenu/DropdownMenu.js
View File

@@ -5,6 +5,7 @@ import { observer } from "mobx-react";
import { MoreIcon } from "outline-icons";
import { rgba } from "polished";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { PortalWithState } from "react-portal";
import styled from "styled-components";
import { fadeAndScaleIn } from "shared/styles/animations";
@@ -27,6 +28,7 @@ type Props = {|
hover?: boolean,
style?: Object,
position?: "left" | "right" | "center",
t: TFunction,
|};
@observer
@@ -150,7 +152,7 @@ class DropdownMenu extends React.Component<Props> {
};
render() {
const { className, hover, label, children } = this.props;
const { className, hover, label, children, t } = this.props;
return (
<div className={className}>
@@ -177,7 +179,7 @@ class DropdownMenu extends React.Component<Props> {
{label || (
<NudeButton
id={`${this.id}button`}
aria-label="More options"
aria-label={t("More options")}
aria-haspopup="true"
aria-expanded={isOpen ? "true" : "false"}
aria-controls={this.id}
@@ -284,4 +286,4 @@ export const Header = styled.h3`
margin: 1em 12px 0.5em;
`;
export default DropdownMenu;
export default withTranslation()<DropdownMenu>(DropdownMenu);

166
app/components/Editor.js
View File

@@ -1,6 +1,7 @@
// @flow
import { lighten } from "polished";
import * as React from "react";
import { useTranslation } from "react-i18next";
import { withRouter, type RouterHistory } from "react-router-dom";
import styled, { withTheme } from "styled-components";
import UiStore from "stores/UiStore";
@@ -28,60 +29,129 @@ type PropsWithRef = Props & {
history: RouterHistory,
};
class Editor extends React.Component<PropsWithRef> {
onUploadImage = async (file: File) => {
const result = await uploadFile(file, { documentId: this.props.id });
return result.url;
};
function Editor(props: PropsWithRef) {
const { id, ui, history } = props;
const { t } = useTranslation();
onClickLink = (href: string, event: MouseEvent) => {
// on page hash
if (href[0] === "#") {
window.location.href = href;
return;
}
const onUploadImage = React.useCallback(
async (file: File) => {
const result = await uploadFile(file, { documentId: id });
return result.url;
},
[id]
);
if (isInternalUrl(href) && !event.metaKey && !event.shiftKey) {
// relative
let navigateTo = href;
// probably absolute
if (href[0] !== "/") {
try {
const url = new URL(href);
navigateTo = url.pathname + url.hash;
} catch (err) {
navigateTo = href;
}
const onClickLink = React.useCallback(
(href: string, event: MouseEvent) => {
// on page hash
if (href[0] === "#") {
window.location.href = href;
return;
}
this.props.history.push(navigateTo);
} else if (href) {
window.open(href, "_blank");
}
};
if (isInternalUrl(href) && !event.metaKey && !event.shiftKey) {
// relative
let navigateTo = href;
onShowToast = (message: string) => {
if (this.props.ui) {
this.props.ui.showToast(message);
}
};
// probably absolute
if (href[0] !== "/") {
try {
const url = new URL(href);
navigateTo = url.pathname + url.hash;
} catch (err) {
navigateTo = href;
}
}
render() {
return (
<ErrorBoundary reloadOnChunkMissing>
<StyledEditor
ref={this.props.forwardedRef}
uploadImage={this.onUploadImage}
onClickLink={this.onClickLink}
onShowToast={this.onShowToast}
embeds={this.props.disableEmbeds ? EMPTY_ARRAY : embeds}
tooltip={EditorTooltip}
{...this.props}
/>
</ErrorBoundary>
);
}
history.push(navigateTo);
} else if (href) {
window.open(href, "_blank");
}
},
[history]
);
const onShowToast = React.useCallback(
(message: string) => {
if (ui) {
ui.showToast(message);
}
},
[ui]
);
const dictionary = React.useMemo(() => {
return {
addColumnAfter: t("Insert column after"),
addColumnBefore: t("Insert column before"),
addRowAfter: t("Insert row after"),
addRowBefore: t("Insert row before"),
alignCenter: t("Align center"),
alignLeft: t("Align left"),
alignRight: t("Align right"),
bulletList: t("Bulleted list"),
checkboxList: t("Todo list"),
codeBlock: t("Code block"),
codeCopied: t("Copied to clipboard"),
codeInline: t("Code"),
createLink: t("Create link"),
createLinkError: t("Sorry, an error occurred creating the link"),
createNewDoc: t("Create a new doc"),
deleteColumn: t("Delete column"),
deleteRow: t("Delete row"),
deleteTable: t("Delete table"),
em: t("Italic"),
embedInvalidLink: t("Sorry, that link won’t work for this embed type"),
findOrCreateDoc: t("Find or create a doc…"),
h1: t("Big heading"),
h2: t("Medium heading"),
h3: t("Small heading"),
heading: t("Heading"),
hr: t("Divider"),
image: t("Image"),
imageUploadError: t("Sorry, an error occurred uploading the image"),
info: t("Info"),
infoNotice: t("Info notice"),
link: t("Link"),
linkCopied: t("Link copied to clipboard"),
mark: t("Highlight"),
newLineEmpty: t("Type '/' to insert…"),
newLineWithSlash: t("Keep typing to filter…"),
noResults: t("No results"),
openLink: t("Open link"),
orderedList: t("Ordered list"),
pasteLink: t("Paste a link…"),
pasteLinkWithTitle: (service: string) =>
t("Paste a {{service}} link…", { service }),
placeholder: t("Placeholder"),
quote: t("Quote"),
removeLink: t("Remove link"),
searchOrPasteLink: t("Search or paste a link…"),
strikethrough: t("Strikethrough"),
strong: t("Bold"),
subheading: t("Subheading"),
table: t("Table"),
tip: t("Tip"),
tipNotice: t("Tip notice"),
warning: t("Warning"),
warningNotice: t("Warning notice"),
};
}, [t]);
return (
<ErrorBoundary reloadOnChunkMissing>
<StyledEditor
ref={props.forwardedRef}
uploadImage={onUploadImage}
onClickLink={onClickLink}
onShowToast={onShowToast}
embeds={props.disableEmbeds ? EMPTY_ARRAY : embeds}
tooltip={EditorTooltip}
dictionary={dictionary}
{...props}
/>
</ErrorBoundary>
);
}
const StyledEditor = styled(RichMarkdownEditor)`

10
app/components/HoverPreviewDocument.js
View File

@@ -1,20 +1,20 @@
// @flow
import { inject, observer } from "mobx-react";
import { observer } from "mobx-react";
import * as React from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";
import parseDocumentSlug from "shared/utils/parseDocumentSlug";
import DocumentsStore from "stores/DocumentsStore";
import DocumentMetaWithViews from "components/DocumentMetaWithViews";
import Editor from "components/Editor";
import useStores from "hooks/useStores";
type Props = {
url: string,
documents: DocumentsStore,
children: (React.Node) => React.Node,
};
function HoverPreviewDocument({ url, documents, children }: Props) {
function HoverPreviewDocument({ url, children }: Props) {
const { documents } = useStores();
const slug = parseDocumentSlug(url);
documents.prefetchDocument(slug, {
@@ -50,4 +50,4 @@ const Heading = styled.h2`
color: ${(props) => props.theme.text};
`;
export default inject("documents")(observer(HoverPreviewDocument));
export default observer(HoverPreviewDocument);

9
app/components/IconPicker.js
View File

@@ -22,6 +22,7 @@ import {
VehicleIcon,
} from "outline-icons";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import styled from "styled-components";
import { DropdownMenu } from "components/DropdownMenu";
import Flex from "components/Flex";
@@ -126,6 +127,7 @@ type Props = {
onChange: (color: string, icon: string) => void,
icon: string,
color: string,
t: TFunction,
};
function preventEventBubble(event) {
@@ -167,12 +169,13 @@ class IconPicker extends React.Component<Props> {
};
render() {
const { t } = this.props;
const Component = icons[this.props.icon || "collection"].component;
return (
<Wrapper ref={(ref) => (this.node = ref)}>
<label>
<LabelText>Icon</LabelText>
<LabelText>{t("Icon")}</LabelText>
</label>
<DropdownMenu
onOpen={this.handleOpen}
@@ -197,7 +200,7 @@ class IconPicker extends React.Component<Props> {
})}
</Icons>
<Flex onClick={preventEventBubble}>
<React.Suspense fallback={<Loading>Loading…</Loading>}>
<React.Suspense fallback={<Loading>{t("Loading…")}</Loading>}>
<ColorPicker
color={this.props.color}
onChange={(color) =>
@@ -246,4 +249,4 @@ const Wrapper = styled("div")`
position: relative;
`;
export default IconPicker;
export default withTranslation()<IconPicker>(IconPicker);

13
app/components/InputSearch.js
View File

@@ -3,6 +3,7 @@ import { observable } from "mobx";
import { observer } from "mobx-react";
import { SearchIcon } from "outline-icons";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import keydown from "react-keydown";
import { withRouter, type RouterHistory } from "react-router-dom";
import styled, { withTheme } from "styled-components";
@@ -16,6 +17,7 @@ type Props = {
source: string,
placeholder?: string,
collectionId?: string,
t: TFunction,
};
@observer
@@ -24,7 +26,7 @@ class InputSearch extends React.Component<Props> {
@observable focused: boolean = false;
@keydown("meta+f")
focus(ev) {
focus(ev: SyntheticEvent<>) {
ev.preventDefault();
if (this.input) {
@@ -32,7 +34,7 @@ class InputSearch extends React.Component<Props> {
}
}
handleSearchInput = (ev) => {
handleSearchInput = (ev: SyntheticInputEvent<>) => {
ev.preventDefault();
this.props.history.push(
searchUrl(ev.target.value, {
@@ -51,7 +53,8 @@ class InputSearch extends React.Component<Props> {
};
render() {
const { theme, placeholder = "Search…" } = this.props;
const { t } = this.props;
const { theme, placeholder = t("Search…") } = this.props;
return (
<InputMaxWidth
@@ -76,4 +79,6 @@ const InputMaxWidth = styled(Input)`
max-width: 30vw;
`;
export default withTheme(withRouter(InputSearch));
export default withTranslation()<InputSearch>(
withTheme(withRouter(InputSearch))
);

19
app/components/InputSelect.js
View File

@@ -20,11 +20,17 @@ const Select = styled.select`
}
`;
const Wrapper = styled.label`
display: block;
max-width: ${(props) => (props.short ? "350px" : "100%")};
`;
type Option = { label: string, value: string };
export type Props = {
value?: string,
label?: string,
short?: boolean,
className?: string,
labelHidden?: boolean,
options: Option[],
@@ -43,12 +49,19 @@ class InputSelect extends React.Component<Props> {
};
render() {
const { label, className, labelHidden, options, ...rest } = this.props;
const {
label,
className,
labelHidden,
options,
short,
...rest
} = this.props;
const wrappedLabel = <LabelText>{label}</LabelText>;
return (
<label>
<Wrapper short={short}>
{label &&
(labelHidden ? (
<VisuallyHidden>{wrappedLabel}</VisuallyHidden>
@@ -64,7 +77,7 @@ class InputSelect extends React.Component<Props> {
))}
</Select>
</Outline>
</label>
</Wrapper>
);
}
}

90
app/components/LanguagePrompt.js Normal file
View File

@@ -0,0 +1,90 @@
// @flow
import { find } from "lodash";
import * as React from "react";
import { Trans, useTranslation } from "react-i18next";
import styled from "styled-components";
import { languages, languageOptions } from "shared/i18n";
import Flex from "components/Flex";
import NoticeTip from "components/NoticeTip";
import useCurrentUser from "hooks/useCurrentUser";
import useStores from "hooks/useStores";
import { detectLanguage } from "utils/language";
function Icon(props) {
return (
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M21 18H16L14 16V6C14 4.89543 14.8954 4 16 4H28C29.1046 4 30 4.89543 30 6V16C30 17.1046 29.1046 18 28 18H27L25.4142 19.5858C24.6332 20.3668 23.3668 20.3668 22.5858 19.5858L21 18ZM16 15.1716V6H28V16H27H26.1716L25.5858 16.5858L24 18.1716L22.4142 16.5858L21.8284 16H21H16.8284L16 15.1716Z"
fill="#2B2F35"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M16 13H4C2.89543 13 2 13.8954 2 15V25C2 26.1046 2.89543 27 4 27H5L6.58579 28.5858C7.36684 29.3668 8.63316 29.3668 9.41421 28.5858L11 27H16C17.1046 27 18 26.1046 18 25V15C18 13.8954 17.1046 13 16 13ZM9 17L6 16.9681C6 16.9681 5 17.016 5 18C5 18.984 6 19 6 19H8.5H10C10 19 9.57627 20.1885 8.38983 21.0831C7.20339 21.9777 5.7197 23 5.7197 23C5.7197 23 4.99153 23.6054 5.5 24.5C6.00847 25.3946 7 24.8403 7 24.8403L9.74576 22.8722L11.9492 24.6614C11.9492 24.6614 12.6271 25.3771 13.3051 24.4825C13.9831 23.5879 13.3051 23.0512 13.3051 23.0512L11.1017 21.262C11.1017 21.262 11.5 21 12 20L12.5 19H14C14 19 15 19.0319 15 18C15 16.9681 14 16.9681 14 16.9681L11 17V16C11 16 11.0169 15 10 15C8.98305 15 9 16 9 16V17Z"
fill="#2B2F35"
/>
<path
d="M23.6672 12.5221L23.5526 12.1816H23.1934H20.8818H20.5215L20.4075 12.5235L20.082 13.5H19.2196L21.2292 8.10156H21.8774L21.5587 9.06116L20.7633 11.4562L20.5449 12.1138H21.2378H22.8374H23.5327L23.3114 11.4546L22.5072 9.05959L22.1855 8.10156H22.768L24.7887 13.5H23.9964L23.6672 12.5221Z"
fill="#2B2F35"
stroke="#2B2F35"
/>
</svg>
);
}
export default function LanguagePrompt() {
const { auth, ui } = useStores();
const { t } = useTranslation();
const user = useCurrentUser();
const language = detectLanguage();
if (language === "en_US" || language === user.language) {
return null;
}
if (!languages.includes(language)) {
return null;
}
const option = find(languageOptions, (o) => o.value === language);
const optionLabel = option ? option.label : "";
return (
<NoticeTip>
<Flex align="center">
<LanguageIcon />
<span>
<Trans>
Outline is available in your language {{ optionLabel }}, would you
like to change?
</Trans>
<br />
<a
onClick={() => {
auth.updateUser({
language,
});
ui.setLanguagePromptDismissed();
}}
>
{t("Change Language")}
</a>{" "}
&middot; <a onClick={ui.setLanguagePromptDismissed}>{t("Dismiss")}</a>
</span>
</Flex>
</NoticeTip>
);
}
const LanguageIcon = styled(Icon)`
margin-right: 12px;
`;

17
app/components/Layout.js
View File

@@ -3,6 +3,7 @@ import { observable } from "mobx";
import { observer, inject } from "mobx-react";
import * as React from "react";
import { Helmet } from "react-helmet";
import { withTranslation, type TFunction } from "react-i18next";
import keydown from "react-keydown";
import { Switch, Route, Redirect } from "react-router-dom";
import styled, { withTheme } from "styled-components";
@@ -37,6 +38,8 @@ type Props = {
ui: UiStore,
notifications?: React.Node,
theme: Theme,
i18n: Object,
t: TFunction,
};
@observer
@@ -45,7 +48,7 @@ class Layout extends React.Component<Props> {
@observable redirectTo: ?string;
@observable keyboardShortcutsOpen: boolean = false;
constructor(props) {
constructor(props: Props) {
super();
this.updateBackground(props);
}
@@ -58,7 +61,7 @@ class Layout extends React.Component<Props> {
}
}
updateBackground(props) {
updateBackground(props: Props) {
// ensure the wider page color always matches the theme
window.document.body.style.background = props.theme.background;
}
@@ -74,7 +77,7 @@ class Layout extends React.Component<Props> {
};
@keydown(["t", "/", "meta+k"])
goToSearch(ev) {
goToSearch(ev: SyntheticEvent<>) {
if (this.props.ui.editMode) return;
ev.preventDefault();
ev.stopPropagation();
@@ -88,7 +91,7 @@ class Layout extends React.Component<Props> {
}
render() {
const { auth, ui } = this.props;
const { auth, t, ui } = this.props;
const { user, team } = auth;
const showSidebar = auth.authenticated && user && team;
@@ -131,7 +134,7 @@ class Layout extends React.Component<Props> {
<Modal
isOpen={this.keyboardShortcutsOpen}
onRequestClose={this.handleCloseKeyboardShortcuts}
title="Keyboard shortcuts"
title={t("Keyboard shortcuts")}
>
<KeyboardShortcuts />
</Modal>
@@ -162,4 +165,6 @@ const Content = styled(Flex)`
`};
`;
export default inject("auth", "ui", "documents")(withTheme(Layout));
export default withTranslation()<Layout>(
inject("auth", "ui", "documents")(withTheme(Layout))
);

22
app/components/NoticeTip.js Normal file
View File

@@ -0,0 +1,22 @@
// @flow
import styled from "styled-components";
const Notice = styled.p`
background: ${(props) => props.theme.brand.marine};
color: ${(props) => props.theme.almostBlack};
padding: 10px 12px;
margin-top: 24px;
border-radius: 4px;
position: relative;
a {
color: ${(props) => props.theme.almostBlack};
font-weight: 500;
}
a:hover {
text-decoration: underline;
}
`;
export default Notice;

28
app/components/Sidebar/Main.js
View File

@@ -12,6 +12,7 @@ import {
PlusIcon,
} from "outline-icons";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import styled from "styled-components";
import AuthStore from "stores/AuthStore";
@@ -34,6 +35,7 @@ type Props = {
auth: AuthStore,
documents: DocumentsStore,
policies: PoliciesStore,
t: TFunction,
};
@observer
@@ -65,7 +67,7 @@ class MainSidebar extends React.Component<Props> {
};
render() {
const { auth, documents, policies } = this.props;
const { auth, documents, policies, t } = this.props;
const { user, team } = auth;
if (!user || !team) return null;
@@ -90,7 +92,7 @@ class MainSidebar extends React.Component<Props> {
to="/home"
icon={<HomeIcon color="currentColor" />}
exact={false}
label="Home"
label={t("Home")}
/>
<SidebarLink
to={{
@@ -98,20 +100,20 @@ class MainSidebar extends React.Component<Props> {
state: { fromMenu: true },
}}
icon={<SearchIcon color="currentColor" />}
label="Search"
label={t("Search")}
exact={false}
/>
<SidebarLink
to="/starred"
icon={<StarredIcon color="currentColor" />}
exact={false}
label="Starred"
label={t("Starred")}
/>
<SidebarLink
to="/templates"
icon={<ShapesIcon color="currentColor" />}
exact={false}
label="Templates"
label={t("Templates")}
active={
documents.active ? documents.active.template : undefined
}
@@ -121,7 +123,7 @@ class MainSidebar extends React.Component<Props> {
icon={<EditIcon color="currentColor" />}
label={
<Drafts align="center">
Drafts
{t("Drafts")}
{documents.totalDrafts > 0 && (
<Bubble count={documents.totalDrafts} />
)}
@@ -146,7 +148,7 @@ class MainSidebar extends React.Component<Props> {
to="/archive"
icon={<ArchiveIcon color="currentColor" />}
exact={false}
label="Archive"
label={t("Archive")}
active={
documents.active
? documents.active.isArchived && !documents.active.isDeleted
@@ -157,7 +159,7 @@ class MainSidebar extends React.Component<Props> {
to="/trash"
icon={<TrashIcon color="currentColor" />}
exact={false}
label="Trash"
label={t("Trash")}
active={
documents.active ? documents.active.isDeleted : undefined
}
@@ -167,21 +169,21 @@ class MainSidebar extends React.Component<Props> {
to="/settings/people"
onClick={this.handleInviteModalOpen}
icon={<PlusIcon color="currentColor" />}
label="Invite people…"
label={t("Invite people…")}
/>
)}
</Section>
</Scrollable>
</Flex>
<Modal
title="Invite people"
title={t("Invite people")}
onRequestClose={this.handleInviteModalClose}
isOpen={this.inviteModalOpen}
>
<Invite onSubmit={this.handleInviteModalClose} />
</Modal>
<Modal
title="Create a collection"
title={t("Create a collection")}
onRequestClose={this.handleCreateCollectionModalClose}
isOpen={this.createCollectionModalOpen}
>
@@ -196,4 +198,6 @@ const Drafts = styled(Flex)`
height: 24px;
`;
export default inject("documents", "policies", "auth")(MainSidebar);
export default withTranslation()<MainSidebar>(
inject("documents", "policies", "auth")(MainSidebar)
);

32
app/components/Sidebar/Settings.js
View File

@@ -13,6 +13,7 @@ import {
ExpandedIcon,
} from "outline-icons";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import type { RouterHistory } from "react-router-dom";
import styled from "styled-components";
import AuthStore from "stores/AuthStore";
@@ -36,6 +37,7 @@ type Props = {
history: RouterHistory,
policies: PoliciesStore,
auth: AuthStore,
t: TFunction,
};
@observer
@@ -45,7 +47,7 @@ class SettingsSidebar extends React.Component<Props> {
};
render() {
const { policies, auth } = this.props;
const { policies, t, auth } = this.props;
const { team } = auth;
if (!team) return null;
@@ -56,7 +58,7 @@ class SettingsSidebar extends React.Component<Props> {
<HeaderBlock
subheading={
<ReturnToApp align="center">
<BackIcon color="currentColor" /> Return to App
<BackIcon color="currentColor" /> {t("Return to App")}
</ReturnToApp>
}
teamName={team.name}
@@ -71,17 +73,17 @@ class SettingsSidebar extends React.Component<Props> {
<SidebarLink
to="/settings"
icon={<ProfileIcon color="currentColor" />}
label="Profile"
label={t("Profile")}
/>
<SidebarLink
to="/settings/notifications"
icon={<EmailIcon color="currentColor" />}
label="Notifications"
label={t("Notifications")}
/>
<SidebarLink
to="/settings/tokens"
icon={<CodeIcon color="currentColor" />}
label="API Tokens"
label={t("API Tokens")}
/>
</Section>
<Section>
@@ -90,44 +92,44 @@ class SettingsSidebar extends React.Component<Props> {
<SidebarLink
to="/settings/details"
icon={<TeamIcon color="currentColor" />}
label="Details"
label={t("Details")}
/>
)}
{can.update && (
<SidebarLink
to="/settings/security"
icon={<PadlockIcon color="currentColor" />}
label="Security"
label={t("Security")}
/>
)}
<SidebarLink
to="/settings/people"
icon={<UserIcon color="currentColor" />}
exact={false}
label="People"
label={t("People")}
/>
<SidebarLink
to="/settings/groups"
icon={<GroupIcon color="currentColor" />}
exact={false}
label="Groups"
label={t("Groups")}
/>
<SidebarLink
to="/settings/shares"
icon={<LinkIcon color="currentColor" />}
label="Share Links"
label={t("Share Links")}
/>
{can.export && (
<SidebarLink
to="/settings/export"
icon={<DocumentIcon color="currentColor" />}
label="Export Data"
label={t("Export Data")}
/>
)}
</Section>
{can.update && (
<Section>
<Header>Integrations</Header>
<Header>{t("Integrations")}</Header>
<SidebarLink
to="/settings/integrations/slack"
icon={<SlackIcon color="currentColor" />}
@@ -144,7 +146,7 @@ class SettingsSidebar extends React.Component<Props> {
)}
{can.update && !isHosted && (
<Section>
<Header>Installation</Header>
<Header>{t("Installation")}</Header>
<Version />
</Section>
)}
@@ -164,4 +166,6 @@ const ReturnToApp = styled(Flex)`
height: 16px;
`;
export default inject("auth", "policies")(SettingsSidebar);
export default withTranslation()<SettingsSidebar>(
inject("auth", "policies")(SettingsSidebar)
);

17
app/components/Sidebar/components/Collections.js
View File

@@ -2,6 +2,7 @@
import { observer, inject } from "mobx-react";
import { PlusIcon } from "outline-icons";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import keydown from "react-keydown";
import { withRouter, type RouterHistory } from "react-router-dom";
@@ -24,6 +25,7 @@ type Props = {
documents: DocumentsStore,
onCreateCollection: () => void,
ui: UiStore,
t: TFunction,
};
@observer
@@ -52,7 +54,7 @@ class Collections extends React.Component<Props> {
}
render() {
const { collections, ui, policies, documents } = this.props;
const { collections, ui, policies, documents, t } = this.props;
const content = (
<>
@@ -71,7 +73,7 @@ class Collections extends React.Component<Props> {
to="/collections"
onClick={this.props.onCreateCollection}
icon={<PlusIcon color="currentColor" />}
label="New collection…"
label={t("New collection…")}
exact
/>
</>
@@ -79,7 +81,7 @@ class Collections extends React.Component<Props> {
return (
<Flex column>
<Header>Collections</Header>
<Header>{t("Collections")}</Header>
{collections.isLoaded ? (
this.isPreloaded ? (
content
@@ -94,9 +96,6 @@ class Collections extends React.Component<Props> {
}
}
export default inject(
"collections",
"ui",
"documents",
"policies"
)(withRouter(Collections));
export default withTranslation()<Collections>(
inject("collections", "ui", "documents", "policies")(withRouter(Collections))
);

8
app/components/Sidebar/components/DocumentLink.js
View File

@@ -2,6 +2,7 @@
import { observable } from "mobx";
import { observer } from "mobx-react";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import styled from "styled-components";
import DocumentsStore from "stores/DocumentsStore";
import Collection from "models/Collection";
@@ -23,6 +24,7 @@ type Props = {|
activeDocumentRef?: (?HTMLElement) => void,
prefetchDocument: (documentId: string) => Promise<void>,
depth: number,
t: TFunction,
|};
@observer
@@ -84,6 +86,7 @@ class DocumentLink extends React.Component<Props> {
prefetchDocument,
depth,
canUpdate,
t,
} = this.props;
const showChildren = !!(
@@ -96,7 +99,7 @@ class DocumentLink extends React.Component<Props> {
this.isActiveDocument())
);
const document = documents.get(node.id);
const title = node.title || "Untitled";
const title = node.title || t("Untitled");
return (
<Flex
@@ -147,6 +150,7 @@ class DocumentLink extends React.Component<Props> {
prefetchDocument={prefetchDocument}
depth={depth + 1}
canUpdate={canUpdate}
t={t}
/>
))}
</DocumentChildren>
@@ -160,4 +164,4 @@ class DocumentLink extends React.Component<Props> {
const DocumentChildren = styled(Flex)``;
export default DocumentLink;
export default withTranslation()<DocumentLink>(DocumentLink);

9
app/hooks/useCurrentUser.js Normal file
View File

@@ -0,0 +1,9 @@
// @flow
import invariant from "invariant";
import useStores from "./useStores";
export default function useCurrentUser() {
const { auth } = useStores();
invariant(auth.user, "user required");
return auth.user;
}

3
app/index.js
View File

@@ -6,6 +6,7 @@ import * as React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import { initI18n } from "shared/i18n";
import stores from "stores";
import ErrorBoundary from "components/ErrorBoundary";
import ScrollToTop from "components/ScrollToTop";
@@ -14,6 +15,8 @@ import Toasts from "components/Toasts";
import Routes from "./routes";
import env from "env";
initI18n();
const element = document.getElementById("root");
if (element) {

32
app/menus/AccountMenu.js
View File

@@ -3,6 +3,7 @@ import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import { SunIcon, MoonIcon } from "outline-icons";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { Link } from "react-router-dom";
import styled from "styled-components";
import AuthStore from "stores/AuthStore";
@@ -23,6 +24,7 @@ type Props = {
label: React.Node,
ui: UiStore,
auth: AuthStore,
t: TFunction,
};
@observer
@@ -42,14 +44,14 @@ class AccountMenu extends React.Component<Props> {
};
render() {
const { ui } = this.props;
const { ui, t } = this.props;
return (
<>
<Modal
isOpen={this.keyboardShortcutsOpen}
onRequestClose={this.handleCloseKeyboardShortcuts}
title="Keyboard shortcuts"
title={t("Keyboard shortcuts")}
>
<KeyboardShortcuts />
</Modal>
@@ -58,23 +60,23 @@ class AccountMenu extends React.Component<Props> {
label={this.props.label}
>
<DropdownMenuItem as={Link} to={settings()}>
Settings
{t("Settings")}
</DropdownMenuItem>
<DropdownMenuItem onClick={this.handleOpenKeyboardShortcuts}>
Keyboard shortcuts
{t("Keyboard shortcuts")}
</DropdownMenuItem>
<DropdownMenuItem href={developers()} target="_blank">
API documentation
{t("API documentation")}
</DropdownMenuItem>
<hr />
<DropdownMenuItem href={changelog()} target="_blank">
Changelog
{t("Changelog")}
</DropdownMenuItem>
<DropdownMenuItem href={mailToUrl()} target="_blank">
Send us feedback
{t("Send us feedback")}
</DropdownMenuItem>
<DropdownMenuItem href={githubIssuesUrl()} target="_blank">
Report a bug
{t("Report a bug")}
</DropdownMenuItem>
<hr />
<DropdownMenu
@@ -87,7 +89,7 @@ class AccountMenu extends React.Component<Props> {
label={
<DropdownMenuItem>
<ChangeTheme justify="space-between">
Appearance
{t("Appearance")}
{ui.resolvedTheme === "light" ? <SunIcon /> : <MoonIcon />}
</ChangeTheme>
</DropdownMenuItem>
@@ -98,24 +100,24 @@ class AccountMenu extends React.Component<Props> {
onClick={() => ui.setTheme("system")}
selected={ui.theme === "system"}
>
System
{t("System")}
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => ui.setTheme("light")}
selected={ui.theme === "light"}
>
Light
{t("Light")}
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => ui.setTheme("dark")}
selected={ui.theme === "dark"}
>
Dark
{t("Dark")}
</DropdownMenuItem>
</DropdownMenu>
<hr />
<DropdownMenuItem onClick={this.handleLogout}>
Log out
{t("Log out")}
</DropdownMenuItem>
</DropdownMenu>
</>
@@ -127,4 +129,6 @@ const ChangeTheme = styled(Flex)`
width: 100%;
`;
export default inject("ui", "auth")(AccountMenu);
export default withTranslation()<AccountMenu>(
inject("ui", "auth")(AccountMenu)
);

31
app/menus/CollectionMenu.js
View File

@@ -2,6 +2,7 @@
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { withRouter, type RouterHistory } from "react-router-dom";
import DocumentsStore from "stores/DocumentsStore";
import PoliciesStore from "stores/PoliciesStore";
@@ -27,6 +28,7 @@ type Props = {
history: RouterHistory,
onOpen?: () => void,
onClose?: () => void,
t: TFunction,
};
@observer
@@ -112,6 +114,7 @@ class CollectionMenu extends React.Component<Props> {
position,
onOpen,
onClose,
t,
} = this.props;
const can = policies.abilities(collection.id);
@@ -128,7 +131,7 @@ class CollectionMenu extends React.Component<Props> {
</VisuallyHidden>
<Modal
title="Collection permissions"
title={t("Collection permissions")}
onRequestClose={this.handleMembersModalClose}
isOpen={this.showCollectionMembers}
>
@@ -143,12 +146,12 @@ class CollectionMenu extends React.Component<Props> {
<DropdownMenuItems
items={[
{
title: "New document",
title: t("New document"),
visible: !!(collection && can.update),
onClick: this.onNewDocument,
},
{
title: "Import document",
title: t("Import document"),
visible: !!(collection && can.update),
onClick: this.onImportDocument,
},
@@ -156,22 +159,22 @@ class CollectionMenu extends React.Component<Props> {
type: "separator",
},
{
title: "Edit…",
title: t("Edit…"),
visible: !!(collection && can.update),
onClick: this.handleEditCollectionOpen,
},
{
title: "Permissions…",
title: t("Permissions…"),
visible: !!(collection && can.update),
onClick: this.handleMembersModalOpen,
},
{
title: "Export…",
title: t("Export…"),
visible: !!(collection && can.export),
onClick: this.handleExportCollectionOpen,
},
{
title: "Delete…",
title: t("Delete…"),
visible: !!(collection && can.delete),
onClick: this.handleDeleteCollectionOpen,
},
@@ -179,7 +182,7 @@ class CollectionMenu extends React.Component<Props> {
/>
</DropdownMenu>
<Modal
title="Edit collection"
title={t("Edit collection")}
isOpen={this.showCollectionEdit}
onRequestClose={this.handleEditCollectionClose}
>
@@ -189,7 +192,7 @@ class CollectionMenu extends React.Component<Props> {
/>
</Modal>
<Modal
title="Delete collection"
title={t("Delete collection")}
isOpen={this.showCollectionDelete}
onRequestClose={this.handleDeleteCollectionClose}
>
@@ -199,7 +202,7 @@ class CollectionMenu extends React.Component<Props> {
/>
</Modal>
<Modal
title="Export collection"
title={t("Export collection")}
isOpen={this.showCollectionExport}
onRequestClose={this.handleExportCollectionClose}
>
@@ -213,8 +216,6 @@ class CollectionMenu extends React.Component<Props> {
}
}
export default inject(
"ui",
"documents",
"policies"
)(withRouter(CollectionMenu));
export default withTranslation()<CollectionMenu>(
inject("ui", "documents", "policies")(withRouter(CollectionMenu))
);

71
app/menus/DocumentMenu.js
View File

@@ -2,6 +2,7 @@
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { Redirect } from "react-router-dom";
import AuthStore from "stores/AuthStore";
import CollectionStore from "stores/CollectionsStore";
@@ -38,6 +39,7 @@ type Props = {
label?: React.Node,
onOpen?: () => void,
onClose?: () => void,
t: TFunction,
};
@observer
@@ -83,7 +85,8 @@ class DocumentMenu extends React.Component<Props> {
// when duplicating, go straight to the duplicated document content
this.redirectTo = duped.url;
this.props.ui.showToast("Document duplicated");
const { t } = this.props;
this.props.ui.showToast(t("Document duplicated"));
};
handleOpenTemplateModal = () => {
@@ -100,7 +103,8 @@ class DocumentMenu extends React.Component<Props> {
handleArchive = async (ev: SyntheticEvent<>) => {
await this.props.document.archive();
this.props.ui.showToast("Document archived");
const { t } = this.props;
this.props.ui.showToast(t("Document archived"));
};
handleRestore = async (
@@ -108,12 +112,14 @@ class DocumentMenu extends React.Component<Props> {
options?: { collectionId: string }
) => {
await this.props.document.restore(options);
this.props.ui.showToast("Document restored");
const { t } = this.props;
this.props.ui.showToast(t("Document restored"));
};
handleUnpublish = async (ev: SyntheticEvent<>) => {
await this.props.document.unpublish();
this.props.ui.showToast("Document unpublished");
const { t } = this.props;
this.props.ui.showToast(t("Document unpublished"));
};
handlePin = (ev: SyntheticEvent<>) => {
@@ -164,6 +170,7 @@ class DocumentMenu extends React.Component<Props> {
label,
onOpen,
onClose,
t,
} = this.props;
const can = policies.abilities(document.id);
@@ -183,17 +190,17 @@ class DocumentMenu extends React.Component<Props> {
<DropdownMenuItems
items={[
{
title: "Restore",
title: t("Restore"),
visible: !!can.unarchive,
onClick: this.handleRestore,
},
{
title: "Restore",
title: t("Restore"),
visible: !!(collection && can.restore),
onClick: this.handleRestore,
},
{
title: "Restore…",
title: t("Restore…"),
visible: !collection && !!can.restore,
style: {
left: -170,
@@ -204,7 +211,7 @@ class DocumentMenu extends React.Component<Props> {
items: [
{
type: "heading",
title: "Choose a collection",
title: t("Choose a collection"),
},
...collections.orderedData.map((collection) => {
const can = policies.abilities(collection.id);
@@ -224,37 +231,37 @@ class DocumentMenu extends React.Component<Props> {
],
},
{
title: "Unpin",
title: t("Unpin"),
onClick: this.handleUnpin,
visible: !!(showPin && document.pinned && can.unpin),
},
{
title: "Pin to collection",
title: t("Pin to collection"),
onClick: this.handlePin,
visible: !!(showPin && !document.pinned && can.pin),
},
{
title: "Unstar",
title: t("Unstar"),
onClick: this.handleUnstar,
visible: document.isStarred && !!can.unstar,
},
{
title: "Star",
title: t("Star"),
onClick: this.handleStar,
visible: !document.isStarred && !!can.star,
},
{
title: "Share link…",
title: t("Share link…"),
onClick: this.handleShareLink,
visible: canShareDocuments,
},
{
title: "Enable embeds",
title: t("Enable embeds"),
onClick: document.enableEmbeds,
visible: !!showToggleEmbeds && document.embedsDisabled,
},
{
title: "Disable embeds",
title: t("Disable embeds"),
onClick: document.disableEmbeds,
visible: !!showToggleEmbeds && !document.embedsDisabled,
},
@@ -262,42 +269,42 @@ class DocumentMenu extends React.Component<Props> {
type: "separator",
},
{
title: "New nested document",
title: t("New nested document"),
onClick: this.handleNewChild,
visible: !!can.createChildDocument,
},
{
title: "Create template…",
title: t("Create template…"),
onClick: this.handleOpenTemplateModal,
visible: !!can.update && !document.isTemplate,
},
{
title: "Edit",
title: t("Edit"),
onClick: this.handleEdit,
visible: !!can.update,
},
{
title: "Duplicate",
title: t("Duplicate"),
onClick: this.handleDuplicate,
visible: !!can.update,
},
{
title: "Unpublish",
title: t("Unpublish"),
onClick: this.handleUnpublish,
visible: !!can.unpublish,
},
{
title: "Archive",
title: t("Archive"),
onClick: this.handleArchive,
visible: !!can.archive,
},
{
title: "Delete…",
title: t("Delete…"),
onClick: this.handleDelete,
visible: !!can.delete,
},
{
title: "Move…",
title: t("Move…"),
onClick: this.handleMove,
visible: !!can.move,
},
@@ -305,17 +312,17 @@ class DocumentMenu extends React.Component<Props> {
type: "separator",
},
{
title: "History",
title: t("History"),
onClick: this.handleDocumentHistory,
visible: canViewHistory,
},
{
title: "Download",
title: t("Download"),
onClick: this.handleExport,
visible: !!can.download,
},
{
title: "Print",
title: t("Print"),
onClick: window.print,
visible: !!showPrint,
},
@@ -323,7 +330,9 @@ class DocumentMenu extends React.Component<Props> {
/>
</DropdownMenu>
<Modal
title={`Delete ${this.props.document.noun}`}
title={t("Delete {{ documentName }}", {
documentName: this.props.document.noun,
})}
onRequestClose={this.handleCloseDeleteModal}
isOpen={this.showDeleteModal}
>
@@ -333,7 +342,7 @@ class DocumentMenu extends React.Component<Props> {
/>
</Modal>
<Modal
title="Create template"
title={t("Create template")}
onRequestClose={this.handleCloseTemplateModal}
isOpen={this.showTemplateModal}
>
@@ -343,7 +352,7 @@ class DocumentMenu extends React.Component<Props> {
/>
</Modal>
<Modal
title="Share document"
title={t("Share document")}
onRequestClose={this.handleCloseShareModal}
isOpen={this.showShareModal}
>
@@ -357,4 +366,6 @@ class DocumentMenu extends React.Component<Props> {
}
}
export default inject("ui", "auth", "collections", "policies")(DocumentMenu);
export default withTranslation()<DocumentMenu>(
inject("ui", "auth", "collections", "policies")(DocumentMenu)
);

18
app/menus/GroupMenu.js
View File

@@ -2,6 +2,7 @@
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { withRouter, type RouterHistory } from "react-router-dom";
import PoliciesStore from "stores/PoliciesStore";
import UiStore from "stores/UiStore";
@@ -20,6 +21,7 @@ type Props = {
onMembers: () => void,
onOpen?: () => void,
onClose?: () => void,
t: TFunction,
};
@observer
@@ -46,13 +48,13 @@ class GroupMenu extends React.Component<Props> {
};
render() {
const { policies, group, onOpen, onClose } = this.props;
const { policies, group, onOpen, onClose, t } = this.props;
const can = policies.abilities(group.id);
return (
<>
<Modal
title="Edit group"
title={t("Edit group")}
onRequestClose={this.handleEditModalClose}
isOpen={this.editModalOpen}
>
@@ -63,7 +65,7 @@ class GroupMenu extends React.Component<Props> {
</Modal>
<Modal
title="Delete group"
title={t("Delete group")}
onRequestClose={this.handleDeleteModalClose}
isOpen={this.deleteModalOpen}
>
@@ -76,7 +78,7 @@ class GroupMenu extends React.Component<Props> {
<DropdownMenuItems
items={[
{
title: "Members…",
title: t("Members…"),
onClick: this.props.onMembers,
visible: !!(group && can.read),
},
@@ -84,12 +86,12 @@ class GroupMenu extends React.Component<Props> {
type: "separator",
},
{
title: "Edit…",
title: t("Edit…"),
onClick: this.onEdit,
visible: !!(group && can.update),
},
{
title: "Delete…",
title: t("Delete…"),
onClick: this.onDelete,
visible: !!(group && can.delete),
},
@@ -101,4 +103,6 @@ class GroupMenu extends React.Component<Props> {
}
}
export default inject("policies")(withRouter(GroupMenu));
export default withTranslation()<GroupMenu>(
inject("policies")(withRouter(GroupMenu))
);

16
app/menus/NewChildDocumentMenu.js
View File

@@ -2,6 +2,7 @@
import { observable } from "mobx";
import { observer, inject } from "mobx-react";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { Redirect } from "react-router-dom";
import CollectionsStore from "stores/CollectionsStore";
@@ -14,6 +15,7 @@ type Props = {
label?: React.Node,
document: Document,
collections: CollectionsStore,
t: TFunction,
};
@observer
@@ -39,7 +41,7 @@ class NewChildDocumentMenu extends React.Component<Props> {
render() {
if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
const { label, document, collections } = this.props;
const { label, document, collections, t } = this.props;
const collection = collections.get(document.collectionId);
return (
@@ -49,14 +51,16 @@ class NewChildDocumentMenu extends React.Component<Props> {
{
title: (
<span>
New document in{" "}
<strong>{collection ? collection.name : "collection"}</strong>
{t("New document in")}{" "}
<strong>
{collection ? collection.name : t("collection")}
</strong>
</span>
),
onClick: this.handleNewDocument,
},
{
title: "New nested document",
title: t("New nested document"),
onClick: this.handleNewChild,
},
]}
@@ -66,4 +70,6 @@ class NewChildDocumentMenu extends React.Component<Props> {
}
}
export default inject("collections")(NewChildDocumentMenu);
export default withTranslation()<NewChildDocumentMenu>(
inject("collections")(NewChildDocumentMenu)
);

22
app/menus/NewDocumentMenu.js
View File

@@ -3,6 +3,7 @@ import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import { PlusIcon } from "outline-icons";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { Redirect } from "react-router-dom";
import CollectionsStore from "stores/CollectionsStore";
@@ -19,6 +20,7 @@ type Props = {
documents: DocumentsStore,
collections: CollectionsStore,
policies: PoliciesStore,
t: TFunction,
};
@observer
@@ -29,7 +31,14 @@ class NewDocumentMenu extends React.Component<Props> {
this.redirectTo = undefined;
}
handleNewDocument = (collectionId: string, options) => {
handleNewDocument = (
collectionId: string,
options?: {
parentDocumentId?: string,
template?: boolean,
templateId?: string,
}
) => {
this.redirectTo = newDocumentUrl(collectionId, options);
};
@@ -44,7 +53,7 @@ class NewDocumentMenu extends React.Component<Props> {
render() {
if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
const { collections, documents, policies, label, ...rest } = this.props;
const { collections, documents, policies, label, t, ...rest } = this.props;
const singleCollection = collections.orderedData.length === 1;
return (
@@ -52,14 +61,15 @@ class NewDocumentMenu extends React.Component<Props> {
label={
label || (
<Button icon={<PlusIcon />} small>
New doc{singleCollection ? "" : "…"}
{t("New doc")}
{singleCollection ? "" : "…"}
</Button>
)
}
onOpen={this.onOpen}
{...rest}
>
<Header>Choose a collection</Header>
<Header>{t("Choose a collection")}</Header>
<DropdownMenuItems
items={collections.orderedData.map((collection) => ({
onClick: () => this.handleNewDocument(collection.id),
@@ -77,4 +87,6 @@ class NewDocumentMenu extends React.Component<Props> {
}
}
export default inject("collections", "documents", "policies")(NewDocumentMenu);
export default withTranslation()<NewDocumentMenu>(
inject("collections", "documents", "policies")(NewDocumentMenu)
);

12
app/menus/NewTemplateMenu.js
View File

@@ -3,6 +3,7 @@ import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import { PlusIcon } from "outline-icons";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { Redirect } from "react-router-dom";
import CollectionsStore from "stores/CollectionsStore";
@@ -17,6 +18,7 @@ type Props = {
label?: React.Node,
collections: CollectionsStore,
policies: PoliciesStore,
t: TFunction,
};
@observer
@@ -36,20 +38,20 @@ class NewTemplateMenu extends React.Component<Props> {
render() {
if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
const { collections, policies, label, ...rest } = this.props;
const { collections, policies, label, t, ...rest } = this.props;
return (
<DropdownMenu
label={
label || (
<Button icon={<PlusIcon />} small>
New template…
{t("New template…")}
</Button>
)
}
{...rest}
>
<Header>Choose a collection</Header>
<Header>{t("Choose a collection")}</Header>
<DropdownMenuItems
items={collections.orderedData.map((collection) => ({
onClick: () => this.handleNewDocument(collection.id),
@@ -67,4 +69,6 @@ class NewTemplateMenu extends React.Component<Props> {
}
}
export default inject("collections", "policies")(NewTemplateMenu);
export default withTranslation()<NewTemplateMenu>(
inject("collections", "policies")(NewTemplateMenu)
);

18
app/menus/RevisionMenu.js
View File

@@ -1,6 +1,7 @@
// @flow
import { inject } from "mobx-react";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { withRouter, type RouterHistory } from "react-router-dom";
import UiStore from "stores/UiStore";
@@ -19,22 +20,25 @@ type Props = {
className?: string,
label: React.Node,
ui: UiStore,
t: TFunction,
};
class RevisionMenu extends React.Component<Props> {
handleRestore = async (ev: SyntheticEvent<>) => {
ev.preventDefault();
await this.props.document.restore({ revisionId: this.props.revision.id });
this.props.ui.showToast("Document restored");
const { t } = this.props;
this.props.ui.showToast(t("Document restored"));
this.props.history.push(this.props.document.url);
};
handleCopy = () => {
this.props.ui.showToast("Link copied");
const { t } = this.props;
this.props.ui.showToast(t("Link copied"));
};
render() {
const { className, label, onOpen, onClose } = this.props;
const { className, label, onOpen, onClose, t } = this.props;
const url = `${window.location.origin}${documentHistoryUrl(
this.props.document,
this.props.revision.id
@@ -48,15 +52,17 @@ class RevisionMenu extends React.Component<Props> {
label={label}
>
<DropdownMenuItem onClick={this.handleRestore}>
Restore version
{t("Restore version")}
</DropdownMenuItem>
<hr />
<CopyToClipboard text={url} onCopy={this.handleCopy}>
<DropdownMenuItem>Copy link</DropdownMenuItem>
<DropdownMenuItem>{t("Copy link")}</DropdownMenuItem>
</CopyToClipboard>
</DropdownMenu>
);
}
}
export default withRouter(inject("ui")(RevisionMenu));
export default withTranslation()<RevisionMenu>(
withRouter(inject("ui")(RevisionMenu))
);

18
app/menus/ShareMenu.js
View File

@@ -2,6 +2,7 @@
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { Redirect } from "react-router-dom";
import SharesStore from "stores/SharesStore";
@@ -16,6 +17,7 @@ type Props = {
shares: SharesStore,
ui: UiStore,
share: Share,
t: TFunction,
};
@observer
@@ -36,36 +38,38 @@ class ShareMenu extends React.Component<Props> {
try {
await this.props.shares.revoke(this.props.share);
this.props.ui.showToast("Share link revoked");
const { t } = this.props;
this.props.ui.showToast(t("Share link revoked"));
} catch (err) {
this.props.ui.showToast(err.message);
}
};
handleCopy = () => {
this.props.ui.showToast("Share link copied");
const { t } = this.props;
this.props.ui.showToast(t("Share link copied"));
};
render() {
if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
const { share, onOpen, onClose } = this.props;
const { share, onOpen, onClose, t } = this.props;
return (
<DropdownMenu onOpen={onOpen} onClose={onClose}>
<CopyToClipboard text={share.url} onCopy={this.handleCopy}>
<DropdownMenuItem>Copy link</DropdownMenuItem>
<DropdownMenuItem>{t("Copy link")}</DropdownMenuItem>
</CopyToClipboard>
<DropdownMenuItem onClick={this.handleGoToDocument}>
Go to document
{t("Go to document")}
</DropdownMenuItem>
<hr />
<DropdownMenuItem onClick={this.handleRevoke}>
Revoke link
{t("Revoke link")}
</DropdownMenuItem>
</DropdownMenu>
);
}
}
export default inject("shares", "ui")(ShareMenu);
export default withTranslation()<ShareMenu>(inject("shares", "ui")(ShareMenu));

14
app/menus/TemplatesMenu.js
View File

@@ -2,6 +2,7 @@
import { observer, inject } from "mobx-react";
import { DocumentIcon } from "outline-icons";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import styled from "styled-components";
import DocumentsStore from "stores/DocumentsStore";
import Document from "models/Document";
@@ -11,12 +12,13 @@ import { DropdownMenu, DropdownMenuItem } from "components/DropdownMenu";
type Props = {
document: Document,
documents: DocumentsStore,
t: TFunction,
};
@observer
class TemplatesMenu extends React.Component<Props> {
render() {
const { documents, document, ...rest } = this.props;
const { documents, document, t, ...rest } = this.props;
const templates = documents.templatesInCollection(document.collectionId);
if (!templates.length) {
@@ -28,7 +30,7 @@ class TemplatesMenu extends React.Component<Props> {
position="left"
label={
<Button disclosure neutral>
Templates
{t("Templates")}
</Button>
}
{...rest}
@@ -42,7 +44,9 @@ class TemplatesMenu extends React.Component<Props> {
<div>
<strong>{template.titleWithDefault}</strong>
<br />
<Author>By {template.createdBy.name}</Author>
<Author>
{t("By {{ author }}", { author: template.createdBy.name })}
</Author>
</div>
</DropdownMenuItem>
))}
@@ -55,4 +59,6 @@ const Author = styled.div`
font-size: 13px;
`;
export default inject("documents")(TemplatesMenu);
export default withTranslation()<TemplatesMenu>(
inject("documents")(TemplatesMenu)
);

43
app/menus/UserMenu.js
View File

@@ -2,6 +2,7 @@
import { inject, observer } from "mobx-react";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import UsersStore from "stores/UsersStore";
import User from "models/User";
import { DropdownMenu } from "components/DropdownMenu";
@@ -10,16 +11,20 @@ import DropdownMenuItems from "components/DropdownMenu/DropdownMenuItems";
type Props = {
user: User,
users: UsersStore,
t: TFunction,
};
@observer
class UserMenu extends React.Component<Props> {
handlePromote = (ev: SyntheticEvent<>) => {
ev.preventDefault();
const { user, users } = this.props;
const { user, users, t } = this.props;
if (
!window.confirm(
`Are you want to make ${user.name} an admin? Admins can modify team and billing information.`
t(
"Are you sure you want to make {{ userName }} an admin? Admins can modify team and billing information.",
{ userName: user.name }
)
)
) {
return;
@@ -29,8 +34,14 @@ class UserMenu extends React.Component<Props> {
handleDemote = (ev: SyntheticEvent<>) => {
ev.preventDefault();
const { user, users } = this.props;
if (!window.confirm(`Are you want to make ${user.name} a member?`)) {
const { user, users, t } = this.props;
if (
!window.confirm(
t("Are you sure you want to make {{ userName }} a member?", {
userName: user.name,
})
)
) {
return;
}
users.demote(user);
@@ -38,10 +49,12 @@ class UserMenu extends React.Component<Props> {
handleSuspend = (ev: SyntheticEvent<>) => {
ev.preventDefault();
const { user, users } = this.props;
const { user, users, t } = this.props;
if (
!window.confirm(
"Are you want to suspend this account? Suspended users will be prevented from logging in."
t(
"Are you sure you want to suspend this account? Suspended users will be prevented from logging in."
)
)
) {
return;
@@ -62,19 +75,23 @@ class UserMenu extends React.Component<Props> {
};
render() {
const { user } = this.props;
const { user, t } = this.props;
return (
<DropdownMenu>
<DropdownMenuItems
items={[
{
title: `Make ${user.name} a member…`,
title: t("Make {{ userName }} a member…", {
userName: user.name,
}),
onClick: this.handleDemote,
visible: user.isAdmin,
},
{
title: `Make ${user.name} an admin…`,
title: t("Make {{ userName }} an admin…", {
userName: user.name,
}),
onClick: this.handlePromote,
visible: !user.isAdmin && !user.isSuspended,
},
@@ -82,17 +99,17 @@ class UserMenu extends React.Component<Props> {
type: "separator",
},
{
title: "Revoke invite…",
title: t("Revoke invite…"),
onClick: this.handleRevoke,
visible: user.isInvited,
},
{
title: "Reactivate account",
title: t("Activate account"),
onClick: this.handleActivate,
visible: !user.isInvited && user.isSuspended,
},
{
title: "Suspend account",
title: t("Suspend account…"),
onClick: this.handleSuspend,
visible: !user.isInvited && !user.isSuspended,
},
@@ -103,4 +120,4 @@ class UserMenu extends React.Component<Props> {
}
}
export default inject("users")(UserMenu);
export default withTranslation()<UserMenu>(inject("users")(UserMenu));

1
app/models/User.js
View File

@@ -11,6 +11,7 @@ class User extends BaseModel {
lastActiveAt: string;
isSuspended: boolean;
createdAt: string;
language: string;
@computed
get isInvited(): boolean {

41
app/scenes/Archive.js
View File

@@ -1,6 +1,7 @@
// @flow
import { observer, inject } from "mobx-react";
import * as React from "react";
import { useTranslation } from "react-i18next";
import DocumentsStore from "stores/DocumentsStore";
import CenteredContent from "components/CenteredContent";
@@ -14,26 +15,26 @@ type Props = {
documents: DocumentsStore,
};
@observer
class Archive extends React.Component<Props> {
render() {
const { documents } = this.props;
function Archive(props: Props) {
const { t } = useTranslation();
const { documents } = props;
return (
<CenteredContent column auto>
<PageTitle title="Archive" />
<Heading>Archive</Heading>
<PaginatedDocumentList
documents={documents.archived}
fetch={documents.fetchArchived}
heading={<Subheading>Documents</Subheading>}
empty={<Empty>The document archive is empty at the moment.</Empty>}
showCollection
showTemplate
/>
</CenteredContent>
);
}
return (
<CenteredContent column auto>
<PageTitle title={t("Archive")} />
<Heading>{t("Archive")}</Heading>
<PaginatedDocumentList
documents={documents.archived}
fetch={documents.fetchArchived}
heading={<Subheading>{t("Documents")}</Subheading>}
empty={
<Empty>{t("The document archive is empty at the moment.")}</Empty>
}
showCollection
showTemplate
/>
</CenteredContent>
);
}
export default inject("documents")(Archive);
export default inject("documents")(observer(Archive));

55
app/scenes/Collection.js
View File

@@ -4,6 +4,7 @@ import { observer, inject } from "mobx-react";
import { NewDocumentIcon, PlusIcon, PinIcon } from "outline-icons";
import * as React from "react";
import { withTranslation, Trans, type TFunction } from "react-i18next";
import { Redirect, Link, Switch, Route, type Match } from "react-router-dom";
import styled, { withTheme } from "styled-components";
@@ -47,6 +48,7 @@ type Props = {
policies: PoliciesStore,
match: Match,
theme: Theme,
t: TFunction,
};
@observer
@@ -64,7 +66,7 @@ class CollectionScene extends React.Component<Props> {
}
}
componentDidUpdate(prevProps) {
componentDidUpdate(prevProps: Props) {
const { id } = this.props.match.params;
if (this.collection) {
@@ -132,7 +134,7 @@ class CollectionScene extends React.Component<Props> {
};
renderActions() {
const { match, policies } = this.props;
const { match, policies, t } = this.props;
const can = policies.abilities(match.params.id || "");
return (
@@ -142,19 +144,19 @@ class CollectionScene extends React.Component<Props> {
<Action>
<InputSearch
source="collection"
placeholder="Search in collection…"
placeholder={t("Search in collection…")}
collectionId={match.params.id}
/>
</Action>
<Action>
<Tooltip
tooltip="New document"
tooltip={t("New document")}
shortcut="n"
delay={500}
placement="bottom"
>
<Button onClick={this.onNewDocument} icon={<PlusIcon />}>
New doc
{t("New doc")}
</Button>
</Tooltip>
</Action>
@@ -169,7 +171,7 @@ class CollectionScene extends React.Component<Props> {
}
render() {
const { documents, theme } = this.props;
const { documents, theme, t } = this.props;
if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
if (!this.isFetching && !this.collection) return <Search notFound />;
@@ -179,6 +181,7 @@ class CollectionScene extends React.Component<Props> {
: [];
const hasPinnedDocuments = !!pinnedDocuments.length;
const collection = this.collection;
const collectionName = collection ? collection.name : "";
return (
<CenteredContent>
@@ -188,26 +191,28 @@ class CollectionScene extends React.Component<Props> {
{collection.isEmpty ? (
<Centered column>
<HelpText>
<strong>{collection.name}</strong> doesn’t contain any
documents yet.
<Trans>
<strong>{{ collectionName }}</strong> doesn’t contain any
documents yet.
</Trans>
<br />
Get started by creating a new one!
<Trans>Get started by creating a new one!</Trans>
</HelpText>
<Wrapper>
<Link to={newDocumentUrl(collection.id)}>
<Button icon={<NewDocumentIcon color={theme.buttonText} />}>
Create a document
{t("Create a document")}
</Button>
</Link>
&nbsp;&nbsp;
{collection.private && (
<Button onClick={this.onPermissions} neutral>
Manage members…
{t("Manage members…")}
</Button>
)}
</Wrapper>
<Modal
title="Collection permissions"
title={t("Collection permissions")}
onRequestClose={this.handlePermissionsModalClose}
isOpen={this.permissionsModalOpen}
>
@@ -218,7 +223,7 @@ class CollectionScene extends React.Component<Props> {
/>
</Modal>
<Modal
title="Edit collection"
title={t("Edit collection")}
onRequestClose={this.handleEditModalClose}
isOpen={this.editModalOpen}
>
@@ -249,7 +254,7 @@ class CollectionScene extends React.Component<Props> {
{hasPinnedDocuments && (
<>
<Subheading>
<TinyPinIcon size={18} /> Pinned
<TinyPinIcon size={18} /> {t("Pinned")}
</Subheading>
<DocumentList documents={pinnedDocuments} showPin />
</>
@@ -257,16 +262,16 @@ class CollectionScene extends React.Component<Props> {
<Tabs>
<Tab to={collectionUrl(collection.id)} exact>
Recently updated
{t("Recently updated")}
</Tab>
<Tab to={collectionUrl(collection.id, "recent")} exact>
Recently published
{t("Recently published")}
</Tab>
<Tab to={collectionUrl(collection.id, "old")} exact>
Least recently updated
{t("Least recently updated")}
</Tab>
<Tab to={collectionUrl(collection.id, "alphabetical")} exact>
A–Z
{t("A–Z")}
</Tab>
</Tabs>
<Switch>
@@ -351,9 +356,11 @@ const Wrapper = styled(Flex)`
margin: 10px 0;
`;
export default inject(
"collections",
"policies",
"documents",
"ui"
)(withTheme(CollectionScene));
export default withTranslation()<CollectionScene>(
inject(
"collections",
"policies",
"documents",
"ui"
)(withTheme(CollectionScene))
);

30
app/scenes/CollectionEdit.js
View File

@@ -2,6 +2,7 @@
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import UiStore from "stores/UiStore";
import Collection from "models/Collection";
import Button from "components/Button";
@@ -16,6 +17,7 @@ type Props = {
collection: Collection,
ui: UiStore,
onSubmit: () => void,
t: TFunction,
};
@observer
@@ -30,6 +32,7 @@ class CollectionEdit extends React.Component<Props> {
handleSubmit = async (ev: SyntheticEvent<*>) => {
ev.preventDefault();
this.isSaving = true;
const { t } = this.props;
try {
await this.props.collection.save({
@@ -40,7 +43,7 @@ class CollectionEdit extends React.Component<Props> {
private: this.private,
});
this.props.onSubmit();
this.props.ui.showToast("The collection was updated");
this.props.ui.showToast(t("The collection was updated"));
} catch (err) {
this.props.ui.showToast(err.message);
} finally {
@@ -48,7 +51,7 @@ class CollectionEdit extends React.Component<Props> {
}
};
handleDescriptionChange = (getValue) => {
handleDescriptionChange = (getValue: () => string) => {
this.description = getValue();
};
@@ -66,17 +69,20 @@ class CollectionEdit extends React.Component<Props> {
};
render() {
const { t } = this.props;
return (
<Flex column>
<form onSubmit={this.handleSubmit}>
<HelpText>
You can edit the name and other details at any time, however doing
so often might confuse your team mates.
{t(
"You can edit the name and other details at any time, however doing so often might confuse your team mates."
)}
</HelpText>
<Flex>
<Input
type="text"
label="Name"
label={t("Name")}
onChange={this.handleNameChange}
value={this.name}
required
@@ -92,27 +98,29 @@ class CollectionEdit extends React.Component<Props> {
</Flex>
<InputRich
id={this.props.collection.id}
label="Description"
label={t("Description")}
onChange={this.handleDescriptionChange}
defaultValue={this.description || ""}
placeholder="More details about this collection…"
placeholder={t("More details about this collection…")}
minHeight={68}
maxHeight={200}
/>
<Switch
id="private"
label="Private collection"
label={t("Private collection")}
onChange={this.handlePrivateChange}
checked={this.private}
/>
<HelpText>
A private collection will only be visible to invited team members.
{t(
"A private collection will only be visible to invited team members."
)}
</HelpText>
<Button
type="submit"
disabled={this.isSaving || !this.props.collection.name}
>
{this.isSaving ? "Saving…" : "Save"}
{this.isSaving ? t("Saving…") : t("Save")}
</Button>
</form>
</Flex>
@@ -120,4 +128,4 @@ class CollectionEdit extends React.Component<Props> {
}
}
export default inject("ui")(CollectionEdit);
export default withTranslation()<CollectionEdit>(inject("ui")(CollectionEdit));

47
app/scenes/CollectionMembers/AddGroupsToCollection.js
View File

@@ -3,12 +3,14 @@ import { debounce } from "lodash";
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import styled from "styled-components";
import AuthStore from "stores/AuthStore";
import CollectionGroupMembershipsStore from "stores/CollectionGroupMembershipsStore";
import GroupsStore from "stores/GroupsStore";
import UiStore from "stores/UiStore";
import Collection from "models/Collection";
import Group from "models/Group";
import GroupNew from "scenes/GroupNew";
import Button from "components/Button";
import Empty from "components/Empty";
@@ -26,6 +28,7 @@ type Props = {
collectionGroupMemberships: CollectionGroupMembershipsStore,
groups: GroupsStore,
onSubmit: () => void,
t: TFunction,
};
@observer
@@ -52,50 +55,56 @@ class AddGroupsToCollection extends React.Component<Props> {
});
}, 250);
handleAddGroup = (group) => {
handleAddGroup = (group: Group) => {
const { t } = this.props;
try {
this.props.collectionGroupMemberships.create({
collectionId: this.props.collection.id,
groupId: group.id,
permission: "read_write",
});
this.props.ui.showToast(`${group.name} was added to the collection`);
this.props.ui.showToast(
t("{{ groupName }} was added to the collection", {
groupName: group.name,
})
);
} catch (err) {
this.props.ui.showToast("Could not add user");
this.props.ui.showToast(t("Could not add user"));
console.error(err);
}
};
render() {
const { groups, collection, auth } = this.props;
const { groups, collection, auth, t } = this.props;
const { user, team } = auth;
if (!user || !team) return null;
return (
<Flex column>
<HelpText>
Can’t find the group you’re looking for?{" "}
{t("Can’t find the group you’re looking for?")}{" "}
<a role="button" onClick={this.handleNewGroupModalOpen}>
Create a group
{t("Create a group")}
</a>
.
</HelpText>
<Input
type="search"
placeholder="Search by group name…"
placeholder={t("Search by group name…")}
value={this.query}
onChange={this.handleFilter}
label="Search groups"
label={t("Search groups")}
labelHidden
flex
/>
<PaginatedList
empty={
this.query ? (
<Empty>No groups matching your search</Empty>
<Empty>{t("No groups matching your search")}</Empty>
) : (
<Empty>No groups left to add</Empty>
<Empty>{t("No groups left to add")}</Empty>
)
}
items={groups.notInCollection(collection.id, this.query)}
@@ -108,7 +117,7 @@ class AddGroupsToCollection extends React.Component<Props> {
renderActions={() => (
<ButtonWrap>
<Button onClick={() => this.handleAddGroup(item)} neutral>
Add
{t("Add")}
</Button>
</ButtonWrap>
)}
@@ -116,7 +125,7 @@ class AddGroupsToCollection extends React.Component<Props> {
)}
/>
<Modal
title="Create a group"
title={t("Create a group")}
onRequestClose={this.handleNewGroupModalClose}
isOpen={this.newGroupModalOpen}
>
@@ -131,9 +140,11 @@ const ButtonWrap = styled.div`
margin-left: 6px;
`;
export default inject(
"auth",
"groups",
"collectionGroupMemberships",
"ui"
)(AddGroupsToCollection);
export default withTranslation()<AddGroupsToCollection>(
inject(
"auth",
"groups",
"collectionGroupMemberships",
"ui"
)(AddGroupsToCollection)
);

37
app/scenes/CollectionMembers/AddPeopleToCollection.js
View File

@@ -3,11 +3,13 @@ import { debounce } from "lodash";
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import AuthStore from "stores/AuthStore";
import MembershipsStore from "stores/MembershipsStore";
import UiStore from "stores/UiStore";
import UsersStore from "stores/UsersStore";
import Collection from "models/Collection";
import User from "models/User";
import Invite from "scenes/Invite";
import Empty from "components/Empty";
import Flex from "components/Flex";
@@ -24,6 +26,7 @@ type Props = {
memberships: MembershipsStore,
users: UsersStore,
onSubmit: () => void,
t: TFunction,
};
@observer
@@ -50,40 +53,43 @@ class AddPeopleToCollection extends React.Component<Props> {
});
}, 250);
handleAddUser = (user) => {
handleAddUser = (user: User) => {
const { t } = this.props;
try {
this.props.memberships.create({
collectionId: this.props.collection.id,
userId: user.id,
permission: "read_write",
});
this.props.ui.showToast(`${user.name} was added to the collection`);
this.props.ui.showToast(
t("{{ userName }} was added to the collection", { userName: user.name })
);
} catch (err) {
this.props.ui.showToast("Could not add user");
this.props.ui.showToast(t("Could not add user"));
}
};
render() {
const { users, collection, auth } = this.props;
const { users, collection, auth, t } = this.props;
const { user, team } = auth;
if (!user || !team) return null;
return (
<Flex column>
<HelpText>
Need to add someone who’s not yet on the team yet?{" "}
{t("Need to add someone who’s not yet on the team yet?")}{" "}
<a role="button" onClick={this.handleInviteModalOpen}>
Invite people to {team.name}
{t("Invite people to {{ teamName }}", { teamName: team.name })}
</a>
.
</HelpText>
<Input
type="search"
placeholder="Search by name…"
placeholder={t("Search by name…")}
value={this.query}
onChange={this.handleFilter}
label="Search people"
label={t("Search people")}
autoFocus
labelHidden
flex
@@ -91,9 +97,9 @@ class AddPeopleToCollection extends React.Component<Props> {
<PaginatedList
empty={
this.query ? (
<Empty>No people matching your search</Empty>
<Empty>{t("No people matching your search")}</Empty>
) : (
<Empty>No people left to add</Empty>
<Empty>{t("No people left to add")}</Empty>
)
}
items={users.notInCollection(collection.id, this.query)}
@@ -108,7 +114,7 @@ class AddPeopleToCollection extends React.Component<Props> {
)}
/>
<Modal
title="Invite people"
title={t("Invite people")}
onRequestClose={this.handleInviteModalClose}
isOpen={this.inviteModalOpen}
>
@@ -119,9 +125,6 @@ class AddPeopleToCollection extends React.Component<Props> {
}
}
export default inject(
"auth",
"users",
"memberships",
"ui"
)(AddPeopleToCollection);
export default withTranslation()<AddPeopleToCollection>(
inject("auth", "users", "memberships", "ui")(AddPeopleToCollection)
);

23
app/scenes/CollectionMembers/components/CollectionGroupMemberListItem.js
View File

@@ -1,5 +1,6 @@
// @flow
import * as React from "react";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import CollectionGroupMembership from "models/CollectionGroupMembership";
import Group from "models/Group";
@@ -7,10 +8,6 @@ import { DropdownMenu, DropdownMenuItem } from "components/DropdownMenu";
import GroupListItem from "components/GroupListItem";
import InputSelect from "components/InputSelect";
const PERMISSIONS = [
{ label: "Read only", value: "read" },
{ label: "Read & Edit", value: "read_write" },
];
type Props = {
group: Group,
collectionGroupMembership: ?CollectionGroupMembership,
@@ -24,6 +21,16 @@ const MemberListItem = ({
onUpdate,
onRemove,
}: Props) => {
const { t } = useTranslation();
const PERMISSIONS = React.useMemo(
() => [
{ label: t("Read only"), value: "read" },
{ label: t("Read & Edit"), value: "read_write" },
],
[t]
);
return (
<GroupListItem
group={group}
@@ -32,7 +39,7 @@ const MemberListItem = ({
renderActions={({ openMembersModal }) => (
<>
<Select
label="Permissions"
label={t("Permissions")}
options={PERMISSIONS}
value={
collectionGroupMembership
@@ -45,10 +52,12 @@ const MemberListItem = ({
<ButtonWrap>
<DropdownMenu>
<DropdownMenuItem onClick={openMembersModal}>
Members…
{t("Members…")}
</DropdownMenuItem>
<hr />
<DropdownMenuItem onClick={onRemove}>Remove</DropdownMenuItem>
<DropdownMenuItem onClick={onRemove}>
{t("Remove")}
</DropdownMenuItem>
</DropdownMenu>
</ButtonWrap>
</>

33
app/scenes/CollectionMembers/components/MemberListItem.js
View File

@@ -1,5 +1,6 @@
// @flow
import * as React from "react";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import Membership from "models/Membership";
import User from "models/User";
@@ -12,10 +13,6 @@ import InputSelect from "components/InputSelect";
import ListItem from "components/List/Item";
import Time from "components/Time";
const PERMISSIONS = [
{ label: "Read only", value: "read" },
{ label: "Read & Edit", value: "read_write" },
];
type Props = {
user: User,
membership?: ?Membership,
@@ -33,6 +30,16 @@ const MemberListItem = ({
onAdd,
canEdit,
}: Props) => {
const { t } = useTranslation();
const PERMISSIONS = React.useMemo(
() => [
{ label: t("Read only"), value: "read" },
{ label: t("Read & Edit"), value: "read_write" },
],
[t]
);
return (
<ListItem
title={user.name}
@@ -40,13 +47,15 @@ const MemberListItem = ({
<>
{user.lastActiveAt ? (
<>
Active <Time dateTime={user.lastActiveAt} /> ago
{t("Active {{ lastActiveAt }} ago", {
lastActiveAt: <Time dateTime={user.lastActiveAt} />,
})}
</>
) : (
"Never signed in"
t("Never signed in")
)}
{user.isInvited && <Badge>Invited</Badge>}
{user.isAdmin && <Badge primary={user.isAdmin}>Admin</Badge>}
{user.isInvited && <Badge>{t("Invited")}</Badge>}
{user.isAdmin && <Badge primary={user.isAdmin}>{t("Admin")}</Badge>}
</>
}
image={<Avatar src={user.avatarUrl} size={40} />}
@@ -54,7 +63,7 @@ const MemberListItem = ({
<Flex align="center">
{canEdit && onUpdate && (
<Select
label="Permissions"
label={t("Permissions")}
options={PERMISSIONS}
value={membership ? membership.permission : undefined}
onChange={(ev) => onUpdate(ev.target.value)}
@@ -64,12 +73,14 @@ const MemberListItem = ({
&nbsp;&nbsp;
{canEdit && onRemove && (
<DropdownMenu>
<DropdownMenuItem onClick={onRemove}>Remove</DropdownMenuItem>
<DropdownMenuItem onClick={onRemove}>
{t("Remove")}
</DropdownMenuItem>
</DropdownMenu>
)}
{canEdit && onAdd && (
<Button onClick={onAdd} neutral>
Add
{t("Add")}
</Button>
)}
</Flex>

15
app/scenes/CollectionMembers/components/UserListItem.js
View File

@@ -1,6 +1,7 @@
// @flow
import { PlusIcon } from "outline-icons";
import * as React from "react";
import { useTranslation } from "react-i18next";
import User from "models/User";
import Avatar from "components/Avatar";
import Badge from "components/Badge";
@@ -15,6 +16,8 @@ type Props = {
};
const UserListItem = ({ user, onAdd, canEdit }: Props) => {
const { t } = useTranslation();
return (
<ListItem
title={user.name}
@@ -23,19 +26,21 @@ const UserListItem = ({ user, onAdd, canEdit }: Props) => {
<>
{user.lastActiveAt ? (
<>
Active <Time dateTime={user.lastActiveAt} /> ago
{t("Active {{ lastActiveAt }} ago", {
lastActiveAt: <Time dateTime={user.lastActiveAt} />,
})}
</>
) : (
"Never signed in"
t("Never signed in")
)}
{user.isInvited && <Badge>Invited</Badge>}
{user.isAdmin && <Badge primary={user.isAdmin}>Admin</Badge>}
{user.isInvited && <Badge>{t("Invited")}</Badge>}
{user.isAdmin && <Badge primary={user.isAdmin}>{t("Admin")}</Badge>}
</>
}
actions={
canEdit ? (
<Button type="button" onClick={onAdd} icon={<PlusIcon />} neutral>
Add
{t("Add")}
</Button>
) : undefined
}

30
app/scenes/CollectionNew.js
View File

@@ -3,6 +3,7 @@ import { intersection } from "lodash";
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { withRouter, type RouterHistory } from "react-router-dom";
import CollectionsStore from "stores/CollectionsStore";
import UiStore from "stores/UiStore";
@@ -20,6 +21,7 @@ type Props = {
ui: UiStore,
collections: CollectionsStore,
onSubmit: () => void,
t: TFunction,
};
@observer
@@ -84,7 +86,7 @@ class CollectionNew extends React.Component<Props> {
this.hasOpenedIconPicker = true;
};
handleDescriptionChange = (getValue) => {
handleDescriptionChange = (getValue: () => string) => {
this.description = getValue();
};
@@ -98,17 +100,19 @@ class CollectionNew extends React.Component<Props> {
};
render() {
const { t } = this.props;
return (
<form onSubmit={this.handleSubmit}>
<HelpText>
Collections are for grouping your knowledge base. They work best when
organized around a topic or internal team — Product or Engineering for
example.
{t(
"Collections are for grouping your knowledge base. They work best when organized around a topic or internal team — Product or Engineering for example."
)}
</HelpText>
<Flex>
<Input
type="text"
label="Name"
label={t("Name")}
onChange={this.handleNameChange}
value={this.name}
required
@@ -124,29 +128,33 @@ class CollectionNew extends React.Component<Props> {
/>
</Flex>
<InputRich
label="Description"
label={t("Description")}
onChange={this.handleDescriptionChange}
defaultValue={this.description || ""}
placeholder="More details about this collection…"
placeholder={t("More details about this collection…")}
minHeight={68}
maxHeight={200}
/>
<Switch
id="private"
label="Private collection"
label={t("Private collection")}
onChange={this.handlePrivateChange}
checked={this.private}
/>
<HelpText>
A private collection will only be visible to invited team members.
{t(
"A private collection will only be visible to invited team members."
)}
</HelpText>
<Button type="submit" disabled={this.isSaving || !this.name}>
{this.isSaving ? "Creating…" : "Create"}
{this.isSaving ? t("Creating…") : t("Create")}
</Button>
</form>
);
}
}
export default inject("collections", "ui")(withRouter(CollectionNew));
export default withTranslation()<CollectionNew>(
inject("collections", "ui")(withRouter(CollectionNew))
);

124
app/scenes/Dashboard.js
View File

@@ -1,81 +1,77 @@
// @flow
import { observer, inject } from "mobx-react";
import { observer } from "mobx-react";
import * as React from "react";
import { useTranslation } from "react-i18next";
import { Switch, Route } from "react-router-dom";
import AuthStore from "stores/AuthStore";
import DocumentsStore from "stores/DocumentsStore";
import Actions, { Action } from "components/Actions";
import CenteredContent from "components/CenteredContent";
import InputSearch from "components/InputSearch";
import LanguagePrompt from "components/LanguagePrompt";
import PageTitle from "components/PageTitle";
import Tab from "components/Tab";
import Tabs from "components/Tabs";
import PaginatedDocumentList from "../components/PaginatedDocumentList";
import useStores from "../hooks/useStores";
import NewDocumentMenu from "menus/NewDocumentMenu";
type Props = {
documents: DocumentsStore,
auth: AuthStore,
};
function Dashboard() {
const { documents, ui, auth } = useStores();
const { t } = useTranslation();
@observer
class Dashboard extends React.Component<Props> {
render() {
const { documents, auth } = this.props;
if (!auth.user || !auth.team) return null;
const user = auth.user.id;
if (!auth.user || !auth.team) return null;
const user = auth.user.id;
return (
<CenteredContent>
<PageTitle title="Home" />
<h1>Home</h1>
<Tabs>
<Tab to="/home" exact>
Recently updated
</Tab>
<Tab to="/home/recent" exact>
Recently viewed
</Tab>
<Tab to="/home/created">Created by me</Tab>
</Tabs>
<Switch>
<Route path="/home/recent">
<PaginatedDocumentList
key="recent"
documents={documents.recentlyViewed}
fetch={documents.fetchRecentlyViewed}
showCollection
/>
</Route>
<Route path="/home/created">
<PaginatedDocumentList
key="created"
documents={documents.createdByUser(user)}
fetch={documents.fetchOwned}
options={{ user }}
showCollection
/>
</Route>
<Route path="/home">
<PaginatedDocumentList
documents={documents.recentlyUpdated}
fetch={documents.fetchRecentlyUpdated}
showCollection
/>
</Route>
</Switch>
<Actions align="center" justify="flex-end">
<Action>
<InputSearch source="dashboard" />
</Action>
<Action>
<NewDocumentMenu />
</Action>
</Actions>
</CenteredContent>
);
}
return (
<CenteredContent>
<PageTitle title={t("Home")} />
{!ui.languagePromptDismissed && <LanguagePrompt />}
<h1>{t("Home")}</h1>
<Tabs>
<Tab to="/home" exact>
{t("Recently updated")}
</Tab>
<Tab to="/home/recent" exact>
{t("Recently viewed")}
</Tab>
<Tab to="/home/created">{t("Created by me")}</Tab>
</Tabs>
<Switch>
<Route path="/home/recent">
<PaginatedDocumentList
key="recent"
documents={documents.recentlyViewed}
fetch={documents.fetchRecentlyViewed}
showCollection
/>
</Route>
<Route path="/home/created">
<PaginatedDocumentList
key="created"
documents={documents.createdByUser(user)}
fetch={documents.fetchOwned}
options={{ user }}
showCollection
/>
</Route>
<Route path="/home">
<PaginatedDocumentList
documents={documents.recentlyUpdated}
fetch={documents.fetchRecentlyUpdated}
showCollection
/>
</Route>
</Switch>
<Actions align="center" justify="flex-end">
<Action>
<InputSearch source="dashboard" />
</Action>
<Action>
<NewDocumentMenu />
</Action>
</Actions>
</CenteredContent>
);
}
export default inject("documents", "auth")(Dashboard);
export default observer(Dashboard);

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

@@ -11,6 +11,7 @@ import {
} from "outline-icons";
import { transparentize, darken } from "polished";
import * as React from "react";
import { withTranslation, Trans, type TFunction } from "react-i18next";
import { Redirect } from "react-router-dom";
import styled from "styled-components";
import breakpoint from "styled-components-breakpoint";
@@ -55,6 +56,7 @@ type Props = {
publish?: boolean,
autosave?: boolean,
}) => void,
t: TFunction,
};
@observer
@@ -131,6 +133,7 @@ class Header extends React.Component<Props> {
publishingIsDisabled,
ui,
auth,
t,
} = this.props;
const share = shares.getByDocumentId(document.id);
@@ -153,7 +156,7 @@ class Header extends React.Component<Props> {
<Modal
isOpen={this.showShareModal}
onRequestClose={this.handleCloseShareModal}
title="Share document"
title={t("Share document")}
>
<DocumentShare
document={document}
@@ -166,7 +169,9 @@ class Header extends React.Component<Props> {
<>
<Slash />
<Tooltip
tooltip={ui.tocVisible ? "Hide contents" : "Show contents"}
tooltip={
ui.tocVisible ? t("Hide contents") : t("Show contents")
}
shortcut={`ctrl+${meta}+h`}
delay={250}
placement="bottom"
@@ -190,14 +195,15 @@ class Header extends React.Component<Props> {
{this.isScrolled && (
<Title onClick={this.handleClickTitle}>
<Fade>
{document.title} {document.isArchived && <Badge>Archived</Badge>}
{document.title}{" "}
{document.isArchived && <Badge>{t("Archived")}</Badge>}
</Fade>
</Title>
)}
<Wrapper align="center" justify="flex-end">
{isSaving && !isPublishing && (
<Action>
<Status>Saving…</Status>
<Status>{t("Saving…")}</Status>
</Action>
)}
&nbsp;
@@ -217,10 +223,10 @@ class Header extends React.Component<Props> {
<Tooltip
tooltip={
isPubliclyShared ? (
<>
<Trans>
Anyone with the link <br />
can view this document
</>
</Trans>
) : (
""
)
@@ -234,7 +240,7 @@ class Header extends React.Component<Props> {
neutral
small
>
Share
{t("Share")}
</Button>
</Tooltip>
</Action>
@@ -243,7 +249,7 @@ class Header extends React.Component<Props> {
<>
<Action>
<Tooltip
tooltip="Save"
tooltip={t("Save")}
shortcut={`${meta}+enter`}
delay={500}
placement="bottom"
@@ -255,7 +261,7 @@ class Header extends React.Component<Props> {
neutral={isDraft}
small
>
{isDraft ? "Save Draft" : "Done Editing"}
{isDraft ? t("Save Draft") : t("Done Editing")}
</Button>
</Tooltip>
</Action>
@@ -264,7 +270,7 @@ class Header extends React.Component<Props> {
{canEdit && (
<Action>
<Tooltip
tooltip={`Edit ${document.noun}`}
tooltip={t("Edit {{noun}}", { noun: document.noun })}
shortcut="e"
delay={500}
placement="bottom"
@@ -275,7 +281,7 @@ class Header extends React.Component<Props> {
neutral
small
>
Edit
{t("Edit")}
</Button>
</Tooltip>
</Action>
@@ -286,13 +292,13 @@ class Header extends React.Component<Props> {
document={document}
label={
<Tooltip
tooltip="New document"
tooltip={t("New document")}
shortcut="n"
delay={500}
placement="bottom"
>
<Button icon={<PlusIcon />} neutral>
New doc
{t("New doc")}
</Button>
</Tooltip>
}
@@ -307,25 +313,25 @@ class Header extends React.Component<Props> {
primary
small
>
New from template
{t("New from template")}
</Button>
</Action>
)}
{can.update && isDraft && !isRevision && (
<Action>
<Tooltip
tooltip="Publish"
tooltip={t("Publish")}
shortcut={`${meta}+shift+p`}
delay={500}
placement="bottom"
>
<Button
onClick={this.handlePublish}
title="Publish document"
title={t("Publish document")}
disabled={publishingIsDisabled}
small
>
{isPublishing ? "Publishing…" : "Publish"}
{isPublishing ? t("Publishing…") : t("Publish")}
</Button>
</Tooltip>
</Action>
@@ -425,4 +431,6 @@ const Title = styled.div`
`};
`;
export default inject("auth", "ui", "policies", "shares")(Header);
export default withTranslation()<Header>(
inject("auth", "ui", "policies", "shares")(Header)
);

7
app/scenes/Document/components/Loading.js
View File

@@ -1,5 +1,6 @@
// @flow
import * as React from "react";
import { useTranslation } from "react-i18next";
import CenteredContent from "components/CenteredContent";
import LoadingPlaceholder from "components/LoadingPlaceholder";
import PageTitle from "components/PageTitle";
@@ -11,9 +12,13 @@ type Props = {|
|};
export default function Loading({ location }: Props) {
const { t } = useTranslation();
return (
<Container column auto>
<PageTitle title={location.state ? location.state.title : "Untitled"} />
<PageTitle
title={location.state ? location.state.title : t("Untitled")}
/>
<CenteredContent>
<LoadingPlaceholder />
</CenteredContent>

22
app/scenes/Drafts.js
View File

@@ -3,6 +3,7 @@ import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import queryString from "query-string";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { type RouterHistory } from "react-router-dom";
import styled from "styled-components";
import DocumentsStore from "stores/DocumentsStore";
@@ -25,6 +26,7 @@ type Props = {|
documents: DocumentsStore,
history: RouterHistory,
location: LocationWithState,
t: TFunction,
|};
@observer
@@ -33,7 +35,7 @@ class Drafts extends React.Component<Props> {
this.props.location.search
);
componentDidUpdate(prevProps) {
componentDidUpdate(prevProps: Props) {
if (prevProps.location.search !== this.props.location.search) {
this.handleQueryChange();
}
@@ -43,7 +45,10 @@ class Drafts extends React.Component<Props> {
this.params = new URLSearchParams(this.props.location.search);
};
handleFilterChange = (search) => {
handleFilterChange = (search: {
dateFilter?: ?string,
collectionId?: ?string,
}) => {
this.props.history.replace({
pathname: this.props.location.pathname,
search: queryString.stringify({
@@ -64,6 +69,7 @@ class Drafts extends React.Component<Props> {
}
render() {
const { t } = this.props;
const { drafts, fetchDrafts } = this.props.documents;
const isFiltered = this.collectionId || this.dateFilter;
const options = {
@@ -73,10 +79,10 @@ class Drafts extends React.Component<Props> {
return (
<CenteredContent column auto>
<PageTitle title="Drafts" />
<Heading>Drafts</Heading>
<PageTitle title={t("Drafts")} />
<Heading>{t("Drafts")}</Heading>
<Subheading>
Documents
{t("Documents")}
<Filters>
<CollectionFilter
collectionId={this.collectionId}
@@ -95,8 +101,8 @@ class Drafts extends React.Component<Props> {
empty={
<Empty>
{isFiltered
? "No documents found for your filters."
: "You’ve not got any drafts at the moment."}
? t("No documents found for your filters.")
: t("You’ve not got any drafts at the moment.")}
</Empty>
}
fetch={fetchDrafts}
@@ -131,4 +137,4 @@ const Filters = styled(Flex)`
}
`;
export default inject("documents")(Drafts);
export default withTranslation()<Drafts>(inject("documents")(Drafts));

13
app/scenes/Error404.js
View File

@@ -1,18 +1,23 @@
// @flow
import * as React from "react";
import { useTranslation, Trans } from "react-i18next";
import { Link } from "react-router-dom";
import CenteredContent from "components/CenteredContent";
import Empty from "components/Empty";
import PageTitle from "components/PageTitle";
const Error404 = () => {
const { t } = useTranslation();
return (
<CenteredContent>
<PageTitle title="Not Found" />
<h1>Not found</h1>
<PageTitle title={t("Not found")} />
<h1>{t("Not found")}</h1>
<Empty>
We were unable to find the page you’re looking for. Go to the{" "}
<Link to="/home">homepage</Link>?
<Trans>
We were unable to find the page you’re looking for. Go to the{" "}
<Link to="/home">homepage</Link>?
</Trans>
</Empty>
</CenteredContent>
);

9
app/scenes/ErrorOffline.js
View File

@@ -1,15 +1,18 @@
// @flow
import * as React from "react";
import { useTranslation } from "react-i18next";
import CenteredContent from "components/CenteredContent";
import Empty from "components/Empty";
import PageTitle from "components/PageTitle";
const ErrorOffline = () => {
const { t } = useTranslation();
return (
<CenteredContent>
<PageTitle title="Offline" />
<h1>Offline</h1>
<Empty>We were unable to load the document while offline.</Empty>
<PageTitle title={t("Offline")} />
<h1>{t("Offline")}</h1>
<Empty>{t("We were unable to load the document while offline.")}</Empty>
</CenteredContent>
);
};

24
app/scenes/ErrorSuspended.js
View File

@@ -1,29 +1,37 @@
// @flow
import { inject, observer } from "mobx-react";
import * as React from "react";
import { useTranslation, Trans } from "react-i18next";
import AuthStore from "stores/AuthStore";
import CenteredContent from "components/CenteredContent";
import PageTitle from "components/PageTitle";
const ErrorSuspended = observer(({ auth }: { auth: AuthStore }) => {
const ErrorSuspended = ({ auth }: { auth: AuthStore }) => {
const { t } = useTranslation();
return (
<CenteredContent>
<PageTitle title="Your account has been suspended" />
<PageTitle title={t("Your account has been suspended")} />
<h1>
<span role="img" aria-label="Warning sign">
⚠️
</span>{" "}
Your account has been suspended
{t("Your account has been suspended")}
</h1>
<p>
A team admin (<strong>{auth.suspendedContactEmail}</strong>) has
suspended your account. To re-activate your account, please reach out to
them directly.
<Trans>
A team admin (
<strong>
{{ suspendedContactEmail: auth.suspendedContactEmail }}
</strong>
) has suspended your account. To re-activate your account, please
reach out to them directly.
</Trans>
</p>
</CenteredContent>
);
});
};
export default inject("auth")(ErrorSuspended);
export default inject("auth")(observer(ErrorSuspended));

41
app/scenes/GroupMembers/AddPeopleToGroup.js
View File

@@ -3,11 +3,13 @@ import { debounce } from "lodash";
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import AuthStore from "stores/AuthStore";
import GroupMembershipsStore from "stores/GroupMembershipsStore";
import UiStore from "stores/UiStore";
import UsersStore from "stores/UsersStore";
import Group from "models/Group";
import User from "models/User";
import Invite from "scenes/Invite";
import Empty from "components/Empty";
import Flex from "components/Flex";
@@ -24,6 +26,7 @@ type Props = {
groupMemberships: GroupMembershipsStore,
users: UsersStore,
onSubmit: () => void,
t: TFunction,
};
@observer
@@ -50,40 +53,45 @@ class AddPeopleToGroup extends React.Component<Props> {
});
}, 250);
handleAddUser = async (user) => {
handleAddUser = async (user: User) => {
const { t } = this.props;
try {
await this.props.groupMemberships.create({
groupId: this.props.group.id,
userId: user.id,
});
this.props.ui.showToast(`${user.name} was added to the group`);
this.props.ui.showToast(
t(`{{userName}} was added to the group`, { userName: user.name })
);
} catch (err) {
this.props.ui.showToast("Could not add user");
this.props.ui.showToast(t("Could not add user"));
}
};
render() {
const { users, group, auth } = this.props;
const { users, group, auth, t } = this.props;
const { user, team } = auth;
if (!user || !team) return null;
return (
<Flex column>
<HelpText>
Add team members below to give them access to the group. Need to add
someone who’s not yet on the team yet?{" "}
{t(
"Add team members below to give them access to the group. Need to add someone who’s not yet on the team yet?"
)}{" "}
<a role="button" onClick={this.handleInviteModalOpen}>
Invite them to {team.name}
{t("Invite them to {{teamName}}", { teamName: team.name })}
</a>
.
</HelpText>
<Input
type="search"
placeholder="Search by name…"
placeholder={t("Search by name…")}
value={this.query}
onChange={this.handleFilter}
label="Search people"
label={t("Search people")}
labelHidden
autoFocus
flex
@@ -91,9 +99,9 @@ class AddPeopleToGroup extends React.Component<Props> {
<PaginatedList
empty={
this.query ? (
<Empty>No people matching your search</Empty>
<Empty>{t("No people matching your search")}</Empty>
) : (
<Empty>No people left to add</Empty>
<Empty>{t("No people left to add")}</Empty>
)
}
items={users.notInGroup(group.id, this.query)}
@@ -108,7 +116,7 @@ class AddPeopleToGroup extends React.Component<Props> {
)}
/>
<Modal
title="Invite people"
title={t("Invite people")}
onRequestClose={this.handleInviteModalClose}
isOpen={this.inviteModalOpen}
>
@@ -119,9 +127,6 @@ class AddPeopleToGroup extends React.Component<Props> {
}
}
export default inject(
"auth",
"users",
"groupMemberships",
"ui"
)(AddPeopleToGroup);
export default withTranslation()<AddPeopleToGroup>(
inject("auth", "users", "groupMemberships", "ui")(AddPeopleToGroup)
);

29
app/scenes/GroupMembers/GroupMembers.js
View File

@@ -3,12 +3,14 @@ import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import { PlusIcon } from "outline-icons";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import AuthStore from "stores/AuthStore";
import GroupMembershipsStore from "stores/GroupMembershipsStore";
import PoliciesStore from "stores/PoliciesStore";
import UiStore from "stores/UiStore";
import UsersStore from "stores/UsersStore";
import Group from "models/Group";
import User from "models/User";
import Button from "components/Button";
import Empty from "components/Empty";
import Flex from "components/Flex";
@@ -26,6 +28,7 @@ type Props = {
users: UsersStore,
policies: PoliciesStore,
groupMemberships: GroupMembershipsStore,
t: TFunction,
};
@observer
@@ -40,20 +43,24 @@ class GroupMembers extends React.Component<Props> {
this.addModalOpen = false;
};
handleRemoveUser = async (user) => {
handleRemoveUser = async (user: User) => {
const { t } = this.props;
try {
await this.props.groupMemberships.delete({
groupId: this.props.group.id,
userId: user.id,
});
this.props.ui.showToast(`${user.name} was removed from the group`);
this.props.ui.showToast(
t(`{{userName}} was removed from the group`, { userName: user.name })
);
} catch (err) {
this.props.ui.showToast("Could not remove user");
this.props.ui.showToast(t("Could not remove user"));
}
};
render() {
const { group, users, groupMemberships, policies, auth } = this.props;
const { group, users, groupMemberships, policies, t, auth } = this.props;
const { user } = auth;
if (!user) return null;
@@ -75,7 +82,7 @@ class GroupMembers extends React.Component<Props> {
icon={<PlusIcon />}
neutral
>
Add people…
{t("Add people…")}
</Button>
</span>
</>
@@ -90,7 +97,7 @@ class GroupMembers extends React.Component<Props> {
items={users.inGroup(group.id)}
fetch={groupMemberships.fetchPage}
options={{ id: group.id }}
empty={<Empty>This group has no members.</Empty>}
empty={<Empty>{t("This group has no members.")}</Empty>}
renderItem={(item) => (
<GroupMemberListItem
key={item.id}
@@ -119,10 +126,6 @@ class GroupMembers extends React.Component<Props> {
}
}
export default inject(
"auth",
"users",
"policies",
"groupMemberships",
"ui"
)(GroupMembers);
export default withTranslation()<GroupMembers>(
inject("auth", "users", "policies", "groupMemberships", "ui")(GroupMembers)
);

86
app/scenes/KeyboardShortcuts.js
View File

@@ -1,5 +1,6 @@
// @flow
import * as React from "react";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import Flex from "components/Flex";
import HelpText from "components/HelpText";
@@ -7,153 +8,150 @@ import Key from "components/Key";
import { meta } from "utils/keyboard";
function KeyboardShortcuts() {
const { t } = useTranslation();
return (
<Flex column>
<HelpText>
Outline is designed to be fast and easy to use. All of your usual
keyboard shortcuts work here, and there’s Markdown too.
{t(
"Outline is designed to be fast and easy to use. All of your usual keyboard shortcuts work here, and there’s Markdown too."
)}
</HelpText>
<h2>Navigation</h2>
<h2>{t("Navigation")}</h2>
<List>
<Keys>
<Key>n</Key>
</Keys>
<Label>New document in current collection</Label>
<Label>{t("New document in current collection")}</Label>
<Keys>
<Key>e</Key>
</Keys>
<Label>Edit current document</Label>
<Label>{t("Edit current document")}</Label>
<Keys>
<Key>m</Key>
</Keys>
<Label>Move current document</Label>
<Label>{t("Move current document")}</Label>
<Keys>
<Key>/</Key> or <Key>t</Key>
</Keys>
<Label>Jump to search</Label>
<Label>{t("Jump to search")}</Label>
<Keys>
<Key>d</Key>
</Keys>
<Label>Jump to dashboard</Label>
<Label>{t("Jump to dashboard")}</Label>
<Keys>
<Key>{meta}</Key> + <Key>Ctrl</Key> + <Key>h</Key>
</Keys>
<Label>Table of contents</Label>
<Label>{t("Table of contents")}</Label>
<Keys>
<Key>?</Key>
</Keys>
<Label>Open this guide</Label>
<Label>{t("Open this guide")}</Label>
</List>
<h2>Editor</h2>
<h2>{t("Editor")}</h2>
<List>
<Keys>
<Key>{meta}</Key> + <Key>Enter</Key>
</Keys>
<Label>Save and exit document edit mode</Label>
<Label>{t("Save and exit document edit mode")}</Label>
<Keys>
<Key>{meta}</Key> + <Key>Shift</Key> + <Key>p</Key>
</Keys>
<Label>Publish and exit document edit mode</Label>
<Label>{t("Publish and exit document edit mode")}</Label>
<Keys>
<Key>{meta}</Key> + <Key>s</Key>
</Keys>
<Label>Save document and continue editing</Label>
<Label>{t("Save document and continue editing")}</Label>
<Keys>
<Key>{meta}</Key> + <Key>Esc</Key>
</Keys>
<Label>Cancel editing</Label>
<Label>{t("Cancel editing")}</Label>
<Keys>
<Key>{meta}</Key> + <Key>b</Key>
</Keys>
<Label>Bold</Label>
<Label>{t("Bold")}</Label>
<Keys>
<Key>{meta}</Key> + <Key>i</Key>
</Keys>
<Label>Italic</Label>
<Label>{t("Italic")}</Label>
<Keys>
<Key>{meta}</Key> + <Key>u</Key>
</Keys>
<Label>Underline</Label>
<Label>{t("Underline")}</Label>
<Keys>
<Key>{meta}</Key> + <Key>d</Key>
</Keys>
<Label>Strikethrough</Label>
<Label>{t("Strikethrough")}</Label>
<Keys>
<Key>{meta}</Key> + <Key>k</Key>
</Keys>
<Label>Link</Label>
<Label>{t("Link")}</Label>
<Keys>
<Key>{meta}</Key> + <Key>z</Key>
</Keys>
<Label>Undo</Label>
<Label>{t("Undo")}</Label>
<Keys>
<Key>{meta}</Key> + <Key>Shift</Key> + <Key>z</Key>
</Keys>
<Label>Redo</Label>
<Label>{t("Redo")}</Label>
</List>
<h2>Markdown</h2>
<h2>{t("Markdown")}</h2>
<List>
<Keys>
<Key>#</Key> <Key>Space</Key>
</Keys>
<Label>Large header</Label>
<Label>{t("Large header")}</Label>
<Keys>
<Key>##</Key> <Key>Space</Key>
</Keys>
<Label>Medium header</Label>
<Label>{t("Medium header")}</Label>
<Keys>
<Key>###</Key> <Key>Space</Key>
</Keys>
<Label>Small header</Label>
<Label>{t("Small header")}</Label>
<Keys>
<Key>1.</Key> <Key>Space</Key>
</Keys>
<Label>Numbered list</Label>
<Label>{t("Numbered list")}</Label>
<Keys>
<Key>-</Key> <Key>Space</Key>
</Keys>
<Label>Bulleted list</Label>
<Label>{t("Bulleted list")}</Label>
<Keys>
<Key>[ ]</Key> <Key>Space</Key>
</Keys>
<Label>Todo list</Label>
<Label>{t("Todo list")}</Label>
<Keys>
<Key>&gt;</Key> <Key>Space</Key>
</Keys>
<Label>Blockquote</Label>
<Label>{t("Blockquote")}</Label>
<Keys>
<Key>---</Key>
</Keys>
<Label>Horizontal divider</Label>
<Label>{t("Horizontal divider")}</Label>
<Keys>
<Key>{"```"}</Key>
</Keys>
<Label>Code block</Label>
<Label>{t("Code block")}</Label>
<Keys>
<Key>{":::"}</Key>
</Keys>
<Label>Info notice</Label>
<Label>{t("Info notice")}</Label>
<Keys>_italic_</Keys>
<Label>Italic</Label>
<Label>{t("Italic")}</Label>
<Keys>**bold**</Keys>
<Label>Bold</Label>
<Label>{t("Bold")}</Label>
<Keys>~~strikethrough~~</Keys>
<Label>Strikethrough</Label>
<Label>{t("Strikethrough")}</Label>
<Keys>{"`code`"}</Keys>
<Label>Inline code</Label>
<Label>{t("Inline code")}</Label>
<Keys>==highlight==</Keys>
<Label>highlight</Label>
<Label>{t("Highlight")}</Label>
</List>
</Flex>
);

51
app/scenes/Search/Search.js
View File

@@ -7,6 +7,7 @@ import { PlusIcon } from "outline-icons";
import queryString from "query-string";
import * as React from "react";
import ReactDOM from "react-dom";
import { withTranslation, Trans, type TFunction } from "react-i18next";
import keydown from "react-keydown";
import { withRouter, Link } from "react-router-dom";
import type { RouterHistory, Match } from "react-router-dom";
@@ -44,11 +45,12 @@ type Props = {
documents: DocumentsStore,
users: UsersStore,
notFound: ?boolean,
t: TFunction,
};
@observer
class Search extends React.Component<Props> {
firstDocument: ?React.Component<typeof DocumentPreview>;
firstDocument: ?React.Component<any>;
lastQuery: string = "";
@observable
@@ -67,7 +69,7 @@ class Search extends React.Component<Props> {
}
}
componentDidUpdate(prevProps) {
componentDidUpdate(prevProps: Props) {
if (prevProps.location.search !== this.props.location.search) {
this.handleQueryChange();
}
@@ -81,7 +83,7 @@ class Search extends React.Component<Props> {
this.props.history.goBack();
}
handleKeyDown = (ev) => {
handleKeyDown = (ev: SyntheticKeyboardEvent<>) => {
if (ev.key === "Enter") {
this.fetchResults();
return;
@@ -124,7 +126,12 @@ class Search extends React.Component<Props> {
this.fetchResultsDebounced();
};
handleFilterChange = (search) => {
handleFilterChange = (search: {
collectionId?: ?string,
userId?: ?string,
dateFilter?: ?string,
includeArchived?: ?string,
}) => {
this.props.history.replace({
pathname: this.props.location.pathname,
search: queryString.stringify({
@@ -170,7 +177,7 @@ class Search extends React.Component<Props> {
get title() {
const query = this.query;
const title = "Search";
const title = this.props.t("Search");
if (query) return `${query} – ${title}`;
return title;
}
@@ -231,20 +238,19 @@ class Search extends React.Component<Props> {
trailing: true,
});
updateLocation = (query) => {
updateLocation = (query: string) => {
this.props.history.replace({
pathname: searchUrl(query),
search: this.props.location.search,
});
};
setFirstDocumentRef = (ref) => {
// $FlowFixMe
setFirstDocumentRef = (ref: any) => {
this.firstDocument = ref;
};
render() {
const { documents, notFound, location } = this.props;
const { documents, notFound, location, t } = this.props;
const results = documents.searchResults(this.query);
const showEmpty = !this.isLoading && this.query && results.length === 0;
const showShortcutTip =
@@ -256,12 +262,15 @@ class Search extends React.Component<Props> {
{this.isLoading && <LoadingIndicator />}
{notFound && (
<div>
<h1>Not Found</h1>
<Empty>We were unable to find the page you’re looking for.</Empty>
<h1>{t("Not Found")}</h1>
<Empty>
{t("We were unable to find the page you’re looking for.")}
</Empty>
</div>
)}
<ResultsWrapper pinToTop={this.pinToTop} column auto>
<SearchField
placeholder={t("Search…")}
onKeyDown={this.handleKeyDown}
onChange={this.updateLocation}
defaultValue={this.query}
@@ -269,8 +278,10 @@ class Search extends React.Component<Props> {
{showShortcutTip && (
<Fade>
<HelpText small>
Use the <strong>{meta}+K</strong> shortcut to search from
anywhere in Outline
<Trans>
Use the <strong>{{ meta }}+K</strong> shortcut to search from
anywhere in your knowledge base
</Trans>
</HelpText>
</Fade>
)}
@@ -304,8 +315,10 @@ class Search extends React.Component<Props> {
<Fade>
<Centered column>
<HelpText>
No documents found for your search filters. <br />
Create a new document?
<Trans>
No documents found for your search filters. <br />
Create a new document?
</Trans>
</HelpText>
<Wrapper>
{this.collectionId ? (
@@ -314,14 +327,14 @@ class Search extends React.Component<Props> {
icon={<PlusIcon />}
primary
>
New doc
{t("New doc")}
</Button>
) : (
<NewDocumentMenu />
)}
&nbsp;&nbsp;
<Button as={Link} to="/search" neutral>
Clear filters
{t("Clear filters")}
</Button>
</Wrapper>
</Centered>
@@ -414,4 +427,6 @@ const Filters = styled(Flex)`
}
`;
export default withRouter(inject("documents")(Search));
export default withTranslation()<Search>(
withRouter(inject("documents")(Search))
);

3
app/scenes/Search/components/SearchField.js
View File

@@ -8,6 +8,7 @@ import { type Theme } from "types";
type Props = {
onChange: (string) => void,
defaultValue?: string,
placeholder?: string,
theme: Theme,
};
@@ -44,7 +45,7 @@ class SearchField extends React.Component<Props> {
ref={(ref) => (this.input = ref)}
onChange={this.handleChange}
spellCheck="false"
placeholder="Search…"
placeholder={this.props.placeholder}
type="search"
autoFocus
/>

69
app/scenes/Settings/Profile.js
View File

@@ -2,7 +2,9 @@
import { observable } from "mobx";
import { observer, inject } from "mobx-react";
import * as React from "react";
import { Trans, withTranslation, type TFunction } from "react-i18next";
import styled from "styled-components";
import { languageOptions } from "shared/i18n";
import AuthStore from "stores/AuthStore";
import UiStore from "stores/UiStore";
@@ -10,13 +12,16 @@ import UserDelete from "scenes/UserDelete";
import Button from "components/Button";
import CenteredContent from "components/CenteredContent";
import Flex from "components/Flex";
import HelpText from "components/HelpText";
import Input, { LabelText } from "components/Input";
import InputSelect from "components/InputSelect";
import PageTitle from "components/PageTitle";
import ImageUpload from "./components/ImageUpload";
type Props = {
auth: AuthStore,
ui: UiStore,
t: TFunction,
};
@observer
@@ -27,10 +32,12 @@ class Profile extends React.Component<Props> {
@observable name: string;
@observable avatarUrl: ?string;
@observable showDeleteModal: boolean = false;
@observable language: string;
componentDidMount() {
if (this.props.auth.user) {
this.name = this.props.auth.user.name;
this.language = this.props.auth.user.language;
}
}
@@ -39,13 +46,16 @@ class Profile extends React.Component<Props> {
}
handleSubmit = async (ev: SyntheticEvent<>) => {
const { t } = this.props;
ev.preventDefault();
await this.props.auth.updateUser({
name: this.name,
avatarUrl: this.avatarUrl,
language: this.language,
});
this.props.ui.showToast("Profile saved");
this.props.ui.showToast(t("Profile saved"));
};
handleNameChange = (ev: SyntheticInputEvent<*>) => {
@@ -53,16 +63,22 @@ class Profile extends React.Component<Props> {
};
handleAvatarUpload = async (avatarUrl: string) => {
const { t } = this.props;
this.avatarUrl = avatarUrl;
await this.props.auth.updateUser({
avatarUrl: this.avatarUrl,
});
this.props.ui.showToast("Profile picture updated");
this.props.ui.showToast(t("Profile picture updated"));
};
handleAvatarError = (error: ?string) => {
this.props.ui.showToast(error || "Unable to upload new avatar");
const { t } = this.props;
this.props.ui.showToast(error || t("Unable to upload new profile picture"));
};
handleLanguageChange = (ev: SyntheticInputEvent<*>) => {
this.language = ev.target.value;
};
toggleDeleteAccount = () => {
@@ -74,16 +90,17 @@ class Profile extends React.Component<Props> {
}
render() {
const { t } = this.props;
const { user, isSaving } = this.props.auth;
if (!user) return null;
const avatarUrl = this.avatarUrl || user.avatarUrl;
return (
<CenteredContent>
<PageTitle title="Profile" />
<h1>Profile</h1>
<PageTitle title={t("Profile")} />
<h1>{t("Profile")}</h1>
<ProfilePicture column>
<LabelText>Photo</LabelText>
<LabelText>{t("Photo")}</LabelText>
<AvatarContainer>
<ImageUpload
onSuccess={this.handleAvatarUpload}
@@ -91,31 +108,55 @@ class Profile extends React.Component<Props> {
>
<Avatar src={avatarUrl} />
<Flex auto align="center" justify="center">
Upload
{t("Upload")}
</Flex>
</ImageUpload>
</AvatarContainer>
</ProfilePicture>
<form onSubmit={this.handleSubmit} ref={(ref) => (this.form = ref)}>
<Input
label="Full name"
label={t("Full name")}
autoComplete="name"
value={this.name}
onChange={this.handleNameChange}
required
short
/>
<br />
<InputSelect
label={t("Language")}
options={languageOptions}
value={this.language}
onChange={this.handleLanguageChange}
short
/>
<HelpText small>
<Trans>
Please note that translations are currently in early access.
<br />
Community contributions are accepted though our{" "}
<a
href="https://translate.getoutline.com"
target="_blank"
rel="noreferrer"
>
translation portal
</a>
</Trans>
.
</HelpText>
<Button type="submit" disabled={isSaving || !this.isValid}>
{isSaving ? "Saving…" : "Save"}
{isSaving ? t("Saving…") : t("Save")}
</Button>
</form>
<DangerZone>
<LabelText>Delete Account</LabelText>
<LabelText>{t("Delete Account")}</LabelText>
<p>
You may delete your account at any time, note that this is
unrecoverable.{" "}
<a onClick={this.toggleDeleteAccount}>Delete account</a>.
{t(
"You may delete your account at any time, note that this is unrecoverable"
)}
. <a onClick={this.toggleDeleteAccount}>{t("Delete account")}</a>.
</p>
</DangerZone>
{this.showDeleteModal && (
@@ -170,4 +211,4 @@ const Avatar = styled.img`
${avatarStyles};
`;
export default inject("auth", "ui")(Profile);
export default withTranslation()<Profile>(inject("auth", "ui")(Profile));

80
app/scenes/Starred.js
View File

@@ -1,9 +1,8 @@
// @flow
import { observer, inject } from "mobx-react";
import { observer } from "mobx-react";
import * as React from "react";
import { useTranslation } from "react-i18next";
import { type Match } from "react-router-dom";
import DocumentsStore from "stores/DocumentsStore";
import Actions, { Action } from "components/Actions";
import CenteredContent from "components/CenteredContent";
import Empty from "components/Empty";
@@ -13,51 +12,50 @@ import PageTitle from "components/PageTitle";
import PaginatedDocumentList from "components/PaginatedDocumentList";
import Tab from "components/Tab";
import Tabs from "components/Tabs";
import useStores from "hooks/useStores";
import NewDocumentMenu from "menus/NewDocumentMenu";
type Props = {
documents: DocumentsStore,
match: Match,
};
@observer
class Starred extends React.Component<Props> {
render() {
const { fetchStarred, starred, starredAlphabetical } = this.props.documents;
const { sort } = this.props.match.params;
function Starred(props: Props) {
const { documents } = useStores();
const { t } = useTranslation();
const { fetchStarred, starred, starredAlphabetical } = documents;
const { sort } = props.match.params;
return (
<CenteredContent column auto>
<PageTitle title="Starred" />
<Heading>Starred</Heading>
<PaginatedDocumentList
heading={
<Tabs>
<Tab to="/starred" exact>
Recently Updated
</Tab>
<Tab to="/starred/alphabetical" exact>
Alphabetical
</Tab>
</Tabs>
}
empty={<Empty>You’ve not starred any documents yet.</Empty>}
fetch={fetchStarred}
documents={sort === "alphabetical" ? starredAlphabetical : starred}
showCollection
/>
return (
<CenteredContent column auto>
<PageTitle title={t("Starred")} />
<Heading>{t("Starred")}</Heading>
<PaginatedDocumentList
heading={
<Tabs>
<Tab to="/starred" exact>
{t("Recently updated")}
</Tab>
<Tab to="/starred/alphabetical" exact>
{t("Alphabetical")}
</Tab>
</Tabs>
}
empty={<Empty>{t("You’ve not starred any documents yet.")}</Empty>}
fetch={fetchStarred}
documents={sort === "alphabetical" ? starredAlphabetical : starred}
showCollection
/>
<Actions align="center" justify="flex-end">
<Action>
<InputSearch source="starred" />
</Action>
<Action>
<NewDocumentMenu />
</Action>
</Actions>
</CenteredContent>
);
}
<Actions align="center" justify="flex-end">
<Action>
<InputSearch source="starred" />
</Action>
<Action>
<NewDocumentMenu />
</Action>
</Actions>
</CenteredContent>
);
}
export default inject("documents")(Starred);
export default observer(Starred);

92
app/scenes/Templates.js
View File

@@ -1,9 +1,9 @@
// @flow
import { observer, inject } from "mobx-react";
import { observer } from "mobx-react";
import * as React from "react";
import { useTranslation } from "react-i18next";
import { type Match } from "react-router-dom";
import DocumentsStore from "stores/DocumentsStore";
import Actions, { Action } from "components/Actions";
import CenteredContent from "components/CenteredContent";
import Empty from "components/Empty";
@@ -12,60 +12,54 @@ import PageTitle from "components/PageTitle";
import PaginatedDocumentList from "components/PaginatedDocumentList";
import Tab from "components/Tab";
import Tabs from "components/Tabs";
import useStores from "hooks/useStores";
import NewTemplateMenu from "menus/NewTemplateMenu";
type Props = {
documents: DocumentsStore,
match: Match,
};
@observer
class Templates extends React.Component<Props> {
render() {
const {
fetchTemplates,
templates,
templatesAlphabetical,
} = this.props.documents;
const { sort } = this.props.match.params;
function Templates(props: Props) {
const { documents } = useStores();
const { t } = useTranslation();
const { fetchTemplates, templates, templatesAlphabetical } = documents;
const { sort } = props.match.params;
return (
<CenteredContent column auto>
<PageTitle title="Templates" />
<Heading>Templates</Heading>
<PaginatedDocumentList
heading={
<Tabs>
<Tab to="/templates" exact>
Recently Updated
</Tab>
<Tab to="/templates/alphabetical" exact>
Alphabetical
</Tab>
</Tabs>
}
empty={
<Empty>
There are no templates just yet. You can create templates to help
your team create consistent and accurate documentation.
</Empty>
}
fetch={fetchTemplates}
documents={
sort === "alphabetical" ? templatesAlphabetical : templates
}
showCollection
showDraft
/>
return (
<CenteredContent column auto>
<PageTitle title={t("Templates")} />
<Heading>{t("Templates")}</Heading>
<PaginatedDocumentList
heading={
<Tabs>
<Tab to="/templates" exact>
{t("Recently updated")}
</Tab>
<Tab to="/templates/alphabetical" exact>
{t("Alphabetical")}
</Tab>
</Tabs>
}
empty={
<Empty>
{t(
"There are no templates just yet. You can create templates to help your team create consistent and accurate documentation."
)}
</Empty>
}
fetch={fetchTemplates}
documents={sort === "alphabetical" ? templatesAlphabetical : templates}
showCollection
showDraft
/>
<Actions align="center" justify="flex-end">
<Action>
<NewTemplateMenu />
</Action>
</Actions>
</CenteredContent>
);
}
<Actions align="center" justify="flex-end">
<Action>
<NewTemplateMenu />
</Action>
</Actions>
</CenteredContent>
);
}
export default inject("documents")(Templates);
export default observer(Templates);

47
app/scenes/Trash.js
View File

@@ -1,39 +1,34 @@
// @flow
import { observer, inject } from "mobx-react";
import { observer } from "mobx-react";
import * as React from "react";
import { useTranslation } from "react-i18next";
import DocumentsStore from "stores/DocumentsStore";
import CenteredContent from "components/CenteredContent";
import Empty from "components/Empty";
import Heading from "components/Heading";
import PageTitle from "components/PageTitle";
import PaginatedDocumentList from "components/PaginatedDocumentList";
import Subheading from "components/Subheading";
import useStores from "hooks/useStores";
type Props = {
documents: DocumentsStore,
};
function Trash() {
const { t } = useTranslation();
const { documents } = useStores();
@observer
class Trash extends React.Component<Props> {
render() {
const { documents } = this.props;
return (
<CenteredContent column auto>
<PageTitle title="Trash" />
<Heading>Trash</Heading>
<PaginatedDocumentList
documents={documents.deleted}
fetch={documents.fetchDeleted}
heading={<Subheading>Documents</Subheading>}
empty={<Empty>Trash is empty at the moment.</Empty>}
showCollection
showTemplate
/>
</CenteredContent>
);
}
return (
<CenteredContent column auto>
<PageTitle title={t("Trash")} />
<Heading>{t("Trash")}</Heading>
<PaginatedDocumentList
documents={documents.deleted}
fetch={documents.fetchDeleted}
heading={<Subheading>{t("Documents")}</Subheading>}
empty={<Empty>{t("Trash is empty at the moment.")}</Empty>}
showCollection
showTemplate
/>
</CenteredContent>
);
}
export default inject("documents")(Trash);
export default observer(Trash);

113
app/scenes/UserProfile.js
View File

@@ -3,6 +3,7 @@ import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
import { inject, observer } from "mobx-react";
import { EditIcon } from "outline-icons";
import * as React from "react";
import { useTranslation } from "react-i18next";
import { withRouter, type RouterHistory } from "react-router-dom";
import styled from "styled-components";
import { settings } from "shared/utils/routeHelpers";
@@ -26,61 +27,65 @@ type Props = {
onRequestClose: () => void,
};
@observer
class UserProfile extends React.Component<Props> {
render() {
const { user, auth, documents, ...rest } = this.props;
if (!user) return null;
const isCurrentUser = auth.user && auth.user.id === user.id;
function UserProfile(props: Props) {
const { t } = useTranslation();
const { user, auth, documents, ...rest } = props;
if (!user) return null;
const isCurrentUser = auth.user && auth.user.id === user.id;
return (
<Modal
title={
<Flex align="center">
<Avatar src={user.avatarUrl} size={38} />
<span>&nbsp;{user.name}</span>
</Flex>
}
{...rest}
>
<Flex column>
<Meta>
{isCurrentUser
? "You joined"
: user.lastActiveAt
? "Joined"
: "Invited"}{" "}
{distanceInWordsToNow(new Date(user.createdAt))} ago.
{user.isAdmin && (
<StyledBadge admin={user.isAdmin}>Admin</StyledBadge>
)}
{user.isSuspended && <Badge>Suspended</Badge>}
{isCurrentUser && (
<Edit>
<Button
onClick={() => this.props.history.push(settings())}
icon={<EditIcon />}
neutral
>
Edit Profile
</Button>
</Edit>
)}
</Meta>
<PaginatedDocumentList
documents={documents.createdByUser(user.id)}
fetch={documents.fetchOwned}
options={{ user: user.id }}
heading={<Subheading>Recently updated</Subheading>}
empty={
<HelpText>{user.name} hasn’t updated any documents yet.</HelpText>
}
showCollection
/>
return (
<Modal
title={
<Flex align="center">
<Avatar src={user.avatarUrl} size={38} />
<span>&nbsp;{user.name}</span>
</Flex>
</Modal>
);
}
}
{...rest}
>
<Flex column>
<Meta>
{isCurrentUser
? t("You joined")
: user.lastActiveAt
? t("Joined")
: t("Invited")}{" "}
{t("{{ time }} ago.", {
time: distanceInWordsToNow(new Date(user.createdAt)),
})}
{user.isAdmin && (
<StyledBadge admin={user.isAdmin}>{t("Admin")}</StyledBadge>
)}
{user.isSuspended && <Badge>{t("Suspended")}</Badge>}
{isCurrentUser && (
<Edit>
<Button
onClick={() => this.props.history.push(settings())}
icon={<EditIcon />}
neutral
>
{t("Edit Profile")}
</Button>
</Edit>
)}
</Meta>
<PaginatedDocumentList
documents={documents.createdByUser(user.id)}
fetch={documents.fetchOwned}
options={{ user: user.id }}
heading={<Subheading>{t("Recently updated")}</Subheading>}
empty={
<HelpText>
{t("{{ userName }} hasn’t updated any documents yet.", {
userName: user.name,
})}
</HelpText>
}
showCollection
/>
</Flex>
</Modal>
);
}
const Edit = styled.span`
@@ -98,4 +103,4 @@ const Meta = styled(HelpText)`
margin-top: -12px;
`;
export default inject("documents", "auth")(withRouter(UserProfile));
export default inject("documents", "auth")(withRouter(observer(UserProfile)));

10
app/stores/UiStore.js
View File

@@ -9,6 +9,9 @@ import type { Toast } from "types";
const UI_STORE = "UI_STORE";
class UiStore {
// has the user seen the prompt to change the UI language and actioned it
@observable languagePromptDismissed: boolean;
// theme represents the users UI preference (defaults to system)
@observable theme: "light" | "dark" | "system";
@@ -47,6 +50,7 @@ class UiStore {
}
// persisted keys
this.languagePromptDismissed = data.languagePromptDismissed;
this.tocVisible = data.tocVisible;
this.theme = data.theme || "system";
@@ -68,6 +72,11 @@ class UiStore {
}
};
@action
setLanguagePromptDismissed = () => {
this.languagePromptDismissed = true;
};
@action
setActiveDocument = (document: Document): void => {
this.activeDocumentId = document.id;
@@ -181,6 +190,7 @@ class UiStore {
get asJson(): string {
return JSON.stringify({
tocVisible: this.tocVisible,
languagePromptDismissed: this.languagePromptDismissed,
theme: this.theme,
});
}

7
app/utils/language.js Normal file
View File

@@ -0,0 +1,7 @@
// @flow
export function detectLanguage() {
const [ln, r] = navigator.language.split("-");
const region = (r || ln).toUpperCase();
return `${ln}_${region}`;
}