From 7a461595398243a7449f8c54c156ab95d1d6a6c0 Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Tue, 20 Dec 2022 23:20:59 +0100
Subject: [PATCH] code buttons into the floating buttons (WIP)

---
 src/public/app/layouts/desktop_layout.js      |  4 +--
 .../code_buttons.js}                          | 34 ++++++++-----------
 .../floating_buttons/floating_buttons.js      |  2 +-
 .../hide_floating_buttons_button.js           |  2 +-
 .../floating_buttons/mermaid_export_button.js |  2 +-
 .../floating_buttons/relation_map_buttons.js  |  6 ++--
 6 files changed, 22 insertions(+), 28 deletions(-)
 rename src/public/app/widgets/{type_widgets/editable_code_buttons.js => floating_buttons/code_buttons.js} (77%)

diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js
index a05c00658..99b50150c 100644
--- a/src/public/app/layouts/desktop_layout.js
+++ b/src/public/app/layouts/desktop_layout.js
@@ -73,7 +73,7 @@ import RelationMapButtons from "../widgets/floating_buttons/relation_map_buttons
 import MermaidExportButton from "../widgets/floating_buttons/mermaid_export_button.js";
 import LauncherContainer from "../widgets/containers/launcher_container.js";
 import NoteRevisionsButton from "../widgets/buttons/note_revisions_button.js";
-import EditableCodeButtonsWidget from "../widgets/type_widgets/editable_code_buttons.js";
+import CodeButtonsWidget from "../widgets/floating_buttons/code_buttons.js";
 import ApiLogWidget from "../widgets/api_log.js";
 import HideFloatingButtonsButton from "../widgets/floating_buttons/hide_floating_buttons_button.js";
 
