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

Floating buttons can be displayed again after being closed

Browse Source
This commit is contained in:
SiriusXT 2024-09-15 22:22:38 +08:00
parent e511d6aecf
commit ec7fabcb58
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 { 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() {

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

@ -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>
`;

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

@ -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"
},