gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-03-01 14:22:32 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

redesign of drag & drop, separation of active, focused and active notes in the tree, fixes #565

Browse Source
This commit is contained in:
zadam 2019-06-10 21:47:08 +02:00
parent 8ab081a3fd
commit 27659805f6
6 changed files with 48 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/public/javascripts/services/drag_and_drop.js
View File

@ -10,23 +10,14 @@ const dragAndDropSetup = {
return false;
}
if (!data.originalEvent.shiftKey) {
// keep existing selection only if CTRL key is pressed
for (const selectedNode of treeService.getSelectedNodes()) {
selectedNode.setSelected(false);
selectedNode.renderTitle();
}
}
node.setSelected(true);
// this is for dragging notes into relation map
// we allow to drag only one note at a time because it multi-drag conflicts with multiple single drags
// in UX and single drag is probably more useful
data.dataTransfer.setData("text", JSON.stringify({
const notes = treeService.getSelectedNodes().map(node => { return {
noteId: node.data.noteId,
title: node.title
}));
}});
data.dataTransfer.setData("text", JSON.stringify(notes));
// This function MUST be defined to enable dragging for the tree.
// Return false to cancel dragging of node.

1
src/public/javascripts/services/note_detail.js
View File

@ -154,7 +154,6 @@ async function showTab(tabId) {
if (newActiveNode && newActiveNode.isVisible()) {
newActiveNode.setActive(true, {noEvents: true});
newActiveNode.setSelected(true);
}
}
}

24
src/public/javascripts/services/note_detail_relation_map.js
View File

@ -567,20 +567,30 @@ class NoteDetailRelationMap {
async dropNoteOntoRelationMapHandler(ev) {
ev.preventDefault();
const note = JSON.parse(ev.originalEvent.dataTransfer.getData("text"));
const notes = JSON.parse(ev.originalEvent.dataTransfer.getData("text"));
let {x, y} = this.getMousePosition(ev);
const exists = this.mapData.notes.some(n => n.noteId === note.noteId);
for (const note of notes) {
const exists = this.mapData.notes.some(n => n.noteId === note.noteId);
if (exists) {
await infoDialog.info(`Note "${note.title}" is already placed into the diagram`);
if (exists) {
infoService.showError(`Note "${note.title}" is already in the diagram.`);
return;
continue;
}
this.mapData.notes.push({noteId: note.noteId, x, y});
if (x > 1000) {
y += 100;
x = 0;
}
else {
x += 200;
}
}
this.mapData.notes.push({noteId: note.noteId, x, y});
this.saveData();
await this.refresh();

8
src/public/javascripts/services/tree.js
View File

@ -309,12 +309,6 @@ function clearSelectedNodes() {
for (const selectedNode of getSelectedNodes()) {
selectedNode.setSelected(false);
}
const currentNode = getActiveNode();
if (currentNode) {
currentNode.setSelected(true);
}
}
async function treeInitialized() {
@ -388,13 +382,13 @@ function initFancyTree(tree) {
if (targetType === 'title' || targetType === 'icon') {
if (event.shiftKey) {
node.setSelected(!node.isSelected());
node.setFocus(true);
}
else if (event.ctrlKey) {
noteDetailService.loadNoteDetail(node.data.noteId, { newTab: true });
}
else {
node.setActive();
node.setSelected(true);
clearSelectedNodes();
}

16
src/public/javascripts/services/tree_keybindings.js
View File

@ -43,6 +43,14 @@ const keyBindings = {
"shift+up": () => {
const node = treeService.getFocusedNode();
if (!node) {
return;
}
if (node.isActive()) {
node.setSelected(true);
}
node.navigate($.ui.keyCode.UP, false).then(() => {
const currentNode = treeService.getFocusedNode();
@ -58,6 +66,14 @@ const keyBindings = {
"shift+down": () => {
const node = treeService.getFocusedNode();
if (!node) {
return;
}
if (node.isActive()) {
node.setSelected(true);
}
node.navigate($.ui.keyCode.DOWN, false).then(() => {
const currentNode = treeService.getFocusedNode();

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

@ -188,33 +188,27 @@ span.fancytree-node.fancytree-active-clone:not(.fancytree-active) .fancytree-tit
padding-left: 5px;
}
span.fancytree-active.fancytree-focused .fancytree-title {
span.fancytree-active .fancytree-title {
font-weight: bold;
border-color: var(--main-background-color) !important; /* invisible border */
}
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-border-color) !important;
border-color: var(--main-background-color) !important; /* invisible border */
border-radius: 3px;
font-weight: bold;
}
span.fancytree-active:not(.fancytree-focused) .fancytree-title {
span.fancytree-selected .fancytree-title {
color: var(--hover-item-text-color) !important;
background-color: var(--hover-item-background-color) !important;
border-color: var(--main-border-color) !important;
border-radius: 3px;
font-weight: bold;
}
span.fancytree-selected:not(.fancytree-active) .fancytree-title {
color: var(--hover-item-text-color) !important;
background-color: var(--hover-item-background-color) !important;
border-color: var(--main-border-color) !important;
border-color: var(--main-background-color) !important; /* invisible border */
border-radius: 3px;
font-style: italic;
}
span.fancytree-node:not(.fancytree-active):hover span.fancytree-title {
color: var(--hover-item-text-color) !important;
background-color: var(--hover-item-background-color) !important;
span.fancytree-node:hover span.fancytree-title {
border-color: var(--main-border-color) !important;
border-radius: 3px;
}