@@ -150,6 +150,7 @@ export default class DesktopLayout {
                                     .child(new NoteUpdateStatusWidget())
                                     .child(new FloatingButtons()
                                         .child(new EditButton())
+                                        .child(new CodeButtonsWidget())
                                         .child(new RelationMapButtons())
                                         .child(new MermaidExportButton())
                                         .child(new BacklinksWidget())
@@ -165,7 +166,6 @@ export default class DesktopLayout {
                                             .child(new SearchResultWidget())
                                             .child(new SqlResultWidget())
                                     )
-                                    .child(new EditableCodeButtonsWidget())
                                     .child(new ApiLogWidget())
                                     .child(new FindWidget())
                                     .child(
diff --git a/src/public/app/widgets/type_widgets/editable_code_buttons.js b/src/public/app/widgets/floating_buttons/code_buttons.js
similarity index 77%
rename from src/public/app/widgets/type_widgets/editable_code_buttons.js
rename to src/public/app/widgets/floating_buttons/code_buttons.js
index 0c8fafd43..25474539e 100644
--- a/src/public/app/widgets/type_widgets/editable_code_buttons.js
+++ b/src/public/app/widgets/floating_buttons/code_buttons.js
@@ -7,37 +7,28 @@ import NoteContextAwareWidget from "../note_context_aware_widget.js";
 import keyboardActionService from "../../services/keyboard_actions.js";
 
 const TPL = `
-<div class="editable-code-buttons-widget">
+<div class="code-buttons-widget">
     <style>
-    .editable-code-buttons-widget {
-        display: flex; 
-        justify-content: space-evenly;
-        padding: 5px;
-        height: 45px;
-    }
+        .code-buttons-widget {
+            display: flex;
+            gap: 10px;
+        }
     </style>
-    
-    <button data-trigger-command="runActiveNote"
-            class="no-print execute-button btn btn-sm">
+
+    <button data-trigger-command="runActiveNote" class="execute-button floating-button btn" title="Execute script">
         <span class="bx bx-run"></span>
-            
-        Execute <kbd data-command="runActiveNote"></kbd>
     </button>
     
-    <button class="no-print trilium-api-docs-button btn btn-sm" 
-        title="Open Trilium API docs">
+    <button class="trilium-api-docs-button floating-button btn" title="Open Trilium API docs">
         <span class="bx bx-help-circle"></span>
-        
-        API docs
     </button>
     
-    <button class="no-print save-to-note-button btn btn-sm">
+    <button class="save-to-note-button floating-button btn">
         <span class="bx bx-save"></span>
-        Save to note</kbd>
     </button>
 </div>`;
 
-export default class EditableCodeButtonsWidget extends NoteContextAwareWidget {
+export default class CodeButtonsWidget extends NoteContextAwareWidget {
     isEnabled() {
         return super.isEnabled()
             && this.note
@@ -48,6 +39,8 @@ export default class EditableCodeButtonsWidget extends NoteContextAwareWidget {
         this.$widget = $(TPL);
         this.$openTriliumApiDocsButton = this.$widget.find(".trilium-api-docs-button");
         this.$openTriliumApiDocsButton.on("click", () => {
+            toastService.showMessage("Opening API docs...");
+
             if (this.note.mime.endsWith("frontend")) {
                 window.open("https://zadam.github.io/trilium/frontend_api/FrontendScriptApi.html", "_blank");
             }
@@ -68,9 +61,10 @@ export default class EditableCodeButtonsWidget extends NoteContextAwareWidget {
             toastService.showMessage("SQL Console note has been saved into " + await treeService.getNotePathTitle(notePath));
         });
 
-        keyboardActionService.setupActionsForElement('code-detail', this.$widget, this);
         keyboardActionService.updateDisplayedShortcuts(this.$widget);
 
+        this.contentSized();
+
         super.doRender();
     }
 
diff --git a/src/public/app/widgets/floating_buttons/floating_buttons.js b/src/public/app/widgets/floating_buttons/floating_buttons.js
index becfdb559..42f8eaef2 100644
--- a/src/public/app/widgets/floating_buttons/floating_buttons.js
+++ b/src/public/app/widgets/floating_buttons/floating_buttons.js
@@ -1,7 +1,7 @@
 import NoteContextAwareWidget from "../note_context_aware_widget.js";
 
 const TPL = `
-<div class="floating-buttons">
+<div class="floating-buttons no-print">
     <style>
         .floating-buttons {
             position: relative;
diff --git a/src/public/app/widgets/floating_buttons/hide_floating_buttons_button.js b/src/public/app/widgets/floating_buttons/hide_floating_buttons_button.js
index bf68e1814..2d425fc55 100644
--- a/src/public/app/widgets/floating_buttons/hide_floating_buttons_button.js
+++ b/src/public/app/widgets/floating_buttons/hide_floating_buttons_button.js
@@ -26,7 +26,7 @@ const TPL = `
     </style>
 
     <button type="button"
-            class="close-floating-buttons-button btn bx bx-x no-print"
+            class="close-floating-buttons-button btn bx bx-x"
             title="Hide buttons"></button>
 </div>
 `;
diff --git a/src/public/app/widgets/floating_buttons/mermaid_export_button.js b/src/public/app/widgets/floating_buttons/mermaid_export_button.js
index 490df82bc..f31ec70b0 100644
--- a/src/public/app/widgets/floating_buttons/mermaid_export_button.js
+++ b/src/public/app/widgets/floating_buttons/mermaid_export_button.js
@@ -2,7 +2,7 @@ import NoteContextAwareWidget from "../note_context_aware_widget.js";
 
 const TPL = `
 <button type="button"
-        class="export-mermaid-button no-print"
+        class="export-mermaid-button"
         title="Export Mermaid diagram as SVG">
         <span class="bx bx-export"></span>
 </button>
diff --git a/src/public/app/widgets/floating_buttons/relation_map_buttons.js b/src/public/app/widgets/floating_buttons/relation_map_buttons.js
index 6789a0355..6d75b73e2 100644
--- a/src/public/app/widgets/floating_buttons/relation_map_buttons.js
+++ b/src/public/app/widgets/floating_buttons/relation_map_buttons.js
@@ -9,14 +9,14 @@ const TPL = `
     </style>
 
     <button type="button"
-            class="relation-map-create-child-note floating-button btn bx bx-folder-plus no-print"
+            class="relation-map-create-child-note floating-button btn bx bx-folder-plus"
             title="Create new child note and add it into this relation map"></button>
     
     <button type="button"
-            class="relation-map-reset-pan-zoom floating-button btn bx bx-crop no-print"
+            class="relation-map-reset-pan-zoom floating-button btn bx bx-crop"
             title="Reset pan & zoom to initial coordinates and magnification"></button>
     
-    <div class="btn-group no-print">
+    <div class="btn-group">
         <button type="button"
                 class="relation-map-zoom-in floating-button btn bx bx-zoom-in"
                 title="Zoom In"></button>