diff --git a/apps/client/src/translations/cn/translation.json b/apps/client/src/translations/cn/translation.json index cd1b86123..d26594bfc 100644 --- a/apps/client/src/translations/cn/translation.json +++ b/apps/client/src/translations/cn/translation.json @@ -234,7 +234,7 @@ "modal_title": "选择笔记类型", "close": "关闭", "modal_body": "选择新笔记的类型或模板：", - "templates": "模板:" + "templates": "模板" }, "password_not_set": { "title": "密码未设置", diff --git a/apps/client/src/translations/de/translation.json b/apps/client/src/translations/de/translation.json index 5cb7dfa07..ef6bb1dec 100644 --- a/apps/client/src/translations/de/translation.json +++ b/apps/client/src/translations/de/translation.json @@ -233,7 +233,7 @@ "modal_title": "Wähle den Notiztyp aus", "close": "Schließen", "modal_body": "Wähle den Notiztyp / die Vorlage der neuen Notiz:", - "templates": "Vorlagen:" + "templates": "Vorlagen" }, "password_not_set": { "title": "Das Passwort ist nicht festgelegt", diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index 4060745ab..9aec664fd 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -238,7 +238,8 @@ "modal_title": "Choose note type", "close": "Close", "modal_body": "Choose note type / template of the new note:", - "templates": "Templates:" + "templates": "Templates", + "builtin_templates": "Built-in Templates" }, "password_not_set": { "title": "Password is not set", diff --git a/apps/client/src/translations/es/translation.json b/apps/client/src/translations/es/translation.json index 6043ea6bc..9de765399 100644 --- a/apps/client/src/translations/es/translation.json +++ b/apps/client/src/translations/es/translation.json @@ -236,7 +236,7 @@ "modal_title": "Elija el tipo de nota", "close": "Cerrar", "modal_body": "Elija el tipo de nota/plantilla de la nueva nota:", - "templates": "Plantillas:" + "templates": "Plantillas" }, "password_not_set": { "title": "La contraseña no está establecida", diff --git a/apps/client/src/translations/fr/translation.json b/apps/client/src/translations/fr/translation.json index 53836b014..86f2faf5c 100644 --- a/apps/client/src/translations/fr/translation.json +++ b/apps/client/src/translations/fr/translation.json @@ -233,7 +233,7 @@ "modal_title": "Choisissez le type de note", "close": "Fermer", "modal_body": "Choisissez le type de note/le modèle de la nouvelle note :", - "templates": "Modèles :" + "templates": "Modèles" }, "password_not_set": { "title": "Le mot de passe n'est pas défini", diff --git a/apps/client/src/translations/ro/translation.json b/apps/client/src/translations/ro/translation.json index e4d6288ba..c78c34b45 100644 --- a/apps/client/src/translations/ro/translation.json +++ b/apps/client/src/translations/ro/translation.json @@ -896,7 +896,7 @@ "note_type_chooser": { "modal_body": "Selectați tipul notiței/șablonul pentru noua notiță:", "modal_title": "Selectați tipul notiței", - "templates": "Șabloane:", + "templates": "Șabloane", "close": "Închide", "change_path_prompt": "Selectați locul unde să se creeze noua notiță:", "search_placeholder": "căutare cale notiță după nume (cea implicită dacă este necompletat)" diff --git a/apps/client/src/translations/sr/translation.json b/apps/client/src/translations/sr/translation.json index c6eeb8bff..5dbef4546 100644 --- a/apps/client/src/translations/sr/translation.json +++ b/apps/client/src/translations/sr/translation.json @@ -238,7 +238,7 @@ "modal_title": "Izaberite tip beleške", "close": "Zatvori", "modal_body": "Izaberite tip beleške / šablon za novu belešku:", - "templates": "Šabloni:" + "templates": "Šabloni" }, "password_not_set": { "title": "Lozinka nije podešena", diff --git a/apps/client/src/translations/tw/translation.json b/apps/client/src/translations/tw/translation.json index 4140719b7..fbc9aa1c9 100644 --- a/apps/client/src/translations/tw/translation.json +++ b/apps/client/src/translations/tw/translation.json @@ -213,7 +213,7 @@ "note_type_chooser": { "modal_title": "選擇筆記類型", "modal_body": "選擇新筆記的類型或模板：", - "templates": "模板：" + "templates": "模板" }, "password_not_set": { "title": "密碼未設定", diff --git a/apps/client/src/widgets/dialogs/note_type_chooser.ts b/apps/client/src/widgets/dialogs/note_type_chooser.ts deleted file mode 100644 index 34a89aff6..000000000 --- a/apps/client/src/widgets/dialogs/note_type_chooser.ts +++ /dev/null @@ -1,204 +0,0 @@ -import type { CommandNames } from "../../components/app_context.js"; -import type { MenuCommandItem } from "../../menus/context_menu.js"; -import { t } from "../../services/i18n.js"; -import noteTypesService from "../../services/note_types.js"; -import noteAutocompleteService from "../../services/note_autocomplete.js"; -import BasicWidget from "../basic_widget.js"; -import { Dropdown, Modal } from "bootstrap"; - -const TPL = /*html*/` -`; - -export interface ChooseNoteTypeResponse { - success: boolean; - noteType?: string; - templateNoteId?: string; - notePath?: string; -} - -type Callback = (data: ChooseNoteTypeResponse) => void; - -export default class NoteTypeChooserDialog extends BasicWidget { - private resolve: Callback | null; - private dropdown!: Dropdown; - private modal!: Modal; - private $noteTypeDropdown!: JQuery; - private $autoComplete!: JQuery; - private $originalFocused: JQuery | null; - private $originalDialog: JQuery | null; - - constructor() { - super(); - - this.resolve = null; - this.$originalFocused = null; // element focused before the dialog was opened, so we can return to it afterward - this.$originalDialog = null; - } - - doRender() { - this.$widget = $(TPL); - this.modal = Modal.getOrCreateInstance(this.$widget[0]); - - this.$autoComplete = this.$widget.find(".choose-note-path"); - this.$noteTypeDropdown = this.$widget.find(".note-type-dropdown"); - this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find(".note-type-dropdown-trigger")[0]); - - this.$widget.on("hidden.bs.modal", () => { - if (this.resolve) { - this.resolve({ success: false }); - } - - if (this.$originalFocused) { - this.$originalFocused.trigger("focus"); - this.$originalFocused = null; - } - - glob.activeDialog = this.$originalDialog; - }); - - this.$noteTypeDropdown.on("click", ".dropdown-item", (e) => this.doResolve(e)); - - this.$noteTypeDropdown.on("focus", ".dropdown-item", (e) => { - this.$noteTypeDropdown.find(".dropdown-item").each((i, el) => { - $(el).toggleClass("active", el === e.target); - }); - }); - - this.$noteTypeDropdown.on("keydown", ".dropdown-item", (e) => { - if (e.key === "Enter") { - this.doResolve(e); - e.preventDefault(); - return false; - } - }); - - this.$noteTypeDropdown.parent().on("hide.bs.dropdown", (e) => { - // prevent closing dropdown by clicking outside - // TODO: Check if this actually works. - //@ts-ignore - if (e.clickEvent) { - e.preventDefault(); - } else { - this.modal.hide(); - } - }); - } - - async refresh() { - noteAutocompleteService - .initNoteAutocomplete(this.$autoComplete, { - allowCreatingNotes: false, - hideGoToSelectedNoteButton: true, - allowJumpToSearchNotes: false, - }) - } - - async chooseNoteTypeEvent({ callback }: { callback: Callback }) { - this.$originalFocused = $(":focus"); - - await this.refresh(); - - const noteTypes = await noteTypesService.getNoteTypeItems(); - - this.$noteTypeDropdown.empty(); - - for (const noteType of noteTypes) { - if (noteType.title === "----") { - this.$noteTypeDropdown.append($('
').append(t("note_type_chooser.templates"))); - } else { - const commandItem = noteType as MenuCommandItem; - const listItem = $('') - .attr("data-note-type", commandItem.type || "") - .attr("data-template-note-id", commandItem.templateNoteId || "") - .append($("").addClass(commandItem.uiIcon || "")) - .append(` ${noteType.title}`); - - if (commandItem.badges) { - for (let badge of commandItem.badges) { - listItem.append($(``) - .addClass(badge.className || "") - .text(badge.title)); - } - } - - this.$noteTypeDropdown.append(listItem); - } - } - - this.dropdown.show(); - - this.$originalDialog = glob.activeDialog; - glob.activeDialog = this.$widget; - this.modal.show(); - - this.$noteTypeDropdown.find(".dropdown-item:first").focus(); - - this.resolve = callback; - } - - doResolve(e: JQuery.KeyDownEvent | JQuery.ClickEvent) { - const $item = $(e.target).closest(".dropdown-item"); - const noteType = $item.attr("data-note-type"); - const templateNoteId = $item.attr("data-template-note-id"); - const notePath = this.$autoComplete.getSelectedNotePath() || undefined; - - if (this.resolve) { - this.resolve({ - success: true, - noteType, - templateNoteId, - notePath - }); - } - this.resolve = null; - - this.modal.hide(); - } -} diff --git a/apps/client/src/widgets/dialogs/note_type_chooser.tsx b/apps/client/src/widgets/dialogs/note_type_chooser.tsx new file mode 100644 index 000000000..17d9b7919 --- /dev/null +++ b/apps/client/src/widgets/dialogs/note_type_chooser.tsx @@ -0,0 +1,125 @@ +import ReactBasicWidget from "../react/ReactBasicWidget"; +import Modal from "../react/Modal"; +import { closeActiveDialog, openDialog } from "../../services/dialog"; +import { t } from "../../services/i18n"; +import FormGroup from "../react/FormGroup"; +import NoteAutocomplete from "../react/NoteAutocomplete"; +import FormList, { FormListHeader, FormListItem } from "../react/FormList"; +import { useEffect, useState } from "preact/hooks"; +import note_types from "../../services/note_types"; +import { MenuCommandItem, MenuItem } from "../../menus/context_menu"; +import { TreeCommandNames } from "../../menus/tree_context_menu"; +import { Suggestion } from "../../services/note_autocomplete"; + +export interface ChooseNoteTypeResponse { + success: boolean; + noteType?: string; + templateNoteId?: string; + notePath?: string; +} + +type Callback = (data: ChooseNoteTypeResponse) => void; + +const SEPARATOR_TITLE_REPLACEMENTS = [ + t("note_type_chooser.builtin_templates"), + t("note_type_chooser.templates") +]; + +interface NoteTypeChooserDialogProps { + callback?: Callback; +} + +function NoteTypeChooserDialogComponent({ callback }: NoteTypeChooserDialogProps) { + const [ parentNote, setParentNote ] = useState(); + const [ noteTypes, setNoteTypes ] = useState[]>([]); + if (!noteTypes.length) { + useEffect(() => { + note_types.getNoteTypeItems().then(noteTypes => { + let index = -1; + + setNoteTypes((noteTypes ?? []).map((item, _index) => { + if (item.title === "----") { + index++; + return { + title: SEPARATOR_TITLE_REPLACEMENTS[index], + enabled: false + } + } + + return item; + })); + }); + }); + } + + function onNoteTypeSelected(value: string) { + const [ noteType, templateNoteId ] = value.split(","); + + callback?.({ + success: true, + noteType, + templateNoteId, + notePath: parentNote?.notePath + }); + closeActiveDialog(); + } + + return ( + callback?.({ success: false })} + > + + + + + + + {noteTypes.map((_item) => { + if (_item.title === "----") { + } + + const item = _item as MenuCommandItem; + + if (item.enabled === false) { + return + } else { + return ; + } + })} + + + + ); +} + +export default class NoteTypeChooserDialog extends ReactBasicWidget { + + private props: NoteTypeChooserDialogProps = {}; + + get component() { + return + } + + async chooseNoteTypeEvent({ callback }: { callback: Callback }) { + this.props = { callback }; + this.doRender(); + openDialog(this.$widget); + } + +} diff --git a/apps/client/src/widgets/react/Dropdown.tsx b/apps/client/src/widgets/react/Dropdown.tsx new file mode 100644 index 000000000..93b558a05 --- /dev/null +++ b/apps/client/src/widgets/react/Dropdown.tsx @@ -0,0 +1,44 @@ +import { Dropdown as BootstrapDropdown } from "bootstrap"; +import { ComponentChildren } from "preact"; +import { useEffect, useRef } from "preact/hooks"; + +interface DropdownProps { + className?: string; + isStatic?: boolean; + children: ComponentChildren; +} + +export default function Dropdown({ className, isStatic, children }: DropdownProps) { + const dropdownRef = useRef(); + const triggerRef = useRef(); + + if (triggerRef?.current) { + useEffect(() => { + const dropdown = BootstrapDropdown.getOrCreateInstance(triggerRef.current!); + return () => dropdown.dispose(); + }); + } + + if (dropdownRef?.current) { + useEffect(() => { + $(dropdownRef.current!).on("hide.bs.dropdown", () => { + console.log("Hide"); + }); + }); + } + + return ( +
+
+ ) +} \ No newline at end of file diff --git a/apps/client/src/widgets/react/FormGroup.tsx b/apps/client/src/widgets/react/FormGroup.tsx index 49084cd0f..5252afef2 100644 --- a/apps/client/src/widgets/react/FormGroup.tsx +++ b/apps/client/src/widgets/react/FormGroup.tsx @@ -11,9 +11,11 @@ interface FormGroupProps { export default function FormGroup({ label, title, className, children, description, labelRef }: FormGroupProps) { return ( -
+
{description && {description}} diff --git a/apps/client/src/widgets/react/FormList.tsx b/apps/client/src/widgets/react/FormList.tsx new file mode 100644 index 000000000..f5722f0d4 --- /dev/null +++ b/apps/client/src/widgets/react/FormList.tsx @@ -0,0 +1,49 @@ +import { ComponentChildren } from "preact"; +import Icon from "./Icon"; + +interface FormListOpts { + children: ComponentChildren; + onSelect?: (value: string) => void; +} + +export default function FormList({ children, onSelect }: FormListOpts) { + return ( +
{ + const value = (e.target as HTMLElement)?.dataset?.value; + if (value && onSelect) { + onSelect(value); + } + }}> + {children} +
+ ); +} + +interface FormListItemOpts { + text: string; + icon?: string; + value?: string; +} + +export function FormListItem({ text, icon, value }: FormListItemOpts) { + return ( + +   + {text} + + ); +} + +interface FormListHeaderOpts { + text: string; +} + +export function FormListHeader({ text }: FormListHeaderOpts) { + return ( +
  • +
    {text}
    +
    • + ) +} diff --git a/apps/client/src/widgets/react/Icon.tsx b/apps/client/src/widgets/react/Icon.tsx new file mode 100644 index 000000000..cc7afe812 --- /dev/null +++ b/apps/client/src/widgets/react/Icon.tsx @@ -0,0 +1,7 @@ +interface IconProps { + icon?: string; +} + +export default function Icon({ icon }: IconProps) { + return +} \ No newline at end of file