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

fix(mobile): bring back scrolling to toolbar

Browse Source
This commit is contained in:
Elian Doran 2025-04-10 14:07:44 +03:00
parent 0f2bc529bf
commit e23b2f3ddd
No known key found for this signature in database
1 changed files with 32 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/public/app/widgets/ribbon_widgets/mobile_editor_toolbar.ts
View File

@ -1,54 +1,47 @@
import NoteContextAwareWidget from "../note_context_aware_widget.js"; import NoteContextAwareWidget from "../note_context_aware_widget.js";
const TPL = /*html*/`\ const TPL = /*html*/`\
<div class="classic-toolbar-widget"></div> <div class="classic-toolbar-outer-container">
<div class="classic-toolbar-widget"></div>
</div>
<style> <style>
.classic-toolbar-outer-container.visible {
height: 38px;
background-color: var(--main-background-color);
position: relative;
overflow: visible;
flex-shrink: 0;
}
.classic-toolbar-widget { .classic-toolbar-widget {
--ck-color-toolbar-background: transparent; position: absolute;
--ck-color-button-default-background: transparent; bottom: 0;
--ck-color-button-default-disabled-background: transparent; left: 0;
min-height: 39px; right: 0;
height: 38px;
overflow: scroll;
display: flex;
align-items: flex-end;
user-select: none;
}
.classic-toolbar-widget.dropdown-active {
height: 50vh;
} }
.classic-toolbar-widget .ck.ck-toolbar { .classic-toolbar-widget .ck.ck-toolbar {
--ck-color-toolbar-background: transparent;
--ck-color-button-default-background: transparent;
--ck-color-button-default-disabled-background: transparent;
position: absolute;
background-color: transparent;
border: none; border: none;
} }
.classic-toolbar-widget .ck.ck-button.ck-disabled { .classic-toolbar-widget .ck.ck-button.ck-disabled {
opacity: 0.3; opacity: 0.3;
} }
body.mobile .classic-toolbar-widget {
display: none;
}
body.mobile .classic-toolbar-widget.visible {
display: flex;
align-items: flex-end;
overflow-x: auto;
overscroll-behavior: none;
z-index: 500;
user-select: none;
}
body.mobile .classic-toolbar-widget.visible::-webkit-scrollbar {
height: 3px;
}
body.mobile .classic-toolbar-widget.dropdown-active {
height: 50vh;
}
body.mobile .classic-toolbar-widget .ck.ck-toolbar {
position: absolute;
background-color: var(--main-background-color);
}
body.mobile .classic-toolbar-widget .ck.ck-dropdown__panel {
bottom: 100% !important;
top: unset !important;
}
</style> </style>
`; `;
@ -64,6 +57,7 @@ const TPL = /*html*/`\
export default class MobileEditorToolbar extends NoteContextAwareWidget { export default class MobileEditorToolbar extends NoteContextAwareWidget {
private observer: MutationObserver; private observer: MutationObserver;
private $innerWrapper!: JQuery<HTMLElement>;
constructor() { constructor() {
super(); super();
@ -76,6 +70,7 @@ export default class MobileEditorToolbar extends NoteContextAwareWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.$innerWrapper = this.$widget.find(".classic-toolbar-widget");
this.contentSized(); this.contentSized();
// Observe when a dropdown is expanded to apply a style that allows the dropdown to be visible, since we can't have the element both visible and the toolbar scrollable. // Observe when a dropdown is expanded to apply a style that allows the dropdown to be visible, since we can't have the element both visible and the toolbar scrollable.
@ -88,7 +83,7 @@ export default class MobileEditorToolbar extends NoteContextAwareWidget {
#onDropdownStateChanged(e: MutationRecord[]) { #onDropdownStateChanged(e: MutationRecord[]) {
const dropdownActive = e.map((e) => (e.target as any).ariaExpanded === "true").reduce((acc, e) => acc && e); const dropdownActive = e.map((e) => (e.target as any).ariaExpanded === "true").reduce((acc, e) => acc && e);
this.$widget[0].classList.toggle("dropdown-active", dropdownActive); this.$innerWrapper.toggleClass("dropdown-active", dropdownActive);
} }
async #shouldDisplay() { async #shouldDisplay() {