Merge pull request #432 from TriliumNext/hide_float_button

Floating buttons can be displayed again after being closed
TriliumNext · Sep 15, 2024 · 12543f7 · 12543f7
2 parents e511d6a + ec7fabc
commit 12543f7
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 4 deletions.
diff --git a/src/public/app/widgets/floating_buttons/floating_buttons.js b/src/public/app/widgets/floating_buttons/floating_buttons.js
@@ -1,4 +1,5 @@
 import NoteContextAwareWidget from "../note_context_aware_widget.js";
+import { t } from "../../services/i18n.js";
 
 const TPL = `
 <div class="floating-buttons no-print">
@@ -7,7 +8,7 @@ const TPL = `
             position: relative;
         }
         
-        .floating-buttons-children {
+        .floating-buttons-children,.show-floating-buttons {
             position: absolute; 
             top: 10px; 
             right: 10px;
@@ -42,12 +43,44 @@ const TPL = `
             border-color: var(--button-border-color);
         }
         
-        .floating-buttons.temporarily-hidden {
+        .floating-buttons .floating-buttons-children.temporarily-hidden {
             display: none;
         }
     </style>
     
     <div class="floating-buttons-children"></div>
+
+    <!-- Show button that displays floating button after click on close button -->
+    <div class="show-floating-buttons">
+        <style>
+            .floating-buttons-children.temporarily-hidden+.show-floating-buttons {
+                display: block;
+            }
+
+            .floating-buttons-children:not(.temporarily-hidden)+.show-floating-buttons {
+                display: none;
+            }
+
+            .show-floating-buttons {
+                /* display: none;*/
+                margin-left: 5px !important;
+            }
+
+            .show-floating-buttons-button {
+                border: 1px solid transparent;
+                color: var(--button-text-color);
+                padding: 6px;
+                border-radius: 100px;
+            }
+
+            .show-floating-buttons-button:hover {
+                border: 1px solid var(--button-border-color);
+            }
+        </style>
+
+        <button type="button" class="show-floating-buttons-button btn bx bx-chevrons-left"
+            title="${t('show_floating_buttons_button.button_title')}"></button>
+    </div>
 </div>`;
 
 export default class FloatingButtons extends NoteContextAwareWidget {
@@ -62,10 +95,11 @@ export default class FloatingButtons extends NoteContextAwareWidget {
 
     async refreshWithNote(note) {
         this.toggle(true);
+        this.$widget.find(".show-floating-buttons-button").on('click', () => this.toggle(true));
     }
 
     toggle(show) {
-        this.$widget.toggleClass("temporarily-hidden", !show);
+        this.$widget.find(".floating-buttons-children").toggleClass("temporarily-hidden", !show);
     }
 
     hideFloatingButtonsCommand() {

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
@@ -27,7 +27,7 @@ const TPL = `
     </style>
 
     <button type="button"
-            class="close-floating-buttons-button btn bx bx-x"
+            class="close-floating-buttons-button btn bx bx-chevrons-right"
             title="${t('hide_floating_buttons_button.button_title')}"></button>
 </div>
 `;

diff --git a/src/public/translations/en/translation.json b/src/public/translations/en/translation.json
@@ -660,6 +660,9 @@
   "hide_floating_buttons_button": {
     "button_title": "Hide buttons"
   },
+  "show_floating_buttons_button": {
+    "button_title": "Show buttons"
+  },
   "svg_export_button": {
     "button_title": "Export diagram as SVG"
   },