diff --git a/src/public/javascripts/widgets/attributes.js b/src/public/javascripts/widgets/attributes.js index f8a8be477..590b057fb 100644 --- a/src/public/javascripts/widgets/attributes.js +++ b/src/public/javascripts/widgets/attributes.js @@ -6,6 +6,13 @@ import StandardWidget from "./standard_widget.js"; class AttributesWidget extends StandardWidget { getWidgetTitle() { return "Attributes"; } + getHelp() { + return { + title: "Attributes are key-value records owned by assigned to this note.", + url: "https://github.com/zadam/trilium/wiki/Attributes" + }; + } + getHeaderActions() { const $showFullButton = $("").append("show dialog").addClass('widget-header-action'); $showFullButton.click(async () => { diff --git a/src/public/javascripts/widgets/edited_notes.js b/src/public/javascripts/widgets/edited_notes.js index 969da93cf..3d6563644 100644 --- a/src/public/javascripts/widgets/edited_notes.js +++ b/src/public/javascripts/widgets/edited_notes.js @@ -6,6 +6,12 @@ import treeCache from "../services/tree_cache.js"; class EditedNotesWidget extends StandardWidget { getWidgetTitle() { return "Edited notes on this day"; } + getHelp() { + return { + title: "This contains a list of notes created or updated on this day." + }; + } + getMaxHeight() { return "200px"; } async isEnabled() { diff --git a/src/public/javascripts/widgets/link_map.js b/src/public/javascripts/widgets/link_map.js index 2acd700f8..449f9c7e9 100644 --- a/src/public/javascripts/widgets/link_map.js +++ b/src/public/javascripts/widgets/link_map.js @@ -11,6 +11,13 @@ const TPL = ` class LinkMapWidget extends StandardWidget { getWidgetTitle() { return "Link map"; } + getHelp() { + return { + title: "Link map shows incoming and outgoing links from/to the current note.", + url: "https://github.com/zadam/trilium/wiki/Link-map" + }; + } + getHeaderActions() { const $showFullButton = $("").append("show full").addClass('widget-header-action'); $showFullButton.click(async () => { diff --git a/src/public/javascripts/widgets/note_revisions.js b/src/public/javascripts/widgets/note_revisions.js index 3fcdecb48..4d6f9016e 100644 --- a/src/public/javascripts/widgets/note_revisions.js +++ b/src/public/javascripts/widgets/note_revisions.js @@ -9,6 +9,13 @@ const TPL = ` class NoteRevisionsWidget extends StandardWidget { getWidgetTitle() { return "Note revisions"; } + getHelp() { + return { + title: "Note revisions track changes in the note across the time.", + url: "https://github.com/zadam/trilium/wiki/Note-revisions" + }; + } + getHeaderActions() { const $showFullButton = $("").append("show dialog").addClass('widget-header-action'); $showFullButton.click(async () => { diff --git a/src/public/javascripts/widgets/similar_notes.js b/src/public/javascripts/widgets/similar_notes.js index c5b87107d..98a43e233 100644 --- a/src/public/javascripts/widgets/similar_notes.js +++ b/src/public/javascripts/widgets/similar_notes.js @@ -6,6 +6,12 @@ import treeCache from "../services/tree_cache.js"; class SimilarNotesWidget extends StandardWidget { getWidgetTitle() { return "Similar notes"; } + getHelp() { + return { + title: "This list contains notes which might be similar to the current note based on textual similarity of note title." + }; + } + getMaxHeight() { return "200px"; } async doRenderBody() { diff --git a/src/public/javascripts/widgets/standard_widget.js b/src/public/javascripts/widgets/standard_widget.js index 6393ed369..4a357de9d 100644 --- a/src/public/javascripts/widgets/standard_widget.js +++ b/src/public/javascripts/widgets/standard_widget.js @@ -2,10 +2,14 @@ import optionsService from "../services/options.js"; const WIDGET_TPL = `
-
- + @@ -39,6 +43,8 @@ class StandardWidget { getHeaderActions() { return []; } + getHelp() { return {}; } + getMaxHeight() { return null; } getPosition() { return this.widgetOptions.position; } @@ -68,8 +74,25 @@ class StandardWidget { this.$widget.on('shown.bs.collapse', () => this.renderBody()); this.$widget.on('shown.bs.collapse', () => this.ctx.stateChanged()); this.$widget.on('hidden.bs.collapse', () => this.ctx.stateChanged()); + this.$title = this.$widget.find('.widget-title'); this.$title.text(this.getWidgetTitle()); + + this.$help = this.$widget.find('.widget-help'); + const help = this.getHelp(); + + if (help.title) { + this.$help.attr("title", help.title); + this.$help.attr("href", help.url || "javascript:"); + + if (!help.url) { + this.$help.addClass('no-link'); + } + } + else { + this.$help.hide(); + } + this.$headerActions = this.$widget.find('.widget-header-actions'); this.$headerActions.append(...this.getHeaderActions()); diff --git a/src/public/javascripts/widgets/what_links_here.js b/src/public/javascripts/widgets/what_links_here.js index e396578ca..83ef78bc5 100644 --- a/src/public/javascripts/widgets/what_links_here.js +++ b/src/public/javascripts/widgets/what_links_here.js @@ -6,6 +6,12 @@ class WhatLinksHereWidget extends StandardWidget { getMaxHeight() { return "200px"; } + getHelp() { + return { + title: "This list contains all notes which link to this note through links and relations." + }; + } + getHeaderActions() { const $showFullButton = $("").append("show link map").addClass('widget-header-action'); $showFullButton.click(async () => { diff --git a/src/public/stylesheets/desktop.css b/src/public/stylesheets/desktop.css index 6bc21b814..fe52dac04 100644 --- a/src/public/stylesheets/desktop.css +++ b/src/public/stylesheets/desktop.css @@ -386,6 +386,15 @@ body { cursor: pointer; } +.note-detail-sidebar .widget-help { + color: var(--main-text-color); +} + +.note-detail-sidebar .widget-help.no-link:hover { + cursor: default; + text-decoration: none; +} + .note-detail-sidebar .card-body { width: 100%; padding: 8px; diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 9b764864a..21eae4818 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -790,7 +790,7 @@ div[data-notify="container"] { border-radius: 0.2rem; } -a.external:after, a[href^="http://"]:after, a[href^="https://"]:after { +a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href^="https://"]:not(.no-arrow):after { font-size: smaller; content: "\2197"; vertical-align: top;