fix: iOS safe area using CSS (#1610)

2022-09-22 00:22:11 +05:30
parent 9dfeac7489
commit 8fa566336c
5 changed files with 44 additions and 37 deletions
--- a/packages/mobile/html/Web.bundle/src/index.html
+++ b/packages/mobile/html/Web.bundle/src/index.html
@@ -4,7 +4,7 @@
 <head>
    <meta charset="utf-8" />
    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
-    <meta content="width=device-width, initial-scale=1" name="viewport" />
+    <meta content="viewport-fit=cover, width=device-width, initial-scale=1" name="viewport" />
    <link rel="stylesheet" href="web-src/app.css" />
    <script>
        window.defaultSyncServer = "https://api.standardnotes.com";
--- a/packages/mobile/src/MobileWebAppContainer.tsx
+++ b/packages/mobile/src/MobileWebAppContainer.tsx
@@ -1,20 +1,13 @@
 import { MobileDevice, MobileDeviceEvent } from '@Lib/Interface'
 import { IsDev } from '@Lib/Utils'
 import { ReactNativeToWebEvent } from '@standardnotes/snjs'
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
-import { Platform, SafeAreaView } from 'react-native'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Platform } from 'react-native'
 import { WebView, WebViewMessageEvent } from 'react-native-webview'
-import { ThemeContext } from 'styled-components'
-import styled from 'styled-components/native'
 import { AppStateObserverService } from './AppStateObserverService'

 const LoggingEnabled = IsDev

-const StyledSafeAreaView = styled(SafeAreaView)`
-  flex: 1;
-  ${(props) => `background-color: ${props.theme.stylekitBackgroundColor}`}
-`
-
 export const MobileWebAppContainer = () => {
  const [identifier, setIdentifier] = useState(Math.random())

@@ -26,7 +19,6 @@ export const MobileWebAppContainer = () => {
 }

 const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => void }) => {
-  const theme = useContext(ThemeContext)
  const webViewRef = useRef<WebView>(null)
  const sourceUri = (Platform.OS === 'android' ? 'file:///android_asset/' : '') + 'Web.bundle/src/index.html'
  const stateService = useMemo(() => new AppStateObserverService(), [])
@@ -180,20 +172,18 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo

  /* eslint-disable @typescript-eslint/no-empty-function */
  return (
-    <StyledSafeAreaView theme={theme}>
-      <WebView
-        ref={webViewRef}
-        source={{ uri: sourceUri }}
-        originWhitelist={['*']}
-        onLoad={() => {}}
-        onError={(err) => console.error('An error has occurred', err)}
-        onHttpError={() => console.error('An HTTP error occurred')}
-        onMessage={onMessage}
-        allowFileAccess={true}
-        allowUniversalAccessFromFileURLs={true}
-        injectedJavaScriptBeforeContentLoaded={injectedJS}
-      />
-    </StyledSafeAreaView>
+    <WebView
+      ref={webViewRef}
+      source={{ uri: sourceUri }}
+      originWhitelist={['*']}
+      onLoad={() => {}}
+      onError={(err) => console.error('An error has occurred', err)}
+      onHttpError={() => console.error('An HTTP error occurred')}
+      onMessage={onMessage}
+      allowFileAccess={true}
+      allowUniversalAccessFromFileURLs={true}
+      injectedJavaScriptBeforeContentLoaded={injectedJS}
+    />
  )
  /* eslint-enable @typescript-eslint/no-empty-function */
 }
--- a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
+++ b/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
@@ -57,9 +57,8 @@ const PositionedPopoverContent = ({
    <Portal>
      <div
        className={classNames(
-          'absolute top-0 left-0 flex h-full w-full min-w-80 cursor-auto flex-col overflow-y-auto rounded bg-default shadow-main md:h-auto md:max-w-xs',
+          'safe-area-padding absolute top-0 left-0 flex h-full w-full min-w-80 cursor-auto flex-col overflow-y-auto rounded bg-default shadow-main md:h-auto md:max-w-xs',
          overrideZIndex ? overrideZIndex : 'z-dropdown-menu',
-          className,
        )}
        style={{
          ...styles,
@@ -71,15 +70,17 @@ const PositionedPopoverContent = ({
        }}
        data-popover={id}
      >
-        <div className="md:hidden">
-          <div className="flex items-center justify-end px-3">
-            <button className="rounded-full border border-border p-1" onClick={togglePopover}>
-              <Icon type="close" className="h-4 w-4" />
-            </button>
+        <div className={className}>
+          <div className="md:hidden">
+            <div className="flex items-center justify-end px-3">
+              <button className="rounded-full border border-border p-1" onClick={togglePopover}>
+                <Icon type="close" className="h-4 w-4" />
+              </button>
+            </div>
+            <HorizontalSeparator classes="my-2" />
          </div>
-          <HorizontalSeparator classes="my-2" />
+          {children}
        </div>
-        {children}
      </div>
    </Portal>
  )
--- a/packages/web/src/stylesheets/_main.scss
+++ b/packages/web/src/stylesheets/_main.scss
@@ -23,6 +23,15 @@
  --sn-stylekit-editor-font-family: var(--sn-stylekit-sans-serif-font);

  --reach-checkbox: 1;
+
+  --safe-area-inset-top: env(safe-area-inset-top, 0);
+  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
+  --safe-area-inset-left: env(safe-area-inset-left, 0);
+  --safe-area-inset-right: env(safe-area-inset-right, 0);
+
+  --safe-viewport-height: calc(
+    var(--viewport-height) - calc(var(--safe-area-inset-top) + var(--safe-area-inset-bottom))
+  );
 }

 html {
@@ -31,9 +40,16 @@ html {

 body {
  font-size: var(--sn-stylekit-base-font-size);
+  background-color: var(--sn-stylekit-background-color);
  color: var(--sn-stylekit-foreground-color);
 }

+body,
+.safe-area-padding {
+  padding: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom)
+    var(--safe-area-inset-left);
+}
+
 html,
 body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
--- a/packages/web/tailwind.config.js
+++ b/packages/web/tailwind.config.js
@@ -43,16 +43,16 @@ module.exports = {
        125: '31.25rem',
      },
      height: {
-        screen: 'var(--viewport-height)',
+        screen: 'var(--safe-viewport-height)',
      },
      minHeight: {
        1: '0.25rem',
        2: '0.5rem',
-        screen: 'var(--viewport-height)',
+        screen: 'var(--safe-viewport-height)',
      },
      maxHeight: {
        110: '27.5rem',
-        screen: 'var(--viewport-height)',
+        screen: 'var(--safe-viewport-height)',
      },
      zIndex: {
        'editor-content': 'var(--z-index-editor-content)',