diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js
index de933fbb2..70656e413 100644
--- a/src/public/app/layouts/desktop_layout.js
+++ b/src/public/app/layouts/desktop_layout.js
@@ -46,7 +46,7 @@ import OpenNoteButtonWidget from "../widgets/buttons/open_note_button_widget.js"
import MermaidWidget from "../widgets/mermaid.js";
import BookmarkButtons from "../widgets/bookmark_buttons.js";
import NoteWrapperWidget from "../widgets/note_wrapper.js";
-import BacklinksWidget from "../widgets/backlinks.js";
+import BacklinksWidget from "../widgets/floating_buttons/backlinks.js";
import SharedInfoWidget from "../widgets/shared_info.js";
import FindWidget from "../widgets/find.js";
import TocWidget from "../widgets/toc.js";
@@ -75,6 +75,8 @@ import InfoDialog from "../widgets/dialogs/info.js";
import ConfirmDialog from "../widgets/dialogs/confirm.js";
import PromptDialog from "../widgets/dialogs/prompt.js";
import OptionsDialog from "../widgets/dialogs/options.js";
+import FloatingButtons from "../widgets/floating_buttons/floating_buttons.js";
+import RelationMapButtons from "../widgets/floating_buttons/relation_map_buttons.js";
export default class DesktopLayout {
constructor(customWidgets) {
@@ -177,7 +179,10 @@ export default class DesktopLayout {
)
.child(new SharedInfoWidget())
.child(new NoteUpdateStatusWidget())
- .child(new BacklinksWidget())
+ .child(new FloatingButtons()
+ .child(new BacklinksWidget())
+ .child(new RelationMapButtons())
+ )
.child(new MermaidWidget())
.child(
new ScrollingContainer()
diff --git a/src/public/app/widgets/backlinks.js b/src/public/app/widgets/floating_buttons/backlinks.js
similarity index 80%
rename from src/public/app/widgets/backlinks.js
rename to src/public/app/widgets/floating_buttons/backlinks.js
index 2e32d5a6f..2b622b81a 100644
--- a/src/public/app/widgets/backlinks.js
+++ b/src/public/app/widgets/floating_buttons/backlinks.js
@@ -1,7 +1,7 @@
-import NoteContextAwareWidget from "./note_context_aware_widget.js";
-import linkService from "../services/link.js";
-import server from "../services/server.js";
-import froca from "../services/froca.js";
+import NoteContextAwareWidget from "../note_context_aware_widget.js";
+import linkService from "../../services/link.js";
+import server from "../../services/server.js";
+import froca from "../../services/froca.js";
const TPL = `
@@ -11,10 +11,6 @@ const TPL = `
}
.backlinks-ticker {
- position: absolute;
- top: 10px;
- right: 10px;
- width: 130px;
border-radius: 10px;
border-color: var(--main-border-color);
background-color: var(--more-accented-background-color);
@@ -29,11 +25,7 @@ const TPL = `
.backlinks-count {
cursor: pointer;
}
-
- .backlinks-close-ticker {
- cursor: pointer;
- }
-
+
.backlinks-items {
z-index: 10;
position: absolute;
@@ -58,16 +50,10 @@ const TPL = `
font-weight: bold;
background-color: yellow;
}
-
- /* relation map has already buttons in that position */
- .type-relation-map .backlinks-ticker { top: 50px; }
- .type-relation-map .backlinks-items { top: 100px; }
-
-
@@ -90,13 +76,6 @@ export default class BacklinksWidget extends NoteContextAwareWidget {
}
});
- this.$closeTickerButton = this.$widget.find('.backlinks-close-ticker');
- this.$closeTickerButton.on("click", () => {
- this.$ticker.hide();
-
- this.clearItems();
- });
-
this.contentSized();
}
diff --git a/src/public/app/widgets/floating_buttons/floating_buttons.js b/src/public/app/widgets/floating_buttons/floating_buttons.js
new file mode 100644
index 000000000..98a715db6
--- /dev/null
+++ b/src/public/app/widgets/floating_buttons/floating_buttons.js
@@ -0,0 +1,32 @@
+import Container from "../containers/container.js";
+
+const TPL = `
+
`;
+
+export default class FloatingButtons extends Container {
+ doRender() {
+ this.$widget = $(TPL);
+ this.$children = this.$widget.find(".floating-buttons-children");
+
+ for (const widget of this.children) {
+ this.$children.append(widget.render());
+ }
+ }
+}
diff --git a/src/public/app/widgets/floating_buttons/relation_map_buttons.js b/src/public/app/widgets/floating_buttons/relation_map_buttons.js
new file mode 100644
index 000000000..a2b3ac864
--- /dev/null
+++ b/src/public/app/widgets/floating_buttons/relation_map_buttons.js
@@ -0,0 +1,68 @@
+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 = `
+
+
+
+
+
+
+
+
+
+
+
`;
+
+export default class RelationMapButtons extends NoteContextAwareWidget {
+ doRender() {
+ super.doRender();
+
+ this.$widget = $(TPL);
+ this.$createChildNote = this.$widget.find(".relation-map-create-child-note");
+ this.$zoomInButton = this.$widget.find(".relation-map-zoom-in");
+ this.$zoomOutButton = this.$widget.find(".relation-map-zoom-out");
+ this.$resetPanZoomButton = this.$widget.find(".relation-map-reset-pan-zoom");
+
+ this.$createChildNote.on('click', async () => {
+ const title = await dialogService.prompt({ message: "Enter title of new note", defaultValue: "new note" });
+
+ if (!title.trim()) {
+ return;
+ }
+
+ const {note} = await server.post(`notes/${this.noteId}/children?target=into`, {
+ title,
+ content: '',
+ type: 'text'
+ });
+
+ toastService.showMessage("Click on canvas to place new note");
+
+ this.clipboard = { noteId: note.noteId, title };
+ });
+
+ this.$resetPanZoomButton.on('click', () => {
+ // reset to initial pan & zoom state
+ this.pzInstance.zoomTo(0, 0, 1 / this.getZoom());
+ this.pzInstance.moveTo(0, 0);
+ });
+
+ this.$zoomInButton.on('click', () => this.pzInstance.zoomTo(0, 0, 1.2));
+ this.$zoomOutButton.on('click', () => this.pzInstance.zoomTo(0, 0, 0.8));
+ }
+}
diff --git a/src/public/app/widgets/type_widgets/relation_map.js b/src/public/app/widgets/type_widgets/relation_map.js
index 663ba033c..39cb55f87 100644
--- a/src/public/app/widgets/type_widgets/relation_map.js
+++ b/src/public/app/widgets/type_widgets/relation_map.js
@@ -66,28 +66,6 @@ const linkOverlays = [
const TPL = `
-
-
-
-
-
-
-
-
-
-
@@ -101,10 +79,6 @@ export default class RelationMapTypeWidget extends TypeWidget {
doRender() {
this.$widget = $(TPL);
this.$relationMapContainer = this.$widget.find(".relation-map-container");
- this.$createChildNote = this.$widget.find(".relation-map-create-child-note");
- this.$zoomInButton = this.$widget.find(".relation-map-zoom-in");
- this.$zoomOutButton = this.$widget.find(".relation-map-zoom-out");
- this.$resetPanZoomButton = this.$widget.find(".relation-map-reset-pan-zoom");
this.mapData = null;
this.jsPlumbInstance = null;
@@ -151,30 +125,6 @@ export default class RelationMapTypeWidget extends TypeWidget {
this.clipboard = null;
- this.$createChildNote.on('click', async () => {
- const title = await dialogService.prompt({ message: "Enter title of new note", defaultValue: "new note" });
-
- if (!title.trim()) {
- return;
- }
-
- const {note} = await server.post(`notes/${this.noteId}/children?target=into`, {
- title,
- content: '',
- type: 'text'
- });
-
- toastService.showMessage("Click on canvas to place new note");
-
- this.clipboard = { noteId: note.noteId, title };
- });
-
- this.$resetPanZoomButton.on('click', () => {
- // reset to initial pan & zoom state
- this.pzInstance.zoomTo(0, 0, 1 / this.getZoom());
- this.pzInstance.moveTo(0, 0);
- });
-
this.$widget.on("drop", ev => this.dropNoteOntoRelationMapHandler(ev));
this.$widget.on("dragover", ev => ev.preventDefault());
@@ -376,9 +326,6 @@ export default class RelationMapTypeWidget extends TypeWidget {
// set to initial coordinates
this.pzInstance.moveTo(0, 0);
}
-
- this.$zoomInButton.on('click', () => this.pzInstance.zoomTo(0, 0, 1.2));
- this.$zoomOutButton.on('click', () => this.pzInstance.zoomTo(0, 0, 0.8));
}
saveCurrentTransform() {