gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-11 01:44:24 +01:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

feat(breadcrumb/note_info): note size

Browse Source
This commit is contained in:
Elian Doran 2025-12-11 00:34:25 +02:00
parent e5696713de
commit 4b74ad5577
No known key found for this signature in database
2 changed files with 35 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/client/src/widgets/BreadcrumbBadges.tsx
View File

@ -10,7 +10,7 @@ import { BacklinksList, useBacklinkCount } from "./FloatingButtonsDefinitions";
import Dropdown, { DropdownProps } from "./react/Dropdown";
import { useIsNoteReadOnly, useNoteContext, useStaticTooltip } from "./react/hooks";
import Icon from "./react/Icon";
import { useNoteMetadata } from "./ribbon/NoteInfoTab";
import { NoteSizeWidget, useNoteMetadata } from "./ribbon/NoteInfoTab";
import { useShareInfo } from "./shared_info";
export default function BreadcrumbBadges() {
@ -26,18 +26,20 @@ export default function BreadcrumbBadges() {
function NoteInfoBadge() {
const { note } = useNoteContext();
const { isLoading, metadata, noteSizeResponse, subtreeSizeResponse, requestSizeInfo } = useNoteMetadata(note);
const { metadata, ...sizeProps } = useNoteMetadata(note);
return (note &&
<BadgeWithDropdown
icon="bx bx-info-circle"
className="note-info-badge"
dropdownOptions={{ dropdownOptions: { autoClose: "outside" } }}
>
<ul>
<NoteInfoValue text={t("note_info_widget.created")} value={metadata?.dateCreated ? formatDateTime(metadata.dateCreated) : ""} />
<NoteInfoValue text={t("note_info_widget.modified")} value={metadata?.dateModified ? formatDateTime(metadata.dateModified) : ""} />
<NoteInfoValue text={t("note_info_widget.type")} value={<span>{note.type} {note.mime && <span>({note.mime})</span>}</span>} />
<NoteInfoValue text={t("note_info_widget.note_id")} value={<code>{note.noteId}</code>} />
<NoteInfoValue text={t("note_info_widget.note_size")} value={<NoteSizeWidget {...sizeProps} />} />
</ul>
</BadgeWithDropdown>
);
@ -161,8 +163,14 @@ function BadgeWithDropdown({ children, tooltip, className, dropdownOptions, ...p
hideToggleArrow
title={tooltip}
titlePosition="bottom"
dropdownOptions={{ popperConfig: { placement: "bottom", strategy: "fixed" } }}
{...dropdownOptions}
dropdownOptions={{
...dropdownOptions?.dropdownOptions,
popperConfig: {
...dropdownOptions?.dropdownOptions?.popperConfig,
placement: "bottom", strategy: "fixed"
}
}}
>{children}</Dropdown>
);
}

42
apps/client/src/widgets/ribbon/NoteInfoTab.tsx
View File

@ -13,7 +13,7 @@ import FNote from "../../entities/fnote";
const isNewLayout = isExperimentalFeatureEnabled("new-layout");
export default function NoteInfoTab({ note }: { note: FNote | null | undefined }) {
const { isLoading, metadata, noteSizeResponse, subtreeSizeResponse, requestSizeInfo } = useNoteMetadata(note);
const { metadata, ...sizeProps } = useNoteMetadata(note);
return (
<div className="note-info-widget">
@ -41,23 +41,7 @@ export default function NoteInfoTab({ note }: { note: FNote | null | undefined }
<div className="note-info-item">
<span title={t("note_info_widget.note_size_info")}>{t("note_info_widget.note_size")}:</span>
<span className="note-info-size-col-span">
{!isLoading && !noteSizeResponse && !subtreeSizeResponse && (
<Button
className="calculate-button"
icon="bx bx-calculator"
text={t("note_info_widget.calculate")}
onClick={requestSizeInfo}
/>
)}
<span className="note-sizes-wrapper selectable-text">
<span className="note-size">{formatSize(noteSizeResponse?.noteSize)}</span>
{" "}
{subtreeSizeResponse && subtreeSizeResponse.subTreeNoteCount > 1 &&
<span className="subtree-size">{t("note_info_widget.subtree_size", { size: formatSize(subtreeSizeResponse.subTreeSize), count: subtreeSizeResponse.subTreeNoteCount })}</span>
}
{isLoading && <LoadingSpinner />}
</span>
<NoteSizeWidget {...sizeProps} />
</span>
</div>
</>
@ -66,6 +50,28 @@ export default function NoteInfoTab({ note }: { note: FNote | null | undefined }
);
}
export function NoteSizeWidget({ isLoading, noteSizeResponse, subtreeSizeResponse, requestSizeInfo }: Omit<ReturnType<typeof useNoteMetadata>, "metadata">) {
return <>
{!isLoading && !noteSizeResponse && !subtreeSizeResponse && (
<Button
className="calculate-button"
icon="bx bx-calculator"
text={t("note_info_widget.calculate")}
onClick={requestSizeInfo}
/>
)}
<span className="note-sizes-wrapper selectable-text">
<span className="note-size">{formatSize(noteSizeResponse?.noteSize)}</span>
{" "}
{subtreeSizeResponse && subtreeSizeResponse.subTreeNoteCount > 1 &&
<span className="subtree-size">{t("note_info_widget.subtree_size", { size: formatSize(subtreeSizeResponse.subTreeSize), count: subtreeSizeResponse.subTreeNoteCount })}</span>
}
{isLoading && <LoadingSpinner />}
</span>
</>;
}
export function useNoteMetadata(note: FNote | null | undefined) {
const [ isLoading, setIsLoading ] = useState(false);
const [ noteSizeResponse, setNoteSizeResponse ] = useState<NoteSizeResponse>();