From ef27a21fb141c4ef1a760cf6fb550e4b713f8f98 Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Thu, 27 Apr 2023 15:57:56 +0530 Subject: [PATCH] fix(desktop): Fixed issue where preferences header & tooltips are overlapped by custom titlebar --- .../javascripts/Main/SpellcheckerManager.ts | 2 +- .../app/javascripts/Renderer/Renderer.ts | 11 +++++++ .../Popover/GetPositionedPopoverStyles.ts | 15 ++++++++-- .../Components/Popover/Utils/Collisions.ts | 29 ++++++++++--------- .../Components/Popover/Utils/Rect.ts | 23 ++++++++------- .../StyledTooltip/StyledTooltip.tsx | 27 ++++++++++++++++- 6 files changed, 79 insertions(+), 28 deletions(-) diff --git a/packages/desktop/app/javascripts/Main/SpellcheckerManager.ts b/packages/desktop/app/javascripts/Main/SpellcheckerManager.ts index 5267968c2..beed2bbbe 100644 --- a/packages/desktop/app/javascripts/Main/SpellcheckerManager.ts +++ b/packages/desktop/app/javascripts/Main/SpellcheckerManager.ts @@ -156,7 +156,7 @@ export function createSpellcheckerManager( const firstOutlier = session.availableSpellCheckerLanguages.find( (language, index) => availableSpellCheckerLanguages[index] !== language, ) - throw new Error(`Found unsupported language code: ${firstOutlier}`) + console.error(`Found unsupported language code: ${firstOutlier}`) } setSpellcheckerLanguages() diff --git a/packages/desktop/app/javascripts/Renderer/Renderer.ts b/packages/desktop/app/javascripts/Renderer/Renderer.ts index a13399e95..04a4c2b66 100644 --- a/packages/desktop/app/javascripts/Renderer/Renderer.ts +++ b/packages/desktop/app/javascripts/Renderer/Renderer.ts @@ -114,6 +114,17 @@ async function configureWindow(remoteBridge: CrossProcessBridge) { if (isMacOS || useSystemMenuBar) { // !important is important here because #desktop-title-bar has display: flex. sheet.insertRule('#desktop-title-bar { display: none !important; }', sheet.cssRules.length) + } else { + /* Use custom title bar. Take the sn-titlebar-height off of + the app content height so its not overflowing */ + sheet.insertRule( + '[data-dialog] { position: relative; height: calc(100vh - var(--sn-desktop-titlebar-height)) !important; margin-top: var(--sn-desktop-titlebar-height) !important; }', + sheet.cssRules.length, + ) + sheet.insertRule( + '[data-mobile-popover] { padding-top: var(--sn-desktop-titlebar-height) !important; }', + sheet.cssRules.length, + ) } } diff --git a/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts b/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts index dca8ab06b..53944607b 100644 --- a/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts +++ b/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts @@ -41,6 +41,7 @@ type Options = { side: PopoverSide disableMobileFullscreenTakeover?: boolean maxHeightFunction?: (calculatedMaxHeight: number) => number + offset?: number } export const getPositionedPopoverStyles = ({ @@ -51,6 +52,7 @@ export const getPositionedPopoverStyles = ({ side, disableMobileFullscreenTakeover, maxHeightFunction, + offset, }: Options): CSSProperties | null => { if (!popoverRect || !anchorRect) { return null @@ -71,12 +73,21 @@ export const getPositionedPopoverStyles = ({ const oppositeSideOverflows = getOverflows(rectForOppositeSide, documentRect) const sideWithLessOverflows = preferredSideOverflows[side] < oppositeSideOverflows[oppositeSide] ? side : oppositeSide - const finalAlignment = getNonCollidingAlignment(sideWithLessOverflows, align, preferredSideRectCollisions, { + const finalAlignment = getNonCollidingAlignment({ + finalSide: sideWithLessOverflows, + preferredAlignment: align, + collisions: preferredSideRectCollisions, popoverRect, buttonRect: anchorRect, documentRect, }) - const finalPositionedRect = getPositionedPopoverRect(popoverRect, anchorRect, sideWithLessOverflows, finalAlignment) + const finalPositionedRect = getPositionedPopoverRect( + popoverRect, + anchorRect, + sideWithLessOverflows, + finalAlignment, + offset, + ) let maxHeight = getPopoverMaxHeight( getAppRect(), diff --git a/packages/web/src/javascripts/Components/Popover/Utils/Collisions.ts b/packages/web/src/javascripts/Components/Popover/Utils/Collisions.ts index 0a743aa02..73553237a 100644 --- a/packages/web/src/javascripts/Components/Popover/Utils/Collisions.ts +++ b/packages/web/src/javascripts/Components/Popover/Utils/Collisions.ts @@ -45,20 +45,21 @@ const OppositeAlignment: Record, PopoverAlig end: 'start', } -export const getNonCollidingAlignment = ( - finalSide: PopoverSide, - preferredAlignment: PopoverAlignment, - collisions: RectCollisions, - { - popoverRect, - buttonRect, - documentRect, - }: { - popoverRect: DOMRect - buttonRect: DOMRect - documentRect: DOMRect - }, -): PopoverAlignment => { +export const getNonCollidingAlignment = ({ + finalSide, + preferredAlignment, + collisions, + popoverRect, + buttonRect, + documentRect, +}: { + finalSide: PopoverSide + preferredAlignment: PopoverAlignment + collisions: RectCollisions + popoverRect: DOMRect + buttonRect: DOMRect + documentRect: DOMRect +}): PopoverAlignment => { const isHorizontalSide = finalSide === 'top' || finalSide === 'bottom' const boundToCheckForStart = isHorizontalSide ? 'right' : 'bottom' const boundToCheckForEnd = isHorizontalSide ? 'left' : 'top' diff --git a/packages/web/src/javascripts/Components/Popover/Utils/Rect.ts b/packages/web/src/javascripts/Components/Popover/Utils/Rect.ts index f12559c19..41952a0e9 100644 --- a/packages/web/src/javascripts/Components/Popover/Utils/Rect.ts +++ b/packages/web/src/javascripts/Components/Popover/Utils/Rect.ts @@ -68,49 +68,52 @@ export const getPositionedPopoverRect = ( buttonRect: DOMRect, side: PopoverSide, align: PopoverAlignment, + offset?: number, ): DOMRect => { const { width, height } = popoverRect const positionPopoverRect = DOMRect.fromRect(popoverRect) + const finalOffset = offset ? offset : 0 + switch (side) { case 'top': { - positionPopoverRect.y = buttonRect.top - height + positionPopoverRect.y = buttonRect.top - height - finalOffset break } case 'bottom': - positionPopoverRect.y = buttonRect.bottom + positionPopoverRect.y = buttonRect.bottom + finalOffset break case 'left': - positionPopoverRect.x = buttonRect.left - width + positionPopoverRect.x = buttonRect.left - width - finalOffset break case 'right': - positionPopoverRect.x = buttonRect.right + positionPopoverRect.x = buttonRect.right + finalOffset break } if (side === 'top' || side === 'bottom') { switch (align) { case 'start': - positionPopoverRect.x = buttonRect.left + positionPopoverRect.x = buttonRect.left - finalOffset break case 'center': - positionPopoverRect.x = buttonRect.left - width / 2 + buttonRect.width / 2 + positionPopoverRect.x = buttonRect.left - width / 2 + buttonRect.width / 2 - finalOffset break case 'end': - positionPopoverRect.x = buttonRect.right - width + positionPopoverRect.x = buttonRect.right - width + finalOffset break } } else { switch (align) { case 'start': - positionPopoverRect.y = buttonRect.top + positionPopoverRect.y = buttonRect.top - finalOffset break case 'center': - positionPopoverRect.y = buttonRect.top - height / 2 + buttonRect.height / 2 + positionPopoverRect.y = buttonRect.top - height / 2 + buttonRect.height / 2 - finalOffset break case 'end': - positionPopoverRect.y = buttonRect.bottom - height + positionPopoverRect.y = buttonRect.bottom - height + finalOffset break } } diff --git a/packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx b/packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx index 8e62b2165..d4cb475e5 100644 --- a/packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx +++ b/packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx @@ -3,6 +3,7 @@ import { ReactNode } from 'react' import { Tooltip, TooltipAnchor, TooltipStoreProps, useTooltipStore } from '@ariakit/react' import { Slot } from '@radix-ui/react-slot' import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery' +import { getPositionedPopoverStyles } from '../Popover/GetPositionedPopoverStyles' const StyledTooltip = ({ children, @@ -16,7 +17,31 @@ const StyledTooltip = ({ } & Partial) => { const tooltip = useTooltipStore({ timeout: 350, - gutter: 6, + renderCallback(props) { + const { popoverElement, anchorElement } = props + + const documentElement = document.querySelector('.main-ui-view') + + if (!popoverElement || !anchorElement || !documentElement) { + return + } + + const anchorRect = anchorElement.getBoundingClientRect() + const popoverRect = popoverElement.getBoundingClientRect() + const documentRect = documentElement.getBoundingClientRect() + + const styles = getPositionedPopoverStyles({ + align: 'center', + side: 'bottom', + anchorRect, + popoverRect, + documentRect, + disableMobileFullscreenTakeover: true, + offset: 6, + }) + + Object.assign(popoverElement.style, styles) + }, ...props, }) const isMobile = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)