added note info into section container

src/public/app/dialogs/note_info.js

@@ -1,26 +0,0 @@
-import utils from "../services/utils.js";
-import appContext from "../services/app_context.js";
-
-const $dialog = $("#note-info-dialog");
-const $noteId = $("#note-info-note-id");
-const $dateCreated = $("#note-info-date-created");
-const $dateModified = $("#note-info-date-modified");
-const $type = $("#note-info-type");
-const $mime = $("#note-info-mime");
-const $okButton = $("#note-info-ok-button");
-
-export async function showDialog() {
-    utils.openDialog($dialog);
-
-    const activeNoteContext = appContext.tabManager.getActiveContext();
-    const {note} = activeNoteContext;
-    const noteComplement = await activeNoteContext.getNoteComplement();
-
-    $noteId.text(note.noteId);
-    $dateCreated.text(noteComplement.dateCreated);
-    $dateModified.text(noteComplement.dateModified);
-    $type.text(note.type);
-    $mime.text(note.mime);
-}
-
-$okButton.on('click', () => $dialog.modal('hide'));

src/public/app/layouts/desktop_layout.js

@@ -33,6 +33,7 @@ import SidebarToggleWidget from "../widgets/buttons/sidebar_toggle.js";
 import CreatePaneButton from "../widgets/buttons/create_pane_button.js";
 import ClosePaneButton from "../widgets/buttons/close_pane_button.js";
 import BasicPropertiesWidget from "../widgets/type_property_widgets/basic_properties.js";
+import NoteInfoWidget from "../widgets/type_property_widgets/note_info_widget.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -107,6 +108,7 @@ export default class DesktopLayout {
                                 .section(new PromotedAttributesWidget())
                                 .section(new OwnedAttributeListWidget())
                                 .section(new InheritedAttributesWidget())
+                                .section(new NoteInfoWidget())
                                 .button(new NoteActionsWidget())
                         )
                             .child(new NoteUpdateStatusWidget())

src/public/app/services/root_command_executor.js

@@ -14,10 +14,6 @@ export default class RootCommandExecutor extends Component {
         import("../dialogs/recent_changes.js").then(d => d.showDialog());
     }
 
-    showNoteInfoCommand() {
-        import("../dialogs/note_info.js").then(d => d.showDialog());
-    }
-
     showNoteRevisionsCommand() {
         import("../dialogs/note_revisions.js").then(d => d.showCurrentNoteRevisions());
     }

src/public/app/widgets/type_property_widgets/note_info_widget.js

@@ -1,9 +1,13 @@
-import CollapsibleWidget from "../collapsible_widget.js";
+import NoteContextAwareWidget from "../note_context_aware_widget.js";
 import server from "../../services/server.js";
 
 const TPL = `
-<table class="note-info-widget-table">
+<div class="note-info-widget">
     <style>
+        .note-info-widget {
+            padding: 12px;
+        }
+        
         .note-info-widget-table {
             max-width: 100%;            
             display: block;
@@ -23,61 +27,71 @@ const TPL = `
         }
     </style>
 
-    <tr>
+    <table class="note-info-widget-table">
-        <th>Note ID:</th>
+        <tr>
-        <td class="note-info-note-id"></td>
+            <th>Note ID:</th>
-        <th>Type:</th>
+            <td class="note-info-note-id"></td>
-        <td>
+            <th>Created:</th>
-            <span class="note-info-type"></span>
+            <td class="note-info-date-created"></td>
-            
+            <th>Modified:</th>
-            <span class="note-info-mime"></span>
+            <td class="note-info-date-modified"></td>
-        </td>
+        </tr>
-    </tr>
+        <tr>
-    <tr>
+            <th>Type:</th>
-        <th>Created:</th>
+            <td>
-        <td class="note-info-date-created"></td>
+                <span class="note-info-type"></span>
-        <th>Modified:</th>
-        <td class="note-info-date-modified"></td>
-    </tr>
-    <tr title="Note size provides rough estimate of storage requirements for this note. It takes into account note's content and content of its note revisions.">
-        <th>Note size:</th>
-        
-        <td colspan="3">
-            <button class="btn btn-sm calculate-button" style="padding: 0px 10px 0px 10px;">
-                <span class="bx bx-calculator"></span> calculate
-            </button>
-            
-            <span class="note-sizes-wrapper">
-                <span class="note-size"></span>
                 
