Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-29 11:02:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(mobile): relayout would sometimes hide the context menu

Browse Source
This commit is contained in:
Elian Doran 2024-12-28 10:22:01 +02:00
parent 08ad954e9c
commit a2c652f108
No known key found for this signature in database
3 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/public/app/menus/context_menu.ts
View File

@ -32,25 +32,24 @@ export type MenuHandler<T extends CommandNames> = (item: MenuCommandItem<T>, e:
class ContextMenu { class ContextMenu {
private $widget!: JQuery<HTMLElement>; private $widget: JQuery<HTMLElement>;
private $cover: JQuery<HTMLElement>;
private dateContextMenuOpenedMs: number; private dateContextMenuOpenedMs: number;
private options?: ContextMenuOptions<any>; private options?: ContextMenuOptions<any>;
private isMobile: boolean; private isMobile: boolean;
constructor() { constructor() {
this.$widget = $("#context-menu-container"); this.$widget = $("#context-menu-container");
this.$cover = $("#context-menu-cover");
this.$widget.addClass("dropend"); this.$widget.addClass("dropend");
this.dateContextMenuOpenedMs = 0; this.dateContextMenuOpenedMs = 0;
this.isMobile = utils.isMobile(); this.isMobile = utils.isMobile();
$(document).on('click', (e) => { if (this.isMobile) {
if (this.isMobile && $(e.target).closest("#context-menu-container").length) { this.$cover.on("click", this.hide);
return; } else {
} $(document).on('click', (e) => this.hide);
}
console.log("Hide from ", e.target);
this.hide();
});
} }
async show<T extends CommandNames>(options: ContextMenuOptions<T>) { async show<T extends CommandNames>(options: ContextMenuOptions<T>) {
@ -62,6 +61,8 @@ class ContextMenu {
await this.hide(); await this.hide();
} }
this.$cover.addClass("show");
this.$widget.empty(); this.$widget.empty();
this.addItems(this.$widget, options.items); this.addItems(this.$widget, options.items);
@ -223,7 +224,8 @@ class ContextMenu {
// see https://github.com/zadam/trilium/pull/3805 for details // see https://github.com/zadam/trilium/pull/3805 for details
await timeout(100); await timeout(100);
this.$widget.removeClass("show"); this.$widget.removeClass("show");
this.$widget.hide() this.$cover.removeClass("show");
this.$widget.hide();
} }
} }
} }

10
src/public/stylesheets/style.css
View File

@ -954,6 +954,16 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
cursor: row-resize; cursor: row-resize;
} }
#context-menu-cover.show {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.1);
}
#context-menu-container { #context-menu-container {
max-height: 100vh; max-height: 100vh;
/* !!! Cannot set overflow: auto, submenus will break !!! */ /* !!! Cannot set overflow: auto, submenus will break !!! */

2
src/views/mobile.ejs
View File

@ -100,6 +100,8 @@
<div id="toast-container" class="d-flex flex-column justify-content-center align-items-center"></div> <div id="toast-container" class="d-flex flex-column justify-content-center align-items-center"></div>
<div id="context-menu-cover"></div>
<div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div> <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
<script type="text/javascript"> <script type="text/javascript">