"go to selected note" button now has also note tooltip

This commit is contained in:
azivner 2018-11-14 19:33:48 +01:00
parent 19a07c699c
commit 8a3f508825
3 changed files with 14 additions and 13 deletions

View File

@ -2,7 +2,8 @@ import server from "./server.js";
import noteDetailService from "./note_detail.js"; import noteDetailService from "./note_detail.js";
import treeService from './tree.js'; import treeService from './tree.js';
const SELECTED_PATH_KEY = "selected-path"; // this key needs to have this value so it's hit by the tooltip
const SELECTED_PATH_KEY = "data-note-path";
async function autocompleteSource(term, cb) { async function autocompleteSource(term, cb) {
const result = await server.get('autocomplete' const result = await server.get('autocomplete'
@ -36,17 +37,16 @@ function initNoteAutocomplete($el, options) {
$el.addClass("note-autocomplete-input"); $el.addClass("note-autocomplete-input");
const $clearTextButton = $("<span>") const $clearTextButton = $("<a>")
.addClass("input-group-text input-clearer-button jam jam-close") .addClass("input-group-text input-clearer-button jam jam-close")
.prop("title", "Clear text field"); .prop("title", "Clear text field");
const $showRecentNotesButton = $("<span>") const $showRecentNotesButton = $("<a>")
.addClass("input-group-text show-recent-notes-button jam jam-clock") .addClass("input-group-text show-recent-notes-button jam jam-clock")
.prop("title", "Show recent notes"); .prop("title", "Show recent notes");
const $goToSelectedNoteButton = $("<span>") const $goToSelectedNoteButton = $("<a>")
.addClass("input-group-text go-to-selected-note-button jam jam-arrow-right") .addClass("input-group-text go-to-selected-note-button jam jam-arrow-right");
.prop("title", "Go to selected note");
const $sideButtons = $("<div>") const $sideButtons = $("<div>")
.addClass("input-group-append") .addClass("input-group-append")
@ -105,19 +105,20 @@ $.fn.getSelectedPath = function() {
return ""; return "";
} }
else { else {
return $(this).data(SELECTED_PATH_KEY); return $(this).attr(SELECTED_PATH_KEY);
} }
}; };
$.fn.setSelectedPath = function(path) { $.fn.setSelectedPath = function(path) {
path = path || ""; path = path || "";
$(this).data(SELECTED_PATH_KEY, path); $(this).attr(SELECTED_PATH_KEY, path);
$(this) $(this)
.closest(".input-group") .closest(".input-group")
.find(".go-to-selected-note-button") .find(".go-to-selected-note-button")
.toggleClass("disabled", !path.trim()); .toggleClass("disabled", !path.trim())
.attr(SELECTED_PATH_KEY, path); // we also set attr here so tooltip can be displayed
}; };
ko.bindingHandlers.noteAutocomplete = { ko.bindingHandlers.noteAutocomplete = {

View File

@ -7,7 +7,7 @@ function setupTooltip() {
$(document).on("mouseenter", "a", async function() { $(document).on("mouseenter", "a", async function() {
const $link = $(this); const $link = $(this);
if ($link.hasClass("no-tooltip-preview")) { if ($link.hasClass("no-tooltip-preview") || $link.hasClass("disabled")) {
return; return;
} }
@ -54,7 +54,7 @@ function setupTooltip() {
}); });
// close any tooltip after click, this fixes the problem that sometimes tooltips remained on the screen // close any tooltip after click, this fixes the problem that sometimes tooltips remained on the screen
$(document).on("click", () => $('[rel=tooltip]').tooltip("hide")); $(document).on("click", () => $('.tooltip').remove());
} }
async function renderTooltip(note, attributes) { async function renderTooltip(note, attributes) {

View File

@ -483,9 +483,9 @@ html.theme-dark body {
padding-right: 3px; padding-right: 3px;
} }
.go-to-selected-note-button.disabled { .go-to-selected-note-button.disabled, .go-to-selected-note-button.disabled:hover {
cursor: inherit; cursor: inherit;
color: #ccc; color: #ccc !important;
} }
.note-autocomplete-input { .note-autocomplete-input {