simplification of triggering events from links

src/public/javascripts/services/frontend_script_api.js

@@ -50,7 +50,7 @@ function FrontendScriptApi(startNote, currentNote, originEntity = null, tabConte
      */
     this.activateNote = async (notePath, noteLoadedListener) => {
         await treeService.activateNote(notePath, async () => {
-            await appContext.getMainNoteTree().scrollToActiveNote();
+            await appContext.getMainNoteTree().scrollToActiveNoteListener();
 
             if (noteLoadedListener) {
                 noteLoadedListener();

src/public/javascripts/services/tree.js

@@ -556,8 +556,6 @@ keyboardActionService.setGlobalActionHandler('CutIntoNote', () => createNoteInto
 
 keyboardActionService.setGlobalActionHandler('CreateNoteInto', createNoteInto);
 
-keyboardActionService.setGlobalActionHandler('ScrollToActiveNote', () => appContext.getMainNoteTree().scrollToActiveNote());
-
 $(window).bind('hashchange', async function() {
     if (isNotePathInAddress()) {
         const [notePath, tabId] = getHashValueFromAddress();

src/public/javascripts/widgets/basic_widget.js

@@ -7,6 +7,12 @@ class BasicWidget extends Component {
 
         keyboardActionsService.updateDisplayedShortcuts($widget);
 
+        $widget.find("[data-trigger-event]").on('click', e => {
+            const eventName = $(e.target).attr('data-trigger-event');
+
+            this.appContext.trigger(eventName);
+        });
+
         return $widget;
     }
 

src/public/javascripts/widgets/global_buttons.js

@@ -14,31 +14,30 @@ const WIDGET_TPL = `
 </style>
 
 <div class="global-buttons">
-    <a title="Create new top level note" class="create-top-level-note-button icon-action bx bx-folder-plus"></a>
+    <a data-trigger-event="createTopLevelNote"
+       title="Create new top level note" 
+       class="icon-action bx bx-folder-plus"></a>
 
-    <a title="Collapse note tree" data-kb-action="CollapseTree" class="collapse-tree-button icon-action bx bx-layer-minus"></a>
+    <a data-trigger-event="collapseTree"
+       title="Collapse note tree" 
+       data-kb-action="CollapseTree" 
+       class="icon-action bx bx-layer-minus"></a>
 
-    <a title="Scroll to active note" data-kb-action="ScrollToActiveNote" class="scroll-to-active-note-button icon-action bx bx-crosshair"></a>
+    <a data-trigger-event="scrollToActiveNote"
+       title="Scroll to active note" 
+       data-kb-action="ScrollToActiveNote" 
+       class="icon-action bx bx-crosshair"></a>
 
-    <a title="Search in notes" data-kb-action="SearchNotes" class="toggle-search-button icon-action bx bx-search"></a>
+    <a data-trigger-event="searchNotes"
+       title="Search in notes"
+       data-kb-action="SearchNotes"
+       class="icon-action bx bx-search"></a>
 </div>
 `;
 
 class GlobalButtonsWidget extends BasicWidget {
     doRender($widget) {
-        $widget = $(WIDGET_TPL);
+        return $(WIDGET_TPL);
-
-        const $createTopLevelNoteButton = $widget.find(".create-top-level-note-button");
-        const $collapseTreeButton = $widget.find(".collapse-tree-button");
-        const $scrollToActiveNoteButton = $widget.find(".scroll-to-active-note-button");
-        const $toggleSearchButton = $widget.find(".toggle-search-button");
-
-        $createTopLevelNoteButton.on('click', () => this.trigger('createTopLevelNote'));
-        $collapseTreeButton.on('click', () => this.trigger('collapseTree'));
-        $scrollToActiveNoteButton.on('click', () => appContext.getMainNoteTree().scrollToActiveNote());
-        $toggleSearchButton.on('click', () => this.trigger('toggleSearch'));
-
-        return $widget;
     }
 }
 

src/public/javascripts/widgets/note_actions.js

@@ -1,7 +1,4 @@
 import TabAwareWidget from "./tab_aware_widget.js";
-import appContext from "../services/app_context.js";
-import libraryLoader from "../services/library_loader.js";
-import keyboardActionService from "../services/keyboard_actions.js";
 
 const TPL = `
 <div class="dropdown note-actions">
@@ -10,14 +7,14 @@ const TPL = `
         <span class="caret"></span>
     </button>
     <div class="dropdown-menu dropdown-menu-right">
-        <a class="dropdown-item show-note-revisions-button">Revisions</a>
+        <a data-trigger-event="showNoteRevisions" class="dropdown-item show-note-revisions-button">Revisions</a>
-        <a class="dropdown-item show-attributes-button"><kbd data-kb-action="ShowAttributes"></kbd> Attributes</a>
+        <a data-trigger-event="showAttributes" class="dropdown-item show-attributes-button"><kbd data-kb-action="ShowAttributes"></kbd> Attributes</a>
-        <a class="dropdown-item show-link-map-button"><kbd data-kb-action="ShowLinkMap"></kbd> Link map</a>
+        <a data-trigger-event="showLinkMap" class="dropdown-item show-link-map-button"><kbd data-kb-action="ShowLinkMap"></kbd> Link map</a>
-        <a class="dropdown-item show-source-button"><kbd data-kb-action="ShowNoteSource"></kbd> Note source</a>
+        <a data-trigger-event="showNoteSource" class="dropdown-item show-source-button"><kbd data-kb-action="ShowNoteSource"></kbd> Note source</a>
         <a class="dropdown-item import-files-button">Import files</a>
         <a class="dropdown-item export-note-button">Export note</a>
-        <a class="dropdown-item print-note-button"><kbd data-kb-action="PrintActiveNote"></kbd> Print note</a>
+        <a data-trigger-event="printActiveNote" class="dropdown-item print-note-button"><kbd data-kb-action="PrintActiveNote"></kbd> Print note</a>
-        <a class="dropdown-item show-note-info-button"><kbd data-kb-action="ShowNoteInfo"></kbd> Note info</a>
+        <a data-trigger-event="showNoteInfo" class="dropdown-item show-note-info-button"><kbd data-kb-action="ShowNoteInfo"></kbd> Note info</a>
     </div>
 </div>`;
 
@@ -25,23 +22,7 @@ export default class NoteActionsWidget extends TabAwareWidget {
     doRender() {
         this.$widget = $(TPL);
 
-        this.$showRevisionsButton = this.$widget.find('.show-note-revisions-button');
-        this.$showRevisionsButton.on('click', e => this.triggerEvent(e, 'showNoteRevisions'));
-
-        this.$showAttributesButton = this.$widget.find('.show-attributes-button');
-        this.$showAttributesButton.on('click', e => this.triggerEvent(e, 'showAttributes'));
-
-        this.$showLinkMapButton = this.$widget.find('.show-link-map-button');
-        this.$showLinkMapButton.on('click', e => this.triggerEvent(e, 'showLinkMap'));
-
         this.$showSourceButton = this.$widget.find('.show-source-button');
-        this.$showSourceButton.on('click', e => this.triggerEvent(e, 'showNoteSource'));
-
-        this.$showNoteInfoButton = this.$widget.find('.show-note-info-button');
-        this.$showNoteInfoButton.on('click', e => this.triggerEvent(e, 'showNoteInfo'));
-
-        this.$printNoteButton = this.$widget.find('.print-note-button');
-        this.$printNoteButton.on('click', e => this.triggerEvent(e, 'printActiveNote'));
 
         this.$exportNoteButton = this.$widget.find('.export-note-button');
         this.$exportNoteButton.on("click", () => {

src/public/javascripts/widgets/note_info.js

@@ -1,7 +1,18 @@
 import StandardWidget from "./standard_widget.js";
 
 const TPL = `
-<table class="note-info-table" style="table-layout: fixed; width: 100%;">
+<table class="note-info-widget-table">
+    <style>
+        .note-info-widget-table {
+            table-layout: fixed; 
+            width: 100%;
+        } 
+   
+        .note-info-widget-table td, .note-info-widget-table th {
+            padding: 5px;
+        }
+    </style>
+
     <tr>
         <th nowrap>Note ID:</th>
         <td nowrap colspan="3" class="note-info-note-id"></td>

src/public/javascripts/widgets/note_tree.js

@@ -251,7 +251,7 @@ export default class NoteTreeWidget extends TabAwareWidget {
         if (!node) {
             const hoistedNoteId = await hoistedNoteService.getHoistedNoteId();
 
-            node = getNodesByNoteId(hoistedNoteId)[0];
+            node = this.getNodesByNoteId(hoistedNoteId)[0];
         }
 
         node.setExpanded(false);
@@ -281,8 +281,7 @@ export default class NoteTreeWidget extends TabAwareWidget {
         }
     }
 
-    // FIXME since this operates on note details tab context it seems it does not really belong here
+    async scrollToActiveNoteListener() {
-    async scrollToActiveNote() {
         const activeContext = appContext.getActiveTabContext();
 
         if (activeContext && activeContext.notePath) {

src/public/stylesheets/desktop.css

@@ -124,8 +124,8 @@ body {
     background-color: inherit;
 }
 
-.widget .note-info-table td, .widget .note-info-table th {
+#note-info-table td, #note-info-table th {
-    padding: 5px;
+    padding: 15px;
 }
 
 [data-toggle="tooltip"] span {