zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2024-09-22 00:26:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

floating buttons WIP

Browse source
This commit is contained in:
zadam 2022-06-21 23:27:34 +02:00
parent 2e1bef2df7
commit e51276f532
5 changed files with 112 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/public/app/layouts/desktop_layout.js
View file

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

31
src/public/app/widgets/backlinks.js → src/public/app/widgets/floating_buttons/backlinks.js
View file

@ -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 = `
<div class="backlinks-widget">
@ -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; }
</style>
<div class="backlinks-ticker">
<span class="backlinks-count"></span>
<span class="bx bx-x backlinks-close-ticker"></span>
</div>
<div class="backlinks-items" style="display: none;"></div>
@ -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();
}

32
src/public/app/widgets/floating_buttons/floating_buttons.js Normal file
View file

@ -0,0 +1,32 @@
import Container from "../containers/container.js";
const TPL = `
<div class="floating-buttons">
<style>
.floating-buttons {
position: relative;
}
.floating-buttons-children {
position: absolute;
top: 10px;
right: 10px;
display: flex;
flex-direction: row;
z-index: 100;
}
</style>
<div class="floating-buttons-children"></div>
</div>`;
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());
}
}
}

68
src/public/app/widgets/floating_buttons/relation_map_buttons.js Normal file
View file

@ -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 = `
<div>
<button class="relation-map-create-child-note btn btn-sm floating-button no-print" type="button"
title="Create new child note and add it into this relation map">
<span class="bx bx-folder-plus"></span>
Create child note
</button>
<button type="button"
class="relation-map-reset-pan-zoom btn icon-button floating-button bx bx-crop no-print"
title="Reset pan & zoom to initial coordinates and magnification"
style="right: 100px;"></button>
<div class="btn-group floating-button no-print" style="right: 10px;">
<button type="button"
class="relation-map-zoom-in btn icon-button bx bx-zoom-in"
title="Zoom In"></button>
<button type="button"
class="relation-map-zoom-out btn icon-button bx bx-zoom-out"
title="Zoom Out"></button>
</div>
</div>`;
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));
}
}

53
src/public/app/widgets/type_widgets/relation_map.js
View file

@ -66,28 +66,6 @@ const linkOverlays = [
const TPL = `
<div class="note-detail-relation-map note-detail-printable">
<button class="relation-map-create-child-note btn btn-sm floating-button no-print" type="button"
title="Create new child note and add it into this relation map">
<span class="bx bx-folder-plus"></span>
Create child note
</button>
<button type="button"
class="relation-map-reset-pan-zoom btn icon-button floating-button bx bx-crop no-print"
title="Reset pan & zoom to initial coordinates and magnification"
style="right: 100px;"></button>
<div class="btn-group floating-button no-print" style="right: 10px;">
<button type="button"
class="relation-map-zoom-in btn icon-button bx bx-zoom-in"
title="Zoom In"></button>
<button type="button"
class="relation-map-zoom-out btn icon-button bx bx-zoom-out"
title="Zoom Out"></button>
</div>
<div class="relation-map-wrapper">
<div class="relation-map-container"></div>
</div>
@ -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() {