Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-11 07:45:51 +01:00
Code Issues Packages Projects Releases Activity

chore(react/type_widget): port book

Browse Source
This commit is contained in:
Elian Doran
2025-09-19 19:03:31 +03:00
parent d1a9890932
commit fa55c5720e
4 changed files with 29 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/widgets/NoteDetail.tsx
View File

@@ -9,6 +9,7 @@ import { VNode } from "preact";
import Doc from "./type_widgets/Doc"; import Doc from "./type_widgets/Doc";
import { TypeWidgetProps } from "./type_widgets/type_widget"; import { TypeWidgetProps } from "./type_widgets/type_widget";
import ProtectedSession from "./type_widgets/ProtectedSession"; import ProtectedSession from "./type_widgets/ProtectedSession";
import Book from "./type_widgets/Book";
/** /**
* A `NoteType` altered by the note detail widget, taking into consideration whether the note is editable or not and adding special note types such as an empty one, * A `NoteType` altered by the note detail widget, taking into consideration whether the note is editable or not and adding special note types such as an empty one,
@@ -60,6 +61,7 @@ function getCorrespondingWidget(noteType: ExtendedNoteType | undefined, props: T
case "doc": return <Doc {...props} /> case "doc": return <Doc {...props} />
case "search": return <div className="note-detail-none note-detail-printable" /> case "search": return <div className="note-detail-none note-detail-printable" />
case "protectedSession": return <ProtectedSession /> case "protectedSession": return <ProtectedSession />
case "book": return <Book {...props} />
default: break; default: break;
} }
} }

4
apps/client/src/widgets/type_widgets/Book.css Normal file
View File

@@ -0,0 +1,4 @@
.note-detail-book-empty-help {
margin: 50px;
padding: 20px;
}

23
apps/client/src/widgets/type_widgets/Book.tsx Normal file
View File

@@ -0,0 +1,23 @@
import { t } from "../../services/i18n";
import Alert from "../react/Alert";
import { useNoteLabel } from "../react/hooks";
import RawHtml from "../react/RawHtml";
import { TypeWidgetProps } from "./type_widget";
import "./Book.css";
const VIEW_TYPES = [ "list", "grid" ];
export default function Book({ note }: TypeWidgetProps) {
const [ viewType ] = useNoteLabel(note, "viewType");
const shouldDisplayNoChildrenWarning = !note.hasChildren() && VIEW_TYPES.includes(viewType ?? "");
return (
<div className="note-detail-book note-detail-printable">
{(shouldDisplayNoChildrenWarning && (
<Alert type="warning" className="note-detail-book-empty-help">
<RawHtml html={t("book.no_children_help")} />
</Alert>
))}
</div>
)
}

62
apps/client/src/widgets/type_widgets_old/book.ts
View File

@@ -1,62 +0,0 @@
import TypeWidget from "./type_widget.js";
import { t } from "../../services/i18n.js";
import type FNote from "../../entities/fnote.js";
import type { EventData } from "../../components/app_context.js";
const TPL = /*html*/`
<div class="note-detail-book note-detail-printable">
<style>
.note-detail-book-auto-help {
background-color: var(--accented-background-color);
text-align: center;
border-radius: 10px;
padding: 5px;
margin: 0 10px 10px 10px;
}
</style>
<div class="note-detail-book-empty-help alert alert-warning" style="margin: 50px; padding: 20px;">
${t("book.no_children_help")}
</div>
</div>`;
export default class BookTypeWidget extends TypeWidget {
private $helpNoChildren!: JQuery<HTMLElement>;
static getType() {
return "book";
}
doRender() {
this.$widget = $(TPL);
this.$helpNoChildren = this.$widget.find(".note-detail-book-empty-help");
super.doRender();
}
async doRefresh(note: FNote) {
this.$helpNoChildren.toggle(this.shouldDisplayNoChildrenWarning());
}
shouldDisplayNoChildrenWarning() {
if (this.note?.hasChildren()) {
return false;
}
switch (this.note?.getAttributeValue("label", "viewType")) {
case "list":
case "grid":
return true;
default:
return false;
}
}
entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
if (loadResults.getAttributeRows().find((attr) => attr.noteId === this.noteId && attr.name === "viewType")) {
this.refresh();
}
}
}