ios status bar padding works

cashubtc · Dec 26, 2024 · b9724be · b9724be
1 parent a131c97
commit b9724be
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 1 deletion.
diff --git a/android/app/capacitor.build.gradle b/android/app/capacitor.build.gradle
@@ -11,6 +11,7 @@ apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
     implementation project(':capacitor-clipboard')
     implementation project(':capacitor-haptics')
+    implementation project(':capacitor-plugin-safe-area')
 
 }
 

diff --git a/android/capacitor.settings.gradle b/android/capacitor.settings.gradle
@@ -7,3 +7,6 @@ project(':capacitor-clipboard').projectDir = new File('../node_modules/@capacito
 
 include ':capacitor-haptics'
 project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/haptics/android')
+
+include ':capacitor-plugin-safe-area'
+project(':capacitor-plugin-safe-area').projectDir = new File('../node_modules/capacitor-plugin-safe-area/android')
diff --git a/ios/App/Podfile b/ios/App/Podfile
@@ -13,6 +13,7 @@ def capacitor_pods
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorClipboard', :path => '../../node_modules/@capacitor/clipboard'
   pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
+  pod 'CapacitorPluginSafeArea', :path => '../../node_modules/capacitor-plugin-safe-area'
 end
 
 target 'App' do

diff --git a/ios/App/Podfile.lock b/ios/App/Podfile.lock
@@ -6,12 +6,15 @@ PODS:
   - CapacitorCordova (6.0.0)
   - CapacitorHaptics (6.0.2):
     - Capacitor
+  - CapacitorPluginSafeArea (3.0.4):
+    - Capacitor
 
 DEPENDENCIES:
   - "Capacitor (from `../../node_modules/@capacitor/ios`)"
   - "CapacitorClipboard (from `../../node_modules/@capacitor/clipboard`)"
   - "CapacitorCordova (from `../../node_modules/@capacitor/ios`)"
   - "CapacitorHaptics (from `../../node_modules/@capacitor/haptics`)"
+  - CapacitorPluginSafeArea (from `../../node_modules/capacitor-plugin-safe-area`)
 
 EXTERNAL SOURCES:
   Capacitor:
@@ -22,13 +25,16 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/@capacitor/ios"
   CapacitorHaptics:
     :path: "../../node_modules/@capacitor/haptics"
+  CapacitorPluginSafeArea:
+    :path: "../../node_modules/capacitor-plugin-safe-area"
 
 SPEC CHECKSUMS:
   Capacitor: 559d073c4ca6c27f8e7002c807eea94c3ba435a9
   CapacitorClipboard: 55e0a514f1e97b1409d533266c119dcbff3e78c3
   CapacitorCordova: 8c4bfdf69368512e85b1d8b724dd7546abeb30af
   CapacitorHaptics: b53409aaca1203f79c6d0eb3ed5de40556339518
+  CapacitorPluginSafeArea: 237b6023aa7c3c1d4b245c12f73ae02e55093a50
 
-PODFILE CHECKSUM: 76c1648fb6ed5cd9fba3d90514994da94e1cde2d
+PODFILE CHECKSUM: fc2fb6bcae9257aa9abd8d6c141005bce765fe5c
 
 COCOAPODS: 1.16.2
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "@vueuse/core": "^10.9.0",
     "axios": "^1.6.8",
     "bech32": "^2.0.0",
+    "capacitor-plugin-safe-area": "^3.0.4",
     "core-js": "^3.37.0",
     "date-fns": "^3.6.0",
     "light-bolt11-decoder": "^3.1.1",

diff --git a/src/boot/base.js b/src/boot/base.js
@@ -1,6 +1,7 @@
 import { copyToClipboard } from "quasar";
 import { useUiStore } from "stores/ui";
 import { Clipboard } from "@capacitor/clipboard";
+import { SafeArea } from "capacitor-plugin-safe-area";
 
 window.LOCALE = "en";
 // window.EventHub = new Vue();
@@ -217,5 +218,28 @@ window.windowMixin = {
     } else {
       this.changeColor("monochrome");
     }
+
+    // only for iOS
+    if (window.Capacitor && Capacitor.getPlatform() === "ios") {
+      SafeArea.getStatusBarHeight().then(({ statusBarHeight }) => {
+        document.documentElement.style.setProperty(
+          `--safe-area-inset-top`,
+          `${statusBarHeight}px`
+        );
+      });
+
+      SafeArea.removeAllListeners();
+
+      // when safe-area changed
+      SafeArea.addListener("safeAreaChanged", (data) => {
+        const { insets } = data;
+        for (const [key, value] of Object.entries(insets)) {
+          document.documentElement.style.setProperty(
+            `--safe-area-inset-${key}`,
+            `${value}px`
+          );
+        }
+      });
+    }
   },
 };
diff --git a/src/css/app.scss b/src/css/app.scss
@@ -5,6 +5,17 @@ body {
   overscroll-behavior-y: contain;
 }
 
+body,
+#q-app,
+.q-drawer,
+.q-layout,
+.q-header,
+.q-dialog__inner > div,
+.q-notification {
+  margin-top: var(--safe-area-inset-top);
+  // margin-top: 100px; // for testing
+}
+
 .q-dialog__inner > div {
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;