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

Merge branch 'main' of github.com:outline/outline

Browse Source
This commit is contained in:
Tom Moor
2022-05-11 09:30:08 +01:00
parent 0ba792317b b75a6928cb
commit c205ffbfe9
9 changed files with 158 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/DocumentMetaWithViews.tsx
View File

@@ -83,4 +83,4 @@ const Meta = styled(DocumentMeta)<{ rtl?: boolean }>`
}
`;
export default React.memo(DocumentMetaWithViews);
export default DocumentMetaWithViews;

2
app/editor/components/EmojiMenu.tsx
View File

@@ -21,7 +21,7 @@ const searcher = new FuzzySearch<{
sort: true,
});
class EmojiMenu extends React.PureComponent<
class EmojiMenu extends React.Component<
Omit<
Props<Emoji>,
| "renderMenuItem"

28
app/hooks/useMouseMove.ts
View File

@@ -1,28 +0,0 @@
import * as React from "react";
/**
* Hook to check if mouse is moving in the window
* @param {number} [timeout] - time in ms to wait before marking the mouse as not moving
* @returns {boolean} true if the mouse is moving, false otherwise
*/
const useMouseMove = (timeout = 5000) => {
const [isMouseMoving, setIsMouseMoving] = React.useState(false);
const timeoutId = React.useRef<ReturnType<typeof setTimeout>>();
const onMouseMove = React.useCallback(() => {
timeoutId.current && clearTimeout(timeoutId.current);
setIsMouseMoving(true);
timeoutId.current = setTimeout(() => setIsMouseMoving(false), timeout);
}, [timeout]);
React.useEffect(() => {
document.addEventListener("mousemove", onMouseMove);
return () => {
document.removeEventListener("mousemove", onMouseMove);
};
}, [onMouseMove]);
return isMouseMoving;
};
export default useMouseMove;

2
app/models/Document.ts
View File

@@ -5,7 +5,7 @@ import parseTitle from "@shared/utils/parseTitle";
import unescape from "@shared/utils/unescape";
import DocumentsStore from "~/stores/DocumentsStore";
import User from "~/models/User";
import type { NavigationNode } from "~/types";
import { NavigationNode } from "~/types";
import Storage from "~/utils/Storage";
import ParanoidModel from "./ParanoidModel";
import View from "./View";

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