-                <span class="subtree-size"></span>
+                <span class="note-info-mime"></span>
-            </span>
+            </td>
-        </td>
+
-    </tr>
+            <th title="Note size provides rough estimate of storage requirements for this note. It takes into account note's content and content of its note revisions.">Note size:</th>
-</table>
+           
-`;
+            <td>
+                <button class="btn btn-sm calculate-button" style="padding: 0px 10px 0px 10px;">
+                    <span class="bx bx-calculator"></span> calculate
+                </button>
+                
+                <span class="note-sizes-wrapper">
+                    <span class="note-size"></span>
+                    
+                    <span class="subtree-size"></span>
+                </span>
+            </td>
+        </tr>
+    </table>
+</div>
+`;
+export default class NoteInfoWidget extends NoteContextAwareWidget {
+    static getType() { return "note-info"; }
 
-export default class NoteInfoWidget extends CollapsibleWidget {
     isEnabled() {
-        return super.isEnabled() && !this.note.hasLabel('noteInfoWidgetDisabled');
+        return this.note;
     }
 
-    get widgetTitle() { return "Note info"; }
+    getTitle() {
+        return {
+            show: this.isEnabled(),
+            activate: true,
+            title: 'Note Info',
+            icon: 'bx bx-info-circle'
+        };
+    }
 
-    async doRenderBody() {
+    doRender() {
-        this.$body.html(TPL);
+        this.$widget = $(TPL);
+        this.overflowing();
 
-        this.$noteId = this.$body.find(".note-info-note-id");
+        this.$noteId = this.$widget.find(".note-info-note-id");
-        this.$dateCreated = this.$body.find(".note-info-date-created");
+        this.$dateCreated = this.$widget.find(".note-info-date-created");
-        this.$dateModified = this.$body.find(".note-info-date-modified");
+        this.$dateModified = this.$widget.find(".note-info-date-modified");
-        this.$type = this.$body.find(".note-info-type");
+        this.$type = this.$widget.find(".note-info-type");
-        this.$mime = this.$body.find(".note-info-mime");
+        this.$mime = this.$widget.find(".note-info-mime");
 
-        this.$noteSizesWrapper = this.$body.find('.note-sizes-wrapper');
+        this.$noteSizesWrapper = this.$widget.find('.note-sizes-wrapper');
-        this.$noteSize = this.$body.find(".note-size");
+        this.$noteSize = this.$widget.find(".note-size");
-        this.$subTreeSize = this.$body.find(".subtree-size");
+        this.$subTreeSize = this.$widget.find(".subtree-size");
 
-        this.$calculateButton = this.$body.find(".calculate-button");
+        this.$calculateButton = this.$widget.find(".calculate-button");
         this.$calculateButton.on('click', async () => {
             this.$noteSizesWrapper.show();
             this.$calculateButton.hide();

src/services/keyboard_actions.js

@@ -230,12 +230,6 @@ const DEFAULT_KEYBOARD_ACTIONS = [
     {
         separator: "Dialogs"
     },
-    {
-        actionName: "showNoteInfo",
-        defaultShortcuts: [],
-        description: "Shows Note Info dialog",
-        scope: "window"
-    },
     {
         actionName: "showNoteSource",
         defaultShortcuts: [],

src/views/desktop.ejs

@@ -33,7 +33,6 @@
 <%- include('dialogs/prompt.ejs') %>
 <%- include('dialogs/confirm.ejs') %>
 <%- include('dialogs/help.ejs') %>
-<%- include('dialogs/note_info.ejs') %>
 <%- include('dialogs/link_map.ejs') %>
 <%- include('dialogs/clone_to.ejs') %>
 <%- include('dialogs/move_to.ejs') %>

src/views/dialogs/note_info.ejs

@@ -1,45 +0,0 @@
-<style>
-#note-info-table td, #note-info-table th {
-    padding: 15px;
-}
-</style>
-
-<div id="note-info-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">Note info</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <div class="modal-body">
-                <table id="note-info-table">
-                    <tr>
-                        <th>Note ID</th>
-                        <td id="note-info-note-id"></td>
-                    </tr>
-                    <tr>
-                        <th>Date created</th>
-                        <td id="note-info-date-created"></td>
-                    </tr>
-                    <tr>
-                        <th>Date modified</th>
-                        <td id="note-info-date-modified"></td>
-                    </tr>
-                    <tr>
-                        <th>Type</th>
-                        <td id="note-info-type"></td>
-                    </tr>
-                    <tr>
-                        <th>MIME</th>
-                        <td id="note-info-mime"></td>
-                    </tr>
-                </table>
-            </div>
-            <div class="modal-footer">
-                <button class="btn btn-primary" id="note-info-ok-button">OK</button>
-            </div>
-        </div>
-    </div>
-</div>