bring back the possibility to close the floating buttons again, closes #3116

src/public/app/layouts/desktop_layout.js

@@ -80,6 +80,7 @@ import RelationMapButtons from "../widgets/floating_buttons/relation_map_buttons
 import MermaidExportButton from "../widgets/floating_buttons/mermaid_export_button.js";
 import EditableCodeButtonsWidget from "../widgets/type_widgets/editable_code_buttons.js";
 import ApiLogWidget from "../widgets/api_log.js";
+import HideFloatingButtonsButton from "../widgets/floating_buttons/hide_floating_buttons_button.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -186,6 +187,7 @@ export default class DesktopLayout {
                                     .child(new RelationMapButtons())
                                     .child(new MermaidExportButton())
                                     .child(new BacklinksWidget())
+                                    .child(new HideFloatingButtonsButton())
                                 )
                                 .child(new MermaidWidget())
                                 .child(

src/public/app/widgets/basic_widget.js

@@ -8,6 +8,28 @@ class BasicWidget extends Component {
             style: ''
         };
         this.classes = [];
+
+        this.children = [];
+        this.childPositionCounter = 10;
+    }
+
+    child(...components) {
+        if (!components) {
+            return this;
+        }
+
+        super.child(...components);
+
+        for (const component of components) {
+            if (component.position === undefined) {
+                component.position = this.childPositionCounter;
+                this.childPositionCounter += 10;
+            }
+        }
+
+        this.children.sort((a, b) => a.position - b.position < 0 ? -1 : 1);
+
+        return this;
     }
 
     id(id) {

src/public/app/widgets/containers/container.js

@@ -1,33 +1,6 @@
 import BasicWidget from "../basic_widget.js";
 
 export default class Container extends BasicWidget {
-    constructor() {
-        super();
-
-        this.children = [];
-
-        this.positionCounter = 10;
-    }
-
-    child(...components) {
-        if (!components) {
-            return this;
-        }
-
-        super.child(...components);
-
-        for (const component of components) {
-            if (component.position === undefined) {
-                component.position = this.positionCounter;
-                this.positionCounter += 10;
-            }
-        }
-
-        this.children.sort((a, b) => a.position - b.position < 0 ? -1 : 1);
-
-        return this;
-    }
-
     doRender() {
         this.$widget = $(`<div>`);
 

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

@@ -1,4 +1,4 @@
-import Container from "../containers/container.js";
+import NoteContextAwareWidget from "../note_context_aware_widget.js";
 
 const TPL = `
 <div class="floating-buttons">
@@ -16,7 +16,7 @@ const TPL = `
             z-index: 100;
         }
         
-        .floating-buttons-children > * {
+        .floating-buttons-children > *:not(.hidden-int):not(.no-content-hidden) {
             margin-left: 10px;
         }
         
@@ -24,12 +24,16 @@ const TPL = `
             font-size: 130%;
             padding: 5px 10px 4px 10px;
         }
+        
+        .floating-buttons.temporarily-hidden {
+            display: none;
+        }
     </style>
     
     <div class="floating-buttons-children"></div>
 </div>`;
 
-export default class FloatingButtons extends Container {
+export default class FloatingButtons extends NoteContextAwareWidget {
     doRender() {
         this.$widget = $(TPL);
         this.$children = this.$widget.find(".floating-buttons-children");
@@ -38,4 +42,16 @@ export default class FloatingButtons extends Container {
             this.$children.append(widget.render());
         }
     }
+
+    async refreshWithNote(note) {
+        this.toggle(true);
+    }
+
+    toggle(show) {
+        this.$widget.toggleClass("temporarily-hidden", !show);
+    }
+
+    hideFloatingButtonsCommand() {
+        this.toggle(false);
+    }
 }

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

@@ -0,0 +1,42 @@
+import NoteContextAwareWidget from "../note_context_aware_widget.js";
+
+const TPL = `
+<div class="close-floating-buttons">
+    <style>
+        .close-floating-buttons {
+            display: none;
+            margin-left: 5px !important;
+        }
+    
+        /* conditionally display close button if there's some other button visible */
+        .floating-buttons *:not(.hidden-int):not(.hidden-no-content) ~ .close-floating-buttons {
+            display: block;
+        }
+        
+        .close-floating-buttons-button {
+            border: 1px solid transparent;
+            color: var(--button-text-color);
+            padding: 6px;
+            border-radius: 100px;
+        }
+        
+        .close-floating-buttons-button:hover {
+            border: 1px solid var(--button-border-color);
+        }
+    </style>
+
+    <button type="button"
+            class="close-floating-buttons-button btn bx bx-x no-print"
+            title="Hide buttons"></button>
+</div>
+`;
+
+export default class HideFloatingButtonsButton extends NoteContextAwareWidget {
+    doRender() {
+        super.doRender();
+
+        this.$widget = $(TPL);
+        this.$widget.on('click', () => this.triggerCommand('hideFloatingButtons'));
+        this.contentSized();
+    }
+}

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

@@ -1,7 +1,4 @@
 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 = `
 <button type="button"

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

@@ -89,17 +89,21 @@ export default class BacklinksWidget extends NoteContextAwareWidget {
         const resp = await server.get(`notes/${this.noteId}/backlink-count`);
 
         if (!resp || !resp.count) {
-            this.$ticker.hide();
+            this.toggle(false);
             return;
         }
 
-        this.$ticker.show();
+        this.$ticker.toggle(true);
         this.$count.text(
             `${resp.count} backlink`
             + (resp.count === 1 ? '' : 's')
         );
     }
 
+    toggle(show) {
+        this.$widget.toggleClass("hidden-no-content", !show);
+    }
+
     clearItems() {
         this.$items.empty().hide();
     }

src/public/stylesheets/style.css

@@ -957,3 +957,7 @@ button.close:hover {
     text-shadow: none;
     color: currentColor;
 }
+
+.hidden-no-content {
+    display: none;
+}