feat: show item tooltips on mobile

standardnotes · Aug 16, 2023 · c65d8e5 · c65d8e5
1 parent 7fba37e
commit c65d8e5
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 23 deletions.
diff --git a/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts b/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts
@@ -63,13 +63,19 @@ const getStylesFromRect = (options: {
   side: PopoverSide
   align: PopoverAlignment
   disableMobileFullscreenTakeover?: boolean
+  disableApplyingMobileWidth?: boolean
   maxHeight?: number | 'none'
   offset?: number
 }): PopoverCSSProperties => {
-  const { rect, disableMobileFullscreenTakeover = false, maxHeight = 'none' } = options
+  const {
+    rect,
+    disableMobileFullscreenTakeover = false,
+    disableApplyingMobileWidth = false,
+    maxHeight = 'none',
+  } = options
 
   const canApplyMaxHeight = maxHeight !== 'none' && (!isMobileScreen() || disableMobileFullscreenTakeover)
-  const shouldApplyMobileWidth = isMobileScreen() && disableMobileFullscreenTakeover
+  const shouldApplyMobileWidth = isMobileScreen() && disableMobileFullscreenTakeover && !disableApplyingMobileWidth
   const marginForMobile = percentOf(10, window.innerWidth)
 
   return {
@@ -96,6 +102,7 @@ type Options = {
   popoverRect?: DOMRect
   side: PopoverSide
   disableMobileFullscreenTakeover?: boolean
+  disableApplyingMobileWidth?: boolean
   maxHeightFunction?: (calculatedMaxHeight: number) => number | 'none'
   offset?: number
 }
@@ -107,6 +114,7 @@ export const getPositionedPopoverStyles = ({
   popoverRect,
   side,
   disableMobileFullscreenTakeover,
+  disableApplyingMobileWidth,
   maxHeightFunction,
   offset,
 }: Options): PopoverCSSProperties | null => {
@@ -159,6 +167,7 @@ export const getPositionedPopoverStyles = ({
     side: sideWithLessOverflows,
     align: finalAlignment,
     disableMobileFullscreenTakeover,
+    disableApplyingMobileWidth,
     maxHeight,
     offset,
   })

diff --git a/packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx b/packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx
@@ -1,5 +1,5 @@
 import { classNames } from '@standardnotes/snjs'
-import { ReactNode, useState } from 'react'
+import { ReactNode, useState, MouseEvent } from 'react'
 import { Tooltip, TooltipAnchor, TooltipOptions, useTooltipStore } from '@ariakit/react'
 import { Slot } from '@radix-ui/react-slot'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
@@ -24,13 +24,13 @@ const StyledTooltip = ({
 } & Partial<TooltipOptions>) => {
   const [forceOpen, setForceOpen] = useState<boolean | undefined>()
 
+  const isMobile = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
   const tooltip = useTooltipStore({
-    timeout: 500,
+    timeout: isMobile && showOnMobile ? 100 : 500,
     hideTimeout: 0,
     skipTimeout: 0,
     open: forceOpen,
   })
-  const isMobile = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
 
   if (isMobile && !showOnMobile) {
     return <>{children}</>
@@ -40,6 +40,12 @@ const StyledTooltip = ({
     <>
       <TooltipAnchor
         onClick={() => setForceOpen(false)}
+        onContextMenu={(event: MouseEvent) => {
+          if (isMobile && showOnMobile) {
+            event.preventDefault()
+            tooltip.show()
+          }
+        }}
         onBlur={() => setForceOpen(undefined)}
         store={tooltip}
         as={Slot}
@@ -79,6 +85,7 @@ const StyledTooltip = ({
             popoverRect,
             documentRect,
             disableMobileFullscreenTakeover: true,
+            disableApplyingMobileWidth: true,
             offset: props.gutter ? props.gutter : 6,
           })
 

diff --git a/...web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugins/MobileToolbarPlugin.tsx b/...web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugins/MobileToolbarPlugin.tsx
@@ -44,6 +44,7 @@ import { InsertRemoteImageDialog } from '../RemoteImagePlugin/RemoteImagePlugin'
 import LinkEditor from '../LinkEditor/LinkEditor'
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 import { useSelectedTextFormatInfo } from './useSelectedTextFormatInfo'
+import StyledTooltip from '@/Components/StyledTooltip/StyledTooltip'
 
 const MobileToolbarPlugin = () => {
   const application = useApplication()
@@ -403,25 +404,24 @@ const MobileToolbarPlugin = () => {
           >
             {items.map((item) => {
               return (
-                <button
-                  className="flex items-center justify-center rounded p-0.5 disabled:opacity-50 select-none"
-                  aria-label={item.name}
-                  onClick={item.onSelect}
-                  onContextMenu={(event) => {
-                    event.preventDefault()
-                  }}
-                  key={item.name}
-                  disabled={item.disabled}
-                >
-                  <div
-                    className={classNames(
-                      'flex items-center justify-center p-2 rounded',
-                      item.active && 'bg-info text-info-contrast',
-                    )}
+                <StyledTooltip showOnMobile showOnHover label={item.name}>
+                  <button
+                    className="flex items-center justify-center rounded p-0.5 disabled:opacity-50 select-none"
+                    aria-label={item.name}
+                    onClick={item.onSelect}
+                    key={item.name}
+                    disabled={item.disabled}
                   >
-                    <Icon type={item.iconName} size="medium" className="!text-current [&>path]:!text-current" />
-                  </div>
-                </button>
+                    <div
+                      className={classNames(
+                        'flex items-center justify-center p-2 rounded transition-colors duration-75',
+                        item.active && 'bg-info text-info-contrast',
+                      )}
+                    >
+                      <Icon type={item.iconName} size="medium" className="!text-current [&>path]:!text-current" />
+                    </div>
+                  </button>
+                </StyledTooltip>
               )
             })}
           </div>