gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-03-01 14:22:32 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zadam 2022-09-18 14:57:44 +02:00
parent 84f72edf1d
commit d4658b9c2a
8 changed files with 95 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/public/app/layouts/desktop_layout.js
View File

@ -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(

22
src/public/app/widgets/basic_widget.js
View File

@ -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) {

27
src/public/app/widgets/containers/container.js
View File

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

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

@ -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);
}
}

42
src/public/app/widgets/floating_buttons/hide_floating_buttons_button.js Normal file
View File

@ -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();
}
}

3
src/public/app/widgets/floating_buttons/mermaid_export_button.js
View File

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

8
src/public/app/widgets/floating_buttons/zpetne_odkazy.js
View File

@ -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();
}

4
src/public/stylesheets/style.css
View File

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