mirror of
https://github.com/zadam/trilium.git
synced 2025-06-06 18:08:33 +02:00
fix tree focusing issues
This commit is contained in:
parent
e7330c1104
commit
3c5db844ba
@ -64,6 +64,72 @@ const TPL = `
|
|||||||
width: 320px;
|
width: 320px;
|
||||||
border-radius: 10px 0 10px 10px;
|
border-radius: 10px 0 10px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ul.fancytree-container {
|
||||||
|
outline: none !important;
|
||||||
|
background-color: inherit !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fancytree-custom-icon {
|
||||||
|
font-size: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.fancytree-title {
|
||||||
|
color: inherit !important;
|
||||||
|
background: inherit !important;
|
||||||
|
outline: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.fancytree-node.protected > span.fancytree-custom-icon {
|
||||||
|
filter: drop-shadow(2px 2px 2px var(--main-text-color));
|
||||||
|
}
|
||||||
|
|
||||||
|
span.fancytree-node.multiple-parents .fancytree-title::after {
|
||||||
|
content: " *"
|
||||||
|
}
|
||||||
|
|
||||||
|
span.fancytree-node.fancytree-active-clone:not(.fancytree-active) .fancytree-title {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* first nesting level has lower left padding to avoid extra left padding. Other levels are not affected */
|
||||||
|
.ui-fancytree > li > ul {
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.fancytree-active .fancytree-title {
|
||||||
|
font-weight: bold;
|
||||||
|
border-color: var(--main-border-color) !important;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.fancytree-active:not(.fancytree-focused) .fancytree-title {
|
||||||
|
border-style: dashed !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.fancytree-focused .fancytree-title, span.fancytree-focused.fancytree-selected .fancytree-title {
|
||||||
|
color: var(--active-item-text-color) !important;
|
||||||
|
background-color: var(--active-item-background-color) !important;
|
||||||
|
border-color: var(--main-background-color) !important; /* invisible border */
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.fancytree-selected .fancytree-title {
|
||||||
|
color: var(--hover-item-text-color) !important;
|
||||||
|
background-color: var(--hover-item-background-color) !important;
|
||||||
|
border-color: var(--main-background-color) !important; /* invisible border */
|
||||||
|
border-radius: 5px;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.fancytree-node:hover span.fancytree-title {
|
||||||
|
border-color: var(--main-border-color) !important;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.fancytree-node.archived {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<button class="btn btn-sm icon-button bx bx-cog tree-settings-button" title="Tree settings"></button>
|
<button class="btn btn-sm icon-button bx bx-cog tree-settings-button" title="Tree settings"></button>
|
||||||
@ -206,6 +272,7 @@ export default class NoteTreeWidget extends TabAwareWidget {
|
|||||||
const treeData = [await this.prepareRootNode()];
|
const treeData = [await this.prepareRootNode()];
|
||||||
|
|
||||||
this.$tree.fancytree({
|
this.$tree.fancytree({
|
||||||
|
titlesTabbable: true,
|
||||||
autoScroll: true,
|
autoScroll: true,
|
||||||
keyboard: false, // we takover keyboard handling in the hotkeys plugin
|
keyboard: false, // we takover keyboard handling in the hotkeys plugin
|
||||||
extensions: utils.isMobile() ? ["dnd5", "clones"] : ["hotkeys", "dnd5", "clones"],
|
extensions: utils.isMobile() ? ["dnd5", "clones"] : ["hotkeys", "dnd5", "clones"],
|
||||||
@ -651,17 +718,17 @@ export default class NoteTreeWidget extends TabAwareWidget {
|
|||||||
const activeContext = appContext.tabManager.getActiveTabContext();
|
const activeContext = appContext.tabManager.getActiveTabContext();
|
||||||
|
|
||||||
if (activeContext && activeContext.notePath) {
|
if (activeContext && activeContext.notePath) {
|
||||||
this.tree.setFocus();
|
this.tree.setFocus(true);
|
||||||
|
|
||||||
const node = await this.expandToNote(activeContext.notePath);
|
const node = await this.expandToNote(activeContext.notePath);
|
||||||
|
|
||||||
await node.makeVisible({scrollIntoView: true});
|
await node.makeVisible({scrollIntoView: true});
|
||||||
node.setFocus();
|
node.setFocus(true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @return {FancytreeNode} */
|
/** @return {FancytreeNode} */
|
||||||
async getNodeFromPath(notePath, expand = false, expandOpts = {}) {
|
async getNodeFromPath(notePath, expand = false) {
|
||||||
utils.assertArguments(notePath);
|
utils.assertArguments(notePath);
|
||||||
|
|
||||||
const hoistedNoteId = hoistedNoteService.getHoistedNoteId();
|
const hoistedNoteId = hoistedNoteService.getHoistedNoteId();
|
||||||
@ -690,7 +757,12 @@ export default class NoteTreeWidget extends TabAwareWidget {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (expand) {
|
if (expand) {
|
||||||
await parentNode.setExpanded(true, expandOpts);
|
await parentNode.setExpanded(true);
|
||||||
|
|
||||||
|
// although previous line should set the expanded status, it seems to happen asynchronously
|
||||||
|
// so we need to make sure it is set properly before calling updateNode which uses this flag
|
||||||
|
const branch = treeCache.getBranch(parentNode.data.branchId);
|
||||||
|
branch.isExpanded = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.updateNode(parentNode);
|
this.updateNode(parentNode);
|
||||||
@ -730,8 +802,8 @@ export default class NoteTreeWidget extends TabAwareWidget {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/** @return {FancytreeNode} */
|
/** @return {FancytreeNode} */
|
||||||
async expandToNote(notePath, expandOpts) {
|
async expandToNote(notePath) {
|
||||||
return this.getNodeFromPath(notePath, true, expandOpts);
|
return this.getNodeFromPath(notePath, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
updateNode(node) {
|
updateNode(node) {
|
||||||
@ -746,7 +818,11 @@ export default class NoteTreeWidget extends TabAwareWidget {
|
|||||||
node.icon = this.getIcon(note, isFolder);
|
node.icon = this.getIcon(note, isFolder);
|
||||||
node.extraClasses = this.getExtraClasses(note);
|
node.extraClasses = this.getExtraClasses(note);
|
||||||
node.title = (branch.prefix ? (branch.prefix + " - ") : "") + note.title;
|
node.title = (branch.prefix ? (branch.prefix + " - ") : "") + note.title;
|
||||||
|
|
||||||
|
if (node.isExpanded() !== branch.isExpanded) {
|
||||||
node.setExpanded(branch.isExpanded, {noEvents: true});
|
node.setExpanded(branch.isExpanded, {noEvents: true});
|
||||||
|
}
|
||||||
|
|
||||||
node.renderTitle();
|
node.renderTitle();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -822,6 +898,7 @@ export default class NoteTreeWidget extends TabAwareWidget {
|
|||||||
|
|
||||||
async entitiesReloadedEvent({loadResults}) {
|
async entitiesReloadedEvent({loadResults}) {
|
||||||
const activeNode = this.getActiveNode();
|
const activeNode = this.getActiveNode();
|
||||||
|
const activeNodeFocused = activeNode ? activeNode.hasFocus() : false;
|
||||||
const nextNode = activeNode ? (activeNode.getNextSibling() || activeNode.getPrevSibling() || activeNode.getParent()) : null;
|
const nextNode = activeNode ? (activeNode.getNextSibling() || activeNode.getPrevSibling() || activeNode.getParent()) : null;
|
||||||
const activeNotePath = activeNode ? treeService.getNotePath(activeNode) : null;
|
const activeNotePath = activeNode ? treeService.getNotePath(activeNode) : null;
|
||||||
const nextNotePath = nextNode ? treeService.getNotePath(nextNode) : null;
|
const nextNotePath = nextNode ? treeService.getNotePath(nextNode) : null;
|
||||||
@ -951,12 +1028,16 @@ export default class NoteTreeWidget extends TabAwareWidget {
|
|||||||
node = await this.expandToNote(nextNotePath);
|
node = await this.expandToNote(nextNotePath);
|
||||||
|
|
||||||
if (node) {
|
if (node) {
|
||||||
this.tree.setFocus();
|
|
||||||
node.setFocus(true);
|
|
||||||
|
|
||||||
await appContext.tabManager.getActiveTabContext().setNote(nextNotePath);
|
await appContext.tabManager.getActiveTabContext().setNote(nextNotePath);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const newActiveNode = this.getActiveNode();
|
||||||
|
|
||||||
|
// return focus if the previously active node was also focused
|
||||||
|
if (newActiveNode && activeNodeFocused) {
|
||||||
|
newActiveNode.setFocus(true);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -113,71 +113,6 @@ span.fancytree-node.muted { opacity: 0.6; }
|
|||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.fancytree-container {
|
|
||||||
outline: none !important;
|
|
||||||
background-color: inherit !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fancytree-custom-icon {
|
|
||||||
font-size: 1.3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.fancytree-title {
|
|
||||||
color: inherit !important;
|
|
||||||
background: inherit !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.fancytree-node.protected > span.fancytree-custom-icon {
|
|
||||||
filter: drop-shadow(2px 2px 2px var(--main-text-color));
|
|
||||||
}
|
|
||||||
|
|
||||||
span.fancytree-node.multiple-parents .fancytree-title::after {
|
|
||||||
content: " *"
|
|
||||||
}
|
|
||||||
|
|
||||||
span.fancytree-node.fancytree-active-clone:not(.fancytree-active) .fancytree-title {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* first nesting level has lower left padding to avoid extra left padding. Other levels are not affected */
|
|
||||||
.ui-fancytree > li > ul {
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.fancytree-active .fancytree-title {
|
|
||||||
font-weight: bold;
|
|
||||||
border-color: var(--main-border-color) !important;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.fancytree-active:not(.fancytree-focused) .fancytree-title {
|
|
||||||
border-style: dashed !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.fancytree-focused .fancytree-title, span.fancytree-focused.fancytree-selected .fancytree-title {
|
|
||||||
color: var(--active-item-text-color) !important;
|
|
||||||
background-color: var(--active-item-background-color) !important;
|
|
||||||
border-color: var(--main-background-color) !important; /* invisible border */
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.fancytree-selected .fancytree-title {
|
|
||||||
color: var(--hover-item-text-color) !important;
|
|
||||||
background-color: var(--hover-item-background-color) !important;
|
|
||||||
border-color: var(--main-background-color) !important; /* invisible border */
|
|
||||||
border-radius: 5px;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.fancytree-node:hover span.fancytree-title {
|
|
||||||
border-color: var(--main-border-color) !important;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.fancytree-node.archived {
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui-autocomplete {
|
.ui-autocomplete {
|
||||||
max-height: 300px;
|
max-height: 300px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
@ -125,6 +125,7 @@ async function setExpanded(req) {
|
|||||||
if (branchId !== 'root') {
|
if (branchId !== 'root') {
|
||||||
await sql.execute("UPDATE branches SET isExpanded = ? WHERE branchId = ?", [expanded, branchId]);
|
await sql.execute("UPDATE branches SET isExpanded = ? WHERE branchId = ?", [expanded, branchId]);
|
||||||
// we don't sync expanded label
|
// we don't sync expanded label
|
||||||
|
// also this does not trigger updates to the frontend, this would trigger too many reloads
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -32,7 +32,7 @@ const DEFAULT_KEYBOARD_ACTIONS = [
|
|||||||
{
|
{
|
||||||
actionName: "scrollToActiveNote",
|
actionName: "scrollToActiveNote",
|
||||||
defaultShortcuts: ["CommandOrControl+."],
|
defaultShortcuts: ["CommandOrControl+."],
|
||||||
scope: "window" // FIXME - how do we find what note tree should be updated?
|
scope: "window"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
actionName: "searchNotes",
|
actionName: "searchNotes",
|
||||||
@ -55,7 +55,7 @@ const DEFAULT_KEYBOARD_ACTIONS = [
|
|||||||
actionName: "collapseTree",
|
actionName: "collapseTree",
|
||||||
defaultShortcuts: ["Alt+C"],
|
defaultShortcuts: ["Alt+C"],
|
||||||
description: "Collapses the complete note tree",
|
description: "Collapses the complete note tree",
|
||||||
scope: "note-tree"
|
scope: "window"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
actionName: "collapseSubtree",
|
actionName: "collapseSubtree",
|
||||||
|
Loading…
x
Reference in New Issue
Block a user