From b75a6928cbc17ba599a4fb4d6429dee5e6a71111 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Fri, 6 May 2022 13:28:37 -0700 Subject: [PATCH] Revert "fix: Fade out navigation when editing and mouse hasn't moved (#3256)" (#3502) This reverts commit e0cf873a361d82cc003cd27d473067a989b966ec. --- app/components/DocumentMetaWithViews.tsx | 2 +- app/editor/components/EmojiMenu.tsx | 2 +- app/hooks/useMouseMove.ts | 28 --- app/models/Document.ts | 2 +- app/scenes/Document/components/Document.tsx | 17 +- app/scenes/Document/components/FadeOut.tsx | 11 - app/scenes/Document/components/Header.tsx | 237 ++++++++---------- app/scenes/Document/components/References.tsx | 97 ++++--- app/scenes/KeyboardShortcuts.tsx | 2 +- 9 files changed, 158 insertions(+), 240 deletions(-) delete mode 100644 app/hooks/useMouseMove.ts delete mode 100644 app/scenes/Document/components/FadeOut.tsx diff --git a/app/components/DocumentMetaWithViews.tsx b/app/components/DocumentMetaWithViews.tsx index 58de76d78..c147b06dd 100644 --- a/app/components/DocumentMetaWithViews.tsx +++ b/app/components/DocumentMetaWithViews.tsx @@ -83,4 +83,4 @@ const Meta = styled(DocumentMeta)<{ rtl?: boolean }>` } `; -export default React.memo(DocumentMetaWithViews); +export default DocumentMetaWithViews; diff --git a/app/editor/components/EmojiMenu.tsx b/app/editor/components/EmojiMenu.tsx index 28e9be245..9e14c561e 100644 --- a/app/editor/components/EmojiMenu.tsx +++ b/app/editor/components/EmojiMenu.tsx @@ -21,7 +21,7 @@ const searcher = new FuzzySearch<{ sort: true, }); -class EmojiMenu extends React.PureComponent< +class EmojiMenu extends React.Component< Omit< Props, | "renderMenuItem" diff --git a/app/hooks/useMouseMove.ts b/app/hooks/useMouseMove.ts deleted file mode 100644 index 0b31112ca..000000000 --- a/app/hooks/useMouseMove.ts +++ /dev/null @@ -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>(); - - 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; diff --git a/app/models/Document.ts b/app/models/Document.ts index 2d7d153c0..dd4bc375a 100644 --- a/app/models/Document.ts +++ b/app/models/Document.ts @@ -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"; diff --git a/app/scenes/Document/components/Document.tsx b/app/scenes/Document/components/Document.tsx index 15c373781..4d8039f15 100644 --- a/app/scenes/Document/components/Document.tsx +++ b/app/scenes/Document/components/Document.tsx @@ -87,9 +87,6 @@ class DocumentScene extends React.Component { @observable isEditorDirty = false; - @observable - isEditorFocused = false; - @observable isEmpty = true; @@ -415,9 +412,6 @@ class DocumentScene extends React.Component { } }; - onBlur = () => (this.isEditorFocused = false); - onFocus = () => (this.isEditorFocused = true); - render() { const { document, @@ -455,9 +449,6 @@ class DocumentScene extends React.Component { ? this.props.match.url : updateDocumentUrl(this.props.match.url, document); - const isFocusing = - !readOnly || this.isEditorFocused || !!ui.observingUserId; - return ( {this.props.location.pathname !== canonicalUrl && ( @@ -547,7 +538,6 @@ class DocumentScene extends React.Component { 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 { 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 { <> - + )} diff --git a/app/scenes/Document/components/FadeOut.tsx b/app/scenes/Document/components/FadeOut.tsx deleted file mode 100644 index fa5554b50..000000000 --- a/app/scenes/Document/components/FadeOut.tsx +++ /dev/null @@ -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); diff --git a/app/scenes/Document/components/Header.tsx b/app/scenes/Document/components/Header.tsx index 81e465bab..d17eeb9c4 100644 --- a/app/scenes/Document/components/Header.tsx +++ b/app/scenes/Document/components/Header.tsx @@ -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({ ); - const DocumentMenuLabel = React.useCallback( - (props) => ( - - - ), - [t] - ); - if (shareId) { return (
- {isMobile ? ( - - ) : ( - - {!isEditing && toc} - - )} - + isMobile ? ( + + ) : ( + + {!isEditing && toc} + + ) } title={ <> @@ -250,101 +213,117 @@ function DocumentHeader({ actions={ <> - - {!isPublishing && isSaving && !team?.collaborativeEditing && ( - {t("Saving")}… - )} - {!isDeleted && } - {(isEditing || team?.collaborativeEditing) && - !isTemplate && - isNew && ( - - - - )} - {!isEditing && !isDeleted && (!isMobile || !isTemplate) && ( - - - - )} - {isEditing && ( - <> - - - - - - - )} - {canEdit && !team?.collaborativeEditing && editAction} - {canEdit && can.createChildDocument && !isMobile && ( - - - - )} - {canEdit && isTemplate && !isDraft && !isRevision && ( - - - - )} - {can.update && isDraft && !isRevision && ( + + {!isPublishing && isSaving && !team?.collaborativeEditing && ( + {t("Saving")}… + )} + {!isDeleted && } + {(isEditing || team?.collaborativeEditing) && !isTemplate && isNew && ( + + + + )} + {!isEditing && !isDeleted && (!isMobile || !isTemplate) && ( + + + + )} + {isEditing && ( + <> - )} - {!isEditing && ( - <> - {!isDeleted && } - - - - - )} - + + )} + {canEdit && !team?.collaborativeEditing && editAction} + {canEdit && can.createChildDocument && !isMobile && ( + + ( + + + + )} + /> + + )} + {canEdit && isTemplate && !isDraft && !isRevision && ( + + + + )} + {can.update && isDraft && !isRevision && ( + + + + + + )} + {!isEditing && ( + <> + {!isDeleted && } + + ( +