extracted widgets from note title

src/public/javascripts/dialogs/attributes.js

@@ -8,6 +8,7 @@ import linkService from "../services/link.js";
 import libraryLoader from "../services/library_loader.js";
 import noteAutocompleteService from "../services/note_autocomplete.js";
 import treeService from "../services/tree.js";
+import appContext from "../services/app_context.js";
 
 const $dialog = $("#attributes-dialog");
 const $saveAttributesButton = $("#save-attributes-button");

src/public/javascripts/widgets/note_actions.js

@@ -0,0 +1,30 @@
+import BasicWidget from "./basic_widget.js";
+
+const TPL = `
+<div class="dropdown note-actions">
+    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
+        Note actions
+        <span class="caret"></span>
+    </button>
+    <div class="dropdown-menu dropdown-menu-right">
+        <a class="dropdown-item show-note-revisions-button" data-bind="css: { disabled: type() == 'file' || type() == 'image' }">Revisions</a>
+        <a 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 class="dropdown-item show-source-button" data-bind="css: { disabled: type() != 'text' && type() != 'code' && type() != 'relation-map' && type() != 'search' }">
+            <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" data-bind="css: { disabled: type() != 'text' }">Export note</a>
+        <a 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>
+    </div>
+</div>`;
+
+export default class NoteActionsWidget extends BasicWidget {
+    doRender() {
+        this.$widget = $(TPL);
+
+        return this.$widget;
+    }
+}

src/public/javascripts/widgets/note_detail.js

