mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-29 16:19:43 +08:00
fix(mobile): mobile keyboard padding (#15365)
#### PR Dependency Tree * **PR #15365** 👈 This tree was auto-generated by [Charcoal](https://github.com/danerwilliams/charcoal) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Bug Fixes** - Improved mobile keyboard and toolbar layout handling when the keyboard overlays or resizes app content. - Prevented incorrect extra spacing when Android applies keyboard insets directly. - Updated toolbar sizing and visibility states for smoother transitions. - **Style** - Adjusted mobile bottom spacing to account for keyboard height, safe areas, and toolbar height. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
+13
-9
@@ -45,15 +45,19 @@ export function KeyboardToolbarExtension(
|
||||
|
||||
override mounted() {
|
||||
this._disposables.add(
|
||||
affineVirtualKeyboardProvider.onChange(({ visible, height }) => {
|
||||
batch(() => {
|
||||
if (visible && this.staticHeight$.peek() !== height) {
|
||||
this.staticHeight$.value = height;
|
||||
}
|
||||
this.visible$.value = visible;
|
||||
this.height$.value = height;
|
||||
});
|
||||
})
|
||||
affineVirtualKeyboardProvider.onChange(
|
||||
({ visible, height, overlaysContent }) => {
|
||||
const layoutHeight = overlaysContent === false ? 0 : height;
|
||||
|
||||
batch(() => {
|
||||
if (visible && this.staticHeight$.peek() !== height) {
|
||||
this.staticHeight$.value = height;
|
||||
}
|
||||
this.visible$.value = visible;
|
||||
this.height$.value = layoutHeight;
|
||||
});
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
+1
@@ -3,6 +3,7 @@ import { createIdentifier } from '@toeverything/infra';
|
||||
interface VirtualKeyboardInfo {
|
||||
visible: boolean;
|
||||
height: number;
|
||||
overlaysContent?: boolean;
|
||||
}
|
||||
|
||||
type VirtualKeyboardAction = {
|
||||
|
||||
+3
-1
@@ -20,8 +20,10 @@ export class VirtualKeyboardService extends Service {
|
||||
private _observe() {
|
||||
this.disposables.push(
|
||||
this.virtualKeyboardProvider.onChange(info => {
|
||||
const layoutHeight = info.overlaysContent === false ? 0 : info.height;
|
||||
|
||||
this.visible$.next(info.visible);
|
||||
this.height$.next(info.height);
|
||||
this.height$.next(layoutHeight);
|
||||
|
||||
setElementVars(document.body, {
|
||||
[globalVars.appKeyboardHeight]: `${this.height$.value}px`,
|
||||
|
||||
@@ -22,6 +22,12 @@ globalStyle('body:has(>#app-tabs):not(:has(affine-keyboard-toolbar))', {
|
||||
paddingBottom: globalVars.appTabSafeArea,
|
||||
});
|
||||
globalStyle('body:has(affine-keyboard-toolbar)', {
|
||||
paddingBottom: `calc(${globalVars.appTabSafeArea} + 46px)`,
|
||||
});
|
||||
globalStyle('body:has(affine-keyboard-toolbar[data-keyboard-visible])', {
|
||||
paddingBottom: `calc(${globalVars.appKeyboardHeight} + 46px)`,
|
||||
});
|
||||
globalStyle('body:has(affine-keyboard-toolbar[data-panel-open])', {
|
||||
paddingBottom: `calc(${globalVars.appKeyboardStaticHeight} + 46px)`,
|
||||
});
|
||||
globalStyle('body:has(>#app-tabs) edgeless-toolbar-widget', {
|
||||
|
||||
Reference in New Issue
Block a user