@electerm/electerm-react 5.1.23 → 5.1.25

package/client/components/layout/layout.jsx

@@ -43,9 +43,10 @@ export default auto(function Layout (props) {
       rightPanelWidth,
       resizeTrigger,
       inActiveTerminal,
-      shortcutBarVisible
+      shortcutBarVisible,
+      shortcutBarKbOffset
     } = props.store
-    const h = height - footerHeight - (inActiveTerminal && pinnedQuickCommandBar ? quickCommandBoxHeight : 0) - (shortcutBarVisible ? shortcutBarHeight : 0) + resizeTrigger
+    const h = height - footerHeight - (inActiveTerminal && pinnedQuickCommandBar ? quickCommandBoxHeight : 0) - (shortcutBarVisible ? shortcutBarHeight + shortcutBarKbOffset : 0) + resizeTrigger
     const l = pinned ? leftSideBarWidth + leftSidePanelWidth : leftSideBarWidth
     const r = rightPanelVisible && rightPanelPinned ? rightPanelWidth : 0
     return {
@@ -68,14 +69,15 @@ export default auto(function Layout (props) {
       rightPanelPinned,
       rightPanelWidth,
       pinned,
-      shortcutBarVisible
+      shortcutBarVisible,
+      shortcutBarKbOffset
     } = props.store
     const l = pinned ? leftSidePanelWidth : 0
     const r = rightPanelPinned && rightPanelVisible ? rightPanelWidth : 0
     // account for the far-left icon bar (sidebarWidth - 1px border on desktop;
     // 0 when the bar is hidden on mobile)
     const w = width - l - r - (leftSideBarWidth > 0 ? leftSideBarWidth - 1 : 0)
-    const h = height - footerHeight - (pinnedQuickCommandBar ? quickCommandBoxHeight : 0) - (shortcutBarVisible ? shortcutBarHeight : 0)
+    const h = height - footerHeight - (pinnedQuickCommandBar ? quickCommandBoxHeight : 0) - (shortcutBarVisible ? shortcutBarHeight + shortcutBarKbOffset : 0)
     return layoutAlg(layout, w, h)
   }
   const layoutSize = calcLayoutStyle()

package/client/components/terminal/shortcut-bar-entry.jsx

@@ -31,7 +31,9 @@ const ShortcutBar = lazy(() => import('./shortcut-bar'))
 // minimum height (px) the visual viewport must lose for us to treat it as
 // "the soft keyboard is now covering part of the screen". A soft keyboard is
 // typically ≥150px; a browser address-bar show/hide is well under this.
-const KEYBOARD_HEIGHT = 120
+// Shared with shortcut-bar.jsx, which uses it to decide how far to lift the
+// bar above a keyboard that overlays the page (iOS / HarmonyOS).
+export const KEYBOARD_MIN = 120
 
 // kept as a coarse capability fallback for engines without visualViewport.
 // Modern Chromium (Electron) always exposes window.visualViewport, so this is
@@ -87,7 +89,7 @@ export default function ShortcutBarEntry (props) {
       // ignore viewport changes that also changed width (rotation / split) —
       // a keyboard changes height only.
       const sameWidth = Math.abs(vv.width - baseline.width) < 20
-      if (sameWidth && baseline.height - vv.height > KEYBOARD_HEIGHT) {
+      if (sameWidth && baseline.height - vv.height > KEYBOARD_MIN) {
         setKeyboardSeen(true)
         // The user is focused in a terminal with the keyboard up — they need
         // the bar right now. Set visibility here rather than waiting for the

package/client/components/terminal/shortcut-bar.jsx

@@ -10,18 +10,22 @@
  *   - first (fixed) button collapses the bar
  *   - second (fixed) button opens the edit modal (shortcut-bar-edit.jsx)
  *   - tapping a shortcut sends it to the active terminal via runQuickCommand
+ *   - while the system input panel overlays the page without resizing the
+ *     layout viewport (iOS / HarmonyOS do this, Android resizes instead), the
+ *     bar lifts itself above the panel — see the visualViewport effect below
  *
  * Only loaded on touch devices — see shortcut-bar-entry.jsx.
  * Data + persistence live in shortcut-bar-defs.js.
  */
 
 import { auto } from 'manate/react'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { DownOutlined, EditOutlined } from '@ant-design/icons'
 import { refs } from '../common/ref'
 import { shortcutBarHeight } from '../../common/constants'
 import ShortcutBarEdit from './shortcut-bar-edit'
+import { KEYBOARD_MIN } from './shortcut-bar-entry'
 import { candidates, loadActive, saveActive, ESC } from './shortcut-bar-defs'
 import './shortcut-bar.styl'
 
@@ -89,6 +93,55 @@ function ShortcutBar (props) {
     }
   }, [])
 
+  // On Android the soft keyboard resizes the layout viewport, so a
+  // `position: fixed; bottom: 0` bar is pushed up automatically. iOS and
+  // HarmonyOS instead keep the layout viewport full-size and let the keyboard
+  // overlay it — there the bar sits underneath the keyboard. visualViewport
+  // always tracks the *visible* area on every platform, so the gap between it
+  // and the layout viewport is exactly the covered height: lift the bar by
+  // that much so it rides just above the keyboard.
+  const [kbOffset, setKbOffset] = useState(0)
+  const kbBaselineRef = useRef({ height: 0, width: 0 })
+
+  useEffect(() => {
+    const vv = window.visualViewport
+    if (!vv) {
+      return
+    }
+    // while no keyboard is up, layout viewport == visual viewport (offsetTop
+    // 0); keep refreshing the baseline so a later comparison is accurate.
+    function sync () {
+      if (vv.offsetTop <= 1) {
+        kbBaselineRef.current = { height: window.innerHeight, width: vv.width }
+      }
+      const { height, width } = kbBaselineRef.current
+      // a keyboard changes height only — ignore rotation / pinch-zoom, which
+      // change width too.
+      const sameWidth = Math.abs(vv.width - width) < 20
+      const covered = sameWidth ? height - vv.height - vv.offsetTop : 0
+      setKbOffset(covered > KEYBOARD_MIN ? Math.ceil(covered) : 0)
+    }
+    sync()
+    vv.addEventListener('resize', sync)
+    vv.addEventListener('scroll', sync)
+    window.addEventListener('resize', sync)
+    return () => {
+      vv.removeEventListener('resize', sync)
+      vv.removeEventListener('scroll', sync)
+      window.removeEventListener('resize', sync)
+    }
+  }, [])
+
+  // keep the offset in a CSS var consumed by shortcut-bar.styl, and expose the
+  // lifted height so layout.jsx can shrink the terminal accordingly.
+  useEffect(() => {
+    document.documentElement.style.setProperty(
+      '--shortcut-bar-kb-offset',
+      kbOffset ? kbOffset + 'px' : '0px'
+    )
+    store.shortcutBarKbOffset = kbOffset
+  }, [kbOffset])
+
   // reserve layout space + lift the footer while the bar is shown.
   // expose the bar height as a CSS var so the .styl + footer-lift rule stay
   // in sync with the shortcutBarHeight constant consumed by layout.jsx.
@@ -135,7 +188,11 @@ function ShortcutBar (props) {
   }
 
   return createPortal(
-    <div className='shortcut-bar' role='toolbar'>
+    <div
+      className='shortcut-bar'
+      role='toolbar'
+      style={kbOffset ? { bottom: kbOffset + 'px' } : undefined}
+    >
       <div className='shortcut-bar-fixed'>
         <button
           type='button'

package/client/components/terminal/shortcut-bar.styl

@@ -73,10 +73,12 @@
     color var(--text-light)
 
 // while the bar is visible, lift the footer + reserve space so nothing is
-// covered (terminal area is shrunk by layout.jsx via store.shortcutBarVisible)
+// covered (terminal area is shrunk by layout.jsx via store.shortcutBarVisible;
+// --shortcut-bar-kb-offset raises both bar + footer above a page-overlaying
+// system input panel on iOS / HarmonyOS)
 .shortcut-bar-on
   .main-footer
-    bottom var(--shortcut-bar-h, 44px)
+    bottom calc(var(--shortcut-bar-h, 44px) + var(--shortcut-bar-kb-offset, 0px))
 
 // --- edit modal -----------------------------------------------------------
 

package/client/store/init-state.js

@@ -169,6 +169,9 @@ export default () => {
 
     // touch-only shortcut bar (see components/terminal/shortcut-bar-entry.jsx)
     shortcutBarVisible: false,
+    // px the bar is lifted above a page-overlaying system input panel
+    // (iOS / HarmonyOS) — see shortcut-bar.jsx
+    shortcutBarKbOffset: 0,
 
     // sidebar
     openedSideBar: ls.getItem(openedSidebarKey) || '',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "5.1.23",
+  "version": "5.1.25",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",