mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-25 10:22:55 +08:00
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:
@@ -95,6 +95,6 @@ export class AffineKeyboardToolPanel extends SignalWatcher(
|
||||
@property({ attribute: false })
|
||||
accessor context!: KeyboardToolbarContext;
|
||||
|
||||
@property({ type: Number })
|
||||
@property({ attribute: false })
|
||||
accessor height = 0;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user