zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-01-16 20:21:43 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add optional support for note title tooltips under note tree widget (#1120)

Browse source 
* Add support for note title tooltips under note tree widget

This change adds an option to set the 'tooltip' configuration of the
Fancytree component. This allows tooltips containing the note title to
be displayed when a hover is performed over a note title in the tree
widget.

* Revert DB Upgrade

The db upgrade is reverted as this is not required for options.

* Simplify boolean option comparison

With this change, the existing 'is(key)' method is used to perform
tooltip enable option boolean comparison.

* Display tooltip only on center-pane overlap - Experimental

With this change, a straight-forward method to detect HTML element
overlap has been identified (source:
https://gist.github.com/jtsternberg/c272d7de5b967cec2d3d). It is now
possible to detect whether the center-pane element overlaps with the
Fancytree node title-bar. Using this approach we now have a rough
implementation which only displays a note-title tooltip when there is a
center-pane overlap.

At this stage, this change is experimental and the following needs to be
further addressed,
 - Register the 'mouseenter' event handler in an appropriate place. The
   current placement of this event handler is only for testing.
 - This change is now enabled by default. It needs to be seen whether it
   would still make sense to disable it via an option.

* Remove option to set tooltip

With this change, the tooltip options menu item has been removed as it
becomes relevant to have this feature enabled by default.

* Revert further changes related to the options menu

Further changes are rolled back which was earlier related to the tooltip
options setting. Some of these were missed in the previous commit.

* Remove debug logging

Remove debug logging and unnecessary line breaks.

* Move note-title tooltip handler under note_tree.js

With this change, we move the definition for the note-title tooltip
handler inside 'note_tree.js'. Registration is done inside
'side_pane_toggles.js' as we would need the handler to detect the
'center-pane' element first before detecting collisions.
This commit is contained in:
Shon Ramamurthy 2020-06-22 19:58:58 +00:00 committed by GitHub
parent e1c2573778
commit d03d3603d2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/public/app/widgets/note_tree.js
View file

@ -1319,3 +1319,45 @@ export default class NoteTreeWidget extends TabAwareWidget {
noteCreateService.duplicateNote(node.data.noteId, branch.parentNoteId);
}
}
export function setupNoteTitleTooltip() {
// Source - https://gist.github.com/jtsternberg/c272d7de5b967cec2d3d
var is_colliding = function( $div1, $div2 ) {
// Div 1 data
var d1_offset = $div1.offset();
var d1_height = $div1.outerHeight( true );
var d1_width = $div1.outerWidth( true );
var d1_distance_from_top = d1_offset.top + d1_height;
var d1_distance_from_left = d1_offset.left + d1_width;
// Div 2 data
var d2_offset = $div2.offset();
var d2_height = $div2.outerHeight( true );
var d2_width = $div2.outerWidth( true );
var d2_distance_from_top = d2_offset.top + d2_height;
var d2_distance_from_left = d2_offset.left + d2_width;
var not_colliding = ( d1_distance_from_top < d2_offset.top
|| d1_offset.top > d2_distance_from_top
|| d1_distance_from_left < d2_offset.left
|| d1_offset.left > d2_distance_from_left );
// Return whether it IS colliding
return ! not_colliding;
};
// Detects if there is a collision between the note-title and the
// center-pane element
let centerPane = document.getElementById("center-pane");
$(document).on("mouseenter", "span",
function(e) {
if (e.currentTarget.className === 'fancytree-title') {
if(is_colliding($(centerPane), $(e.currentTarget))) {
e.currentTarget.title = e.currentTarget.innerText;
} else {
e.currentTarget.title = "";
}
}
}
);
}

3
src/public/app/widgets/side_pane_toggles.js
View file

@ -1,6 +1,7 @@
import options from "../services/options.js";
import splitService from "../services/split.js";
import BasicWidget from "./basic_widget.js";
import { setupNoteTitleTooltip } from './note_tree.js'
const TPL = `
<div class="hide-in-zen-mode">
@ -70,5 +71,7 @@ export default class SidePaneToggles extends BasicWidget {
this.toggleSidebar('right', options.is('rightPaneVisible'));
splitService.setupSplit(this.paneVisible.left, this.paneVisible.right);
setupNoteTitleTooltip();
}
}