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

fix: Keyboard accessible context menus (#1768)

Browse Source 
- Makes menus fully accessible and keyboard driven
- Currently adds 2.8% to initial bundle size due to the inclusion of Reakit and its dependency, popperjs.
- Converts all menus to functional components
- Remove old custom menu system
- Various layout and flow improvements around the menus

closes #1766
This commit is contained in:
Tom Moor
2021-01-13 22:00:25 -08:00
committed by GitHub
parent 47369dd968
commit e8b7782f5e
54 changed files with 1788 additions and 1881 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
app/menus/AccountMenu.js
View File

@@ -1,134 +1,128 @@
// @flow
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import { observer } from "mobx-react";
import { SunIcon, MoonIcon } from "outline-icons";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { useMenuState, MenuButton } from "reakit/Menu";
import styled from "styled-components";
import AuthStore from "stores/AuthStore";
import UiStore from "stores/UiStore";
import KeyboardShortcuts from "scenes/KeyboardShortcuts";
import { DropdownMenu, DropdownMenuItem } from "components/DropdownMenu";
import Flex from "components/Flex";
import Modal from "components/Modal";
import {
developers,
changelog,
githubIssuesUrl,
mailToUrl,
settings,
} from "../../shared/utils/routeHelpers";
} from "shared/utils/routeHelpers";
import KeyboardShortcuts from "scenes/KeyboardShortcuts";
import ContextMenu from "components/ContextMenu";
import MenuItem, { MenuAnchor } from "components/ContextMenu/MenuItem";
import Separator from "components/ContextMenu/Separator";
import Flex from "components/Flex";
import Modal from "components/Modal";
import useStores from "hooks/useStores";
type Props = {
label: React.Node,
ui: UiStore,
auth: AuthStore,
t: TFunction,
};
type Props = {|
children: (props: any) => React.Node,
|};
@observer
class AccountMenu extends React.Component<Props> {
@observable keyboardShortcutsOpen: boolean = false;
const AppearanceMenu = React.forwardRef((props, ref) => {
const { ui } = useStores();
const { t } = useTranslation();
const menu = useMenuState();
handleLogout = () => {
this.props.auth.logout();
};
handleOpenKeyboardShortcuts = () => {
this.keyboardShortcutsOpen = true;
};
handleCloseKeyboardShortcuts = () => {
this.keyboardShortcutsOpen = false;
};
render() {
const { ui, t } = this.props;
return (
<>
<Modal
isOpen={this.keyboardShortcutsOpen}
onRequestClose={this.handleCloseKeyboardShortcuts}
title={t("Keyboard shortcuts")}
return (
<>
<MenuButton ref={ref} {...menu} {...props}>
{(props) => (
<MenuAnchor {...props}>
<ChangeTheme justify="space-between">
{t("Appearance")}
{ui.resolvedTheme === "light" ? <SunIcon /> : <MoonIcon />}
</ChangeTheme>
</MenuAnchor>
)}
</MenuButton>
<ContextMenu {...menu} aria-label={t("Appearance")}>
<MenuItem
{...menu}
onClick={() => ui.setTheme("system")}
selected={ui.theme === "system"}
>
<KeyboardShortcuts />
</Modal>
<DropdownMenu
style={{ marginRight: 10, marginTop: -10 }}
label={this.props.label}
{t("System")}
</MenuItem>
<MenuItem
{...menu}
onClick={() => ui.setTheme("light")}
selected={ui.theme === "light"}
>
<DropdownMenuItem as={Link} to={settings()}>
{t("Settings")}
</DropdownMenuItem>
<DropdownMenuItem onClick={this.handleOpenKeyboardShortcuts}>
{t("Keyboard shortcuts")}
</DropdownMenuItem>
<DropdownMenuItem href={developers()} target="_blank">
{t("API documentation")}
</DropdownMenuItem>
<hr />
<DropdownMenuItem href={changelog()} target="_blank">
{t("Changelog")}
</DropdownMenuItem>
<DropdownMenuItem href={mailToUrl()} target="_blank">
{t("Send us feedback")}
</DropdownMenuItem>
<DropdownMenuItem href={githubIssuesUrl()} target="_blank">
{t("Report a bug")}
</DropdownMenuItem>
<hr />
<DropdownMenu
position="right"
style={{
left: 170,
position: "relative",
top: -40,
}}
label={
<DropdownMenuItem>
<ChangeTheme justify="space-between">
{t("Appearance")}
{ui.resolvedTheme === "light" ? <SunIcon /> : <MoonIcon />}
</ChangeTheme>
</DropdownMenuItem>
}
hover
>
<DropdownMenuItem
onClick={() => ui.setTheme("system")}
selected={ui.theme === "system"}
>
{t("System")}
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => ui.setTheme("light")}
selected={ui.theme === "light"}
>
{t("Light")}
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => ui.setTheme("dark")}
selected={ui.theme === "dark"}
>
{t("Dark")}
</DropdownMenuItem>
</DropdownMenu>
<hr />
<DropdownMenuItem onClick={this.handleLogout}>
{t("Log out")}
</DropdownMenuItem>
</DropdownMenu>
</>
);
}
{t("Light")}
</MenuItem>
<MenuItem
{...menu}
onClick={() => ui.setTheme("dark")}
selected={ui.theme === "dark"}
>
{t("Dark")}
</MenuItem>
</ContextMenu>
</>
);
});
function AccountMenu(props: Props) {
const menu = useMenuState({
placement: "bottom-start",
modal: true,
});
const { auth } = useStores();
const { t } = useTranslation();
const [keyboardShortcutsOpen, setKeyboardShortcutsOpen] = React.useState(
false
);
return (
<>
<Modal
isOpen={keyboardShortcutsOpen}
onRequestClose={() => setKeyboardShortcutsOpen(false)}
title={t("Keyboard shortcuts")}
>
<KeyboardShortcuts />
</Modal>
<MenuButton {...menu}>{props.children}</MenuButton>
<ContextMenu {...menu} aria-label={t("Account")}>
<MenuItem {...menu} as={Link} to={settings()}>
{t("Settings")}
</MenuItem>
<MenuItem {...menu} onClick={() => setKeyboardShortcutsOpen(true)}>
{t("Keyboard shortcuts")}
</MenuItem>
<MenuItem {...menu} href={developers()} target="_blank">
{t("API documentation")}
</MenuItem>
<Separator {...menu} />
<MenuItem {...menu} href={changelog()} target="_blank">
{t("Changelog")}
</MenuItem>
<MenuItem {...menu} href={mailToUrl()} target="_blank">
{t("Send us feedback")}
</MenuItem>
<MenuItem {...menu} href={githubIssuesUrl()} target="_blank">
{t("Report a bug")}
</MenuItem>
<Separator {...menu} />
<MenuItem {...menu} as={AppearanceMenu} />
<Separator {...menu} />
<MenuItem {...menu} onClick={auth.logout}>
{t("Log out")}
</MenuItem>
</ContextMenu>
</>
);
}
const ChangeTheme = styled(Flex)`
width: 100%;
`;
export default withTranslation()<AccountMenu>(
inject("ui", "auth")(AccountMenu)
);
export default observer(AccountMenu);

34
app/menus/BreadcrumbMenu.js Normal file
View File

@@ -0,0 +1,34 @@
// @flow
import * as React from "react";
import { useTranslation } from "react-i18next";
import { useMenuState } from "reakit/Menu";
import ContextMenu from "components/ContextMenu";
import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
import Template from "components/ContextMenu/Template";
type Props = {
path: Array<any>,
};
export default function BreadcrumbMenu({ path }: Props) {
const { t } = useTranslation();
const menu = useMenuState({
modal: true,
placement: "bottom",
});
return (
<>
<OverflowMenuButton {...menu} />
<ContextMenu {...menu} aria-label={t("Path to document")}>
<Template
{...menu}
items={path.map((item) => ({
title: item.title,
to: item.url,
}))}
/>
</ContextMenu>
</>
);
}

44
app/menus/CollectionGroupMemberMenu.js Normal file
View File

