From c928f8a281ad4e45c79c6c43f009175e5cbbed46 Mon Sep 17 00:00:00 2001 From: Mo Date: Mon, 5 Dec 2022 15:50:19 -0600 Subject: [PATCH] fix: fixes issue where add button would not be visible at times on iOS (#2087) * fix: fixes issue where add button would not be visible at times on iOS * fix: fixes issue where screens could not be navigated with certain window sizes --- packages/mobile/ios/Podfile.lock | 4 +-- .../ContentListView/ContentListView.tsx | 5 +++ .../ContentListView/FloatingAddButton.tsx | 34 +++++++++++++++++++ .../Header/ContentListHeader.tsx | 7 ++-- .../Components/Panes/PaneAnimator.tsx | 4 +-- .../Hooks/useIsTabletOrMobileScreen.tsx | 10 ++++-- .../src/javascripts/Hooks/useMediaQuery.tsx | 4 +-- packages/web/src/javascripts/Utils/Utils.ts | 6 ++-- 8 files changed, 60 insertions(+), 14 deletions(-) create mode 100644 packages/web/src/javascripts/Components/ContentListView/FloatingAddButton.tsx diff --git a/packages/mobile/ios/Podfile.lock b/packages/mobile/ios/Podfile.lock index 03697e2f5..a645350c6 100644 --- a/packages/mobile/ios/Podfile.lock +++ b/packages/mobile/ios/Podfile.lock @@ -583,7 +583,7 @@ EXTERNAL SOURCES: SPEC CHECKSUMS: boost: a7c83b31436843459a1961bfd74b96033dc77234 CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99 - DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662 + DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54 FBLazyVector: 48289402952f4f7a4e235de70a9a590aa0b79ef4 FBReactNativeSpec: dd1186fd05255e3457baa2f4ca65e94c2cd1e3ac Flipper: 26fc4b7382499f1281eb8cb921e5c3ad6de91fe0 @@ -596,7 +596,7 @@ SPEC CHECKSUMS: Flipper-RSocket: d9d9ade67cbecf6ac10730304bf5607266dd2541 FlipperKit: cbdee19bdd4e7f05472a66ce290f1b729ba3cb86 fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9 - glog: 85ecdd10ee8d8ec362ef519a6a45ff9aa27b2e85 + glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b hermes-engine: 2af7b7a59128f250adfd86f15aa1d5a2ecd39995 libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913 OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c diff --git a/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx b/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx index eefcc85aa..348873bd3 100644 --- a/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx +++ b/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx @@ -35,6 +35,8 @@ import { ListableContentItem } from './Types/ListableContentItem' import { FeatureName } from '@/Controllers/FeatureName' import { PanelResizedData } from '@/Types/PanelResizedData' import { useForwardedRef } from '@/Hooks/useForwardedRef' +import { isMobileScreen } from '@/Utils' +import FloatingAddButton from './FloatingAddButton' type Props = { accountMenuController: AccountMenuController @@ -285,6 +287,9 @@ const ContentListView = forwardRef( aria-label={'Notes & Files'} ref={innerRef} > + {isMobileScreen() && ( + + )}
{selectedTag && ( diff --git a/packages/web/src/javascripts/Components/ContentListView/FloatingAddButton.tsx b/packages/web/src/javascripts/Components/ContentListView/FloatingAddButton.tsx new file mode 100644 index 000000000..851b18d4c --- /dev/null +++ b/packages/web/src/javascripts/Components/ContentListView/FloatingAddButton.tsx @@ -0,0 +1,34 @@ +import { classNames } from '@standardnotes/snjs' +import { ButtonStyle, getColorsForPrimaryVariant } from '../Button/Button' +import Icon from '../Icon/Icon' + +type Props = { + label: string + style: ButtonStyle + onClick?: () => void +} + +const PropertiesRequiredForFixedPositioningToWorkOnIOSSafari: React.CSSProperties = { + transform: 'translate3d(0, 0, 0)', +} + +const FloatingAddButton = ({ label, style, onClick }: Props) => { + const buttonClasses = getColorsForPrimaryVariant(style) + return ( + + ) +} + +export default FloatingAddButton diff --git a/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx b/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx index 9930ffbd9..4ababc581 100644 --- a/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx +++ b/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx @@ -86,17 +86,18 @@ const ContentListHeader = ({ return ( ) }, [addButtonLabel, addNewItem, isDailyEntry]) diff --git a/packages/web/src/javascripts/Components/Panes/PaneAnimator.tsx b/packages/web/src/javascripts/Components/Panes/PaneAnimator.tsx index 2d59ace0e..a4f415a8f 100644 --- a/packages/web/src/javascripts/Components/Panes/PaneAnimator.tsx +++ b/packages/web/src/javascripts/Components/Panes/PaneAnimator.tsx @@ -22,7 +22,7 @@ export async function animatePaneEntranceTransitionFromOffscreenToTheRight(eleme { duration: ENTRANCE_DURATION, easing: 'ease-in-out', - fill: 'forwards', + fill: 'both', }, ) @@ -50,7 +50,7 @@ export async function animatePaneExitTransitionOffscreenToTheRight(elementId: st { duration: EXIT_DURATION, easing: 'ease-in-out', - fill: 'forwards', + fill: 'both', }, ) diff --git a/packages/web/src/javascripts/Hooks/useIsTabletOrMobileScreen.tsx b/packages/web/src/javascripts/Hooks/useIsTabletOrMobileScreen.tsx index 19c52e297..ab6d92bb6 100644 --- a/packages/web/src/javascripts/Hooks/useIsTabletOrMobileScreen.tsx +++ b/packages/web/src/javascripts/Hooks/useIsTabletOrMobileScreen.tsx @@ -1,6 +1,6 @@ import { WebApplication } from '@/Application/Application' import { useApplication } from '@/Components/ApplicationProvider' -import { isMobileScreen, isTabletOrMobileScreen, isTabletScreen } from '@/Utils' +import { debounce, isMobileScreen, isTabletOrMobileScreen, isTabletScreen } from '@/Utils' import { useEffect, useState } from 'react' export function getIsTabletOrMobileScreen(application: WebApplication) { @@ -9,6 +9,10 @@ export function getIsTabletOrMobileScreen(application: WebApplication) { const isTablet = isTabletScreen() || (isNativeMobile && !isMobileScreen()) const isMobile = isMobileScreen() || (isNativeMobile && !isTablet) + if (isTablet && isMobile) { + throw Error('isTablet and isMobile cannot both be true') + } + return { isTabletOrMobile, isTablet, @@ -21,9 +25,9 @@ export default function useIsTabletOrMobileScreen() { const application = useApplication() useEffect(() => { - const handleResize = () => { + const handleResize = debounce(() => { setWindowSize(window.innerWidth) - } + }, 100) window.addEventListener('resize', handleResize) handleResize() diff --git a/packages/web/src/javascripts/Hooks/useMediaQuery.tsx b/packages/web/src/javascripts/Hooks/useMediaQuery.tsx index 9a1f31295..9abc9a095 100644 --- a/packages/web/src/javascripts/Hooks/useMediaQuery.tsx +++ b/packages/web/src/javascripts/Hooks/useMediaQuery.tsx @@ -2,8 +2,8 @@ import { useEffect, useState } from 'react' // Follows https://tailwindcss.com/docs/responsive-design export const MediaQueryBreakpoints = { - sm: '(max-width: 640px)', - md: '(min-width: 768px)', + sm: '(min-width: 0px) and (max-width: 767px)', + md: '(min-width: 768px) and (max-width: 1024px)', lg: '(min-width: 1024px)', xl: '(min-width: 1280px)', '2xl': '(min-width: 1536px)', diff --git a/packages/web/src/javascripts/Utils/Utils.ts b/packages/web/src/javascripts/Utils/Utils.ts index 91d736acb..dd6b056f7 100644 --- a/packages/web/src/javascripts/Utils/Utils.ts +++ b/packages/web/src/javascripts/Utils/Utils.ts @@ -206,10 +206,12 @@ export const disableIosTextFieldZoom = () => { } } -export const isMobileScreen = () => !window.matchMedia(MediaQueryBreakpoints.md).matches +export const isMobileScreen = () => window.matchMedia(MediaQueryBreakpoints.sm).matches export const isTabletScreen = () => - !window.matchMedia(MediaQueryBreakpoints.sm).matches && !window.matchMedia(MediaQueryBreakpoints.lg).matches + !isMobileScreen() && + window.matchMedia(MediaQueryBreakpoints.md).matches && + !window.matchMedia(MediaQueryBreakpoints.lg).matches export const isTabletOrMobileScreen = () => isMobileScreen() || isTabletScreen()