From 1d6e3af9aa6a4dba8607d3b91497a7d2cb6b6de9 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 16 Jan 2025 15:48:56 +0200 Subject: [PATCH 1/7] fix(mobile): position of editing toolbar --- .../app/widgets/ribbon_widgets/classic_editor_toolbar.js | 2 +- src/public/app/widgets/type_widgets/editable_text.js | 9 +-------- src/public/stylesheets/style.css | 2 ++ 3 files changed, 4 insertions(+), 9 deletions(-) diff --git a/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js b/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js index 25f402842..3f9152c1b 100644 --- a/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js +++ b/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js @@ -31,7 +31,7 @@ const TPL = `\ align-items: flex-end; position: absolute; left: 0; - bottom: 0; + bottom: calc(var(--tab-bar-height) + var(--launcher-pane-height) + var(--mobile-bottom-offset)); right: 0; overflow-x: auto; z-index: 500; diff --git a/src/public/app/widgets/type_widgets/editable_text.js b/src/public/app/widgets/type_widgets/editable_text.js index b22b8cdb2..f38c12db1 100644 --- a/src/public/app/widgets/type_widgets/editable_text.js +++ b/src/public/app/widgets/type_widgets/editable_text.js @@ -230,14 +230,7 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget { $classicToolbarWidget[0].appendChild(editor.ui.view.toolbar.element); if (utils.isMobile()) { - this.$editor.on("focus", (e) => { - $classicToolbarWidget.addClass("visible"); - }); - - // Hide the formatting toolbar - this.$editor.on("focusout", (e) => { - this.$editor[0].focus(); - }); + $classicToolbarWidget.addClass("visible"); } } diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index f2f928ee8..ac1ac6408 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -45,6 +45,8 @@ body { --native-titlebar-foreground: var(--main-text-color); --native-titlebar-darwin-x-offset: 10; --native-titlebar-darwin-y-offset: 12; + --launcher-pane-height: 53px; + --tab-bar-height: 40px; } body.mobile .desktop-only { From 0cab891d2e152e90482084c9dbfbfdb1b171fc92 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 16 Jan 2025 15:51:58 +0200 Subject: [PATCH 2/7] chore(client/ts): port classic_editor_toolbar --- ...ditor_toolbar.js => classic_editor_toolbar.ts} | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) rename src/public/app/widgets/ribbon_widgets/{classic_editor_toolbar.js => classic_editor_toolbar.ts} (88%) diff --git a/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js b/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.ts similarity index 88% rename from src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js rename to src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.ts index 3f9152c1b..c22036fc4 100644 --- a/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js +++ b/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.ts @@ -64,6 +64,9 @@ const TPL = `\ * 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 { + + private observer: MutationObserver; + constructor() { super(); this.observer = new MutationObserver((e) => this.#onDropdownStateChanged(e)); @@ -83,7 +86,7 @@ export default class ClassicEditorToolbar extends NoteContextAwareWidget { 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()); // 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. @@ -95,13 +98,13 @@ export default class ClassicEditorToolbar extends NoteContextAwareWidget { } } - #onDropdownStateChanged(e) { - const dropdownActive = e.map((e) => e.target.ariaExpanded === "true").reduce((acc, e) => acc && e); + #onDropdownStateChanged(e: MutationRecord[]) { + const dropdownActive = e.map((e) => (e.target as any).ariaExpanded === "true").reduce((acc, e) => acc && e); this.$widget[0].classList.toggle("dropdown-active", dropdownActive); } #adjustPosition() { - let bottom = window.innerHeight - window.visualViewport.height; + let bottom = window.innerHeight - (window.visualViewport?.height || 0); if (bottom === 0) { // The keyboard is not visible, align it to the launcher bar instead. @@ -125,11 +128,11 @@ export default class ClassicEditorToolbar extends NoteContextAwareWidget { return false; } - if (this.note.type !== "text") { + if (!this.note || this.note.type !== "text") { return false; } - if (await this.noteContext.isReadOnly()) { + if (await this.noteContext?.isReadOnly()) { return false; } From 6caddc80047ffe499646b6fe8ebb6c82767f4646 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 16 Jan 2025 16:09:11 +0200 Subject: [PATCH 3/7] fix(mobile): position of editing toolbar on tablet mode --- .../ribbon_widgets/classic_editor_toolbar.ts | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.ts b/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.ts index c22036fc4..ab866713b 100644 --- a/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.ts +++ b/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.ts @@ -31,13 +31,25 @@ const TPL = `\ align-items: flex-end; position: absolute; left: 0; - bottom: calc(var(--tab-bar-height) + var(--launcher-pane-height) + var(--mobile-bottom-offset)); right: 0; overflow-x: auto; z-index: 500; user-select: none; } + @media (max-width: 991px) { + body.mobile .classic-toolbar-widget.visible { + bottom: calc(var(--tab-bar-height) + var(--launcher-pane-height) + var(--mobile-bottom-offset)); + } + } + + @media (min-width: 991px) { + body.mobile .classic-toolbar-widget.visible { + bottom: 0; + left: 25%; + } + } + body.mobile .classic-toolbar-widget.dropdown-active { height: 50vh; } From 6f2538a07066910043032f766b1ffe577f3852c3 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 16 Jan 2025 16:14:37 +0200 Subject: [PATCH 4/7] feat(mobile): hide editing toolbar on non-text note --- .../app/widgets/ribbon_widgets/classic_editor_toolbar.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.ts b/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.ts index ab866713b..43c277b39 100644 --- a/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.ts +++ b/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.ts @@ -150,4 +150,11 @@ export default class ClassicEditorToolbar extends NoteContextAwareWidget { return true; } + + async refreshWithNote() { + if (utils.isMobile()) { + this.toggleExt(await this.#shouldDisplay()); + } + } + } From 706b011b23144f70b107378151d65e0d4ae25e4e Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 16 Jan 2025 16:29:51 +0200 Subject: [PATCH 5/7] feat(mobile): enforce classic editor --- src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.ts | 2 +- src/public/app/widgets/type_widgets/editable_text.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.ts b/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.ts index 43c277b39..60c59e5d6 100644 --- a/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.ts +++ b/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.ts @@ -136,7 +136,7 @@ export default class ClassicEditorToolbar extends NoteContextAwareWidget { } async #shouldDisplay() { - if (options.get("textNoteEditorType") !== "ckeditor-classic") { + if (utils.isDesktop() && options.get("textNoteEditorType") !== "ckeditor-classic") { return false; } diff --git a/src/public/app/widgets/type_widgets/editable_text.js b/src/public/app/widgets/type_widgets/editable_text.js index f38c12db1..02bf42347 100644 --- a/src/public/app/widgets/type_widgets/editable_text.js +++ b/src/public/app/widgets/type_widgets/editable_text.js @@ -136,7 +136,7 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget { async initEditor() { await libraryLoader.requireLibrary(libraryLoader.CKEDITOR); - const isClassicEditor = options.get("textNoteEditorType") === "ckeditor-classic"; + const isClassicEditor = utils.isMobile() || options.get("textNoteEditorType") === "ckeditor-classic"; const editorClass = isClassicEditor ? CKEditor.DecoupledEditor : CKEditor.BalloonEditor; const codeBlockLanguages = buildListOfLanguages(); From 187ef60350a8cbb425546e580701e5baede14763 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 16 Jan 2025 16:32:47 +0200 Subject: [PATCH 6/7] feat(mobile): disable overscroll for toolbar --- src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.ts b/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.ts index 60c59e5d6..1c6e7bc8a 100644 --- a/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.ts +++ b/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.ts @@ -33,6 +33,7 @@ const TPL = `\ left: 0; right: 0; overflow-x: auto; + overscroll-behavior: none; z-index: 500; user-select: none; } From 5ca876ca621dddbd64ac678b8ddacb742987911a Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 16 Jan 2025 16:41:52 +0200 Subject: [PATCH 7/7] fix(mobile): force grouping in editing toolbar --- src/public/app/widgets/type_widgets/editable_text.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/public/app/widgets/type_widgets/editable_text.js b/src/public/app/widgets/type_widgets/editable_text.js index 02bf42347..d3f5f6975 100644 --- a/src/public/app/widgets/type_widgets/editable_text.js +++ b/src/public/app/widgets/type_widgets/editable_text.js @@ -186,7 +186,7 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget { const extraOpts = {}; if (isClassicEditor) { extraOpts.toolbar = { - shouldNotGroupWhenFull: options.get("textNoteEditorMultilineToolbar") === "true" + shouldNotGroupWhenFull: utils.isDesktop() && options.get("textNoteEditorMultilineToolbar") === "true" }; }