mirror of
https://github.com/zadam/trilium.git
synced 2025-10-30 19:19:03 +01:00
chore(react/ribbon): display current note type
This commit is contained in:
Elian Doran
parent
cabeb13adb
commit
c0beab8a5d
@ -14,8 +14,7 @@ const NOT_SELECTABLE_NOTE_TYPES = NOTE_TYPES.filter((nt) => nt.reserved || nt.st
|
||||
const TPL = /*html*/`
|
||||
<div class="dropdown note-type-widget">
|
||||
<button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle select-button note-type-button">
|
||||
<span class="note-type-desc"></span>
|
||||
<span class="caret"></span>
|
||||
<span class=""></span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
@ -36,7 +35,6 @@ export default class NoteTypeWidget extends NoteContextAwareWidget {
|
||||
|
||||
this.$noteTypeDropdown = this.$widget.find(".note-type-dropdown");
|
||||
this.$noteTypeButton = this.$widget.find(".note-type-button");
|
||||
this.$noteTypeDesc = this.$widget.find(".note-type-desc");
|
||||
|
||||
this.$widget.on("click", ".dropdown-item", () => this.dropdown.toggle());
|
||||
}
|
||||
@ -105,18 +103,7 @@ export default class NoteTypeWidget extends NoteContextAwareWidget {
|
||||
}
|
||||
}
|
||||
|
||||
async findTypeTitle(type: NoteType, mime: string) {
|
||||
if (type === "code") {
|
||||
const mimeTypes = mimeTypesService.getMimeTypes();
|
||||
const found = mimeTypes.find((mt) => mt.mime === mime);
|
||||
|
||||
return found ? found.title : mime;
|
||||
} else {
|
||||
const noteType = NOTE_TYPES.find((nt) => nt.type === type);
|
||||
|
||||
return noteType ? noteType.title : type;
|
||||
}
|
||||
}
|
||||
|
||||
async save(type: NoteType, mime?: string) {
|
||||
if (type === this.note?.type && mime === this.note?.mime) {
|
||||
|
||||
@ -14,9 +14,10 @@ interface DropdownProps {
|
||||
dropdownContainerClassName?: string;
|
||||
hideToggleArrow?: boolean;
|
||||
disabled?: boolean;
|
||||
text?: ComponentChildren;
|
||||
}
|
||||
|
||||
export default function Dropdown({ className, buttonClassName, isStatic, children, title, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, disabled }: DropdownProps) {
|
||||
export default function Dropdown({ className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, disabled }: DropdownProps) {
|
||||
const dropdownRef = useRef<HTMLDivElement | null>(null);
|
||||
const triggerRef = useRef<HTMLButtonElement | null>(null);
|
||||
|
||||
@ -56,7 +57,7 @@ export default function Dropdown({ className, buttonClassName, isStatic, childre
|
||||
return (
|
||||
<div ref={dropdownRef} class={`dropdown ${className ?? ""}`} style={{ display: "flex" }}>
|
||||
<button
|
||||
className={`btn ${buttonClassName ?? ""} ${!hideToggleArrow ? "dropdown-toggle" : ""}`}
|
||||
className={`btn select-button ${buttonClassName ?? ""} ${!hideToggleArrow ? "dropdown-toggle" : ""}`}
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
@ -66,7 +67,10 @@ export default function Dropdown({ className, buttonClassName, isStatic, childre
|
||||
title={title}
|
||||
id={ariaId}
|
||||
disabled={disabled}
|
||||
/>
|
||||
>
|
||||
{text}
|
||||
<span className="caret"></span>
|
||||
</button>
|
||||
|
||||
<div
|
||||
class={`dropdown-menu ${isStatic ? "static" : ""} ${dropdownContainerClassName ?? ""} tn-dropdown-list`}
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import { useCallback, useMemo } from "preact/hooks";
|
||||
import { useMemo } from "preact/hooks";
|
||||
import Dropdown from "../react/Dropdown";
|
||||
import { NOTE_TYPES } from "../../services/note_types";
|
||||
import { FormDivider, FormListBadge, FormListItem } from "../react/FormList";
|
||||
import { t } from "../../services/i18n";
|
||||
import { useTriliumOption } from "../react/hooks";
|
||||
import { useNoteContext, useNoteProperty, useTriliumOption } from "../react/hooks";
|
||||
import mime_types from "../../services/mime_types";
|
||||
import { NoteType } from "@triliumnext/commons";
|
||||
|
||||
export default function BasicPropertiesTab() {
|
||||
return (
|
||||
@ -19,43 +20,66 @@ function NoteTypeWidget() {
|
||||
const [ codeNotesMimeTypes ] = useTriliumOption("codeNotesMimeTypes");
|
||||
const mimeTypes = useMemo(() => mime_types.getMimeTypes().filter(mimeType => mimeType.enabled), [ codeNotesMimeTypes ]);
|
||||
|
||||
const { note } = useNoteContext();
|
||||
const type = useNoteProperty(note, "type") ?? undefined;
|
||||
const mime = useNoteProperty(note, "mime");
|
||||
|
||||
return (
|
||||
<Dropdown dropdownContainerClassName="note-type-dropdown">
|
||||
{noteTypes.map(noteType => {
|
||||
const badges: FormListBadge[] = [];
|
||||
if (noteType.isNew) {
|
||||
badges.push({
|
||||
className: "new-note-type-badge",
|
||||
text: t("note_types.new-feature")
|
||||
});
|
||||
}
|
||||
if (noteType.isBeta) {
|
||||
badges.push({
|
||||
text: t("note_types.beta-feature")
|
||||
});
|
||||
}
|
||||
<>
|
||||
<span>{t("basic_properties.note_type")}:</span>
|
||||
<Dropdown
|
||||
dropdownContainerClassName="note-type-dropdown"
|
||||
text={<span className="note-type-desc">{findTypeTitle(type, mime)}</span>}
|
||||
>
|
||||
{noteTypes.map(noteType => {
|
||||
const badges: FormListBadge[] = [];
|
||||
if (noteType.isNew) {
|
||||
badges.push({
|
||||
className: "new-note-type-badge",
|
||||
text: t("note_types.new-feature")
|
||||
});
|
||||
}
|
||||
if (noteType.isBeta) {
|
||||
badges.push({
|
||||
text: t("note_types.beta-feature")
|
||||
});
|
||||
}
|
||||
|
||||
if (noteType.type !== "code") {
|
||||
return (
|
||||
<FormListItem
|
||||
badges={badges}
|
||||
>{noteType.title}</FormListItem>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
<FormDivider />
|
||||
<FormListItem disabled>
|
||||
<strong>{noteType.title}</strong>
|
||||
</FormListItem>
|
||||
</>
|
||||
)
|
||||
}
|
||||
})}
|
||||
if (noteType.type !== "code") {
|
||||
return (
|
||||
<FormListItem
|
||||
badges={badges}
|
||||
>{noteType.title}</FormListItem>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
<FormDivider />
|
||||
<FormListItem disabled>
|
||||
<strong>{noteType.title}</strong>
|
||||
</FormListItem>
|
||||
</>
|
||||
)
|
||||
}
|
||||
})}
|
||||
|
||||
{mimeTypes.map(mimeType => (
|
||||
<FormListItem>{mimeType.title}</FormListItem>
|
||||
))}
|
||||
</Dropdown>
|
||||
{mimeTypes.map(mimeType => (
|
||||
<FormListItem>{mimeType.title}</FormListItem>
|
||||
))}
|
||||
</Dropdown>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function findTypeTitle(type?: NoteType, mime?: string) {
|
||||
if (type === "code") {
|
||||
const mimeTypes = mime_types.getMimeTypes();
|
||||
const found = mimeTypes.find((mt) => mt.mime === mime);
|
||||
|
||||
return found ? found.title : mime;
|
||||
} else {
|
||||
const noteType = NOTE_TYPES.find((nt) => nt.type === type);
|
||||
|
||||
return noteType ? noteType.title : type;
|
||||
}
|
||||
}
|
||||
@ -11,7 +11,7 @@ import NoteLanguageWidget from "../note_language.js";
|
||||
|
||||
const TPL = /*html*/`
|
||||
<div class="note-type-container">
|
||||
<span>${t("basic_properties.note_type")}:</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="protected-note-switch-container"></div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user