From 40103c9d8fd4a9a260b56d28e4b7e04277feed0e Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sun, 2 Apr 2023 11:41:28 -0400 Subject: [PATCH] Wait to scroll comments until sidebar animation is complete Cleanup some unused code --- app/components/Sidebar/Right.tsx | 3 +- .../Document/components/CommentThread.tsx | 32 +++++++++++++------ app/scenes/Document/components/Comments.tsx | 7 +++- app/styles/animations.ts | 5 +++ app/typings/styled-components.d.ts | 1 - server/models/View.ts | 14 -------- shared/styles/theme.ts | 4 +-- 7 files changed, 37 insertions(+), 29 deletions(-) diff --git a/app/components/Sidebar/Right.tsx b/app/components/Sidebar/Right.tsx index 06cdf11e5..7c9f397c4 100644 --- a/app/components/Sidebar/Right.tsx +++ b/app/components/Sidebar/Right.tsx @@ -8,6 +8,7 @@ import Flex from "~/components/Flex"; import ResizeBorder from "~/components/Sidebar/components/ResizeBorder"; import useMobile from "~/hooks/useMobile"; import useStores from "~/hooks/useStores"; +import { sidebarAppearDuration } from "~/styles/animations"; type Props = React.HTMLAttributes & { children: React.ReactNode; @@ -82,7 +83,7 @@ function Right({ children, border, className }: Props) { : { type: "spring", bounce: 0.2, - duration: 0.6, + duration: sidebarAppearDuration / 1000, }, width: ui.sidebarRightWidth, }} diff --git a/app/scenes/Document/components/CommentThread.tsx b/app/scenes/Document/components/CommentThread.tsx index 943b1e648..8d7830d27 100644 --- a/app/scenes/Document/components/CommentThread.tsx +++ b/app/scenes/Document/components/CommentThread.tsx @@ -16,6 +16,7 @@ import { WebsocketContext } from "~/components/WebsocketProvider"; import useCurrentUser from "~/hooks/useCurrentUser"; import useOnClickOutside from "~/hooks/useOnClickOutside"; import useStores from "~/hooks/useStores"; +import { sidebarAppearDuration } from "~/styles/animations"; import CommentForm from "./CommentForm"; import CommentThreadItem from "./CommentThreadItem"; @@ -95,16 +96,29 @@ function CommentThread({ }, [focused, autoFocus]); React.useEffect(() => { - if (focused && topRef.current) { - scrollIntoView(topRef.current, { - scrollMode: "if-needed", - behavior: "smooth", - block: "start", - boundary: (parent) => { - // Prevents body and other parent elements from being scrolled - return parent.id !== "comments"; + if (focused) { + // If the thread is already visible, scroll it into view immediately, + // otherwise wait for the sidebar to appear. + const isVisible = + (topRef.current?.getBoundingClientRect().left ?? 0) < window.innerWidth; + + setTimeout( + () => { + if (!topRef.current) { + return; + } + scrollIntoView(topRef.current, { + scrollMode: "if-needed", + behavior: "smooth", + block: "start", + boundary: (parent) => { + // Prevents body and other parent elements from being scrolled + return parent.id !== "comments"; + }, + }); }, - }); + isVisible ? 0 : sidebarAppearDuration + ); setTimeout(() => { const commentMarkElement = window.document?.getElementById( diff --git a/app/scenes/Document/components/Comments.tsx b/app/scenes/Document/components/Comments.tsx index 7d8cf0dad..13958a811 100644 --- a/app/scenes/Document/components/Comments.tsx +++ b/app/scenes/Document/components/Comments.tsx @@ -40,7 +40,12 @@ function Comments() { onClose={() => ui.collapseComments(document?.id)} scrollable={false} > - + {hasComments ? ( threads.map((thread) => ( diff --git a/app/styles/animations.ts b/app/styles/animations.ts index 4c6192784..4e0d6875d 100644 --- a/app/styles/animations.ts +++ b/app/styles/animations.ts @@ -115,3 +115,8 @@ export const pulse = keyframes` 50% { transform: scale(1.1); } 100% { transform: scale(1); } `; + +/** + * The duration of the sidebar appearing animation in ms + */ +export const sidebarAppearDuration = 600; diff --git a/app/typings/styled-components.d.ts b/app/typings/styled-components.d.ts index 5981671d8..fa4c78aa1 100644 --- a/app/typings/styled-components.d.ts +++ b/app/typings/styled-components.d.ts @@ -138,7 +138,6 @@ declare module "styled-components" { textDiffDeletedBackground: string; placeholder: string; commentBackground: string; - commentActiveBackground: string; sidebarBackground: string; sidebarActiveBackground: string; sidebarControlHoverBackground: string; diff --git a/server/models/View.ts b/server/models/View.ts index 1745e5559..13e47d87f 100644 --- a/server/models/View.ts +++ b/server/models/View.ts @@ -1,4 +1,3 @@ -import { subMilliseconds } from "date-fns"; import { FindOrCreateOptions, Op } from "sequelize"; import { BelongsTo, @@ -9,7 +8,6 @@ import { DataType, Scopes, } from "sequelize-typescript"; -import { USER_PRESENCE_INTERVAL } from "@shared/constants"; import Document from "./Document"; import User from "./User"; import IdModel from "./base/IdModel"; @@ -94,18 +92,6 @@ class View extends IdModel { }); } - static async findRecentlyEditingByDocument(documentId: string) { - return this.findAll({ - where: { - documentId, - lastEditingAt: { - [Op.gt]: subMilliseconds(new Date(), USER_PRESENCE_INTERVAL * 2), - }, - }, - order: [["lastEditingAt", "DESC"]], - }); - } - static async touch(documentId: string, userId: string, isEditing: boolean) { const values: Partial = { updatedAt: new Date(), diff --git a/shared/styles/theme.ts b/shared/styles/theme.ts index 9fc5687c3..dcd846907 100644 --- a/shared/styles/theme.ts +++ b/shared/styles/theme.ts @@ -126,7 +126,6 @@ export const buildLightTheme = (input: Partial): DefaultTheme => { shadow: "rgba(0, 0, 0, 0.2)", commentBackground: colors.warmGrey, - commentActiveBackground: "#d7e0ea", modalBackdrop: colors.black10, modalBackground: colors.white, @@ -194,8 +193,7 @@ export const buildDarkTheme = (input: Partial): DefaultTheme => { backdrop: "rgba(0, 0, 0, 0.5)", shadow: "rgba(0, 0, 0, 0.6)", - commentBackground: colors.veryDarkBlue, - commentActiveBackground: colors.black, + commentBackground: "#1f232e", modalBackdrop: colors.black50, modalBackground: "#1f2128",