gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

feat(mobile): detect presence of the virtual keyboard

Browse Source
This commit is contained in:
Elian Doran 2025-04-10 17:41:31 +03:00
parent 1aa69ba268
commit 7a1e775de2
No known key found for this signature in database
3 changed files with 33 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/public/app/layouts/desktop_layout.ts
View File

@ -121,7 +121,6 @@ export default class DesktopLayout {
return new RootContainer(true) return new RootContainer(true)
.setParent(appContext) .setParent(appContext)
.class((launcherPaneIsHorizontal ? "horizontal" : "vertical") + "-layout")
.optChild( .optChild(
fullWidthTabBar, fullWidthTabBar,
new FlexContainer("row") new FlexContainer("row")

1
src/public/app/layouts/mobile_layout.ts
View File

@ -122,7 +122,6 @@ export default class MobileLayout {
getRootWidget(appContext: typeof AppContext) { getRootWidget(appContext: typeof AppContext) {
return new RootContainer(true) return new RootContainer(true)
.setParent(appContext) .setParent(appContext)
.class("horizontal-layout")
.cssBlock(MOBILE_CSS) .cssBlock(MOBILE_CSS)
.child(new FlexContainer("column").id("mobile-sidebar-container")) .child(new FlexContainer("column").id("mobile-sidebar-container"))
.child( .child(

33
src/public/app/widgets/containers/root_container.ts
View File

@ -1,11 +1,44 @@
import utils from "../../services/utils.js";
import type BasicWidget from "../basic_widget.js"; import type BasicWidget from "../basic_widget.js";
import FlexContainer from "./flex_container.js"; import FlexContainer from "./flex_container.js";
/**
* The root container is the top-most widget/container, from which the entire layout derives.
*
* For convenience, the root container has a few class selectors that can be used to target some global state:
*
* - `#root-container.virtual-keyboard-opened`, on mobile devices if the virtual keyboard is open.
* - `#root-container.horizontal-layout`, if the current layout is horizontal.
* - `#root-container.vertical-layout`, if the current layout is horizontal.
*/
export default class RootContainer extends FlexContainer<BasicWidget> { export default class RootContainer extends FlexContainer<BasicWidget> {
private originalViewportHeight: number;
constructor(isHorizontalLayout: boolean) { constructor(isHorizontalLayout: boolean) {
super(isHorizontalLayout ? "column" : "row"); super(isHorizontalLayout ? "column" : "row");
this.id("root-widget"); this.id("root-widget");
this.css("height", "100dvh"); this.css("height", "100dvh");
this.class((isHorizontalLayout ? "horizontal" : "vertical") + "-layout");
this.originalViewportHeight = getViewportHeight();
} }
render(): JQuery<HTMLElement> {
if (utils.isMobile()) {
window.visualViewport?.addEventListener("resize", () => this.#onMobileResize());
}
return super.render();
}
#onMobileResize() {
const currentViewportHeight = getViewportHeight();
const isKeyboardOpened = (currentViewportHeight < this.originalViewportHeight);
this.$widget.toggleClass("virtual-keyboard-opened", isKeyboardOpened);
}
}
function getViewportHeight() {
return window.visualViewport?.height ?? window.innerHeight;
} }