fix(ios): adjust bootom padding of body when keyboard toolbar existed (#11410)

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
This commit is contained in:
L-Sun
2025-04-03 01:51:57 +00:00
parent 5109ceccec
commit 80a663efe7
8 changed files with 40 additions and 33 deletions

View File

@@ -95,6 +95,6 @@ export class AffineKeyboardToolPanel extends SignalWatcher(
@property({ attribute: false })
accessor context!: KeyboardToolbarContext;
@property({ type: Number })
@property({ attribute: false })
accessor height = 0;
}

View File

@@ -315,7 +315,7 @@ export class AffineKeyboardToolbar extends SignalWatcher(
<affine-keyboard-tool-panel
.config=${this._currentPanelConfig}
.context=${this._context}
height=${this.panelHeight$.value}
.height=${this.panelHeight$.value}
></affine-keyboard-tool-panel>
`;
}

View File

@@ -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() {

View File

@@ -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;