feat(react/floating_buttons): port show/hide

apps/client/src/widgets/FloatingButtons.css

@@ -72,10 +72,6 @@
     display: block;
 }
 
-.floating-buttons-children:not(.temporarily-hidden)+.show-floating-buttons {
-    display: none;
-}
-
 .show-floating-buttons {
     /* display: none;*/
     margin-left: 5px !important;
@@ -97,4 +93,21 @@
 .leaflet-pane {
     z-index: 50;
 }
+/* #endregion */
+
+/* #region Close floating buttons */
+.close-floating-buttons {
+    margin-left: 5px !important;
+}
+
+.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);
+}
 /* #endregion */

apps/client/src/widgets/FloatingButtons.tsx

@@ -1,12 +1,12 @@
 import { t } from "i18next";
 import "./FloatingButtons.css";
-import Button from "./react/Button";
 import { useNoteContext, useNoteProperty, useTriliumEvent, useTriliumEvents } from "./react/hooks";
 import { useContext, useEffect, useMemo, useState } from "preact/hooks";
 import { ParentComponent } from "./react/react_utils";
 import attributes from "../services/attributes";
 import { EventData, EventNames } from "../components/app_context";
 import { FLOATING_BUTTON_DEFINITIONS, FloatingButtonContext, FloatingButtonDefinition } from "./FloatingButtonsDefinitions";
+import ActionButton from "./react/ActionButton";
 
 async function getFloatingButtonDefinitions(context: FloatingButtonContext) {
     const defs: FloatingButtonDefinition[] = [];
@@ -70,15 +70,21 @@ export default function FloatingButtons() {
         getFloatingButtonDefinitions(context).then(setDefinitions);
     }, [ context, refreshCounter, noteMime ]);
 
+    // Manage the user-adjustable visibility of the floating buttons.
+    const [ visible, setVisible ] = useState(true);
+    useEffect(() => setVisible(true), [ note ]);
+
     return (
         <div className="floating-buttons no-print">
-            <div className="floating-buttons-children">
+            <div className={`floating-buttons-children ${!visible ? "temporarily-hidden" : ""}`}>
                 {context && definitions.map(({ component: Component }) => (
                     <Component {...context} />
                 ))}
+
+                {definitions.length && <CloseFloatingButton setVisible={setVisible} />}
             </div>
 
-            <ShowFloatingButton />
+            {!visible && definitions.length && <ShowFloatingButton setVisible={setVisible} /> }
         </div>
     )
 }
@@ -86,14 +92,28 @@ export default function FloatingButtons() {
 /**
  * Show button that displays floating button after click on close button
  */
-function ShowFloatingButton() {
+function ShowFloatingButton({ setVisible }: { setVisible(visible: boolean): void }) {
     return (
-        <div class="show-floating-buttons">
-            <Button
+        <div className="show-floating-buttons">
+            <ActionButton
                 className="show-floating-buttons-button"
                 icon="bx bx-chevrons-left"
                 text={t("show_floating_buttons_button.button_title")}
+                onClick={() => setVisible(true)}
             />
         </div>
     );
 }
+
+function CloseFloatingButton({ setVisible }: { setVisible(visible: boolean): void }) {
+    return (
+        <div className="close-floating-buttons">
+            <ActionButton
+                className="close-floating-buttons-button"
+                icon="bx bx-chevrons-right"
+                text={t("hide_floating_buttons_button.button_title")}
+                onClick={() => setVisible(false)}
+            />
+        </div>
+    );
+}

apps/client/src/widgets/floating_buttons/floating_buttons.ts

@@ -1,23 +0,0 @@
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import { t } from "../../services/i18n.js";
-import type FNote from "../../entities/fnote.js";
-import type BasicWidget from "../basic_widget.js";
-
-
-export default class FloatingButtons extends NoteContextAwareWidget {
-
-    private $children!: JQuery<HTMLElement>;
-
-    async refreshWithNote(note: FNote) {
-        this.toggle(true);
-        this.$widget.find(".show-floating-buttons-button").on("click", () => this.toggle(true));
-    }
-
-    toggle(show: boolean) {
-        this.$widget.find(".floating-buttons-children").toggleClass("temporarily-hidden", !show);
-    }
-
-    hideFloatingButtonsCommand() {
-        this.toggle(false);
-    }
-}

apps/client/src/widgets/floating_buttons/hide_floating_buttons_button.ts

@@ -1,43 +0,0 @@
-import { t } from "../../services/i18n.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-
-const TPL = /*html*/`
-<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-chevrons-right"
-            title="${t("hide_floating_buttons_button.button_title")}"></button>
-</div>
-`;
-
-export default class HideFloatingButtonsButton extends NoteContextAwareWidget {
-    doRender() {
-        super.doRender();
-
-        this.$widget = $(TPL);
-        this.$widget.on("click", () => this.triggerCommand("hideFloatingButtons"));
-        this.contentSized();
-    }
-}