Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-09-01 12:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(mobile): dropdowns for editing toolbar

Browse Source
This commit is contained in:
Elian Doran 2025-01-05 03:06:52 +02:00
parent 955542a991
commit c6e4d4882a
No known key found for this signature in database
2 changed files with 31 additions and 13 deletions
Show Stats 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

@ -33,16 +33,24 @@ const TPL = `\
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
height: 10vh;
overflow-x: auto; overflow-x: auto;
z-index: 500; z-index: 500;
user-select: none; user-select: none;
} }
body.mobile .classic-toolbar-widget.dropdown-active {
height: 50vh;
}
body.mobile .classic-toolbar-widget .ck.ck-toolbar { body.mobile .classic-toolbar-widget .ck.ck-toolbar {
position: absolute; position: absolute;
background-color: var(--main-background-color); background-color: var(--main-background-color);
} }
body.mobile .classic-toolbar-widget .ck.ck-dropdown__panel {
bottom: 100% !important;
top: unset !important;
}
</style> </style>
`; `;
@ -56,6 +64,12 @@ const TPL = `\
* The ribbon item is active by default for text notes, as long as they are not in read-only mode. * The ribbon item is active by default for text notes, as long as they are not in read-only mode.
*/ */
export default class ClassicEditorToolbar extends NoteContextAwareWidget { export default class ClassicEditorToolbar extends NoteContextAwareWidget {
constructor() {
super();
this.observer = new MutationObserver((e) => this.#onDropdownStateChanged(e));
}
get name() { get name() {
return "classicEditor"; return "classicEditor";
} }
@ -69,11 +83,26 @@ export default class ClassicEditorToolbar extends NoteContextAwareWidget {
this.contentSized(); this.contentSized();
if (utils.isMobile()) { if (utils.isMobile()) {
// The virtual keyboard obscures the editing toolbar so we have to reposition by calculating the height of the keyboard.
window.visualViewport.addEventListener("resize", () => this.#adjustPosition()); window.visualViewport.addEventListener("resize", () => this.#adjustPosition());
window.addEventListener("scroll", () => this.#adjustPosition()); window.addEventListener("scroll", () => this.#adjustPosition());
// 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.
this.observer.disconnect();
this.observer.observe(this.$widget[0], {
attributeFilter: [ "aria-expanded" ],
subtree: true
});
} }
} }
#onDropdownStateChanged(e) {
const dropdownActive = e
.map((e) => e.target.ariaExpanded === "true")
.reduce((acc, e) => acc && e);
this.$widget[0].classList.toggle("dropdown-active", dropdownActive);
}
#adjustPosition() { #adjustPosition() {
const bottom = window.innerHeight - window.visualViewport.height; const bottom = window.innerHeight - window.visualViewport.height;
this.$widget.css("bottom", `${bottom}px`); this.$widget.css("bottom", `${bottom}px`);

13
src/public/app/widgets/type_widgets/editable_text.js
View File

@ -230,18 +230,7 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
// Hide the formatting toolbar // Hide the formatting toolbar
this.$editor.on("focusout", (e) => { this.$editor.on("focusout", (e) => {
setTimeout(() => { this.$editor[0].focus();
if (document.activeElement === this.$editor[0]) {
// Editor has been refocused.
return;
}
if ($classicToolbarWidget[0].contains(document.activeElement)) {
return;
}
$classicToolbarWidget.removeClass("visible");
}, 100);
}); });
} }
} }