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

Revert "fix: Fade out navigation when editing and mouse hasn't moved (#3256)" (#3502)

Browse Source 
This reverts commit e0cf873a36.
This commit is contained in:
Tom Moor
2022-05-06 13:28:37 -07:00
committed by GitHub
parent e0cf873a36
commit b75a6928cb
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);

237
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 ? (
<TableOfContentsMenu headings={headings} />
) : (
<DocumentBreadcrumb document={document}>
{!isEditing && toc}
</DocumentBreadcrumb>
)}
</FadeOut>
isMobile ? (
<TableOfContentsMenu headings={headings} />
) : (
<DocumentBreadcrumb document={document}>
{!isEditing && toc}
</DocumentBreadcrumb>
)
}
title={
<>
@@ -250,101 +213,117 @@ function DocumentHeader({
actions={
<>
<ObservingBanner />
<FadeOut $fade={hideHeader}>
{!isPublishing && isSaving && !team?.collaborativeEditing && (
<Status>{t("Saving")}…</Status>
)}
{!isDeleted && <Collaborators document={document} />}
{(isEditing || team?.collaborativeEditing) &&
!isTemplate &&
isNew && (
<Action>
<TemplatesMenu
document={document}
onSelectTemplate={onSelectTemplate}
/>
</Action>
)}
{!isEditing && !isDeleted && (!isMobile || !isTemplate) && (
<Action>
<ShareButton document={document} />
</Action>
)}
{isEditing && (
<>
<Action>
<Tooltip
tooltip={t("Save")}
shortcut={`${metaDisplay}+enter`}
delay={500}
placement="bottom"
>
<Button
onClick={handleSave}
disabled={savingIsDisabled}
neutral={isDraft}
>
{isDraft ? t("Save Draft") : t("Done Editing")}
</Button>
</Tooltip>
</Action>
</>
)}
{canEdit && !team?.collaborativeEditing && editAction}
{canEdit && can.createChildDocument && !isMobile && (
<Action>
<NewChildDocumentMenu
document={document}
label={NewChildDocLabel}
/>
</Action>
)}
{canEdit && isTemplate && !isDraft && !isRevision && (
<Action>
<Button
icon={<PlusIcon />}
as={Link}
to={newDocumentPath(document.collectionId, {
templateId: document.id,
})}
primary
>
{t("New from template")}
</Button>
</Action>
)}
{can.update && isDraft && !isRevision && (
{!isPublishing && isSaving && !team?.collaborativeEditing && (
<Status>{t("Saving")}…</Status>
)}
{!isDeleted && <Collaborators document={document} />}
{(isEditing || team?.collaborativeEditing) && !isTemplate && isNew && (
<Action>
<TemplatesMenu
document={document}
onSelectTemplate={onSelectTemplate}
/>
</Action>
)}
{!isEditing && !isDeleted && (!isMobile || !isTemplate) && (
<Action>
<ShareButton document={document} />
</Action>
)}
{isEditing && (
<>
<Action>
<Tooltip
tooltip={t("Publish")}
shortcut={`${metaDisplay}+shift+p`}
tooltip={t("Save")}
shortcut={`${metaDisplay}+enter`}
delay={500}
placement="bottom"
>
<Button
onClick={handlePublish}
disabled={publishingIsDisabled}
onClick={handleSave}
disabled={savingIsDisabled}
neutral={isDraft}
>
{isPublishing ? `${t("Publishing")}…` : t("Publish")}
{isDraft ? t("Save Draft") : t("Done Editing")}
</Button>
</Tooltip>
</Action>
)}
{!isEditing && (
<>
{!isDeleted && <Separator />}
<Action>
<DocumentMenu
document={document}
isRevision={isRevision}
label={DocumentMenuLabel}
showToggleEmbeds={canToggleEmbeds}
showDisplayOptions
/>
</Action>
</>
)}
</FadeOut>
</>
)}
{canEdit && !team?.collaborativeEditing && editAction}
{canEdit && can.createChildDocument && !isMobile && (
<Action>
<NewChildDocumentMenu
document={document}
label={(props) => (
<Tooltip
tooltip={t("New document")}
shortcut="n"
delay={500}
placement="bottom"
>
<Button icon={<PlusIcon />} {...props} neutral>
{t("New doc")}
</Button>
</Tooltip>
)}
/>
</Action>
)}
{canEdit && isTemplate && !isDraft && !isRevision && (
<Action>
<Button
icon={<PlusIcon />}
as={Link}
to={newDocumentPath(document.collectionId, {
templateId: document.id,
})}
primary
>
{t("New from template")}
</Button>
</Action>
)}
{can.update && isDraft && !isRevision && (
<Action>
<Tooltip
tooltip={t("Publish")}
shortcut={`${metaDisplay}+shift+p`}
delay={500}
placement="bottom"
>
<Button
onClick={handlePublish}
disabled={publishingIsDisabled}
>
{isPublishing ? `${t("Publishing")}…` : t("Publish")}
</Button>
</Tooltip>
</Action>
)}
{!isEditing && (
<>
{!isDeleted && <Separator />}
<Action>
<DocumentMenu
document={document}
isRevision={isRevision}
label={(props) => (
<Button
icon={<MoreIcon />}
iconColor="currentColor"
{...props}
borderOnHover
neutral
/>
)}
showToggleEmbeds={canToggleEmbeds}
showDisplayOptions
/>
</Action>
</>
)}
</>
}
/>

97
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,54 +33,52 @@ function References({ document, isFocusing }: Props) {
const height = Math.max(backlinks.length, children.length) * 40;
return showBacklinks || showChildDocuments ? (
<FadeOut $fade={hideHeader}>
<Fade style={{ width: "100%" }}>
<Tabs>
{showChildDocuments && (
<Tab to="#children" isActive={() => !isBacklinksTab}>
<Trans>Nested documents</Trans>
</Tab>
)}
{showBacklinks && (
<Tab to="#backlinks" isActive={() => isBacklinksTab}>
<Trans>Backlinks</Trans>
</Tab>
)}
</Tabs>
<Content style={{ height }}>
{showBacklinks && (
<List $active={isBacklinksTab}>
{backlinks.map((backlinkedDocument) => (
<Fade>
<Tabs>
{showChildDocuments && (
<Tab to="#children" isActive={() => !isBacklinksTab}>
<Trans>Nested documents</Trans>
</Tab>
)}
{showBacklinks && (
<Tab to="#backlinks" isActive={() => isBacklinksTab}>
<Trans>Backlinks</Trans>
</Tab>
)}
</Tabs>
<Content style={{ height }}>
{showBacklinks && (
<List $active={isBacklinksTab}>
{backlinks.map((backlinkedDocument) => (
<ReferenceListItem
anchor={document.urlId}
key={backlinkedDocument.id}
document={backlinkedDocument}
showCollection={
backlinkedDocument.collectionId !== document.collectionId
}
/>
))}
</List>
)}
{showChildDocuments && (
<List $active={!isBacklinksTab}>
{children.map((node) => {
// If we have the document in the store already then use it to get the extra
// contextual info, otherwise the collection node will do (only has title and id)
const document = documents.get(node.id);
return (
<ReferenceListItem
anchor={document.urlId}
key={backlinkedDocument.id}
document={backlinkedDocument}
showCollection={
backlinkedDocument.collectionId !== document.collectionId
}
key={node.id}
document={document || node}
showCollection={false}
/>
))}
</List>
)}
{showChildDocuments && (
<List $active={!isBacklinksTab}>
{children.map((node) => {
// If we have the document in the store already then use it to get the extra
// contextual info, otherwise the collection node will do (only has title and id)
const document = documents.get(node.id);
return (
<ReferenceListItem
key={node.id}
document={document || node}
showCollection={false}
/>
);
})}
</List>
)}
</Content>
</Fade>
</FadeOut>
);
})}
</List>
)}
</Content>
</Fade>
) : 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;