From d820b2a617654e06c74705fbcc92bd4ea4befa07 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Fri, 18 Aug 2023 18:45:38 +0200 Subject: [PATCH] fix: Scrolling in desktop app sidebar is finicky --- app/components/Sidebar/App.tsx | 8 +- app/components/Sidebar/Settings.tsx | 4 +- app/components/Sidebar/Shared.tsx | 4 +- app/components/Sidebar/Sidebar.tsx | 23 +++-- .../{HeaderButton.tsx => FullWidthButton.tsx} | 89 +++++++++++-------- 5 files changed, 75 insertions(+), 53 deletions(-) rename app/components/Sidebar/components/{HeaderButton.tsx => FullWidthButton.tsx} (52%) diff --git a/app/components/Sidebar/App.tsx b/app/components/Sidebar/App.tsx index 618f7cd64..004ad890c 100644 --- a/app/components/Sidebar/App.tsx +++ b/app/components/Sidebar/App.tsx @@ -26,7 +26,9 @@ import Sidebar from "./Sidebar"; import ArchiveLink from "./components/ArchiveLink"; import Collections from "./components/Collections"; import DragPlaceholder from "./components/DragPlaceholder"; -import HeaderButton, { HeaderButtonProps } from "./components/HeaderButton"; +import FullWidthButton, { + FullWidthButtonProps, +} from "./components/FullWidthButton"; import HistoryNavigation from "./components/HistoryNavigation"; import Section from "./components/Section"; import SidebarAction from "./components/SidebarAction"; @@ -65,8 +67,8 @@ function AppSidebar() { - {(props: HeaderButtonProps) => ( - ( + - } onClick={returnToApp} diff --git a/app/components/Sidebar/Shared.tsx b/app/components/Sidebar/Shared.tsx index 0618beb9a..52843feec 100644 --- a/app/components/Sidebar/Shared.tsx +++ b/app/components/Sidebar/Shared.tsx @@ -11,7 +11,7 @@ import { homePath, sharedDocumentPath } from "~/utils/routeHelpers"; import { useTeamContext } from "../TeamContext"; import TeamLogo from "../TeamLogo"; import Sidebar from "./Sidebar"; -import HeaderButton from "./components/HeaderButton"; +import FullWidthButton from "./components/FullWidthButton"; import Section from "./components/Section"; import DocumentLink from "./components/SharedDocumentLink"; @@ -28,7 +28,7 @@ function SharedSidebar({ rootNode, shareId }: Props) { return ( {team && ( - } onClick={() => diff --git a/app/components/Sidebar/Sidebar.tsx b/app/components/Sidebar/Sidebar.tsx index aab004c09..82b47a41b 100644 --- a/app/components/Sidebar/Sidebar.tsx +++ b/app/components/Sidebar/Sidebar.tsx @@ -11,13 +11,15 @@ import useMenuContext from "~/hooks/useMenuContext"; import usePrevious from "~/hooks/usePrevious"; import useStores from "~/hooks/useStores"; import AccountMenu from "~/menus/AccountMenu"; -import { draggableOnDesktop, fadeOnDesktopBackgrounded } from "~/styles"; +import { fadeOnDesktopBackgrounded } from "~/styles"; import { fadeIn } from "~/styles/animations"; import Desktop from "~/utils/Desktop"; import Avatar from "../Avatar"; import NotificationIcon from "../Notifications/NotificationIcon"; import NotificationsPopover from "../Notifications/NotificationsPopover"; -import HeaderButton, { HeaderButtonProps } from "./components/HeaderButton"; +import FullWidthButton, { + FullWidthButtonProps, +} from "./components/FullWidthButton"; import ResizeBorder from "./components/ResizeBorder"; import Toggle, { ToggleButton, Positioner } from "./components/Toggle"; @@ -175,11 +177,12 @@ const Sidebar = React.forwardRef(function _Sidebar( {user && ( - {(props: HeaderButtonProps) => ( - ( + (function _Sidebar( } > - {(rest: HeaderButtonProps) => ( - } /> + {(rest: FullWidthButtonProps) => ( + } + /> )} - + )} )} @@ -259,8 +266,6 @@ const Container = styled(Flex)` z-index: ${depths.sidebar}; max-width: 80%; min-width: 280px; - padding-top: ${Desktop.hasInsetTitlebar() ? 36 : 0}px; - ${draggableOnDesktop()} ${fadeOnDesktopBackgrounded()} ${Positioner} { diff --git a/app/components/Sidebar/components/HeaderButton.tsx b/app/components/Sidebar/components/FullWidthButton.tsx similarity index 52% rename from app/components/Sidebar/components/HeaderButton.tsx rename to app/components/Sidebar/components/FullWidthButton.tsx index 9e34487bf..493f71ff7 100644 --- a/app/components/Sidebar/components/HeaderButton.tsx +++ b/app/components/Sidebar/components/FullWidthButton.tsx @@ -3,9 +3,11 @@ import * as React from "react"; import styled from "styled-components"; import { s } from "@shared/styles"; import Flex from "~/components/Flex"; -import { undraggableOnDesktop } from "~/styles"; +import { draggableOnDesktop, undraggableOnDesktop } from "~/styles"; +import Desktop from "~/utils/Desktop"; -export type HeaderButtonProps = React.ComponentProps & { +export type FullWidthButtonProps = React.ComponentProps & { + position: "top" | "bottom"; title: React.ReactNode; image: React.ReactNode; minHeight?: number; @@ -16,40 +18,53 @@ export type HeaderButtonProps = React.ComponentProps & { children?: React.ReactNode; }; -const HeaderButton = React.forwardRef( - function _HeaderButton( - { - showDisclosure, - showMoreMenu, - image, - title, - minHeight = 0, - children, - ...rest - }: HeaderButtonProps, - ref - ) { - return ( - - - {children} - - ); - } -); +const FullWidthButton = React.forwardRef< + HTMLButtonElement, + FullWidthButtonProps +>(function _FullWidthButton( + { + position = "top", + showDisclosure, + showMoreMenu, + image, + title, + minHeight = 0, + children, + ...rest + }: FullWidthButtonProps, + ref +) { + return ( + + + {children} + + ); +}); + +const Container = styled(Flex)<{ $position: "top" | "bottom" }>` + padding-top: ${(props) => + props.$position === "top" && Desktop.hasInsetTitlebar() ? 36 : 0}px; + ${draggableOnDesktop()} +`; const Title = styled(Flex)` color: ${s("text")}; @@ -99,4 +114,4 @@ const Button = styled(Flex)<{ minHeight: number }>` } `; -export default HeaderButton; +export default FullWidthButton;