@@ -0,0 +1,44 @@
// @flow
import { observer } from "mobx-react";
import * as React from "react";
import { useTranslation } from "react-i18next";
import { useMenuState } from "reakit/Menu";
import ContextMenu from "components/ContextMenu";
import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
import Template from "components/ContextMenu/Template";
type Props = {|
onMembers: () => void,
onRemove: () => void,
|};
function CollectionGroupMemberMenu({ onMembers, onRemove }: Props) {
const { t } = useTranslation();
const menu = useMenuState({ modal: true });
return (
<>
<OverflowMenuButton {...menu} />
<ContextMenu {...menu} aria-label={t("Group member options")}>
<Template
{...menu}
items={[
{
title: t("Members"),
onClick: onMembers,
},
{
type: "separator",
},
{
title: t("Remove"),
onClick: onRemove,
},
]}
/>
</ContextMenu>
</>
);
}
export default observer(CollectionGroupMemberMenu);

394
app/menus/CollectionMenu.js
View File

@@ -1,229 +1,221 @@
// @flow
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import { 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";
import UiStore from "stores/UiStore";
import { useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
import { useMenuState, MenuButton } from "reakit/Menu";
import Collection from "models/Collection";
import CollectionDelete from "scenes/CollectionDelete";
import CollectionEdit from "scenes/CollectionEdit";
import CollectionExport from "scenes/CollectionExport";
import CollectionMembers from "scenes/CollectionMembers";
import { DropdownMenu } from "components/DropdownMenu";
import DropdownMenuItems from "components/DropdownMenu/DropdownMenuItems";
import ContextMenu from "components/ContextMenu";
import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
import Template from "components/ContextMenu/Template";
import Modal from "components/Modal";
import VisuallyHidden from "components/VisuallyHidden";
import useStores from "hooks/useStores";
import getDataTransferFiles from "utils/getDataTransferFiles";
import { newDocumentUrl } from "utils/routeHelpers";
type Props = {
position?: "left" | "right" | "center",
ui: UiStore,
policies: PoliciesStore,
documents: DocumentsStore,
type Props = {|
collection: Collection,
history: RouterHistory,
placement?: string,
modal?: boolean,
label?: (any) => React.Node,
onOpen?: () => void,
onClose?: () => void,
t: TFunction,
};
|};
@observer
class CollectionMenu extends React.Component<Props> {
file: ?HTMLInputElement;
@observable showCollectionMembers = false;
@observable showCollectionEdit = false;
@observable showCollectionDelete = false;
@observable showCollectionExport = false;
function CollectionMenu({
collection,
label,
modal = true,
placement,
onOpen,
onClose,
}: Props) {
const menu = useMenuState({ modal, placement });
const [renderModals, setRenderModals] = React.useState(false);
const { ui, documents, policies } = useStores();
const { t } = useTranslation();
const history = useHistory();
onNewDocument = (ev: SyntheticEvent<>) => {
ev.preventDefault();
const { collection } = this.props;
this.props.history.push(newDocumentUrl(collection.id));
};
const file = React.useRef<?HTMLInputElement>();
const [showCollectionMembers, setShowCollectionMembers] = React.useState(
false
);
const [showCollectionEdit, setShowCollectionEdit] = React.useState(false);
const [showCollectionDelete, setShowCollectionDelete] = React.useState(false);
const [showCollectionExport, setShowCollectionExport] = React.useState(false);
onImportDocument = (ev: SyntheticEvent<>) => {
ev.preventDefault();
ev.stopPropagation();
// simulate a click on the file upload input element
if (this.file) this.file.click();
};
onFilePicked = async (ev: SyntheticEvent<>) => {
const files = getDataTransferFiles(ev);
try {
const file = files[0];
const document = await this.props.documents.import(
file,
null,
this.props.collection.id,
{ publish: true }
);
this.props.history.push(document.url);
} catch (err) {
this.props.ui.showToast(err.message, {
type: "error",
});
const handleOpen = React.useCallback(() => {
setRenderModals(true);
if (onOpen) {
onOpen();
}
};
}, [onOpen]);
handleEditCollectionOpen = (ev: SyntheticEvent<>) => {
ev.preventDefault();
this.showCollectionEdit = true;
};
const handleNewDocument = React.useCallback(
(ev: SyntheticEvent<>) => {
ev.preventDefault();
history.push(newDocumentUrl(collection.id));
},
[history, collection.id]
);
handleEditCollectionClose = () => {
this.showCollectionEdit = false;
};
const handleImportDocument = React.useCallback(
(ev: SyntheticEvent<>) => {
ev.preventDefault();
ev.stopPropagation();
handleDeleteCollectionOpen = (ev: SyntheticEvent<>) => {
ev.preventDefault();
this.showCollectionDelete = true;
};
// simulate a click on the file upload input element
if (file.current) {
file.current.click();
}
},
[file]
);
handleDeleteCollectionClose = () => {
this.showCollectionDelete = false;
};
const handleFilePicked = React.useCallback(
async (ev: SyntheticEvent<>) => {
const files = getDataTransferFiles(ev);
handleExportCollectionOpen = (ev: SyntheticEvent<>) => {
ev.preventDefault();
this.showCollectionExport = true;
};
try {
const file = files[0];
const document = await documents.import(
file,
null,
this.props.collection.id,
{ publish: true }
);
history.push(document.url);
} catch (err) {
ui.showToast(err.message, {
type: "error",
});
}
},
[history, ui, documents]
);
handleExportCollectionClose = () => {
this.showCollectionExport = false;
};
const can = policies.abilities(collection.id);
handleMembersModalOpen = (ev: SyntheticEvent<>) => {
ev.preventDefault();
this.showCollectionMembers = true;
};
handleMembersModalClose = () => {
this.showCollectionMembers = false;
};
render() {
const {
policies,
documents,
collection,
position,
onOpen,
onClose,
t,
} = this.props;
const can = policies.abilities(collection.id);
return (
<>
<VisuallyHidden>
<input
type="file"
ref={(ref) => (this.file = ref)}
onChange={this.onFilePicked}
onClick={(ev) => ev.stopPropagation()}
accept={documents.importFileTypes.join(", ")}
/>
</VisuallyHidden>
<Modal
title={t("Collection permissions")}
onRequestClose={this.handleMembersModalClose}
isOpen={this.showCollectionMembers}
>
<CollectionMembers
collection={collection}
onSubmit={this.handleMembersModalClose}
handleEditCollectionOpen={this.handleEditCollectionOpen}
onEdit={this.handleEditCollectionOpen}
/>
</Modal>
<DropdownMenu onOpen={onOpen} onClose={onClose} position={position}>
<DropdownMenuItems
items={[
{
title: t("New document"),
visible: can.update,
onClick: this.onNewDocument,
},
{
title: t("Import document"),
visible: can.update,
onClick: this.onImportDocument,
},
{
type: "separator",
},
{
title: `${t("Edit")}…`,
visible: can.update,
onClick: this.handleEditCollectionOpen,
},
{
title: `${t("Permissions")}…`,
visible: can.update,
onClick: this.handleMembersModalOpen,
},
{
title: `${t("Export")}…`,
visible: !!(collection && can.export),
onClick: this.handleExportCollectionOpen,
},
{
type: "separator",
},
{
type: "separator",
},
{
title: `${t("Delete")}…`,
visible: !!(collection && can.delete),
onClick: this.handleDeleteCollectionOpen,
},
]}
/>
</DropdownMenu>
<Modal
title={t("Edit collection")}
isOpen={this.showCollectionEdit}
onRequestClose={this.handleEditCollectionClose}
>
<CollectionEdit
onSubmit={this.handleEditCollectionClose}
collection={collection}
/>
</Modal>
<Modal
title={t("Delete collection")}
isOpen={this.showCollectionDelete}
onRequestClose={this.handleDeleteCollectionClose}
>
<CollectionDelete
onSubmit={this.handleDeleteCollectionClose}
collection={collection}
/>
</Modal>
<Modal
title={t("Export collection")}
isOpen={this.showCollectionExport}
onRequestClose={this.handleExportCollectionClose}
>
<CollectionExport
onSubmit={this.handleExportCollectionClose}
collection={collection}
/>
</Modal>
</>
);
}
return (
<>
<VisuallyHidden>
<input
type="file"
ref={file}
onChange={handleFilePicked}
onClick={(ev) => ev.stopPropagation()}
accept={documents.importFileTypes.join(", ")}
tabIndex="-1"
/>
</VisuallyHidden>
{label ? (
<MenuButton {...menu}>{label}</MenuButton>
) : (
<OverflowMenuButton {...menu} />
)}
<ContextMenu
{...menu}
onOpen={handleOpen}
onClose={onClose}
aria-label={t("Collection")}
>
<Template
{...menu}
items={[
{
title: t("New document"),
visible: can.update,
onClick: handleNewDocument,
},
{
title: t("Import document"),
visible: can.update,
onClick: handleImportDocument,
},
{
type: "separator",
},
{
title: `${t("Edit")}…`,
visible: can.update,
onClick: () => setShowCollectionEdit(true),
},
{
title: `${t("Permissions")}…`,
visible: can.update,
onClick: () => setShowCollectionMembers(true),
},
{
title: `${t("Export")}…`,
visible: !!(collection && can.export),
onClick: () => setShowCollectionExport(true),
},
{
type: "separator",
},
{
type: "separator",
},
{
title: `${t("Delete")}…`,
visible: !!(collection && can.delete),
onClick: () => setShowCollectionDelete(true),
},
]}
/>
</ContextMenu>
{renderModals && (
<>
<Modal
title={t("Collection permissions")}
onRequestClose={() => setShowCollectionMembers(false)}
isOpen={showCollectionMembers}
>
<CollectionMembers
collection={collection}
onSubmit={() => setShowCollectionMembers(false)}
onEdit={() => setShowCollectionEdit(true)}
/>
</Modal>
<Modal
title={t("Edit collection")}
isOpen={showCollectionEdit}
onRequestClose={() => setShowCollectionEdit(false)}
>
<CollectionEdit
onSubmit={() => setShowCollectionEdit(false)}
collection={collection}
/>
</Modal>
<Modal
title={t("Delete collection")}
isOpen={showCollectionDelete}
onRequestClose={() => setShowCollectionDelete(false)}
>
<CollectionDelete
onSubmit={() => setShowCollectionDelete(false)}
collection={collection}
/>
</Modal>
<Modal
title={t("Export collection")}
isOpen={showCollectionExport}
onRequestClose={() => setShowCollectionExport(false)}
>
<CollectionExport
onSubmit={() => setShowCollectionExport(false)}
collection={collection}
/>
</Modal>
</>
)}
</>
);
}
export default withTranslation()<CollectionMenu>(
inject("ui", "documents", "policies")(withRouter(CollectionMenu))
);
export default observer(CollectionMenu);

79
app/menus/CollectionSortMenu.js
View File

@@ -3,29 +3,25 @@ import { observer } from "mobx-react";
import { AlphabeticalSortIcon, ManualSortIcon } from "outline-icons";
import * as React from "react";
import { useTranslation } from "react-i18next";
import { useMenuState, MenuButton } from "reakit/Menu";
import Collection from "models/Collection";
import { DropdownMenu } from "components/DropdownMenu";
import DropdownMenuItems from "components/DropdownMenu/DropdownMenuItems";
import ContextMenu from "components/ContextMenu";
import Template from "components/ContextMenu/Template";
import NudeButton from "components/NudeButton";
type Props = {
position?: "left" | "right" | "center",
type Props = {|
collection: Collection,
onOpen?: () => void,
onClose?: () => void,
};
|};
function CollectionSortMenu({
collection,
position,
onOpen,
onClose,
...rest
}: Props) {
function CollectionSortMenu({ collection, onOpen, onClose, ...rest }: Props) {
const { t } = useTranslation();
const menu = useMenuState({ modal: true });
const handleChangeSort = React.useCallback(
(field: string) => {
menu.hide();
return collection.save({
sort: {
field,
@@ -33,38 +29,43 @@ function CollectionSortMenu({
},
});
},
[collection]
[collection, menu]
);
const alphabeticalSort = collection.sort.field === "title";
return (
<DropdownMenu
onOpen={onOpen}
onClose={onClose}
label={
<NudeButton aria-label={t("Sort in sidebar")} aria-haspopup="true">
{alphabeticalSort ? <AlphabeticalSortIcon /> : <ManualSortIcon />}
</NudeButton>
}
position={position}
{...rest}
>
<DropdownMenuItems
items={[
{
title: t("Alphabetical sort"),
onClick: () => handleChangeSort("title"),
selected: alphabeticalSort,
},
{
title: t("Manual sort"),
onClick: () => handleChangeSort("index"),
selected: !alphabeticalSort,
},
]}
/>
</DropdownMenu>
<>
<MenuButton {...menu}>
{(props) => (
<NudeButton {...props}>
{alphabeticalSort ? <AlphabeticalSortIcon /> : <ManualSortIcon />}
</NudeButton>
)}
</MenuButton>
<ContextMenu
{...menu}
onOpen={onOpen}
onClose={onClose}
aria-label={t("Sort in sidebar")}
>
<Template
{...menu}
items={[
{
title: t("Alphabetical sort"),
onClick: () => handleChangeSort("title"),
selected: alphabeticalSort,
},
{
title: t("Manual sort"),
onClick: () => handleChangeSort("index"),
selected: !alphabeticalSort,
},
]}
/>
</ContextMenu>
</>
);
}

627
app/menus/DocumentMenu.js
View File

@@ -1,21 +1,21 @@
// @flow
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import { 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";
import PoliciesStore from "stores/PoliciesStore";
import UiStore from "stores/UiStore";
import { useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
import { useMenuState, MenuButton } from "reakit/Menu";
import styled from "styled-components";
import Document from "models/Document";
import DocumentDelete from "scenes/DocumentDelete";
import DocumentShare from "scenes/DocumentShare";
import DocumentTemplatize from "scenes/DocumentTemplatize";
import CollectionIcon from "components/CollectionIcon";
import { DropdownMenu } from "components/DropdownMenu";
import DropdownMenuItems from "components/DropdownMenu/DropdownMenuItems";
import ContextMenu from "components/ContextMenu";
import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
import Template from "components/ContextMenu/Template";
import Flex from "components/Flex";
import Modal from "components/Modal";
import useStores from "hooks/useStores";
import {
documentHistoryUrl,
documentMoveUrl,
@@ -24,348 +24,319 @@ import {
newDocumentUrl,
} from "utils/routeHelpers";
type Props = {
ui: UiStore,
auth: AuthStore,
position?: "left" | "right" | "center",
type Props = {|
document: Document,
collections: CollectionStore,
policies: PoliciesStore,
className: string,
isRevision?: boolean,
showPrint?: boolean,
modal?: boolean,
showToggleEmbeds?: boolean,
showPin?: boolean,
label?: React.Node,
label?: (any) => React.Node,
onOpen?: () => void,
onClose?: () => void,
t: TFunction,
};
|};
@observer
class DocumentMenu extends React.Component<Props> {
@observable redirectTo: ?string;
@observable showDeleteModal = false;
@observable showTemplateModal = false;
@observable showShareModal = false;
function DocumentMenu({
document,
isRevision,
className,
modal = true,
showToggleEmbeds,
showPrint,
showPin,
label,
onOpen,
onClose,
}: Props) {
const { policies, collections, auth, ui } = useStores();
const menu = useMenuState({ modal });
const history = useHistory();
const { t } = useTranslation();
const [renderModals, setRenderModals] = React.useState(false);
const [showDeleteModal, setShowDeleteModal] = React.useState(false);
const [showTemplateModal, setShowTemplateModal] = React.useState(false);
const [showShareModal, setShowShareModal] = React.useState(false);
componentDidUpdate() {
this.redirectTo = undefined;
}
handleNewChild = (ev: SyntheticEvent<>) => {
const { document } = this.props;
this.redirectTo = newDocumentUrl(document.collectionId, {
parentDocumentId: document.id,
});
};
handleDelete = (ev: SyntheticEvent<>) => {
this.showDeleteModal = true;
};
handleDocumentHistory = () => {
if (this.props.isRevision) {
this.redirectTo = documentUrl(this.props.document);
} else {
this.redirectTo = documentHistoryUrl(this.props.document);
const handleOpen = React.useCallback(() => {
setRenderModals(true);
if (onOpen) {
onOpen();
}
};
}, [onOpen]);
handleMove = (ev: SyntheticEvent<>) => {
this.redirectTo = documentMoveUrl(this.props.document);
};
const handleDuplicate = React.useCallback(
async (ev: SyntheticEvent<>) => {
const duped = await document.duplicate();
handleEdit = (ev: SyntheticEvent<>) => {
this.redirectTo = editDocumentUrl(this.props.document);
};
// when duplicating, go straight to the duplicated document content
history.push(duped.url);
ui.showToast(t("Document duplicated"), { type: "success" });
},
[ui, t, history, document]
);
handleDuplicate = async (ev: SyntheticEvent<>) => {
const duped = await this.props.document.duplicate();
const handleArchive = React.useCallback(
async (ev: SyntheticEvent<>) => {
await document.archive();
ui.showToast(t("Document archived"), { type: "success" });
},
[ui, t, document]
);
// when duplicating, go straight to the duplicated document content
this.redirectTo = duped.url;
const { t } = this.props;
this.props.ui.showToast(t("Document duplicated"), { type: "success" });
};
const handleRestore = React.useCallback(
async (ev: SyntheticEvent<>, options?: { collectionId: string }) => {
await document.restore(options);
ui.showToast(t("Document restored"), { type: "success" });
},
[ui, t, document]
);
handleOpenTemplateModal = () => {
this.showTemplateModal = true;
};
const handleUnpublish = React.useCallback(
async (ev: SyntheticEvent<>) => {
await document.unpublish();
ui.showToast(t("Document unpublished"), { type: "success" });
},
[ui, t, document]
);
handleCloseTemplateModal = () => {
this.showTemplateModal = false;
};
const handlePrint = React.useCallback((ev: SyntheticEvent<>) => {
window.print();
}, []);
handleCloseDeleteModal = () => {
this.showDeleteModal = false;
};
const handleStar = React.useCallback(
(ev: SyntheticEvent<>) => {
ev.stopPropagation();
document.star();
},
[document]
);
handleArchive = async (ev: SyntheticEvent<>) => {
await this.props.document.archive();
const { t } = this.props;
this.props.ui.showToast(t("Document archived"), { type: "success" });
};
const handleUnstar = React.useCallback(
(ev: SyntheticEvent<>) => {
ev.stopPropagation();
document.unstar();
},
[document]
);
handleRestore = async (
ev: SyntheticEvent<>,
options?: { collectionId: string }
) => {
await this.props.document.restore(options);
const { t } = this.props;
this.props.ui.showToast(t("Document restored"), { type: "success" });
};
const handleShareLink = React.useCallback(
async (ev: SyntheticEvent<>) => {
await document.share();
setShowShareModal(true);
},
[document]
);
handleUnpublish = async (ev: SyntheticEvent<>) => {
await this.props.document.unpublish();
const { t } = this.props;
this.props.ui.showToast(t("Document unpublished"), { type: "success" });
};
const can = policies.abilities(document.id);
const canShareDocuments = !!(can.share && auth.team && auth.team.sharing);
const canViewHistory = can.read && !can.restore;
const collection = collections.get(document.collectionId);
handlePin = (ev: SyntheticEvent<>) => {
this.props.document.pin();
};
handleUnpin = (ev: SyntheticEvent<>) => {
this.props.document.unpin();
};
handleStar = (ev: SyntheticEvent<>) => {
ev.stopPropagation();
this.props.document.star();
};
handleUnstar = (ev: SyntheticEvent<>) => {
ev.stopPropagation();
this.props.document.unstar();
};
handleExport = (ev: SyntheticEvent<>) => {
this.props.document.download();
};
handleShareLink = async (ev: SyntheticEvent<>) => {
const { document } = this.props;
await document.share();
this.showShareModal = true;
};
handleCloseShareModal = () => {
this.showShareModal = false;
};
render() {
if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
const {
policies,
document,
position,
className,
showToggleEmbeds,
showPrint,
showPin,
auth,
collections,
label,
onOpen,
onClose,
t,
} = this.props;
const can = policies.abilities(document.id);
const canShareDocuments = !!(can.share && auth.team && auth.team.sharing);
const canViewHistory = can.read && !can.restore;
const collection = collections.get(document.collectionId);
return (
<>
<DropdownMenu
className={className}
position={position}
onOpen={onOpen}
onClose={onClose}
label={label}
>
<DropdownMenuItems
items={[
{
title: t("Restore"),
visible: !!can.unarchive,
onClick: this.handleRestore,
return (
<>
{label ? (
<MenuButton {...menu}>{label}</MenuButton>
) : (
<OverflowMenuButton className={className} {...menu} />
)}
<ContextMenu
{...menu}
aria-label={t("Document options")}
onOpen={handleOpen}
onClose={onClose}
>
<Template
{...menu}
items={[
{
title: t("Restore"),
visible: !!can.unarchive,
onClick: handleRestore,
},
{
title: t("Restore"),
visible: !!(collection && can.restore),
onClick: handleRestore,
},
{
title: t("Restore"),
visible: !collection && !!can.restore,
style: {
left: -170,
position: "relative",
top: -40,
},
{
title: t("Restore"),
visible: !!(collection && can.restore),
onClick: this.handleRestore,
},
{
title: t("Restore"),
visible: !collection && !!can.restore,
style: {
left: -170,
position: "relative",
top: -40,
hover: true,
items: [
{
type: "heading",
title: t("Choose a collection"),
},
hover: true,
items: [
{
type: "heading",
title: t("Choose a collection"),
},
...collections.orderedData.map((collection) => {
const can = policies.abilities(collection.id);
...collections.orderedData.map((collection) => {
const can = policies.abilities(collection.id);
return {
title: (
<>
<CollectionIcon collection={collection} />
&nbsp;{collection.name}
</>
),
onClick: (ev) =>
this.handleRestore(ev, { collectionId: collection.id }),
disabled: !can.update,
};
}),
],
},
{
title: t("Unpin"),
onClick: this.handleUnpin,
visible: !!(showPin && document.pinned && can.unpin),
},
{
title: t("Pin to collection"),
onClick: this.handlePin,
visible: !!(showPin && !document.pinned && can.pin),
},
{
title: t("Unstar"),
onClick: this.handleUnstar,
visible: document.isStarred && !!can.unstar,
},
{
title: t("Star"),
onClick: this.handleStar,
visible: !document.isStarred && !!can.star,
},
{
title: `${t("Share link")}…`,
onClick: this.handleShareLink,
visible: canShareDocuments,
},
{
title: t("Enable embeds"),
onClick: document.enableEmbeds,
visible: !!showToggleEmbeds && document.embedsDisabled,
},
{
title: t("Disable embeds"),
onClick: document.disableEmbeds,
visible: !!showToggleEmbeds && !document.embedsDisabled,
},
{
type: "separator",
},
{
title: t("New nested document"),
onClick: this.handleNewChild,
visible: !!can.createChildDocument,
},
{
title: `${t("Create template")}…`,
onClick: this.handleOpenTemplateModal,
visible: !!can.update && !document.isTemplate,
},
{
title: t("Edit"),
onClick: this.handleEdit,
visible: !!can.update,
},
{
title: t("Duplicate"),
onClick: this.handleDuplicate,
visible: !!can.update,
},
{
title: t("Unpublish"),
onClick: this.handleUnpublish,
visible: !!can.unpublish,
},
{
title: t("Archive"),
onClick: this.handleArchive,
visible: !!can.archive,
},
{
title: `${t("Delete")}…`,
onClick: this.handleDelete,
visible: !!can.delete,
},
{
title: `${t("Move")}…`,
onClick: this.handleMove,
visible: !!can.move,
},
{
type: "separator",
},
{
title: t("History"),
onClick: this.handleDocumentHistory,
visible: canViewHistory,
},
{
title: t("Download"),
onClick: this.handleExport,
visible: !!can.download,
},
{
title: t("Print"),
onClick: window.print,
visible: !!showPrint,
},
]}
/>
</DropdownMenu>
<Modal
title={t("Delete {{ documentName }}", {
documentName: this.props.document.noun,
})}
onRequestClose={this.handleCloseDeleteModal}
isOpen={this.showDeleteModal}
>
<DocumentDelete
document={this.props.document}
onSubmit={this.handleCloseDeleteModal}
/>
</Modal>
<Modal
title={t("Create template")}
onRequestClose={this.handleCloseTemplateModal}
isOpen={this.showTemplateModal}
>
<DocumentTemplatize
document={this.props.document}
onSubmit={this.handleCloseTemplateModal}
/>
</Modal>
<Modal
title={t("Share document")}
onRequestClose={this.handleCloseShareModal}
isOpen={this.showShareModal}
>
<DocumentShare
document={this.props.document}
onSubmit={this.handleCloseShareModal}
/>
</Modal>
</>
);
}
return {
title: (
<Flex align="center">
<CollectionIcon collection={collection} />
<CollectionName>{collection.name}</CollectionName>
</Flex>
),
onClick: (ev) =>
handleRestore(ev, { collectionId: collection.id }),
disabled: !can.update,
};
}),
],
},
{
title: t("Unpin"),
onClick: document.unpin,
visible: !!(showPin && document.pinned && can.unpin),
},
{
title: t("Pin to collection"),
onClick: document.pin,
visible: !!(showPin && !document.pinned && can.pin),
},
{
title: t("Unstar"),
onClick: handleUnstar,
visible: document.isStarred && !!can.unstar,
},
{
title: t("Star"),
onClick: handleStar,
visible: !document.isStarred && !!can.star,
},
{
title: `${t("Share link")}…`,
onClick: handleShareLink,
visible: canShareDocuments,
},
{
title: t("Enable embeds"),
onClick: document.enableEmbeds,
visible: !!showToggleEmbeds && document.embedsDisabled,
},
{
title: t("Disable embeds"),
onClick: document.disableEmbeds,
visible: !!showToggleEmbeds && !document.embedsDisabled,
},
{
type: "separator",
},
{
title: t("New nested document"),
to: newDocumentUrl(document.collectionId, {
parentDocumentId: document.id,
}),
visible: !!can.createChildDocument,
},
{
title: `${t("Create template")}…`,
onClick: () => setShowTemplateModal(true),
visible: !!can.update && !document.isTemplate,
},
{
title: t("Edit"),
to: editDocumentUrl(document),
visible: !!can.update,
},
{
title: t("Duplicate"),
onClick: handleDuplicate,
visible: !!can.update,
},
{
title: t("Unpublish"),
onClick: handleUnpublish,
visible: !!can.unpublish,
},
{
title: t("Archive"),
onClick: handleArchive,
visible: !!can.archive,
},
{
title: `${t("Delete")}…`,
onClick: () => setShowDeleteModal(true),
visible: !!can.delete,
},
{
title: `${t("Move")}…`,
to: documentMoveUrl(document),
visible: !!can.move,
},
{
type: "separator",
},
{
title: t("History"),
to: isRevision
? documentUrl(document)
: documentHistoryUrl(document),
visible: canViewHistory,
},
{
title: t("Download"),
onClick: document.download,
visible: !!can.download,
},
{
title: t("Print"),
onClick: handlePrint,
visible: !!showPrint,
},
]}
/>
</ContextMenu>
{renderModals && (
<>
<Modal
title={t("Delete {{ documentName }}", {
documentName: document.noun,
})}
onRequestClose={() => setShowDeleteModal(false)}
isOpen={showDeleteModal}
>
<DocumentDelete
document={document}
onSubmit={() => setShowDeleteModal(false)}
/>
</Modal>
<Modal
title={t("Create template")}
onRequestClose={() => setShowTemplateModal(false)}
isOpen={showTemplateModal}
>
<DocumentTemplatize
document={document}
onSubmit={() => setShowTemplateModal(false)}
/>
</Modal>
<Modal
title={t("Share document")}
onRequestClose={() => setShowShareModal(false)}
isOpen={showShareModal}
>
<DocumentShare
document={document}
onSubmit={() => setShowShareModal(false)}
/>
</Modal>
</>
)}
</>
);
}
export default withTranslation()<DocumentMenu>(
inject("ui", "auth", "collections", "policies")(DocumentMenu)
);
const CollectionName = styled.div`
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
`;
export default observer(DocumentMenu);

36
app/menus/GroupMemberMenu.js Normal file
View File

@@ -0,0 +1,36 @@
// @flow
import { observer } from "mobx-react";
import * as React from "react";
import { useTranslation } from "react-i18next";
import { useMenuState } from "reakit/Menu";
import ContextMenu from "components/ContextMenu";
import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
import Template from "components/ContextMenu/Template";
type Props = {|
onRemove: () => void,
|};
function GroupMemberMenu({ onRemove }: Props) {
const { t } = useTranslation();
const menu = useMenuState({ modal: true });
return (
<>
<OverflowMenuButton {...menu} />
<ContextMenu {...menu} aria-label={t("Group member options")}>
<Template
{...menu}
items={[
{
title: t("Remove"),
onClick: onRemove,
},
]}
/>
</ContextMenu>
</>
);
}
export default observer(GroupMemberMenu);

156
app/menus/GroupMenu.js
View File

@@ -1,108 +1,74 @@
// @flow
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import { 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";
import { useTranslation } from "react-i18next";
import { useMenuState } from "reakit/Menu";
import Group from "models/Group";
import GroupDelete from "scenes/GroupDelete";
import GroupEdit from "scenes/GroupEdit";
import { DropdownMenu } from "components/DropdownMenu";
import DropdownMenuItems from "components/DropdownMenu/DropdownMenuItems";
import ContextMenu from "components/ContextMenu";
import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
import Template from "components/ContextMenu/Template";
import Modal from "components/Modal";
import useStores from "hooks/useStores";
type Props = {
ui: UiStore,
policies: PoliciesStore,
type Props = {|
group: Group,
history: RouterHistory,
onMembers: () => void,
onOpen?: () => void,
onClose?: () => void,
t: TFunction,
};
|};
@observer
class GroupMenu extends React.Component<Props> {
@observable editModalOpen: boolean = false;
@observable deleteModalOpen: boolean = false;
function GroupMenu({ group, onMembers }: Props) {
const { t } = useTranslation();
const { policies } = useStores();
const menu = useMenuState({ modal: true });
const [editModalOpen, setEditModalOpen] = React.useState(false);
const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);
const can = policies.abilities(group.id);
onEdit = (ev: SyntheticEvent<>) => {
ev.preventDefault();
this.editModalOpen = true;
};
onDelete = (ev: SyntheticEvent<>) => {
ev.preventDefault();
this.deleteModalOpen = true;
};
handleEditModalClose = () => {
this.editModalOpen = false;
};
handleDeleteModalClose = () => {
this.deleteModalOpen = false;
};
render() {
const { policies, group, onOpen, onClose, t } = this.props;
const can = policies.abilities(group.id);
return (
<>
<Modal
title={t("Edit group")}
onRequestClose={this.handleEditModalClose}
isOpen={this.editModalOpen}
>
<GroupEdit
group={this.props.group}
onSubmit={this.handleEditModalClose}
/>
</Modal>
<Modal
title={t("Delete group")}
onRequestClose={this.handleDeleteModalClose}
isOpen={this.deleteModalOpen}
>
<GroupDelete
group={this.props.group}
onSubmit={this.handleDeleteModalClose}
/>
</Modal>
<DropdownMenu onOpen={onOpen} onClose={onClose}>
<DropdownMenuItems
items={[
{
title: `${t("Members")}…`,
onClick: this.props.onMembers,
visible: !!(group && can.read),
},
{
type: "separator",
},
{
title: `${t("Edit")}…`,
onClick: this.onEdit,
visible: !!(group && can.update),
},
{
title: `${t("Delete")}…`,
onClick: this.onDelete,
visible: !!(group && can.delete),
},
]}
/>
</DropdownMenu>
</>
);
}
return (
<>
<Modal
title={t("Edit group")}
onRequestClose={() => setEditModalOpen(false)}
isOpen={editModalOpen}
>
<GroupEdit group={group} onSubmit={() => setEditModalOpen(false)} />
</Modal>
<Modal
title={t("Delete group")}
onRequestClose={() => setDeleteModalOpen(false)}
isOpen={deleteModalOpen}
>
<GroupDelete group={group} onSubmit={() => setDeleteModalOpen(false)} />
</Modal>
<OverflowMenuButton {...menu} />
<ContextMenu {...menu} aria-label={t("Group options")}>
<Template
{...menu}
items={[
{
title: `${t("Members")}…`,
onClick: onMembers,
visible: !!(group && can.read),
},
{
type: "separator",
},
{
title: `${t("Edit")}…`,
onClick: () => setEditModalOpen(true),
visible: !!(group && can.update),
},
{
title: `${t("Delete")}…`,
onClick: () => setDeleteModalOpen(true),
visible: !!(group && can.delete),
},
]}
/>
</ContextMenu>
</>
);
}
export default withTranslation()<GroupMenu>(
inject("policies")(withRouter(GroupMenu))
);
export default observer(GroupMenu);

36
app/menus/MemberMenu.js Normal file
View File

@@ -0,0 +1,36 @@
// @flow
import { observer } from "mobx-react";
import * as React from "react";
import { useTranslation } from "react-i18next";
import { useMenuState } from "reakit/Menu";
import ContextMenu from "components/ContextMenu";
import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
import Template from "components/ContextMenu/Template";
type Props = {|
onRemove: () => void,
|};
function MemberMenu({ onRemove }: Props) {
const { t } = useTranslation();
const menu = useMenuState({ modal: true });
return (
<>
<OverflowMenuButton {...menu} />
<ContextMenu {...menu} aria-label={t("Member options")}>
<Template
{...menu}
items={[
{
title: t("Remove"),
onClick: onRemove,
},
]}
/>
</ContextMenu>
</>
);
}
export default observer(MemberMenu);

75
app/menus/NewChildDocumentMenu.js
View File

@@ -1,53 +1,32 @@
// @flow
import { observable } from "mobx";
import { observer, inject } from "mobx-react";
import { observer } from "mobx-react";
import * as React from "react";
import { Trans, withTranslation, type TFunction } from "react-i18next";
import { Redirect } from "react-router-dom";
import CollectionsStore from "stores/CollectionsStore";
import { useTranslation, Trans } from "react-i18next";
import { useMenuState, MenuButton } from "reakit/Menu";
import Document from "models/Document";
import { DropdownMenu } from "components/DropdownMenu";
import DropdownMenuItems from "components/DropdownMenu/DropdownMenuItems";
import ContextMenu from "components/ContextMenu";
import Template from "components/ContextMenu/Template";
import useStores from "hooks/useStores";
import { newDocumentUrl } from "utils/routeHelpers";
type Props = {
label?: React.Node,
label?: (any) => React.Node,
document: Document,
collections: CollectionsStore,
t: TFunction,
};
@observer
class NewChildDocumentMenu extends React.Component<Props> {
@observable redirectTo: ?string;
function NewChildDocumentMenu({ document, label }: Props) {
const menu = useMenuState({ modal: true });
const { collections } = useStores();
const { t } = useTranslation();
const collection = collections.get(document.collectionId);
const collectionName = collection ? collection.name : t("collection");
componentDidUpdate() {
this.redirectTo = undefined;
}
handleNewDocument = () => {
const { document } = this.props;
this.redirectTo = newDocumentUrl(document.collectionId);
};
handleNewChild = () => {
const { document } = this.props;
this.redirectTo = newDocumentUrl(document.collectionId, {
parentDocumentId: document.id,
});
};
render() {
if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
const { label, document, collections, t } = this.props;
const collection = collections.get(document.collectionId);
const collectionName = collection ? collection.name : t("collection");
return (
<DropdownMenu label={label}>
<DropdownMenuItems
return (
<>
<MenuButton {...menu}>{label}</MenuButton>
<ContextMenu {...menu} aria-label={t("New child document")}>
<Template
{...menu}
items={[
{
title: (
@@ -57,19 +36,19 @@ class NewChildDocumentMenu extends React.Component<Props> {
</Trans>
</span>
),
onClick: this.handleNewDocument,
to: newDocumentUrl(document.collectionId),
},
{
title: t("New nested document"),
onClick: this.handleNewChild,
to: newDocumentUrl(document.collectionId, {
parentDocumentId: document.id,
}),
},
]}
/>
</DropdownMenu>
);
}
</ContextMenu>
</>
);
}
export default withTranslation()<NewChildDocumentMenu>(
inject("collections")(NewChildDocumentMenu)
);
export default observer(NewChildDocumentMenu);

124
app/menus/NewDocumentMenu.js
View File

@@ -1,92 +1,72 @@
// @flow
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import { 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";
import DocumentsStore from "stores/DocumentsStore";
import PoliciesStore from "stores/PoliciesStore";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { MenuButton, useMenuState } from "reakit/Menu";
import styled from "styled-components";
import Button from "components/Button";
import CollectionIcon from "components/CollectionIcon";
import { DropdownMenu, Header } from "components/DropdownMenu";
import DropdownMenuItems from "components/DropdownMenu/DropdownMenuItems";
import ContextMenu from "components/ContextMenu";
import Header from "components/ContextMenu/Header";
import Template from "components/ContextMenu/Template";
import Flex from "components/Flex";
import useStores from "hooks/useStores";
import { newDocumentUrl } from "utils/routeHelpers";
type Props = {
label?: React.Node,
documents: DocumentsStore,
collections: CollectionsStore,
policies: PoliciesStore,
t: TFunction,
};
function NewDocumentMenu() {
const menu = useMenuState();
const { t } = useTranslation();
const { collections, policies } = useStores();
const singleCollection = collections.orderedData.length === 1;
@observer
class NewDocumentMenu extends React.Component<Props> {
@observable redirectTo: ?string;
componentDidUpdate() {
this.redirectTo = undefined;
if (singleCollection) {
return (
<Button
as={Link}
to={newDocumentUrl(collections.orderedData[0].id)}
icon={<PlusIcon />}
small
>
{t("New doc")}
</Button>
);
}
handleNewDocument = (
collectionId: string,
options?: {
parentDocumentId?: string,
template?: boolean,
templateId?: string,
}
) => {
this.redirectTo = newDocumentUrl(collectionId, options);
};
onOpen = () => {
const { collections } = this.props;
if (collections.orderedData.length === 1) {
this.handleNewDocument(collections.orderedData[0].id);
}
};
render() {
if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
const { collections, documents, policies, label, t, ...rest } = this.props;
const singleCollection = collections.orderedData.length === 1;
return (
<DropdownMenu
label={
label || (
<Button icon={<PlusIcon />} small>
{t("New doc")}
{singleCollection ? "" : "…"}
</Button>
)
}
onOpen={this.onOpen}
{...rest}
>
return (
<>
<MenuButton {...menu}>
{(props) => (
<Button icon={<PlusIcon />} {...props} small>
{`${t("New doc")}…`}
</Button>
)}
</MenuButton>
<ContextMenu {...menu} aria-label={t("New document")}>
<Header>{t("Choose a collection")}</Header>
<DropdownMenuItems
<Template
{...menu}
items={collections.orderedData.map((collection) => ({
onClick: () => this.handleNewDocument(collection.id),
to: newDocumentUrl(collection.id),
disabled: !policies.abilities(collection.id).update,
title: (
<>
<Flex align="center">
<CollectionIcon collection={collection} />
&nbsp;{collection.name}
</>
<CollectionName>{collection.name}</CollectionName>
</Flex>
),
}))}
/>
</DropdownMenu>
);
}
</ContextMenu>
</>
);
}
export default withTranslation()<NewDocumentMenu>(
inject("collections", "documents", "policies")(NewDocumentMenu)
);
const CollectionName = styled.div`
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
`;
export default observer(NewDocumentMenu);

97
app/menus/NewTemplateMenu.js
View File

@@ -1,74 +1,59 @@
// @flow
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import { 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";
import PoliciesStore from "stores/PoliciesStore";
import { useTranslation } from "react-i18next";
import { useMenuState, MenuButton } from "reakit/Menu";
import styled from "styled-components";
import Button from "components/Button";
import CollectionIcon from "components/CollectionIcon";
import { DropdownMenu, Header } from "components/DropdownMenu";
import DropdownMenuItems from "components/DropdownMenu/DropdownMenuItems";
import ContextMenu from "components/ContextMenu";
import Header from "components/ContextMenu/Header";
import Template from "components/ContextMenu/Template";
import Flex from "components/Flex";
import useStores from "hooks/useStores";
import { newDocumentUrl } from "utils/routeHelpers";
type Props = {
label?: React.Node,
collections: CollectionsStore,
policies: PoliciesStore,
t: TFunction,
};
function NewTemplateMenu() {
const menu = useMenuState();
const { t } = useTranslation();
const { collections, policies } = useStores();
@observer
class NewTemplateMenu extends React.Component<Props> {
@observable redirectTo: ?string;
componentDidUpdate() {
this.redirectTo = undefined;
}
handleNewDocument = (collectionId: string) => {
this.redirectTo = newDocumentUrl(collectionId, {
template: true,
});
};
render() {
if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
const { collections, policies, label, t, ...rest } = this.props;
return (
<DropdownMenu
label={
label || (
<Button icon={<PlusIcon />} small>
{t("New template")}…
</Button>
)
}
{...rest}
>
return (
<>
<MenuButton {...menu}>
{(props) => (
<Button icon={<PlusIcon />} {...props} small>
{t("New template")}…
</Button>
)}
</MenuButton>
<ContextMenu aria-label={t("New template")} {...menu}>
<Header>{t("Choose a collection")}</Header>
<DropdownMenuItems
<Template
{...menu}
items={collections.orderedData.map((collection) => ({
onClick: () => this.handleNewDocument(collection.id),
to: newDocumentUrl(collection.id, {
template: true,
}),
disabled: !policies.abilities(collection.id).update,
title: (
<>
<Flex align="center">
<CollectionIcon collection={collection} />
&nbsp;{collection.name}
</>
<CollectionName>{collection.name}</CollectionName>
</Flex>
),
}))}
/>
</DropdownMenu>
);
}
</ContextMenu>
</>
);
}
export default withTranslation()<NewTemplateMenu>(
inject("collections", "policies")(NewTemplateMenu)
);
const CollectionName = styled.div`
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
`;
export default observer(NewTemplateMenu);

99
app/menus/RevisionMenu.js
View File

@@ -1,68 +1,69 @@
// @flow
import { inject } from "mobx-react";
import { 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 UiStore from "stores/UiStore";
import { useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
import { useMenuState } from "reakit/Menu";
import Document from "models/Document";
import Revision from "models/Revision";
import ContextMenu from "components/ContextMenu";
import MenuItem from "components/ContextMenu/MenuItem";
import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
import Separator from "components/ContextMenu/Separator";
import CopyToClipboard from "components/CopyToClipboard";
import { DropdownMenu, DropdownMenuItem } from "components/DropdownMenu";
import useStores from "hooks/useStores";
import { documentHistoryUrl } from "utils/routeHelpers";
type Props = {
onOpen?: () => void,
onClose: () => void,
history: RouterHistory,
type Props = {|
document: Document,
revision: Revision,
iconColor?: string,
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 });
const { t } = this.props;
this.props.ui.showToast(t("Document restored"), { type: "success" });
this.props.history.push(this.props.document.url);
};
function RevisionMenu({ document, revision, className, iconColor }: Props) {
const { ui } = useStores();
const menu = useMenuState({ modal: true });
const { t } = useTranslation();
const history = useHistory();
handleCopy = () => {
const { t } = this.props;
this.props.ui.showToast(t("Link copied"), { type: "info" });
};
const handleRestore = React.useCallback(
async (ev: SyntheticEvent<>) => {
ev.preventDefault();
await document.restore({ revisionId: revision.id });
ui.showToast(t("Document restored"), { type: "success" });
history.push(document.url);
},
[history, ui, t, document, revision]
);
render() {
const { className, label, onOpen, onClose, t } = this.props;
const url = `${window.location.origin}${documentHistoryUrl(
this.props.document,
this.props.revision.id
)}`;
const handleCopy = React.useCallback(() => {
ui.showToast(t("Link copied"), { type: "info" });
}, [ui, t]);
return (
<DropdownMenu
onOpen={onOpen}
onClose={onClose}
const url = `${window.location.origin}${documentHistoryUrl(
document,
revision.id
)}`;
return (
<>
<OverflowMenuButton
className={className}
label={label}
>
<DropdownMenuItem onClick={this.handleRestore}>
iconColor={iconColor}
{...menu}
/>
<ContextMenu {...menu} aria-label={t("Revision options")}>
<MenuItem {...menu} onClick={handleRestore}>
{t("Restore version")}
</DropdownMenuItem>
<hr />
<CopyToClipboard text={url} onCopy={this.handleCopy}>
<DropdownMenuItem>{t("Copy link")}</DropdownMenuItem>
</MenuItem>
<Separator />
<CopyToClipboard text={url} onCopy={handleCopy}>
<MenuItem {...menu}>{t("Copy link")}</MenuItem>
</CopyToClipboard>
</DropdownMenu>
);
}
</ContextMenu>
</>
);
}
export default withTranslation()<RevisionMenu>(
withRouter(inject("ui")(RevisionMenu))
);
export default observer(RevisionMenu);

104
app/menus/ShareMenu.js
View File

@@ -1,75 +1,69 @@
// @flow
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import { 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";
import UiStore from "stores/UiStore";
import { useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
import { useMenuState } from "reakit/Menu";
import Share from "models/Share";
import ContextMenu from "components/ContextMenu";
import MenuItem from "components/ContextMenu/MenuItem";
import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
import CopyToClipboard from "components/CopyToClipboard";
import { DropdownMenu, DropdownMenuItem } from "components/DropdownMenu";
import useStores from "hooks/useStores";
type Props = {
onOpen?: () => void,
onClose: () => void,
shares: SharesStore,
ui: UiStore,
share: Share,
t: TFunction,
};
@observer
class ShareMenu extends React.Component<Props> {
@observable redirectTo: ?string;
function ShareMenu({ share }: Props) {
const menu = useMenuState({ modal: true });
const { ui, shares } = useStores();
const { t } = useTranslation();
const history = useHistory();
componentDidUpdate() {
this.redirectTo = undefined;
}
const handleGoToDocument = React.useCallback(
(ev: SyntheticEvent<>) => {
ev.preventDefault();
history.push(share.documentUrl);
},
[history, share]
);
handleGoToDocument = (ev: SyntheticEvent<>) => {
ev.preventDefault();
this.redirectTo = this.props.share.documentUrl;
};
const handleRevoke = React.useCallback(
async (ev: SyntheticEvent<>) => {
ev.preventDefault();
handleRevoke = async (ev: SyntheticEvent<>) => {
ev.preventDefault();
try {
await shares.revoke(share);
ui.showToast(t("Share link revoked"), { type: "info" });
} catch (err) {
ui.showToast(err.message, { type: "error" });
}
},
[t, shares, share, ui]
);
try {
await this.props.shares.revoke(this.props.share);
const { t } = this.props;
this.props.ui.showToast(t("Share link revoked"), { type: "info" });
} catch (err) {
this.props.ui.showToast(err.message, { type: "error" });
}
};
const handleCopy = React.useCallback(() => {
ui.showToast(t("Share link copied"), { type: "info" });
}, [t, ui]);
handleCopy = () => {
const { t } = this.props;
this.props.ui.showToast(t("Share link copied"), { type: "info" });
};
render() {
if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
const { share, onOpen, onClose, t } = this.props;
return (
<DropdownMenu onOpen={onOpen} onClose={onClose}>
<CopyToClipboard text={share.url} onCopy={this.handleCopy}>
<DropdownMenuItem>{t("Copy link")}</DropdownMenuItem>
return (
<>
<OverflowMenuButton {...menu} />
<ContextMenu {...menu} aria-label={t("Share options")}>
<CopyToClipboard text={share.url} onCopy={handleCopy}>
<MenuItem {...menu}>{t("Copy link")}</MenuItem>
</CopyToClipboard>
<DropdownMenuItem onClick={this.handleGoToDocument}>
<MenuItem {...menu} onClick={handleGoToDocument}>
{t("Go to document")}
</DropdownMenuItem>
</MenuItem>
<hr />
<DropdownMenuItem onClick={this.handleRevoke}>
<MenuItem {...menu} onClick={handleRevoke}>
{t("Revoke link")}
</DropdownMenuItem>
</DropdownMenu>
);
}
</MenuItem>
</ContextMenu>
</>
);
}
export default withTranslation()<ShareMenu>(inject("shares", "ui")(ShareMenu));
export default observer(ShareMenu);

62
app/menus/TemplatesMenu.js
View File

@@ -1,42 +1,42 @@
// @flow
import { observer, inject } from "mobx-react";
import { observer } from "mobx-react";
import { DocumentIcon } from "outline-icons";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { useTranslation } from "react-i18next";
import { MenuButton, useMenuState } from "reakit/Menu";
import styled from "styled-components";
import DocumentsStore from "stores/DocumentsStore";
import Document from "models/Document";
import Button from "components/Button";
import { DropdownMenu, DropdownMenuItem } from "components/DropdownMenu";
import ContextMenu from "components/ContextMenu";
import MenuItem from "components/ContextMenu/MenuItem";
import useStores from "hooks/useStores";
type Props = {
type Props = {|
document: Document,
documents: DocumentsStore,
t: TFunction,
};
|};
@observer
class TemplatesMenu extends React.Component<Props> {
render() {
const { documents, document, t, ...rest } = this.props;
const templates = documents.templatesInCollection(document.collectionId);
function TemplatesMenu({ document }: Props) {
const menu = useMenuState({ modal: true });
const { documents } = useStores();
const { t } = useTranslation();
const templates = documents.templatesInCollection(document.collectionId);
if (!templates.length) {
return null;
}
if (!templates.length) {
return null;
}
return (
<DropdownMenu
position="left"
label={
<Button disclosure neutral>
return (
<>
<MenuButton {...menu}>
{(props) => (
<Button {...props} disclosure neutral>
{t("Templates")}
</Button>
}
{...rest}
>
)}
</MenuButton>
<ContextMenu {...menu} aria-label={t("Templates")}>
{templates.map((template) => (
<DropdownMenuItem
<MenuItem
key={template.id}
onClick={() => document.updateFromTemplate(template)}
>
@@ -48,17 +48,15 @@ class TemplatesMenu extends React.Component<Props> {
{t("By {{ author }}", { author: template.createdBy.name })}
</Author>
</div>
</DropdownMenuItem>
</MenuItem>
))}
</DropdownMenu>
);
}
</ContextMenu>
</>
);
}
const Author = styled.div`
font-size: 13px;
`;
export default withTranslation()<TemplatesMenu>(
inject("documents")(TemplatesMenu)
);
export default observer(TemplatesMenu);

168
app/menus/UserMenu.js
View File

@@ -1,98 +1,110 @@
// @flow
import { inject, observer } from "mobx-react";
import { observer } from "mobx-react";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import UsersStore from "stores/UsersStore";
import { useTranslation } from "react-i18next";
import { useMenuState } from "reakit/Menu";
import User from "models/User";
import { DropdownMenu } from "components/DropdownMenu";
import DropdownMenuItems from "components/DropdownMenu/DropdownMenuItems";
import ContextMenu from "components/ContextMenu";
import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
import Template from "components/ContextMenu/Template";
import useStores from "hooks/useStores";
type Props = {
type Props = {|
user: User,
users: UsersStore,
t: TFunction,
};
|};
@observer
class UserMenu extends React.Component<Props> {
handlePromote = (ev: SyntheticEvent<>) => {
ev.preventDefault();
const { user, users, t } = this.props;
if (
!window.confirm(
t(
"Are you sure you want to make {{ userName }} an admin? Admins can modify team and billing information.",
{ userName: user.name }
function UserMenu({ user }: Props) {
const { users } = useStores();
const { t } = useTranslation();
const menu = useMenuState({ modal: true });
const handlePromote = React.useCallback(
(ev: SyntheticEvent<>) => {
ev.preventDefault();
if (
!window.confirm(
t(
"Are you sure you want to make {{ userName }} an admin? Admins can modify team and billing information.",
{ userName: user.name }
)
)
)
) {
return;
}
users.promote(user);
};
) {
return;
}
users.promote(user);
},
[users, user, t]
);
handleDemote = (ev: SyntheticEvent<>) => {
ev.preventDefault();
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);
};
handleSuspend = (ev: SyntheticEvent<>) => {
ev.preventDefault();
const { user, users, t } = this.props;
if (
!window.confirm(
t(
"Are you sure you want to suspend this account? Suspended users will be prevented from logging in."
const handleDemote = React.useCallback(
(ev: SyntheticEvent<>) => {
ev.preventDefault();
if (
!window.confirm(
t("Are you sure you want to make {{ userName }} a member?", {
userName: user.name,
})
)
)
) {
return;
}
users.suspend(user);
};
) {
return;
}
users.demote(user);
},
[users, user, t]
);
handleRevoke = (ev: SyntheticEvent<>) => {
ev.preventDefault();
const { user, users } = this.props;
users.delete(user, { confirmation: true });
};
const handleSuspend = React.useCallback(
(ev: SyntheticEvent<>) => {
ev.preventDefault();
if (
!window.confirm(
t(
"Are you sure you want to suspend this account? Suspended users will be prevented from logging in."
)
)
) {
return;
}
users.suspend(user);
},
[users, user, t]
);
handleActivate = (ev: SyntheticEvent<>) => {
ev.preventDefault();
const { user, users } = this.props;
users.activate(user);
};
const handleRevoke = React.useCallback(
(ev: SyntheticEvent<>) => {
ev.preventDefault();
users.delete(user, { confirmation: true });
},
[users, user]
);
render() {
const { user, t } = this.props;
const handleActivate = React.useCallback(
(ev: SyntheticEvent<>) => {
ev.preventDefault();
users.activate(user);
},
[users, user]
);
return (
<DropdownMenu>
<DropdownMenuItems
return (
<>
<OverflowMenuButton {...menu} />
<ContextMenu {...menu} aria-label={t("User options")}>
<Template
{...menu}
items={[
{
title: t("Make {{ userName }} a member…", {
userName: user.name,
}),
onClick: this.handleDemote,
onClick: handleDemote,
visible: user.isAdmin,
},
{
title: t("Make {{ userName }} an admin…", {
userName: user.name,
}),
onClick: this.handlePromote,
onClick: handlePromote,
visible: !user.isAdmin && !user.isSuspended,
},
{
@@ -100,24 +112,24 @@ class UserMenu extends React.Component<Props> {
},
{
title: `${t("Revoke invite")}…`,
onClick: this.handleRevoke,
onClick: handleRevoke,
visible: user.isInvited,
},
{
title: t("Activate account"),
onClick: this.handleActivate,
onClick: handleActivate,
visible: !user.isInvited && user.isSuspended,
},
{
title: `${t("Suspend account")}…`,
onClick: this.handleSuspend,
onClick: handleSuspend,
visible: !user.isInvited && !user.isSuspended,
},
]}
/>
</DropdownMenu>
);
}
</ContextMenu>
</>
);
}
export default withTranslation()<UserMenu>(inject("users")(UserMenu));
export default observer(UserMenu);