floating buttons WIP

src/public/app/layouts/desktop_layout.js

@@ -46,7 +46,7 @@ import OpenNoteButtonWidget from "../widgets/buttons/open_note_button_widget.js"
 import MermaidWidget from "../widgets/mermaid.js";
 import BookmarkButtons from "../widgets/bookmark_buttons.js";
 import NoteWrapperWidget from "../widgets/note_wrapper.js";
-import BacklinksWidget from "../widgets/backlinks.js";
+import BacklinksWidget from "../widgets/floating_buttons/backlinks.js";
 import SharedInfoWidget from "../widgets/shared_info.js";
 import FindWidget from "../widgets/find.js";
 import TocWidget from "../widgets/toc.js";
@@ -75,6 +75,8 @@ import InfoDialog from "../widgets/dialogs/info.js";
 import ConfirmDialog from "../widgets/dialogs/confirm.js";
 import PromptDialog from "../widgets/dialogs/prompt.js";
 import OptionsDialog from "../widgets/dialogs/options.js";
+import FloatingButtons from "../widgets/floating_buttons/floating_buttons.js";
+import RelationMapButtons from "../widgets/floating_buttons/relation_map_buttons.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -177,7 +179,10 @@ export default class DesktopLayout {
                                 )
                                 .child(new SharedInfoWidget())
                                 .child(new NoteUpdateStatusWidget())
-                                .child(new BacklinksWidget())
+                                .child(new FloatingButtons()
+                                    .child(new BacklinksWidget())
+                                    .child(new RelationMapButtons())
+                                )
                                 .child(new MermaidWidget())
                                 .child(
                                     new ScrollingContainer()

src/public/app/widgets/floating_buttons/backlinks.js

@@ -1,7 +1,7 @@
-import NoteContextAwareWidget from "./note_context_aware_widget.js";
+import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import linkService from "../services/link.js";
+import linkService from "../../services/link.js";
-import server from "../services/server.js";
+import server from "../../services/server.js";
-import froca from "../services/froca.js";
+import froca from "../../services/froca.js";
 
 const TPL = `
 <div class="backlinks-widget">
@@ -11,10 +11,6 @@ const TPL = `
         }
     
         .backlinks-ticker {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            width: 130px;
             border-radius: 10px;
             border-color: var(--main-border-color);
             background-color: var(--more-accented-background-color);
@@ -29,11 +25,7 @@ const TPL = `
         .backlinks-count {
             cursor: pointer;
         }
-        
+                        
-        .backlinks-close-ticker {
-            cursor: pointer;
-        }
-                
         .backlinks-items {
             z-index: 10;
             position: absolute;
@@ -58,16 +50,10 @@ const TPL = `
             font-weight: bold;
             background-color: yellow;
         }
-        
-        /* relation map has already buttons in that position */
-        .type-relation-map .backlinks-ticker { top: 50px; }
-        .type-relation-map .backlinks-items { top: 100px; }
     </style>
     
     <div class="backlinks-ticker">
         <span class="backlinks-count"></span>
-        
-        <span class="bx bx-x backlinks-close-ticker"></span> 
     </div>   
     
     <div class="backlinks-items" style="display: none;"></div>
@@ -90,13 +76,6 @@ export default class BacklinksWidget extends NoteContextAwareWidget {
             }
         });
 
-        this.$closeTickerButton = this.$widget.find('.backlinks-close-ticker');
-        this.$closeTickerButton.on("click", () => {
-            this.$ticker.hide();
-
-            this.clearItems();
-        });
-
         this.contentSized();
     }
 

src/public/app/widgets/floating_buttons/floating_buttons.js

@@ -0,0 +1,32 @@
+import Container from "../containers/container.js";
+
+const TPL = `
+<div class="floating-buttons">
+    <style>
+        .floating-buttons {
+            position: relative;
+        }
+        
+        .floating-buttons-children {
+            position: absolute; 
+            top: 10px; 
+            right: 10px;
+            display: flex;
+            flex-direction: row;
+            z-index: 100;
+        }
+    </style>
+    
+    <div class="floating-buttons-children"></div>
+</div>`;
+
+export default class FloatingButtons extends Container {
+    doRender() {
+        this.$widget = $(TPL);
+        this.$children = this.$widget.find(".floating-buttons-children");
+
+        for (const widget of this.children) {
+            this.$children.append(widget.render());
+        }
+    }
+}

src/public/app/widgets/floating_buttons/relation_map_buttons.js

