Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-26 07:46:30 +01:00
Code Issues Packages Projects Releases Activity

feat(mobile): display classic toolbar above keyboard

Browse Source
This commit is contained in:
Elian Doran
2024-12-28 14:58:33 +02:00
parent b168d68f93
commit 62696a4e0a
1 changed files with 26 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js
View File

@@ -1,5 +1,6 @@
import { t } from "../../services/i18n.js";
import options from "../../services/options.js";
import utils from "../../services/utils.js";
import NoteContextAwareWidget from "../note_context_aware_widget.js";
const TPL = `\
@@ -8,7 +9,7 @@ const TPL = `\
<style>
.classic-toolbar-widget {
--ck-color-toolbar-background: transparent;
--ck-color-button-default-background: transparent;
--ck-color-button-default-background: transparent;
--ck-color-button-default-disabled-background: transparent;
min-height: 39px;
}
@@ -22,8 +23,12 @@ const TPL = `\
}
body.mobile .classic-toolbar-widget {
position: relative;
position: fixed;
left: 0;
bottom: var(--launcher-pane-size);
right: 0;
overflow-x: auto;
background: var(--main-background-color);
}
body.mobile .classic-toolbar-widget .ck.ck-toolbar {
@@ -34,10 +39,10 @@ const TPL = `\
/**
* Handles the editing toolbar when the CKEditor is in decoupled mode.
*
*
* <p>
* This toolbar is only enabled if the user has selected the classic CKEditor.
*
*
* <p>
* The ribbon item is active by default for text notes, as long as they are not in read-only mode.
*/
@@ -53,6 +58,22 @@ export default class ClassicEditorToolbar extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
if (utils.isMobile()) {
let originalHeight = window.visualViewport.height;
let originalBottom = this.$widget[0].style.bottom;
window.visualViewport.addEventListener("resize", () => {
const keyboardSize = originalHeight - window.visualViewport.height;
const bottom = Math.max(keyboardSize, originalBottom);
if (keyboardSize !== 0) {
this.$widget.css("bottom", `${bottom}px`);``
} else {
const style = window.getComputedStyle(this.$widget[0]);
this.$widget.css("bottom", style.getPropertyValue("--launcher-pane-size"));
}
});
}
}
async getTitle() {
@@ -80,4 +101,4 @@ export default class ClassicEditorToolbar extends NoteContextAwareWidget {
return true;
}
}
}