@@ -5,12 +5,8 @@ import protectedSessionHolder from "../services/protected_session_holder.js";
 const TPL = `
 <div class="note-detail">
     <style>
-    .note-detail-content {
+    .note-detail {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 100;
         height: 100%;
-        width: 100%;
     }  
     </style>
 </div>

src/public/javascripts/widgets/note_title.js

@@ -7,16 +7,15 @@ import linkService from "../services/link.js";
 import protectedSessionHolder from "../services/protected_session_holder.js";
 import NoteTypeWidget from "./note_type.js";
 import NotePathsWidget from "./note_paths.js";
+import NoteActionsWidget from "./note_actions.js";
+import ProtectedNoteSwitchWidget from "./protected_note_switch.js";
+import RunScriptButtonsWidget from "./run_script_buttons.js";
 
 const TPL = `
 <div class="note-title-row">
     <style>
     .note-title-row {
-        flex-grow: 0;
-        flex-shrink: 0;
-        padding-top: 2px;
         display: flex;
-        align-items: center;
     }
     
     .note-title {
@@ -30,54 +29,6 @@ const TPL = `
     </style>
 
     <input autocomplete="off" value="" class="note-title" tabindex="1">
-
-    <span class="saved-indicator hide-in-zen-mode bx bx-check" title="All changes have been saved"></span>
-
-    <div class="hide-in-zen-mode" style="display: flex; align-items: center;">
-        <button class="btn btn-sm icon-button bx bx-play-circle render-button"
-                style="display: none; margin-right: 10px;"
-                title="Render"></button>
-
-        <button class="btn btn-sm icon-button bx bx-play-circle execute-script-button"
-                style="display: none; margin-right: 10px;"
-                title="Execute (Ctrl+Enter)"></button>
-
-        <div class="btn-group btn-group-xs">
-            <button type="button"
-                    class="btn btn-sm icon-button bx bx-check-shield protect-button"
-                    title="Protected note can be viewed and edited only after entering password">
-            </button>
-
-            <button type="button"
-                    class="btn btn-sm icon-button bx bx-shield unprotect-button"
-                    title="Not protected note can be viewed without entering password">
-            </button>
-        </div>
-
-        &nbsp; &nbsp;
-
-        <div class="note-type-actions" style="display: flex;">
-            <div class="dropdown note-actions">
-                <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
-                    Note actions
-                    <span class="caret"></span>
-                </button>
-                <div class="dropdown-menu dropdown-menu-right">
-                    <a class="dropdown-item show-note-revisions-button" data-bind="css: { disabled: type() == 'file' || type() == 'image' }">Revisions</a>
-                    <a 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 class="dropdown-item show-source-button" data-bind="css: { disabled: type() != 'text' && type() != 'code' && type() != 'relation-map' && type() != 'search' }">
-                        <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" data-bind="css: { disabled: type() != 'text' }">Export note</a>
-                    <a 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>
-                </div>
-            </div>
-        </div>
-    </div>
 </div>`;
 
 export default class NoteTitleWidget extends TabAwareWidget {
@@ -86,16 +37,19 @@ export default class NoteTitleWidget extends TabAwareWidget {
 
         this.$noteTitle = this.$widget.find(".note-title");
 
-        this.$protectButton = this.$widget.find(".protect-button");
-        this.$protectButton.on('click', protectedSessionService.protectNoteAndSendToServer);
-
-        this.$unprotectButton = this.$widget.find(".unprotect-button");
-        this.$unprotectButton.on('click', protectedSessionService.unprotectNoteAndSendToServer);
-
         this.$savedIndicator = this.$widget.find(".saved-indicator");
 
+        this.runScriptButtons = new RunScriptButtonsWidget(this.appContext);
+        this.$widget.append(this.runScriptButtons.render());
+
+        this.protectedNoteSwitch = new ProtectedNoteSwitchWidget(this.appContext);
+        this.$widget.append(this.protectedNoteSwitch.render());
+
         this.noteType = new NoteTypeWidget(this.appContext);
-        this.$widget.find('.note-type-actions').prepend(this.noteType.render());
+        this.$widget.append(this.noteType.render());
+
+        this.noteActions = new NoteActionsWidget(this.appContext);
+        this.$widget.append(this.noteActions.render());
 
         this.notePaths = new NotePathsWidget(this.appContext);
         this.$widget.prepend(this.notePaths.render());
@@ -138,11 +92,6 @@ export default class NoteTitleWidget extends TabAwareWidget {
         if (note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable()) {
             this.$noteTitle.prop("readonly", true);
         }
-
-        this.$protectButton.toggleClass("active", note.isProtected);
-        this.$protectButton.prop("disabled", note.isProtected);
-        this.$unprotectButton.toggleClass("active", !note.isProtected);
-        this.$unprotectButton.prop("disabled", !note.isProtected || !protectedSessionHolder.isProtectedSessionAvailable());
     }
 
     noteSavedListener() {

src/public/javascripts/widgets/protected_note_switch.js

@@ -0,0 +1,22 @@
+import BasicWidget from "./basic_widget.js";
+
+const TPL = `
+<div class="btn-group btn-group-xs">
+    <button type="button"
+            class="btn btn-sm icon-button bx bx-check-shield protect-button"
+            title="Protected note can be viewed and edited only after entering password">
+    </button>
+
+    <button type="button"
+            class="btn btn-sm icon-button bx bx-shield unprotect-button"
+            title="Not protected note can be viewed without entering password">
+    </button>
+</div>`;
+
+export default class ProtectedNoteSwitchWidget extends BasicWidget {
+    doRender() {
+        this.$widget = $(TPL);
+
+        return this.$widget;
+    }
+}

src/public/javascripts/widgets/run_script_buttons.js

@@ -0,0 +1,33 @@
+import TabAwareWidget from "./tab_aware_widget.js";
+import protectedSessionService from "../services/protected_session.js";
+import protectedSessionHolder from "../services/protected_session_holder.js";
+
+const TPL = `
+<button class="btn btn-sm icon-button bx bx-play-circle render-button"
+        style="display: none; margin-right: 10px;"
+        title="Render"></button>
+
+<button class="btn btn-sm icon-button bx bx-play-circle execute-script-button"
+        style="display: none; margin-right: 10px;"
+        title="Execute (Ctrl+Enter)"></button>`;
+
+export default class RunScriptButtonsWidget extends TabAwareWidget {
+    doRender() {
+        this.$widget = $(TPL);
+
+        this.$protectButton = this.$widget.find(".protect-button");
+        this.$protectButton.on('click', protectedSessionService.protectNoteAndSendToServer);
+
+        this.$unprotectButton = this.$widget.find(".unprotect-button");
+        this.$unprotectButton.on('click', protectedSessionService.unprotectNoteAndSendToServer);
+
+        return this.$widget;
+    }
+
+    refreshWithNote(note) {
+        this.$protectButton.toggleClass("active", note.isProtected);
+        this.$protectButton.prop("disabled", note.isProtected);
+        this.$unprotectButton.toggleClass("active", !note.isProtected);
+        this.$unprotectButton.prop("disabled", !note.isProtected || !protectedSessionHolder.isProtectedSessionAvailable());
+    }
+}

src/public/javascripts/widgets/tab_aware_widget.js

@@ -25,14 +25,14 @@ export default class TabAwareWidget extends BasicWidget {
     refresh() {
         if (this.tabContext && this.tabContext.note) {
             this.toggle(true);
-            this.refreshWithNote();
+            this.refreshWithNote(this.tabContext.note);
         }
         else {
             this.toggle(false);
         }
     }
 
-    refreshWithNote() {}
+    refreshWithNote(note) {}
 
     activeTabChangedListener() {
         this.tabContext = this.appContext.getActiveTabContext();

src/public/javascripts/widgets/type_widgets/code.js

@@ -8,6 +8,17 @@ import TypeWidget from "./type_widget.js";
 
 const TPL = `
 <div class="note-detail-code note-detail-printable">
+    <style>
+    .note-detail-code {
+        overflow: auto;
+        height: 100%;
+    }
+    
+    .note-detail-code-editor {
+        min-height: 500px;
+    }
+    </style>
+
     <div class="note-detail-code-editor"></div>
 </div>`;
 

src/public/javascripts/widgets/type_widgets/text.js

@@ -53,6 +53,7 @@ const TPL = `
     
     .note-detail-text {
         overflow: auto;
+        height: 100%;
         font-family: var(--detail-text-font-family);
     }
     

src/public/stylesheets/style.css

@@ -303,13 +303,7 @@ div.ui-tooltip {
     background-color: var(--active-item-background-color) !important;
 }
 
-.note-detail-code {
-    overflow: auto;
-}
 
-.note-detail-code-editor {
-    min-height: 500px;
-}
 
 .note-detail-render {
     min-height: 500px;