@@ -87,9 +87,6 @@ class DocumentScene extends React.Component<Props> {
@observable
isEditorDirty = false;
@observable
isEditorFocused = false;
@observable
isEmpty = true;
@@ -415,9 +412,6 @@ class DocumentScene extends React.Component<Props> {
}
};
onBlur = () => (this.isEditorFocused = false);
onFocus = () => (this.isEditorFocused = true);
render() {
const {
document,
@@ -455,9 +449,6 @@ class DocumentScene extends React.Component<Props> {
? this.props.match.url
: updateDocumentUrl(this.props.match.url, document);
const isFocusing =
!readOnly || this.isEditorFocused || !!ui.observingUserId;
return (
<ErrorBoundary>
{this.props.location.pathname !== canonicalUrl && (
@@ -547,7 +538,6 @@ class DocumentScene extends React.Component<Props> {
shareId={shareId}
isRevision={!!revision}
isDraft={document.isDraft}
isFocusing={isFocusing}
isEditing={!readOnly && !team?.collaborativeEditing}
isSaving={this.isSaving}
isPublishing={this.isPublishing}
@@ -589,8 +579,6 @@ class DocumentScene extends React.Component<Props> {
document={document}
value={readOnly ? value : undefined}
defaultValue={value}
onBlur={this.onBlur}
onFocus={this.onFocus}
embedsDisabled={embedsDisabled}
onSynced={this.onSynced}
onFileUploadStart={this.onFileUploadStart}
@@ -618,10 +606,7 @@ class DocumentScene extends React.Component<Props> {
<>
<MarkAsViewed document={document} />
<ReferencesWrapper isOnlyTitle={document.isOnlyTitle}>
<References
isFocusing={isFocusing}
document={document}
/>
<References document={document} />
</ReferencesWrapper>
</>
)}

11
app/scenes/Document/components/FadeOut.tsx
View File

@@ -1,11 +0,0 @@
import * as React from "react";
import styled from "styled-components";
import Flex from "~/components/Flex";
const FadeOut = styled(Flex)<{ $fade: boolean }>`
opacity: ${(props) => (props.$fade ? 0 : 1)};
visibility: ${(props) => (props.$fade ? "hidden" : "visible")};
transition: opacity 900ms ease-in-out, visibility ease-in-out 900ms;
`;
export default React.memo(FadeOut);

71
app/scenes/Document/components/Header.tsx
View File

@@ -21,7 +21,6 @@ import DocumentBreadcrumb from "~/components/DocumentBreadcrumb";
import Header from "~/components/Header";
import Tooltip from "~/components/Tooltip";
import useMobile from "~/hooks/useMobile";
import useMouseMove from "~/hooks/useMouseMove";
import usePolicy from "~/hooks/usePolicy";
import useStores from "~/hooks/useStores";
import DocumentMenu from "~/menus/DocumentMenu";
@@ -31,7 +30,6 @@ import TemplatesMenu from "~/menus/TemplatesMenu";
import { NavigationNode } from "~/types";
import { metaDisplay } from "~/utils/keyboard";
import { newDocumentPath, editDocumentUrl } from "~/utils/routeHelpers";
import FadeOut from "./FadeOut";
import ObservingBanner from "./ObservingBanner";
import PublicBreadcrumb from "./PublicBreadcrumb";
import ShareButton from "./ShareButton";
@@ -43,7 +41,6 @@ type Props = {
shareId: string | null | undefined;
isDraft: boolean;
isEditing: boolean;
isFocusing: boolean;
isRevision: boolean;
isSaving: boolean;
isPublishing: boolean;
@@ -70,7 +67,6 @@ function DocumentHeader({
isDraft,
isPublishing,
isRevision,
isFocusing,
isSaving,
savingIsDisabled,
publishingIsDisabled,
@@ -84,8 +80,6 @@ function DocumentHeader({
const { resolvedTheme } = ui;
const { team } = auth;
const isMobile = useMobile();
const isMouseMoving = useMouseMove();
const hideHeader = isFocusing && !isMouseMoving;
// We cache this value for as long as the component is mounted so that if you
// apply a template there is still the option to replace it until the user
@@ -169,35 +163,6 @@ function DocumentHeader({
</Action>
);
const DocumentMenuLabel = React.useCallback(
(props) => (
<Button
icon={<MoreIcon />}
iconColor="currentColor"
{...props}
borderOnHover
neutral
/>
),
[]
);
const NewChildDocLabel = React.useCallback(
(props) => (
<Tooltip
tooltip={t("New document")}
shortcut="n"
delay={500}
placement="bottom"
>
<Button icon={<PlusIcon />} {...props} neutral>
{t("New doc")}
</Button>
</Tooltip>
),
[t]
);
if (shareId) {
return (
<Header
@@ -231,15 +196,13 @@ function DocumentHeader({
<Header
hasSidebar
breadcrumb={
<FadeOut $fade={hideHeader}>
{isMobile ? (
isMobile ? (
<TableOfContentsMenu headings={headings} />
) : (
<DocumentBreadcrumb document={document}>
{!isEditing && toc}
</DocumentBreadcrumb>
)}
</FadeOut>
)
}
title={
<>
@@ -250,14 +213,12 @@ function DocumentHeader({
actions={
<>
<ObservingBanner />
<FadeOut $fade={hideHeader}>
{!isPublishing && isSaving && !team?.collaborativeEditing && (
<Status>{t("Saving")}…</Status>
)}
{!isDeleted && <Collaborators document={document} />}
{(isEditing || team?.collaborativeEditing) &&
!isTemplate &&
isNew && (
{(isEditing || team?.collaborativeEditing) && !isTemplate && isNew && (
<Action>
<TemplatesMenu
document={document}
@@ -295,7 +256,18 @@ function DocumentHeader({
<Action>
<NewChildDocumentMenu
document={document}
label={NewChildDocLabel}
label={(props) => (
<Tooltip
tooltip={t("New document")}
shortcut="n"
delay={500}
placement="bottom"
>
<Button icon={<PlusIcon />} {...props} neutral>
{t("New doc")}
</Button>
</Tooltip>
)}
/>
</Action>
)}
@@ -337,14 +309,21 @@ function DocumentHeader({
<DocumentMenu
document={document}
isRevision={isRevision}
label={DocumentMenuLabel}
label={(props) => (
<Button
icon={<MoreIcon />}
iconColor="currentColor"
{...props}
borderOnHover
neutral
/>
)}
showToggleEmbeds={canToggleEmbeds}
showDisplayOptions
/>
</Action>
</>
)}
</FadeOut>
</>
}
/>

11
app/scenes/Document/components/References.tsx
View File

@@ -7,21 +7,16 @@ import Document from "~/models/Document";
import Fade from "~/components/Fade";
import Tab from "~/components/Tab";
import Tabs from "~/components/Tabs";
import useMouseMove from "~/hooks/useMouseMove";
import useStores from "~/hooks/useStores";
import FadeOut from "./FadeOut";
import ReferenceListItem from "./ReferenceListItem";
type Props = {
document: Document;
isFocusing: boolean;
};
function References({ document, isFocusing }: Props) {
function References({ document }: Props) {
const { collections, documents } = useStores();
const location = useLocation();
const isMouseMoving = useMouseMove();
const hideHeader = isFocusing && !isMouseMoving;
React.useEffect(() => {
documents.fetchBacklinks(document.id);
@@ -38,8 +33,7 @@ function References({ document, isFocusing }: Props) {
const height = Math.max(backlinks.length, children.length) * 40;
return showBacklinks || showChildDocuments ? (
<FadeOut $fade={hideHeader}>
<Fade style={{ width: "100%" }}>
<Fade>
<Tabs>
{showChildDocuments && (
<Tab to="#children" isActive={() => !isBacklinksTab}>
@@ -85,7 +79,6 @@ function References({ document, isFocusing }: Props) {
)}
</Content>
</Fade>
</FadeOut>
) : null;
}

2
app/scenes/KeyboardShortcuts.tsx
View File

@@ -445,4 +445,4 @@ const Label = styled.dd`
color: ${(props) => props.theme.textSecondary};
`;
export default React.memo(KeyboardShortcuts);
export default KeyboardShortcuts;