mirror of
https://github.com/zadam/trilium.git
synced 2024-09-20 15:45:58 +08:00
improvements to note tooltip - include (some) notePath and attributes
This commit is contained in:
zadam
parent
8b4cf474bd
commit
0c5f842626
|
|
@ -1,29 +1,32 @@
|
|||
import ws from "./ws.js";
|
||||
import linkService from "./link.js";
|
||||
import treeCache from "./tree_cache.js";
|
||||
|
||||
function renderAttribute(attribute, $container, renderIsInheritable) {
|
||||
async function renderAttribute(attribute, renderIsInheritable) {
|
||||
const isInheritable = renderIsInheritable && attribute.isInheritable ? `(inheritable)` : '';
|
||||
const $attr = $("<span>");
|
||||
|
||||
if (attribute.type === 'label') {
|
||||
$container.append(document.createTextNode('#' + attribute.name + isInheritable));
|
||||
$attr.append(document.createTextNode('#' + attribute.name + isInheritable));
|
||||
|
||||
if (attribute.value) {
|
||||
$container.append('=');
|
||||
$container.append(document.createTextNode(formatValue(attribute.value)));
|
||||
$attr.append('=');
|
||||
$attr.append(document.createTextNode(formatValue(attribute.value)));
|
||||
}
|
||||
} else if (attribute.type === 'relation') {
|
||||
if (attribute.isAutoLink) {
|
||||
return;
|
||||
return $attr;
|
||||
}
|
||||
|
||||
// when the relation has just been created then it might not have a value
|
||||
if (attribute.value) {
|
||||
$container.append(document.createTextNode('~' + attribute.name + isInheritable + "="));
|
||||
$container.append(createNoteLink(attribute.value));
|
||||
$attr.append(document.createTextNode('~' + attribute.name + isInheritable + "="));
|
||||
$attr.append(await createNoteLink(attribute.value));
|
||||
}
|
||||
} else {
|
||||
ws.logError("Unknown attr type: " + attribute.type);
|
||||
}
|
||||
|
||||
return $attr;
|
||||
}
|
||||
|
||||
function formatValue(val) {
|
||||
|
|
@ -44,18 +47,39 @@ function formatValue(val) {
|
|||
}
|
||||
}
|
||||
|
||||
function createNoteLink(noteId) {
|
||||
const $link = $("<a>", {
|
||||
async function createNoteLink(noteId) {
|
||||
const note = await treeCache.getNote(noteId);
|
||||
|
||||
if (!note) {
|
||||
return;
|
||||
}
|
||||
|
||||
return $("<a>", {
|
||||
href: '#' + noteId,
|
||||
class: 'reference-link',
|
||||
'data-note-path': noteId
|
||||
});
|
||||
})
|
||||
.text(note.title);
|
||||
}
|
||||
|
||||
linkService.loadReferenceLinkTitle(noteId, $link);
|
||||
async function renderAttributes(attributes, renderIsInheritable) {
|
||||
const $container = $("<span>");
|
||||
|
||||
return $link;
|
||||
for (let i = 0; i < attributes.length; i++) {
|
||||
const attribute = attributes[i];
|
||||
|
||||
const $attr = await renderAttribute(attribute, renderIsInheritable);
|
||||
$container.append($attr.html()); // .html() to get only inner HTML, we don't want any spans
|
||||
|
||||
if (i < attributes.length - 1) {
|
||||
$container.append(" ");
|
||||
}
|
||||
}
|
||||
|
||||
return $container;
|
||||
}
|
||||
|
||||
export default {
|
||||
renderAttribute
|
||||
renderAttribute,
|
||||
renderAttributes
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import treeService from "./tree.js";
|
|||
import linkService from "./link.js";
|
||||
import treeCache from "./tree_cache.js";
|
||||
import utils from "./utils.js";
|
||||
import attributeRenderer from "./attribute_renderer.js";
|
||||
|
||||
function setupGlobalTooltip() {
|
||||
$(document).on("mouseenter", "a", mouseEnterHandler);
|
||||
|
|
@ -82,51 +83,16 @@ async function renderTooltip(note, noteComplement) {
|
|||
return '<div>Note has been deleted.</div>';
|
||||
}
|
||||
|
||||
const attributes = note.getAttributes();
|
||||
const someNotePath = treeService.getSomeNotePath(note);
|
||||
let content = $("<h5>").text(await treeService.getNotePathTitle(someNotePath)).prop('outerHTML');
|
||||
|
||||
let content = '';
|
||||
const attributes = note.getAttributes()
|
||||
.filter(attr => !attr.isDefinition());
|
||||
|
||||
const promoted = attributes
|
||||
.filter(attr => attr.type === 'label-definition' || attr.type === 'relation-definition')
|
||||
.filter(attr => !attr.name.startsWith("child:"))
|
||||
.filter(attr => {
|
||||
const json = attr.jsonValue;
|
||||
|
||||
return json && json.isPromoted;
|
||||
});
|
||||
|
||||
if (promoted.length > 0) {
|
||||
const $table = $("<table>").addClass("promoted-attributes-in-tooltip");
|
||||
|
||||
for (const definitionAttr of promoted) {
|
||||
const definitionType = definitionAttr.type;
|
||||
const valueType = definitionType.substr(0, definitionType.length - 11);
|
||||
|
||||
let valueAttrs = attributes.filter(el => el.name === definitionAttr.name && el.type === valueType);
|
||||
|
||||
for (const valueAttr of valueAttrs) {
|
||||
if (!valueAttr.value) {
|
||||
continue;
|
||||
}
|
||||
|
||||
let $value = "";
|
||||
|
||||
if (valueType === 'label') {
|
||||
$value = $("<td>").text(valueAttr.value);
|
||||
}
|
||||
else if (valueType === 'relation' && valueAttr.value) {
|
||||
$value = $("<td>").append(await linkService.createNoteLink(valueAttr.value));
|
||||
}
|
||||
|
||||
const $row = $("<tr>")
|
||||
.append($("<th>").text(definitionAttr.name))
|
||||
.append($value);
|
||||
|
||||
$table.append($row);
|
||||
}
|
||||
}
|
||||
|
||||
content += $table.prop('outerHTML');
|
||||
if (attributes.length > 0) {
|
||||
content += '<div class="tooltip-attributes"><strong>Attributes: </strong> '
|
||||
+ (await attributeRenderer.renderAttributes(attributes)).html()
|
||||
+ '</div>'
|
||||
}
|
||||
|
||||
if (note.type === 'text' && !utils.isHtmlEmpty(noteComplement.content)) {
|
||||
|
|
|
|||
|
|
@ -465,19 +465,7 @@ export default class AttributeEditorWidget extends TabAwareWidget {
|
|||
async renderOwnedAttributes(ownedAttributes, saved) {
|
||||
ownedAttributes = ownedAttributes.filter(oa => !oa.isDeleted);
|
||||
|
||||
const $attributesContainer = $("<div>");
|
||||
|
||||
for (let i = 0; i < ownedAttributes.length; i++) {
|
||||
const attribute = ownedAttributes[i];
|
||||
|
||||
attributeRenderer.renderAttribute(attribute, $attributesContainer, true);
|
||||
|
||||
if (i < ownedAttributes.length - 1) {
|
||||
$attributesContainer.append(" ");
|
||||
}
|
||||
}
|
||||
|
||||
let htmlAttrs = $attributesContainer.html();
|
||||
let htmlAttrs = (await attributeRenderer.renderAttributes(ownedAttributes, true)).html();
|
||||
|
||||
if (htmlAttrs.length > 0) {
|
||||
htmlAttrs += " ";
|
||||
|
|
|
|||
|
|
@ -205,9 +205,9 @@ export default class AttributeListWidget extends TabAwareWidget {
|
|||
return 'attribute' + (number === 1 ? '' : 's');
|
||||
}
|
||||
|
||||
renderInheritedAttributes(attributes, $container) {
|
||||
async renderInheritedAttributes(attributes, $container) {
|
||||
for (const attribute of attributes) {
|
||||
const $span = $("<span>")
|
||||
const $attr = await attributeRenderer.renderAttribute(attribute, false)
|
||||
.on('click', e => this.attributeDetailWidget.showAttributeDetail({
|
||||
attribute: {
|
||||
noteId: attribute.noteId,
|
||||
|
|
@ -220,10 +220,8 @@ export default class AttributeListWidget extends TabAwareWidget {
|
|||
y: e.pageY
|
||||
}));
|
||||
|
||||
attributeRenderer.renderAttribute(attribute, $span, false);
|
||||
|
||||
$container
|
||||
.append($span)
|
||||
.append($attr)
|
||||
.append(" ");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -387,12 +387,19 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
|
|||
}
|
||||
|
||||
.tooltip-inner {
|
||||
padding: 15px 15px 0 15px;
|
||||
background-color: var(--tooltip-background-color) !important;
|
||||
border: 1px solid var(--main-border-color);
|
||||
border-radius: 5px;
|
||||
text-align: left;
|
||||
color: var(--main-text-color) !important;
|
||||
max-width: 500px;
|
||||
box-shadow: 10px 10px 93px -25px #aaaaaa;
|
||||
}
|
||||
|
||||
.tooltip-attributes {
|
||||
color: var(--muted-text-color);
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.note-tooltip-content {
|
||||
|
|
|
|||
Loading…
Reference in a new issue