Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-27 18:12:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #432 from TriliumNext/hide_float_button

Browse Source 
Floating buttons can be displayed again after being closed
This commit is contained in:
Elian Doran 2024-09-15 23:21:44 +03:00 committed by GitHub
commit 12543f762b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 41 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/public/app/widgets/floating_buttons/floating_buttons.js
View File

@ -1,4 +1,5 @@
import NoteContextAwareWidget from "../note_context_aware_widget.js"; import NoteContextAwareWidget from "../note_context_aware_widget.js";
import { t } from "../../services/i18n.js";
const TPL = ` const TPL = `
<div class="floating-buttons no-print"> <div class="floating-buttons no-print">
@ -7,7 +8,7 @@ const TPL = `
position: relative; position: relative;
} }
.floating-buttons-children { .floating-buttons-children,.show-floating-buttons {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
@ -42,12 +43,44 @@ const TPL = `
border-color: var(--button-border-color); border-color: var(--button-border-color);
} }
.floating-buttons.temporarily-hidden { .floating-buttons .floating-buttons-children.temporarily-hidden {
display: none; display: none;
} }
</style> </style>
<div class="floating-buttons-children"></div> <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>`; </div>`;
export default class FloatingButtons extends NoteContextAwareWidget { export default class FloatingButtons extends NoteContextAwareWidget {
@ -62,10 +95,11 @@ export default class FloatingButtons extends NoteContextAwareWidget {
async refreshWithNote(note) { async refreshWithNote(note) {
this.toggle(true); this.toggle(true);
this.$widget.find(".show-floating-buttons-button").on('click', () => this.toggle(true));
} }
toggle(show) { toggle(show) {
this.$widget.toggleClass("temporarily-hidden", !show); this.$widget.find(".floating-buttons-children").toggleClass("temporarily-hidden", !show);
} }
hideFloatingButtonsCommand() { hideFloatingButtonsCommand() {

2
src/public/app/widgets/floating_buttons/hide_floating_buttons_button.js
View File

@ -27,7 +27,7 @@ const TPL = `
</style> </style>
<button type="button" <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> title="${t('hide_floating_buttons_button.button_title')}"></button>
</div> </div>
`; `;

3
src/public/translations/en/translation.json
View File

@ -660,6 +660,9 @@
"hide_floating_buttons_button": { "hide_floating_buttons_button": {
"button_title": "Hide buttons" "button_title": "Hide buttons"
}, },
"show_floating_buttons_button": {
"button_title": "Show buttons"
},
"svg_export_button": { "svg_export_button": {
"button_title": "Export diagram as SVG" "button_title": "Export diagram as SVG"
}, },