From 80a663efe728eff6ef20f979a7f730acbdbb3a5b Mon Sep 17 00:00:00 2001 From: L-Sun Date: Thu, 3 Apr 2025 01:51:57 +0000 Subject: [PATCH] fix(ios): adjust bootom padding of body when keyboard toolbar existed (#11410) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Close [BS-2919](https://linear.app/affine-design/issue/BS-2919/【移动端】ios-页面底部点几，页面定位有问题，光标和浮层重叠，并且看不到新添加的-block) Close [BS-2918](https://linear.app/affine-design/issue/BS-2918/【移动端】ios-添加标题无法展示对应-block，滑动页面也无效，光标位置也不对) ## Changes - Fixed body padding calculation when keyboard toolbar is present - Removed redundant position controller logic and simplified the implementation --- .../keyboard-toolbar/keyboard-tool-panel.ts | 2 +- .../keyboard-toolbar/keyboard-toolbar.ts | 2 +- .../keyboard-toolbar/position-controller.ts | 18 +----------------- .../src/widgets/keyboard-toolbar/styles.ts | 4 +--- .../mobile/components/app-tabs/styles.css.ts | 2 +- .../services/virtual-keyboard.ts | 19 ++++++++++++++++++- .../core/src/mobile/styles/mobile.css.ts | 19 ++++++++++--------- .../core/src/mobile/styles/variables.css.ts | 7 +++++++ 8 files changed, 40 insertions(+), 33 deletions(-) create mode 100644 packages/frontend/core/src/mobile/styles/variables.css.ts diff --git a/blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/keyboard-tool-panel.ts b/blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/keyboard-tool-panel.ts index d27d9bd890..ea1495f14b 100644 --- a/blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/keyboard-tool-panel.ts +++ b/blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/keyboard-tool-panel.ts @@ -95,6 +95,6 @@ export class AffineKeyboardToolPanel extends SignalWatcher( @property({ attribute: false }) accessor context!: KeyboardToolbarContext; - @property({ type: Number }) + @property({ attribute: false }) accessor height = 0; } diff --git a/blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/keyboard-toolbar.ts b/blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/keyboard-toolbar.ts index 6f67b0e055..45e646cdea 100644 --- a/blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/keyboard-toolbar.ts +++ b/blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/keyboard-toolbar.ts @@ -315,7 +315,7 @@ export class AffineKeyboardToolbar extends SignalWatcher( `; } diff --git a/blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/position-controller.ts b/blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/position-controller.ts index ae3105708b..bf8a7337d3 100644 --- a/blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/position-controller.ts +++ b/blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/position-controller.ts @@ -4,8 +4,6 @@ import type { BlockStdScope, ShadowlessElement } from '@blocksuite/std'; import { effect, type Signal } from '@preact/signals-core'; import type { ReactiveController, ReactiveControllerHost } from 'lit'; -import { TOOLBAR_HEIGHT } from './styles'; - /** * This controller is used to control the keyboard toolbar position */ @@ -25,7 +23,7 @@ export class PositionController implements ReactiveController { } hostConnected() { - const { keyboard, panelOpened } = this.host; + const { keyboard } = this.host; this._disposables.add( effect(() => { @@ -36,20 +34,6 @@ export class PositionController implements ReactiveController { ); this.host.style.bottom = '0px'; - this._disposables.add( - effect(() => { - if (keyboard.visible$.value) { - document.body.style.paddingBottom = `${keyboard.height$.value + TOOLBAR_HEIGHT}px`; - } else if (panelOpened) { - document.body.style.paddingBottom = `${this.host.panelHeight$.peek() + TOOLBAR_HEIGHT}px`; - } else { - document.body.style.paddingBottom = ''; - } - }) - ); - this._disposables.add(() => { - document.body.style.paddingBottom = ''; - }); } hostDisconnected() { diff --git a/blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/styles.ts b/blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/styles.ts index 858ed9d9f7..774bbed2b3 100644 --- a/blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/styles.ts +++ b/blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/styles.ts @@ -2,8 +2,6 @@ import { scrollbarStyle } from '@blocksuite/affine-shared/styles'; import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme'; import { css } from 'lit'; -export const TOOLBAR_HEIGHT = 46; - export const keyboardToolbarStyles = css` affine-keyboard-toolbar { position: fixed; @@ -13,7 +11,7 @@ export const keyboardToolbarStyles = css` .keyboard-toolbar { width: 100%; - height: ${TOOLBAR_HEIGHT}px; + height: 46px; display: inline-flex; align-items: center; padding: 0px 8px; diff --git a/packages/frontend/core/src/mobile/components/app-tabs/styles.css.ts b/packages/frontend/core/src/mobile/components/app-tabs/styles.css.ts index 26f676fd7f..b0ef3c7c34 100644 --- a/packages/frontend/core/src/mobile/components/app-tabs/styles.css.ts +++ b/packages/frontend/core/src/mobile/components/app-tabs/styles.css.ts @@ -1,7 +1,7 @@ import { cssVarV2 } from '@toeverything/theme/v2'; import { createVar, style } from '@vanilla-extract/css'; -import { globalVars } from '../../styles/mobile.css'; +import { globalVars } from '../../styles/variables.css'; export const appTabsBackground = createVar('appTabsBackground'); diff --git a/packages/frontend/core/src/mobile/modules/virtual-keyboard/services/virtual-keyboard.ts b/packages/frontend/core/src/mobile/modules/virtual-keyboard/services/virtual-keyboard.ts index 356d6381ca..4eaf5ade15 100644 --- a/packages/frontend/core/src/mobile/modules/virtual-keyboard/services/virtual-keyboard.ts +++ b/packages/frontend/core/src/mobile/modules/virtual-keyboard/services/virtual-keyboard.ts @@ -1,10 +1,12 @@ import { LiveData, Service } from '@toeverything/infra'; +import { setElementVars } from '@vanilla-extract/dynamic'; +import { distinctUntilChanged, scan } from 'rxjs'; +import { globalVars } from '../../../styles/variables.css'; import type { VirtualKeyboardProvider } from '../providers/virtual-keyboard'; export class VirtualKeyboardService extends Service { readonly visible$ = new LiveData(false); - readonly height$ = new LiveData(0); constructor( @@ -21,5 +23,20 @@ export class VirtualKeyboardService extends Service { this.height$.next(info.height); }) ); + + // record the static keyboard height to css var + const subscription = this.height$ + .pipe( + scan((lastHeight, currentHeight) => + this.visible$.value ? currentHeight : lastHeight + ), + distinctUntilChanged() + ) + .subscribe(height => { + setElementVars(document.body, { + [globalVars.appKeyboardHeight]: `${height}px`, + }); + }); + this.disposables.push(() => subscription.unsubscribe()); } } diff --git a/packages/frontend/core/src/mobile/styles/mobile.css.ts b/packages/frontend/core/src/mobile/styles/mobile.css.ts index 7beba3e019..83b46ca1b4 100644 --- a/packages/frontend/core/src/mobile/styles/mobile.css.ts +++ b/packages/frontend/core/src/mobile/styles/mobile.css.ts @@ -1,10 +1,7 @@ import { cssVarV2 } from '@toeverything/theme/v2'; -import { createVar, globalStyle } from '@vanilla-extract/css'; +import { globalStyle } from '@vanilla-extract/css'; -export const globalVars = { - appTabHeight: createVar('appTabHeight'), - appTabSafeArea: createVar('appTabSafeArea'), -}; +import { globalVars } from './variables.css'; globalStyle(':root', { vars: { @@ -20,15 +17,19 @@ globalStyle('body', { minHeight: '100dvh', overflowY: 'unset', }); -globalStyle('body:has(> #app-tabs)', { +globalStyle('body:has(>#app-tabs):not(:has(affine-keyboard-toolbar))', { paddingBottom: globalVars.appTabSafeArea, }); -globalStyle('body:has(#app-tabs) affine-keyboard-tool-panel', { - paddingBottom: `calc(${globalVars.appTabHeight} + env(safe-area-inset-bottom) + 8px)`, +globalStyle('body:has(affine-keyboard-toolbar)', { + paddingBottom: `calc(${globalVars.appKeyboardHeight} + 46px)`, }); -globalStyle('body:has(#app-tabs) edgeless-toolbar-widget', { +globalStyle('body:has(>#app-tabs) affine-keyboard-tool-panel', { + paddingBottom: `calc(${globalVars.appTabSafeArea} + 8px)`, +}); +globalStyle('body:has(>#app-tabs) edgeless-toolbar-widget', { bottom: globalVars.appTabSafeArea, }); + globalStyle('html', { height: '100dvh', overflowY: 'auto', diff --git a/packages/frontend/core/src/mobile/styles/variables.css.ts b/packages/frontend/core/src/mobile/styles/variables.css.ts new file mode 100644 index 0000000000..730611570f --- /dev/null +++ b/packages/frontend/core/src/mobile/styles/variables.css.ts @@ -0,0 +1,7 @@ +import { createVar } from '@vanilla-extract/css'; + +export const globalVars = { + appKeyboardHeight: createVar('appKeyboardHeight'), + appTabHeight: createVar('appTabHeight'), + appTabSafeArea: createVar('appTabSafeArea'), +};