From 93f0596b166d21e1215777256b06bbce53f7e716 Mon Sep 17 00:00:00 2001 From: zadam Date: Thu, 2 Jun 2022 14:16:49 +0200 Subject: [PATCH] select template when creating note, closes #2813 --- src/public/app/dialogs/note_type_chooser.js | 94 +++++++++++++++++++ src/public/app/services/note_autocomplete.js | 11 ++- src/public/app/services/note_create.js | 15 +++ src/public/app/services/note_types.js | 40 ++++++++ src/public/app/services/tree_context_menu.js | 40 +------- .../attribute_widgets/attribute_editor.js | 2 +- .../app/widgets/type_widgets/editable_text.js | 2 +- src/public/stylesheets/style.css | 12 ++- src/public/stylesheets/theme-dark.css | 6 +- src/public/stylesheets/theme-light.css | 4 +- src/views/desktop.ejs | 1 + src/views/dialogs/note_type_chooser.ejs | 34 +++++++ 12 files changed, 214 insertions(+), 47 deletions(-) create mode 100644 src/public/app/dialogs/note_type_chooser.js create mode 100644 src/public/app/services/note_types.js create mode 100644 src/views/dialogs/note_type_chooser.ejs diff --git a/src/public/app/dialogs/note_type_chooser.js b/src/public/app/dialogs/note_type_chooser.js new file mode 100644 index 000000000..e8c712025 --- /dev/null +++ b/src/public/app/dialogs/note_type_chooser.js @@ -0,0 +1,94 @@ +import noteTypesService from "../services/note_types.js"; + +const $dialog = $("#note-type-chooser-dialog"); +const $noteTypeDropdown = $("#note-type-dropdown"); +const $noteTypeDropdownTrigger = $("#note-type-dropdown-trigger"); +$noteTypeDropdownTrigger.dropdown(); + +let resolve; +let $originalFocused; // element focused before the dialog was opened, so we can return to it afterwards +let $originalDialog; + +export async function chooseNoteType() { + $originalFocused = $(':focus'); + + const noteTypes = await noteTypesService.getNoteTypeItems(); + + $noteTypeDropdown.empty(); + + for (const noteType of noteTypes) { + if (noteType.title === '----') { + $noteTypeDropdown.append($('
').append("Templates:")); + } + else { + $noteTypeDropdown.append( + $('') + .attr("data-note-type", noteType.type) + .attr("data-template-note-id", noteType.templateNoteId) + .append($("").addClass(noteType.uiIcon)) + .append(" " + noteType.title) + ); + } + } + + $noteTypeDropdownTrigger.dropdown('show'); + + $originalDialog = glob.activeDialog; + glob.activeDialog = $dialog; + $dialog.modal(); + + $noteTypeDropdown.find(".dropdown-item:first").focus(); + + return new Promise((res, rej) => { resolve = res; }); +} + +$dialog.on("hidden.bs.modal", () => { + if (resolve) { + resolve({success: false}); + } + + if ($originalFocused) { + $originalFocused.trigger('focus'); + $originalFocused = null; + } + + glob.activeDialog = $originalDialog; +}); + +function doResolve(e) { + const $item = $(e.target).closest(".dropdown-item"); + const noteType = $item.attr("data-note-type"); + const templateNoteId = $item.attr("data-template-note-id"); + + resolve({ + success: true, + noteType, + templateNoteId + }); + resolve = null; + + $dialog.modal("hide"); +} + +$noteTypeDropdown.on('click', '.dropdown-item', e => doResolve(e)); + +$noteTypeDropdown.on('focus', '.dropdown-item', e => { + $noteTypeDropdown.find('.dropdown-item').each((i, el) => { + $(el).toggleClass('active', el === e.target); + }); +}); + +$noteTypeDropdown.on('keydown', '.dropdown-item', e => { + if (e.key === 'Enter') { + doResolve(e); + e.preventDefault(); + return false; + } +}); + +$noteTypeDropdown.parent().on('hide.bs.dropdown', e => { + // prevent closing dropdown by clicking outside + if (e.clickEvent) { + e.preventDefault(); + } +}); diff --git a/src/public/app/services/note_autocomplete.js b/src/public/app/services/note_autocomplete.js index e05d9ad6d..5ee408edc 100644 --- a/src/public/app/services/note_autocomplete.js +++ b/src/public/app/services/note_autocomplete.js @@ -170,9 +170,18 @@ function initNoteAutocomplete($el, options) { } if (suggestion.action === 'create-note') { + const noteTypeChooserDialog = await import('../dialogs/note_type_chooser.js'); + const {success, noteType, templateNoteId} = await noteTypeChooserDialog.chooseNoteType(); + + if (!success) { + return; + } + const {note} = await noteCreateService.createNote(suggestion.parentNoteId, { title: suggestion.noteTitle, - activate: false + activate: false, + type: noteType, + templateNoteId: templateNoteId }); suggestion.notePath = treeService.getSomeNotePath(note); diff --git a/src/public/app/services/note_create.js b/src/public/app/services/note_create.js index 1357406af..bb08fabd4 100644 --- a/src/public/app/services/note_create.js +++ b/src/public/app/services/note_create.js @@ -75,6 +75,20 @@ async function createNote(parentNotePath, options = {}) { }; } +async function createNoteWithTypePrompt(parentNotePath, options = {}) { + const noteTypeChooserDialog = await import('../dialogs/note_type_chooser.js'); + const {success, noteType, templateNoteId} = await noteTypeChooserDialog.chooseNoteType(); + + if (!success) { + return; + } + + options.type = noteType; + options.templateNoteId = templateNoteId; + + return await createNote(parentNotePath, options); +} + /* If first element is heading, parse it out and use it as a new heading. */ function parseSelectedHtml(selectedHtml) { const dom = $.parseHTML(selectedHtml); @@ -106,5 +120,6 @@ async function duplicateSubtree(noteId, parentNotePath) { export default { createNote, + createNoteWithTypePrompt, duplicateSubtree }; diff --git a/src/public/app/services/note_types.js b/src/public/app/services/note_types.js new file mode 100644 index 000000000..4ea9bebf1 --- /dev/null +++ b/src/public/app/services/note_types.js @@ -0,0 +1,40 @@ +import server from "./server.js"; +import froca from "./froca.js"; + +async function getNoteTypeItems(command) { + const items = [ + { title: "Text", command: command, type: "text", uiIcon: "bx bx-note" }, + { title: "Code", command: command, type: "code", uiIcon: "bx bx-code" }, + { title: "Saved Search", command: command, type: "search", uiIcon: "bx bx-file-find" }, + { title: "Relation Map", command: command, type: "relation-map", uiIcon: "bx bx-map-alt" }, + { title: "Note Map", command: command, type: "note-map", uiIcon: "bx bx-map-alt" }, + { title: "Render Note", command: command, type: "render", uiIcon: "bx bx-extension" }, + { title: "Book", command: command, type: "book", uiIcon: "bx bx-book" }, + { title: "Mermaid Diagram", command: command, type: "mermaid", uiIcon: "bx bx-selection" }, + { title: "Canvas", command: command, type: "canvas", uiIcon: "bx bx-pen" }, + { title: "Web View", command: command, type: "iframe", uiIcon: "bx bx-globe-alt" }, + ]; + + const templateNoteIds = await server.get("search-templates"); + const templateNotes = await froca.getNotes(templateNoteIds); + + if (items.length > 0) { + items.push({ title: "----" }); + + for (const templateNote of templateNotes) { + items.push({ + title: templateNote.title, + uiIcon: templateNote.getIcon(), + command: command, + type: templateNote.type, + templateNoteId: templateNote.noteId + }); + } + } + + return items; +} + +export default { + getNoteTypeItems +} diff --git a/src/public/app/services/tree_context_menu.js b/src/public/app/services/tree_context_menu.js index 30dc5821d..28b8ee256 100644 --- a/src/public/app/services/tree_context_menu.js +++ b/src/public/app/services/tree_context_menu.js @@ -4,7 +4,7 @@ import clipboard from './clipboard.js'; import noteCreateService from "./note_create.js"; import contextMenu from "./context_menu.js"; import appContext from "./app_context.js"; -import server from "./server.js"; +import noteTypesService from "./note_types.js"; class TreeContextMenu { /** @@ -25,40 +25,6 @@ class TreeContextMenu { }) } - async getNoteTypeItems(command) { - const items = [ - { title: "Text", command: command, type: "text", uiIcon: "bx bx-note" }, - { title: "Code", command: command, type: "code", uiIcon: "bx bx-code" }, - { title: "Saved Search", command: command, type: "search", uiIcon: "bx bx-file-find" }, - { title: "Relation Map", command: command, type: "relation-map", uiIcon: "bx bx-map-alt" }, - { title: "Note Map", command: command, type: "note-map", uiIcon: "bx bx-map-alt" }, - { title: "Render Note", command: command, type: "render", uiIcon: "bx bx-extension" }, - { title: "Book", command: command, type: "book", uiIcon: "bx bx-book" }, - { title: "Mermaid Diagram", command: command, type: "mermaid", uiIcon: "bx bx-selection" }, - { title: "Canvas", command: command, type: "canvas", uiIcon: "bx bx-pen" }, - { title: "Web View", command: command, type: "iframe", uiIcon: "bx bx-globe-alt" }, - ]; - - const templateNoteIds = await server.get("search-templates"); - const templateNotes = await froca.getNotes(templateNoteIds); - - if (items.length > 0) { - items.push({ title: "----" }); - - for (const templateNote of templateNotes) { - items.push({ - title: templateNote.title, - uiIcon: templateNote.getIcon(), - command: command, - type: templateNote.type, - templateNoteId: templateNote.noteId - }); - } - } - - return items; - } - async getMenuItems() { const note = await froca.getNote(this.node.data.noteId); const branch = froca.getBranch(this.node.data.branchId); @@ -81,10 +47,10 @@ class TreeContextMenu { { title: 'Open in a new tab Ctrl+Click', command: "openInTab", uiIcon: "bx bx-empty", enabled: noSelectedNotes }, { title: 'Open in a new split', command: "openNoteInSplit", uiIcon: "bx bx-dock-right", enabled: noSelectedNotes }, { title: 'Insert note after ', command: "insertNoteAfter", uiIcon: "bx bx-plus", - items: insertNoteAfterEnabled ? await this.getNoteTypeItems("insertNoteAfter") : null, + items: insertNoteAfterEnabled ? await noteTypesService.getNoteTypeItems("insertNoteAfter") : null, enabled: insertNoteAfterEnabled && noSelectedNotes }, { title: 'Insert child note ', command: "insertChildNote", uiIcon: "bx bx-plus", - items: notSearch ? await this.getNoteTypeItems("insertChildNote") : null, + items: notSearch ? await noteTypesService.getNoteTypeItems("insertChildNote") : null, enabled: notSearch && noSelectedNotes }, { title: 'Delete ', command: "deleteNotes", uiIcon: "bx bx-trash", enabled: isNotRoot && !isHoisted && parentNotSearch }, diff --git a/src/public/app/widgets/attribute_widgets/attribute_editor.js b/src/public/app/widgets/attribute_widgets/attribute_editor.js index 8ee1cc870..c140e0139 100644 --- a/src/public/app/widgets/attribute_widgets/attribute_editor.js +++ b/src/public/app/widgets/attribute_widgets/attribute_editor.js @@ -485,7 +485,7 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget { } async createNoteForReferenceLink(title) { - const {note} = await noteCreateService.createNote(this.notePath, { + const {note} = await noteCreateService.createNoteWithTypePrompt(this.notePath, { activate: false, title: title }); diff --git a/src/public/app/widgets/type_widgets/editable_text.js b/src/public/app/widgets/type_widgets/editable_text.js index d86beb5d3..42d5cdbeb 100644 --- a/src/public/app/widgets/type_widgets/editable_text.js +++ b/src/public/app/widgets/type_widgets/editable_text.js @@ -305,7 +305,7 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget { } async createNoteForReferenceLink(title) { - const {note} = await noteCreateService.createNote(this.notePath, { + const {note} = await noteCreateService.createNoteWithTypePrompt(this.notePath, { activate: false, title: title }); diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 7797f4c3a..4b6e09bb7 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -192,6 +192,7 @@ div.ui-tooltip { .dropdown-menu a:hover:not(.disabled), .dropdown-item:hover:not(.disabled) { color: var(--hover-item-text-color) !important; background-color: var(--hover-item-background-color) !important; + border-color: var(--hover-item-border-color) !important; cursor: pointer; } @@ -210,17 +211,20 @@ div.ui-tooltip { padding-bottom: 0; } -.dropdown-item { +.dropdown-item, .dropdown-header { color: var(--menu-text-color) !important; + border: 1px solid transparent !important; } .dropdown-item.disabled, .dropdown-item.disabled kbd { color: #aaa !important; } -.dropdown-item.active { +.dropdown-item.active, .dropdown-item:focus { color: var(--active-item-text-color) !important; background-color: var(--active-item-background-color) !important; + border-color: var(--active-item-border-color) !important; + outline: none; } .CodeMirror { @@ -473,8 +477,8 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th } .algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor { - color: var(--hover-item-text-color); - background-color: var(--hover-item-background-color); + color: var(--active-item-text-color); + background-color: var(--active-item-background-color); } .help-button { diff --git a/src/public/stylesheets/theme-dark.css b/src/public/stylesheets/theme-dark.css index 00b0df5dd..845bb9960 100644 --- a/src/public/stylesheets/theme-dark.css +++ b/src/public/stylesheets/theme-dark.css @@ -35,11 +35,13 @@ --input-text-color: #ccc; --input-background-color: #333; - --hover-item-text-color: black; - --hover-item-background-color: #777; + --hover-item-text-color: #ccc; + --hover-item-background-color: transparent; + --hover-item-border-color: #aaa; --active-item-text-color: black; --active-item-background-color: #777; + --active-item-border-color: transparent; --menu-text-color: white; --menu-background-color: #222; diff --git a/src/public/stylesheets/theme-light.css b/src/public/stylesheets/theme-light.css index 113718989..3ab350f6a 100644 --- a/src/public/stylesheets/theme-light.css +++ b/src/public/stylesheets/theme-light.css @@ -40,10 +40,12 @@ html { --input-background-color: transparent; --hover-item-text-color: black; - --hover-item-background-color: #ddd; + --hover-item-background-color: transparent; + --hover-item-border-color: #ccc; --active-item-text-color: black; --active-item-background-color: #ddd; + --active-item-border-color: transparent; --menu-text-color: black; --menu-background-color: white; diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs index ee198e3ef..4c67f89e0 100644 --- a/src/views/desktop.ejs +++ b/src/views/desktop.ejs @@ -41,6 +41,7 @@ <%- include('dialogs/delete_notes.ejs') %> <%- include('dialogs/password_not_set.ejs') %> <%- include('dialogs/bulk_assign_attributes.ejs') %> +<%- include('dialogs/note_type_chooser.ejs') %>