@@ -0,0 +1,68 @@
+import NoteContextAwareWidget from "../note_context_aware_widget.js";
+import dialogService from "../dialog.js";
+import server from "../../services/server.js";
+import toastService from "../../services/toast.js";
+
+const TPL = `
+<div>
+    <button class="relation-map-create-child-note btn btn-sm floating-button no-print" type="button"
+                title="Create new child note and add it into this relation map">
+        <span class="bx bx-folder-plus"></span>
+    
+        Create child note
+    </button>
+    
+    <button type="button"
+            class="relation-map-reset-pan-zoom btn icon-button floating-button bx bx-crop no-print"
+            title="Reset pan & zoom to initial coordinates and magnification"
+            style="right: 100px;"></button>
+    
+    <div class="btn-group floating-button no-print" style="right: 10px;">
+        <button type="button"
+                class="relation-map-zoom-in btn icon-button bx bx-zoom-in"
+                title="Zoom In"></button>
+    
+        <button type="button"
+                class="relation-map-zoom-out btn icon-button bx bx-zoom-out"
+                title="Zoom Out"></button>
+    </div>
+</div>`;
+
+export default class RelationMapButtons extends NoteContextAwareWidget {
+    doRender() {
+        super.doRender();
+
+        this.$widget = $(TPL);
+        this.$createChildNote = this.$widget.find(".relation-map-create-child-note");
+        this.$zoomInButton = this.$widget.find(".relation-map-zoom-in");
+        this.$zoomOutButton = this.$widget.find(".relation-map-zoom-out");
+        this.$resetPanZoomButton = this.$widget.find(".relation-map-reset-pan-zoom");
+
+        this.$createChildNote.on('click', async () => {
+            const title = await dialogService.prompt({ message: "Enter title of new note",  defaultValue: "new note" });
+
+            if (!title.trim()) {
+                return;
+            }
+
+            const {note} = await server.post(`notes/${this.noteId}/children?target=into`, {
+                title,
+                content: '',
+                type: 'text'
+            });
+
+            toastService.showMessage("Click on canvas to place new note");
+
+            this.clipboard = { noteId: note.noteId, title };
+        });
+
+        this.$resetPanZoomButton.on('click', () => {
+            // reset to initial pan & zoom state
+            this.pzInstance.zoomTo(0, 0, 1 / this.getZoom());
+            this.pzInstance.moveTo(0, 0);
+        });
+
+        this.$zoomInButton.on('click', () => this.pzInstance.zoomTo(0, 0, 1.2));
+        this.$zoomOutButton.on('click', () => this.pzInstance.zoomTo(0, 0, 0.8));
+    }
+}

src/public/app/widgets/type_widgets/relation_map.js

@@ -66,28 +66,6 @@ const linkOverlays = [
 
 const TPL = `
 <div class="note-detail-relation-map note-detail-printable">
-    <button class="relation-map-create-child-note btn btn-sm floating-button no-print" type="button"
-            title="Create new child note and add it into this relation map">
-        <span class="bx bx-folder-plus"></span>
-
-        Create child note
-    </button>
-
-    <button type="button"
-            class="relation-map-reset-pan-zoom btn icon-button floating-button bx bx-crop no-print"
-            title="Reset pan & zoom to initial coordinates and magnification"
-            style="right: 100px;"></button>
-
-    <div class="btn-group floating-button no-print" style="right: 10px;">
-        <button type="button"
-                class="relation-map-zoom-in btn icon-button bx bx-zoom-in"
-                title="Zoom In"></button>
-
-        <button type="button"
-                class="relation-map-zoom-out btn icon-button bx bx-zoom-out"
-                title="Zoom Out"></button>
-    </div>
-
     <div class="relation-map-wrapper">
        <div class="relation-map-container"></div>
     </div>
@@ -101,10 +79,6 @@ export default class RelationMapTypeWidget extends TypeWidget {
     doRender() {
         this.$widget = $(TPL);
         this.$relationMapContainer = this.$widget.find(".relation-map-container");
-        this.$createChildNote = this.$widget.find(".relation-map-create-child-note");
-        this.$zoomInButton = this.$widget.find(".relation-map-zoom-in");
-        this.$zoomOutButton = this.$widget.find(".relation-map-zoom-out");
-        this.$resetPanZoomButton = this.$widget.find(".relation-map-reset-pan-zoom");
 
         this.mapData = null;
         this.jsPlumbInstance = null;
@@ -151,30 +125,6 @@ export default class RelationMapTypeWidget extends TypeWidget {
 
         this.clipboard = null;
 
-        this.$createChildNote.on('click', async () => {
-            const title = await dialogService.prompt({ message: "Enter title of new note",  defaultValue: "new note" });
-
-            if (!title.trim()) {
-                return;
-            }
-
-            const {note} = await server.post(`notes/${this.noteId}/children?target=into`, {
-                title,
-                content: '',
-                type: 'text'
-            });
-
-            toastService.showMessage("Click on canvas to place new note");
-
-            this.clipboard = { noteId: note.noteId, title };
-        });
-
-        this.$resetPanZoomButton.on('click', () => {
-            // reset to initial pan & zoom state
-            this.pzInstance.zoomTo(0, 0, 1 / this.getZoom());
-            this.pzInstance.moveTo(0, 0);
-        });
-
         this.$widget.on("drop", ev => this.dropNoteOntoRelationMapHandler(ev));
         this.$widget.on("dragover", ev => ev.preventDefault());
 
@@ -376,9 +326,6 @@ export default class RelationMapTypeWidget extends TypeWidget {
             // set to initial coordinates
             this.pzInstance.moveTo(0, 0);
         }
-
-        this.$zoomInButton.on('click', () => this.pzInstance.zoomTo(0, 0, 1.2));
-        this.$zoomOutButton.on('click', () => this.pzInstance.zoomTo(0, 0, 0.8));
     }
 
     saveCurrentTransform() {