diff --git a/apps/client/src/widgets/NoteDetail.css b/apps/client/src/widgets/NoteDetail.css new file mode 100644 index 000000000..f51fb132a --- /dev/null +++ b/apps/client/src/widgets/NoteDetail.css @@ -0,0 +1,9 @@ +.note-detail { + font-family: var(--detail-font-family); + font-size: var(--detail-font-size); +} + +.note-detail.full-height { + contain: none; + height: 100%; +} \ No newline at end of file diff --git a/apps/client/src/widgets/NoteDetail.tsx b/apps/client/src/widgets/NoteDetail.tsx index af25ac905..8c70ea5cd 100644 --- a/apps/client/src/widgets/NoteDetail.tsx +++ b/apps/client/src/widgets/NoteDetail.tsx @@ -12,6 +12,7 @@ import ProtectedSession from "./type_widgets/ProtectedSession"; import Book from "./type_widgets/Book"; import ContentWidget from "./type_widgets/ContentWidget"; import WebView from "./type_widgets/WebView"; +import "./NoteDetail.css"; /** * 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, @@ -23,9 +24,10 @@ type ExtendedNoteType = Exclude | "empty * The note detail is in charge of rendering the content of a note, by determining its type (e.g. text, code) and using the appropriate view widget. */ export default function NoteDetail() { - const { note, type } = useNoteInfo(); - const { viewScope, ntxId } = useNoteContext(); + const { note, type, noteContext } = useNoteInfo(); + const { ntxId, viewScope } = noteContext ?? {}; const [ correspondingWidget, setCorrespondingWidget ] = useState(); + const isFullHeight = checkFullHeight(noteContext, type); const props: TypeWidgetProps = { note: note!, @@ -35,7 +37,7 @@ export default function NoteDetail() { useEffect(() => setCorrespondingWidget(getCorrespondingWidget(type, props)), [ note, viewScope, type ]); return ( -
+
{correspondingWidget ||

Note detail goes here! {note?.title} of {type}

}
); @@ -54,7 +56,7 @@ function useNoteInfo() { }); }, [ actualNote, noteContext ]); - return { note, type }; + return { note, type, noteContext }; } function getCorrespondingWidget(noteType: ExtendedNoteType | undefined, props: TypeWidgetProps) { @@ -102,3 +104,15 @@ async function getWidgetType(note: FNote | null | undefined, noteContext: NoteCo return resultingType; } + +function checkFullHeight(noteContext: NoteContext | undefined, type: ExtendedNoteType | undefined) { + if (!noteContext) return false; + + // https://github.com/zadam/trilium/issues/2522 + const isBackendNote = noteContext?.noteId === "_backendLog"; + const isSqlNote = noteContext.note?.mime === "text/x-sqlite;schema=trilium"; + const isFullHeightNoteType = ["canvas", "webView", "noteMap", "mindMap", "mermaid", "file"].includes(type ?? ""); + return (!noteContext?.hasNoteList() && isFullHeightNoteType && !isSqlNote) + || noteContext?.viewScope?.viewMode === "attachments" + || isBackendNote; +} diff --git a/apps/client/src/widgets/note_detail.ts.bak b/apps/client/src/widgets/note_detail.ts.bak index 46372c587..46f149588 100644 --- a/apps/client/src/widgets/note_detail.ts.bak +++ b/apps/client/src/widgets/note_detail.ts.bak @@ -34,21 +34,6 @@ import type TypeWidget from "./type_widgets/type_widget.js"; import { MermaidTypeWidget } from "./type_widgets/mermaid.js"; import AiChatTypeWidget from "./type_widgets/ai_chat.js"; -const TPL = /*html*/` -
- -
-`; - const typeWidgetClasses = { empty: EmptyTypeWidget, editableText: EditableTextTypeWidget, @@ -176,18 +161,6 @@ export default class NoteDetailWidget extends NoteContextAwareWidget { /** * sets full height of container that contains note content for a subset of note-types */ - checkFullHeight() { - // https://github.com/zadam/trilium/issues/2522 - const isBackendNote = this.noteContext?.noteId === "_backendLog"; - const isSqlNote = this.mime === "text/x-sqlite;schema=trilium"; - const isFullHeightNoteType = ["canvas", "webView", "noteMap", "mindMap", "mermaid", "file"].includes(this.type ?? ""); - const isFullHeight = (!this.noteContext?.hasNoteList() && isFullHeightNoteType && !isSqlNote) - || this.noteContext?.viewScope?.viewMode === "attachments" - || isBackendNote; - - this.$widget.toggleClass("full-height", isFullHeight); - } - getTypeWidget() { if (!this.type || !this.typeWidgets[this.type]) { throw new Error(t(`note_detail.could_not_find_typewidget`, { type: this.type })); @@ -196,8 +169,6 @@ export default class NoteDetailWidget extends NoteContextAwareWidget { return this.typeWidgets[this.type]; } - - async focusOnDetailEvent({ ntxId }: EventData<"focusOnDetail">) { if (this.noteContext?.ntxId !== ntxId) { return; diff --git a/apps/client/src/widgets/type_widgets/WebView.css b/apps/client/src/widgets/type_widgets/WebView.css new file mode 100644 index 000000000..3978a86fc --- /dev/null +++ b/apps/client/src/widgets/type_widgets/WebView.css @@ -0,0 +1,11 @@ +.note-detail-web-view { + height: 100%; + position: relative; +} + +.note-detail-web-view > * { + position: absolute; + top: 0; + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/apps/client/src/widgets/type_widgets/WebView.tsx b/apps/client/src/widgets/type_widgets/WebView.tsx index fd4d364c6..05cabd5e2 100644 --- a/apps/client/src/widgets/type_widgets/WebView.tsx +++ b/apps/client/src/widgets/type_widgets/WebView.tsx @@ -3,6 +3,7 @@ import utils from "../../services/utils"; import Alert from "../react/Alert"; import { useNoteLabel } from "../react/hooks"; import { TypeWidgetProps } from "./type_widget"; +import "./WebView.css"; const isElectron = utils.isElectron(); @@ -10,7 +11,7 @@ export default function WebView({ note }: TypeWidgetProps) { const [ webViewSrc ] = useNoteLabel(note, "webViewSrc"); return ( -
+
{webViewSrc ? : } diff --git a/apps/client/src/widgets/type_widgets_old/web_view.ts b/apps/client/src/widgets/type_widgets_old/web_view.ts deleted file mode 100644 index a4b0c47c7..000000000 --- a/apps/client/src/widgets/type_widgets_old/web_view.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { t } from "../../services/i18n.js"; -import TypeWidget from "./type_widget.js"; -import attributeService from "../../services/attributes.js"; -import type FNote from "../../entities/fnote.js"; -import type { EventData } from "../../components/app_context.js"; -import utils from "../../services/utils.js"; - -const TPL = /*html*/` - ${buildElement()} -
`; - -function buildElement() { - if (!utils.isElectron()) { - } else { - return ``; - } -} - -export default class WebViewTypeWidget extends TypeWidget { - - private $noteDetailWebViewHelp!: JQuery; - private $noteDetailWebViewContent!: JQuery; - - static getType() { - return "webView"; - } - - doRender() { - this.$widget = $(TPL); - this.$noteDetailWebViewHelp = this.$widget.find(".note-detail-web-view-help"); - this.$noteDetailWebViewContent = this.$widget.find(".note-detail-web-view-content"); - - window.addEventListener("resize", () => this.setDimensions(), false); - - super.doRender(); - } - - async doRefresh(note: FNote) { - this.$widget.show(); - this.$noteDetailWebViewHelp.hide(); - this.$noteDetailWebViewContent.hide(); - - if (!this.note) { - return; - } - - const webViewSrc = this.note.getLabelValue("webViewSrc"); - - if (webViewSrc) { - this.$noteDetailWebViewContent.show().attr("src", webViewSrc); - } else { - this.$noteDetailWebViewContent.hide(); - this.$noteDetailWebViewHelp.show(); - } - - this.setDimensions(); - - setTimeout(() => this.setDimensions(), 1000); - } - - cleanup() { - this.$noteDetailWebViewContent.removeAttr("src"); - } - - setDimensions() { - const $parent = this.$widget; - - this.$noteDetailWebViewContent - .height($parent.height() ?? 0) - .width($parent.width() ?? 0); - } - - entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { - if (loadResults.getAttributeRows().find((attr) => attr.name === "webViewSrc" && attributeService.isAffecting(attr, this.noteContext?.note))) { - this.refresh(); - } - } -}