converted about dialog to new pattern

src/public/app/dialogs/about.js

@@ -1,24 +0,0 @@
-import server from "../services/server.js";
-import utils from "../services/utils.js";
-
-const $dialog = $("#about-dialog");
-const $appVersion = $("#app-version");
-const $dbVersion = $("#db-version");
-const $syncVersion = $("#sync-version");
-const $buildDate = $("#build-date");
-const $buildRevision = $("#build-revision");
-const $dataDirectory = $("#data-directory");
-
-export async function showDialog() {
-    const appInfo = await server.get('app-info');
-
-    $appVersion.text(appInfo.appVersion);
-    $dbVersion.text(appInfo.dbVersion);
-    $syncVersion.text(appInfo.syncVersion);
-    $buildDate.text(appInfo.buildDate);
-    $buildRevision.text(appInfo.buildRevision);
-    $buildRevision.attr('href', 'https://github.com/zadam/trilium/commit/' + appInfo.buildRevision);
-    $dataDirectory.text(appInfo.dataDirectory);
-
-    utils.openDialog($dialog);
-}

src/public/app/layouts/desktop_layout.js

@@ -51,6 +51,7 @@ import SharedInfoWidget from "../widgets/shared_info.js";
 import FindWidget from "../widgets/find.js";
 import TocWidget from "../widgets/toc.js";
 import BulkActionsDialog from "../widgets/dialogs/bulk_actions.js";
+import AboutDialog from "../widgets/dialogs/about.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -176,6 +177,7 @@ export default class DesktopLayout {
                     )
                 )
             )
-            .child(new BulkActionsDialog());
+            .child(new BulkActionsDialog())
+            .child(new AboutDialog());
     }
 }

src/public/app/widgets/buttons/global_menu.js

@@ -132,8 +132,7 @@ export default class GlobalMenuWidget extends BasicWidget {
         $button.tooltip({ trigger: "hover" });
         $button.on("click", () => $button.tooltip("hide"));
 
-        this.$widget.find(".show-about-dialog-button").on('click',
+        this.$widget.find(".show-about-dialog-button").on('click', () => this.triggerCommand("openAboutDialog"));
-            () => import("../../dialogs/about.js").then(d => d.showDialog()));
 
         const isElectron = utils.isElectron();
 

src/public/app/widgets/dialogs/about.js

@@ -0,0 +1,84 @@
+import server from "../../services/server.js";
+import utils from "../../services/utils.js";
+import BasicWidget from "../basic_widget.js";
+
+const TPL = `
+<div class="about-dialog modal fade mx-auto" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title mr-auto">About Trilium Notes</h5>
+
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0;">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <table class="table table-borderless">
+                    <tr>
+                        <th>Homepage:</th>
+                        <td><a href="https://github.com/zadam/trilium" class="external">https://github.com/zadam/trilium</a></td>
+                    </tr>
+                    <tr>
+                        <th>App version:</th>
+                        <td class="app-version"></td>
+                    </tr>
+                    <tr>
+                        <th>DB version:</th>
+                        <td class="db-version"></td>
+                    </tr>
+                    <tr>
+                        <th>Sync version:</th>
+                        <td class="sync-version"></td>
+                    </tr>
+                    <tr>
+                        <th>Build date:</th>
+                        <td class="build-date"></td>
+                    </tr>
+
+                    <tr>
+                        <th>Build revision:</th>
+                        <td><a href="" class="external" target="_blank" class="build-revision"></a></td>
+                    </tr>
+
+                    <tr>
+                        <th>Data directory:</th>
+                        <td class="data-directory"></td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>`;
+
+export default class AboutDialog extends BasicWidget {
+    doRender() {
+        this.$widget = $(TPL);
+
+        this.$dialog = this.$widget.find(".about-dialog");
+        this.$appVersion = this.$widget.find(".app-version");
+        this.$dbVersion = this.$widget.find(".db-version");
+        this.$syncVersion = this.$widget.find(".sync-version");
+        this.$buildDate = this.$widget.find(".build-date");
+        this.$buildRevision = this.$widget.find(".build-revision");
+        this.$dataDirectory = this.$widget.find(".data-directory");
+    }
+
+    async refresh() {
+        const appInfo = await server.get('app-info');
+
+        this.$appVersion.text(appInfo.appVersion);
+        this.$dbVersion.text(appInfo.dbVersion);
+        this.$syncVersion.text(appInfo.syncVersion);
+        this.$buildDate.text(appInfo.buildDate);
+        this.$buildRevision.text(appInfo.buildRevision);
+        this.$buildRevision.attr('href', 'https://github.com/zadam/trilium/commit/' + appInfo.buildRevision);
+        this.$dataDirectory.text(appInfo.dataDirectory);
+    }
+
+    async openAboutDialogEvent() {
+        await this.refresh();
+
+        utils.openDialog(this.$widget);
+    }
+}

src/views/desktop.ejs

@@ -17,7 +17,6 @@
 
 <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
 
-<%- include('dialogs/about.ejs') %>
 <%- include('dialogs/add_link.ejs') %>
 <%- include('dialogs/branch_prefix.ejs') %>
 <%- include('dialogs/export.ejs') %>

src/views/dialogs/about.ejs

@@ -1,47 +0,0 @@
-<div id="about-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
-    <div class="modal-dialog modal-lg" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title mr-auto">About Trilium Notes</h5>
-
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0;">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <div class="modal-body">
-                <table class="table table-borderless">
-                    <tr>
-                        <th>Homepage:</th>
-                        <td><a href="https://github.com/zadam/trilium" class="external">https://github.com/zadam/trilium</a></td>
-                    </tr>
-                    <tr>
-                        <th>App version:</th>
-                        <td id="app-version"></td>
-                    </tr>
-                    <tr>
-                        <th>DB version:</th>
-                        <td id="db-version"></td>
-                    </tr>
-                    <tr>
-                        <th>Sync version:</th>
-                        <td id="sync-version"></td>
-                    </tr>
-                    <tr>
-                        <th>Build date:</th>
-                        <td id="build-date"></td>
-                    </tr>
-
-                    <tr>
-                        <th>Build revision:</th>
-                        <td><a href="" class="external" target="_blank" id="build-revision"></a></td>
-                    </tr>
-
-                    <tr>
-                        <th>Data directory:</th>
-                        <td id="data-directory"></td>
-                    </tr>
-                </table>
-            </div>
-        </div>
-    </div>
-</div>