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

fix(mobile): display of context menu on iOS

Browse Source
This commit is contained in:
Elian Doran 2024-12-28 10:57:03 +02:00
parent 12eff0fef5
commit bd10babd1b
No known key found for this signature in database
2 changed files with 76 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,6 +53,7 @@ class ContextMenu {
} }
async show<T extends CommandNames>(options: ContextMenuOptions<T>) { async show<T extends CommandNames>(options: ContextMenuOptions<T>) {
console.warn(new Error().stack);
this.options = options; this.options = options;
if (this.$widget.hasClass("show")) { if (this.$widget.hasClass("show")) {

125
src/public/app/widgets/note_tree.js
View File

@ -32,14 +32,14 @@ const TPL = `
position: relative; position: relative;
min-height: 0; min-height: 0;
} }
.tree { .tree {
height: 100%; height: 100%;
overflow: auto; overflow: auto;
padding-bottom: 35px; padding-bottom: 35px;
padding-top: 5px; padding-top: 5px;
} }
.tree-actions { .tree-actions {
background-color: var(--launcher-pane-background-color); background-color: var(--launcher-pane-background-color);
z-index: 100; z-index: 100;
@ -52,7 +52,7 @@ const TPL = `
border-radius: 7px; border-radius: 7px;
border: 1px solid var(--main-border-color); border: 1px solid var(--main-border-color);
} }
button.tree-floating-button { button.tree-floating-button {
margin: 1px; margin: 1px;
font-size: 1.5em; font-size: 1.5em;
@ -63,76 +63,76 @@ const TPL = `
border-radius: var(--button-border-radius); border-radius: var(--button-border-radius);
border: 1px solid transparent; border: 1px solid transparent;
} }
button.tree-floating-button:hover { button.tree-floating-button:hover {
border: 1px solid var(--button-border-color); border: 1px solid var(--button-border-color);
} }
.collapse-tree-button { .collapse-tree-button {
right: 100px; right: 100px;
} }
.scroll-to-active-note-button { .scroll-to-active-note-button {
right: 55px; right: 55px;
} }
.tree-settings-button { .tree-settings-button {
right: 10px; right: 10px;
} }
.tree-settings-popup { .tree-settings-popup {
display: none; display: none;
position: absolute; position: absolute;
background-color: var(--accented-background-color); background-color: var(--accented-background-color);
border: 1px solid var(--main-border-color); border: 1px solid var(--main-border-color);
padding: 20px; padding: 20px;
z-index: 1000; z-index: 1000;
width: 340px; width: 340px;
border-radius: 10px; border-radius: 10px;
} }
.tree .hidden-node-is-hidden { .tree .hidden-node-is-hidden {
display: none; display: none;
} }
</style> </style>
<div class="tree"></div> <div class="tree"></div>
<div class="tree-actions"> <div class="tree-actions">
<button class="tree-floating-button bx bx-layer-minus collapse-tree-button" <button class="tree-floating-button bx bx-layer-minus collapse-tree-button"
title="${t("note_tree.collapse-title")}" title="${t("note_tree.collapse-title")}"
data-trigger-command="collapseTree"></button> data-trigger-command="collapseTree"></button>
<button class="tree-floating-button bx bx-crosshair scroll-to-active-note-button" <button class="tree-floating-button bx bx-crosshair scroll-to-active-note-button"
title="${t("note_tree.scroll-active-title")}" title="${t("note_tree.scroll-active-title")}"
data-trigger-command="scrollToActiveNote"></button> data-trigger-command="scrollToActiveNote"></button>
<button class="tree-floating-button bx bxs-tree tree-settings-button" <button class="tree-floating-button bx bxs-tree tree-settings-button"
title="${t("note_tree.tree-settings-title")}"></button> title="${t("note_tree.tree-settings-title")}"></button>
</div> </div>
<div class="tree-settings-popup"> <div class="tree-settings-popup">
<h4>${t("note_tree.tree-settings-title")}</h4> <h4>${t("note_tree.tree-settings-title")}</h4>
<div class="form-check"> <div class="form-check">
<label class="form-check-label"> <label class="form-check-label">
<input class="form-check-input hide-archived-notes" type="checkbox" value=""> <input class="form-check-input hide-archived-notes" type="checkbox" value="">
${t("note_tree.hide-archived-notes")} ${t("note_tree.hide-archived-notes")}
</label> </label>
</div> </div>
<div class="form-check"> <div class="form-check">
<label class="form-check-label"> <label class="form-check-label">
<input class="form-check-input auto-collapse-note-tree" type="checkbox" value=""> <input class="form-check-input auto-collapse-note-tree" type="checkbox" value="">
${t("note_tree.automatically-collapse-notes")} ${t("note_tree.automatically-collapse-notes")}
<span class="bx bx-info-circle" <span class="bx bx-info-circle"
title="${t("note_tree.automatically-collapse-notes-title")}"></span> title="${t("note_tree.automatically-collapse-notes-title")}"></span>
</label> </label>
</div> </div>
<br/> <br/>
<button class="btn btn-sm btn-primary save-tree-settings-button" type="submit">${t("note_tree.save-changes")}</button> <button class="btn btn-sm btn-primary save-tree-settings-button" type="submit">${t("note_tree.save-changes")}</button>
</div> </div>
</div> </div>
@ -601,7 +601,32 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
} }
}); });
if (!utils.isMobile()) { const isMobile = utils.isMobile();
if (isMobile) {
let showTimeout;
this.$tree.on("touchstart", ".fancytree-node", (e) => {
touchStart = new Date().getTime();
showTimeout = setTimeout(() => {
this.showContextMenu(e);
}, 300)
});
this.$tree.on("touchmove", ".fancytree-node", (e) => {
clearTimeout(showTimeout);
});
this.$tree.on("touchend", ".fancytree-node", (e) => {
clearTimeout(showTimeout);
e.preventDefault();
});
} else {
this.$tree.on('contextmenu', '.fancytree-node', e => {
this.showContextMenu(e);
return false; // blocks default browser right click menu
});
this.getHotKeys().then(hotKeys => { this.getHotKeys().then(hotKeys => {
for (const key in hotKeys) { for (const key in hotKeys) {
const handler = hotKeys[key]; const handler = hotKeys[key];
@ -615,28 +640,28 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
}); });
} }
this.$tree.on('contextmenu', '.fancytree-node', e => { let touchStart;
const node = $.ui.fancytree.getNode(e);
const note = froca.getNoteFromCache(node.data.noteId);
if (note.isLaunchBarConfig()) {
import("../menus/launcher_context_menu.js").then(({default: LauncherContextMenu}) => {
const launcherContextMenu = new LauncherContextMenu(this, node);
launcherContextMenu.show(e);
});
} else {
import("../menus/tree_context_menu.js").then(({default: TreeContextMenu}) => {
const treeContextMenu = new TreeContextMenu(this, node);
treeContextMenu.show(e);
});
}
return false; // blocks default browser right click menu
});
this.tree = $.ui.fancytree.getTree(this.$tree); this.tree = $.ui.fancytree.getTree(this.$tree);
} }
showContextMenu(e) {
const node = $.ui.fancytree.getNode(e);
const note = froca.getNoteFromCache(node.data.noteId);
if (note.isLaunchBarConfig()) {
import("../menus/launcher_context_menu.js").then(({default: LauncherContextMenu}) => {
const launcherContextMenu = new LauncherContextMenu(this, node);
launcherContextMenu.show(e);
});
} else {
import("../menus/tree_context_menu.js").then(({default: TreeContextMenu}) => {
const treeContextMenu = new TreeContextMenu(this, node);
treeContextMenu.show(e);
});
}
}
prepareRootNode() { prepareRootNode() {
return this.prepareNode(froca.getBranch('none_root')); return this.prepareNode(froca.getBranch('none_root'));
} }