rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: Fixed issue with UI sometimes getting shifted up on iOS

Browse Source
This commit is contained in:
Antonella Sgarlatta
2025-06-24 03:53:36 -03:00
committed by GitHub
parent 5f61500ee0
commit c050a2cd33
5 changed files with 10 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/mobile/src/MobileWebAppContainer.tsx
View File

@@ -43,6 +43,7 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
const _reviewService = useRef(new ReviewService(device)) const _reviewService = useRef(new ReviewService(device))
const [showAndroidWebviewUpdatePrompt, setShowAndroidWebviewUpdatePrompt] = useState(false) const [showAndroidWebviewUpdatePrompt, setShowAndroidWebviewUpdatePrompt] = useState(false)
const [didLoadEnd, setDidLoadEnd] = useState(false)
const insets = useSafeAreaInsets() const insets = useSafeAreaInsets()
@@ -136,7 +137,7 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
keyboardDidHideListener.remove() keyboardDidHideListener.remove()
keyboardWillChangeFrame.remove() keyboardWillChangeFrame.remove()
} }
}, [webViewRef, stateService, device, androidBackHandlerService, colorSchemeService]) }, [webViewRef, stateService, device, androidBackHandlerService, colorSchemeService, insets.bottom])
useEffect(() => { useEffect(() => {
return notifee.onForegroundEvent(({ type, detail }) => { return notifee.onForegroundEvent(({ type, detail }) => {
@@ -354,30 +355,22 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
} }
}, []) }, [])
const [didAppLaunch, setDidAppLaunch] = useState(false)
useEffect(() => { useEffect(() => {
return device.addApplicationEventReceiver((event) => { return device.addApplicationEventReceiver((event) => {
if (event === ApplicationEvent.Launched) { if (event === ApplicationEvent.Launched) {
receivedSharedItemsHandler.current.setIsApplicationLaunched(true) receivedSharedItemsHandler.current.setIsApplicationLaunched(true)
setDidAppLaunch(true)
} }
}) })
}, [device]) }, [device])
useEffect(() => { const injectJS = `
if (!didAppLaunch) { document.documentElement.style.setProperty('--safe-area-inset-top', '${insets.top}px');
return document.documentElement.style.setProperty('--safe-area-inset-bottom', '${insets.bottom}px');
} document.documentElement.style.setProperty('--safe-area-inset-left', '${insets.left}px');
webViewRef.current?.postMessage( document.documentElement.style.setProperty('--safe-area-inset-right', '${insets.right}px');
JSON.stringify({ true;
reactNativeEvent: ReactNativeToWebEvent.UpdateSafeAreaInsets, `
messageType: 'event', webViewRef.current?.injectJavaScript(injectJS)
messageData: insets,
}),
)
}, [didAppLaunch, insets])
const [didLoadEnd, setDidLoadEnd] = useState(false)
if (showAndroidWebviewUpdatePrompt) { if (showAndroidWebviewUpdatePrompt) {
return ( return (

1
packages/snjs/lib/Client/ReactNativeToWebEvent.ts
View File

@@ -10,7 +10,6 @@ export enum ReactNativeToWebEvent {
KeyboardWillHide = 'KeyboardWillHide', KeyboardWillHide = 'KeyboardWillHide',
KeyboardDidShow = 'KeyboardDidShow', KeyboardDidShow = 'KeyboardDidShow',
KeyboardDidHide = 'KeyboardDidHide', KeyboardDidHide = 'KeyboardDidHide',
UpdateSafeAreaInsets = 'UpdateSafeAreaInsets',
ReceivedFile = 'ReceivedFile', ReceivedFile = 'ReceivedFile',
ReceivedLink = 'ReceivedLink', ReceivedLink = 'ReceivedLink',
ReceivedText = 'ReceivedText', ReceivedText = 'ReceivedText',

1
packages/ui-services/src/WebApplication/WebApplicationInterface.ts
View File

@@ -21,7 +21,6 @@ export interface WebApplicationInterface extends ApplicationInterface {
isFloatingKeyboard: boolean isFloatingKeyboard: boolean
}): void }): void
handleMobileKeyboardDidHideEvent(): void handleMobileKeyboardDidHideEvent(): void
handleUpdateSafeAreaInsets(insets: { top: number; bottom: number; left: number; right: number }): void
handleReceivedFileEvent(file: { name: string; mimeType: string; data: string }): void handleReceivedFileEvent(file: { name: string; mimeType: string; data: string }): void
handleReceivedTextEvent(item: { text: string; title?: string }): Promise<void> handleReceivedTextEvent(item: { text: string; title?: string }): Promise<void>
handleReceivedLinkEvent(item: { link: string; title: string }): Promise<void> handleReceivedLinkEvent(item: { link: string; title: string }): Promise<void>

6
packages/web/src/javascripts/Application/WebApplication.ts
View File

@@ -361,12 +361,6 @@ export class WebApplication extends SNApplication implements WebApplicationInter
setCustomViewportHeight(100, 'vh', true) setCustomViewportHeight(100, 'vh', true)
} }
handleUpdateSafeAreaInsets(insets: { top: number; bottom: number; left: number; right: number }) {
for (const [key, value] of Object.entries(insets)) {
document.documentElement.style.setProperty(`--safe-area-inset-${key}`, `${value}px`)
}
}
handleOpenFilePreviewEvent({ id }: { id: string }): void { handleOpenFilePreviewEvent({ id }: { id: string }): void {
const file = this.items.findItem<FileItem>(id) const file = this.items.findItem<FileItem>(id)
if (!file) { if (!file) {

5
packages/web/src/javascripts/NativeMobileWeb/MobileWebReceiver.ts
View File

@@ -81,11 +81,6 @@ export class MobileWebReceiver {
case ReactNativeToWebEvent.KeyboardDidHide: case ReactNativeToWebEvent.KeyboardDidHide:
void this.application.handleMobileKeyboardDidHideEvent() void this.application.handleMobileKeyboardDidHideEvent()
break break
case ReactNativeToWebEvent.UpdateSafeAreaInsets:
void this.application.handleUpdateSafeAreaInsets(
messageData as { top: number; left: number; bottom: number; right: number },
)
break
case ReactNativeToWebEvent.ReceivedFile: case ReactNativeToWebEvent.ReceivedFile:
void this.application.handleReceivedFileEvent( void this.application.handleReceivedFileEvent(
messageData as { messageData as {