diff --git a/src/public/app/dialogs/branch_prefix.js b/src/public/app/dialogs/branch_prefix.js
deleted file mode 100644
index fcb31a821..000000000
--- a/src/public/app/dialogs/branch_prefix.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import treeService from '../services/tree.js';
-import server from '../services/server.js';
-import froca from "../services/froca.js";
-import toastService from "../services/toast.js";
-import utils from "../services/utils.js";
-
-const $dialog = $("#branch-prefix-dialog");
-const $form = $("#branch-prefix-form");
-const $treePrefixInput = $("#branch-prefix-input");
-const $noteTitle = $('#branch-prefix-note-title');
-
-let branchId;
-
-export async function showDialog(notePath) {
- const {noteId, parentNoteId} = treeService.getNoteIdAndParentIdFromNotePath(notePath);
-
- if (!noteId || !parentNoteId) {
- return;
- }
-
- branchId = await froca.getBranchId(parentNoteId, noteId);
- const branch = froca.getBranch(branchId);
-
- if (!branch || branch.noteId === 'root') {
- return;
- }
-
- const parentNote = await froca.getNote(branch.parentNoteId);
-
- if (parentNote.type === 'search') {
- return;
- }
-
- utils.openDialog($dialog);
-
- $treePrefixInput.val(branch.prefix);
-
- const noteTitle = await treeService.getNoteTitle(noteId);
-
- $noteTitle.text(" - " + noteTitle);
-}
-
-async function savePrefix() {
- const prefix = $treePrefixInput.val();
-
- await server.put('branches/' + branchId + '/set-prefix', { prefix: prefix });
-
- $dialog.modal('hide');
-
- toastService.showMessage("Branch prefix has been saved.");
-}
-
-$form.on('submit', () => {
- savePrefix();
-
- return false;
-});
-
-$dialog.on('shown.bs.modal', () => $treePrefixInput.trigger('focus'));
\ No newline at end of file
diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js
index 0b33f9c0c..c8668109c 100644
--- a/src/public/app/layouts/desktop_layout.js
+++ b/src/public/app/layouts/desktop_layout.js
@@ -56,6 +56,7 @@ import NoteSourceDialog from "../dialogs/note_source.js";
import HelpDialog from "../widgets/dialogs/help.js";
import RecentChangesDialog from "../widgets/dialogs/recent_changes.js";
import BackendLogDialog from "../widgets/dialogs/backend_log.js";
+import BranchPrefixDialog from "../widgets/dialogs/branch_prefix.js";
export default class DesktopLayout {
constructor(customWidgets) {
@@ -186,6 +187,7 @@ export default class DesktopLayout {
.child(new NoteSourceDialog())
.child(new HelpDialog())
.child(new RecentChangesDialog())
- .child(new BackendLogDialog());
+ .child(new BackendLogDialog())
+ .child(new BranchPrefixDialog());
}
}
diff --git a/src/public/app/services/root_command_executor.js b/src/public/app/services/root_command_executor.js
index 33a797033..5de1313c5 100644
--- a/src/public/app/services/root_command_executor.js
+++ b/src/public/app/services/root_command_executor.js
@@ -20,15 +20,6 @@ export default class RootCommandExecutor extends Component {
import("../dialogs/markdown_import.js").then(d => d.importMarkdownInline());
}
- async editBranchPrefixCommand() {
- const notePath = appContext.tabManager.getActiveContextNotePath();
-
- if (notePath) {
- const editBranchPrefixDialog = await import("../dialogs/branch_prefix.js");
- editBranchPrefixDialog.showDialog(notePath);
- }
- }
-
editReadOnlyNoteCommand() {
const noteContext = appContext.tabManager.getActiveContext();
noteContext.readOnlyTemporarilyDisabled = true;
diff --git a/src/public/app/widgets/dialogs/branch_prefix.js b/src/public/app/widgets/dialogs/branch_prefix.js
new file mode 100644
index 000000000..52a2763e4
--- /dev/null
+++ b/src/public/app/widgets/dialogs/branch_prefix.js
@@ -0,0 +1,105 @@
+import treeService from '../../services/tree.js';
+import server from '../../services/server.js';
+import froca from "../../services/froca.js";
+import toastService from "../../services/toast.js";
+import utils from "../../services/utils.js";
+import BasicWidget from "../basic_widget.js";
+import appContext from "../../services/app_context.js";
+
+let branchId;
+
+const TPL = ``;
+
+export default class BranchPrefixDialog extends BasicWidget {
+ doRender() {
+ this.$widget = $(TPL);
+ this.$form = this.$widget.find(".branch-prefix-form");
+ this.$treePrefixInput = this.$widget.find(".branch-prefix-input");
+ this.$noteTitle = this.$widget.find('.branch-prefix-note-title');
+
+ this.$form.on('submit', () => {
+ this.savePrefix();
+
+ return false;
+ });
+
+ this.$widget.on('shown.bs.modal', () => this.$treePrefixInput.trigger('focus'));
+ }
+
+ async refresh(notePath) {
+ const {noteId, parentNoteId} = treeService.getNoteIdAndParentIdFromNotePath(notePath);
+
+ if (!noteId || !parentNoteId) {
+ return;
+ }
+
+ branchId = await froca.getBranchId(parentNoteId, noteId);
+ const branch = froca.getBranch(branchId);
+
+ if (!branch || branch.noteId === 'root') {
+ return;
+ }
+
+ const parentNote = await froca.getNote(branch.parentNoteId);
+
+ if (parentNote.type === 'search') {
+ return;
+ }
+
+ this.$treePrefixInput.val(branch.prefix);
+
+ const noteTitle = await treeService.getNoteTitle(noteId);
+
+ this.$noteTitle.text(" - " + noteTitle);
+ }
+
+ async editBranchPrefixEvent() {
+ const notePath = appContext.tabManager.getActiveContextNotePath();
+
+ await this.refresh(notePath);
+
+ utils.openDialog(this.$widget);
+ }
+
+ async savePrefix() {
+ const prefix = this.$treePrefixInput.val();
+
+ await server.put(`branches/${branchId}/set-prefix`, {prefix: prefix});
+
+ this.$widget.modal('hide');
+
+ toastService.showMessage("Branch prefix has been saved.");
+ }
+}
diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs
index fb86e7bab..0b48e3e14 100644
--- a/src/views/desktop.ejs
+++ b/src/views/desktop.ejs
@@ -18,7 +18,6 @@
<%- include('dialogs/add_link.ejs') %>
-<%- include('dialogs/branch_prefix.ejs') %>
<%- include('dialogs/export.ejs') %>
<%- include('dialogs/import.ejs') %>
<%- include('dialogs/jump_to_note.ejs') %>
diff --git a/src/views/dialogs/branch_prefix.ejs b/src/views/dialogs/branch_prefix.ejs
deleted file mode 100644
index 4fd934b32..000000000
--- a/src/views/dialogs/branch_prefix.ejs
+++ /dev/null
@@ -1,33 +0,0 @@
-