mirror of
https://github.com/zadam/trilium.git
synced 2025-10-21 07:38:53 +02:00
chore(react/dialogs): reintroduce footer in note revisions
This commit is contained in:
parent
0af5feab79
commit
2ad4b26c9e
@ -16,6 +16,8 @@ import protected_session_holder from "../../services/protected_session_holder";
|
||||
import { renderMathInElement } from "../../services/math";
|
||||
import { CSSProperties } from "preact/compat";
|
||||
import open from "../../services/open";
|
||||
import ActionButton from "../react/ActionButton";
|
||||
import options from "../../services/options";
|
||||
|
||||
interface RevisionsDialogProps {
|
||||
note?: FNote;
|
||||
@ -54,7 +56,9 @@ function RevisionsDialogComponent({ note }: RevisionsDialogProps) {
|
||||
toast.showMessage(t("revisions.revisions_deleted"));
|
||||
}
|
||||
}}/>)
|
||||
}
|
||||
}
|
||||
footer={<RevisionFooter note={note} />}
|
||||
footerStyle={{ paddingTop: 0, paddingBottom: 0 }}
|
||||
>
|
||||
<RevisionsList
|
||||
revisions={revisions}
|
||||
@ -231,6 +235,33 @@ function RevisionContent({ revisionItem, fullRevision }: { revisionItem?: Revisi
|
||||
}
|
||||
}
|
||||
|
||||
function RevisionFooter({ note }: { note: FNote }) {
|
||||
if (!note) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
let revisionsNumberLimit: number | string = parseInt(note?.getLabelValue("versioningLimit") ?? "");
|
||||
if (!Number.isInteger(revisionsNumberLimit)) {
|
||||
revisionsNumberLimit = options.getInt("revisionSnapshotNumberLimit") ?? 0;
|
||||
}
|
||||
if (revisionsNumberLimit === -1) {
|
||||
revisionsNumberLimit = "∞";
|
||||
}
|
||||
|
||||
return <>
|
||||
<span class="revisions-snapshot-interval flex-grow-1 my-0 py-0">
|
||||
{t("revisions.snapshot_interval", { seconds: options.getInt("revisionSnapshotTimeInterval") })}
|
||||
</span>
|
||||
<span class="maximum-revisions-for-current-note flex-grow-1 my-0 py-0">
|
||||
{t("revisions.maximum_revisions", { number: revisionsNumberLimit })}
|
||||
</span>
|
||||
<ActionButton
|
||||
icon="bx bx-cog" text={t("revisions.settings")}
|
||||
onClick={() => appContext.tabManager.openContextWithNote("_optionsOther", { activate: true })}
|
||||
/>
|
||||
</>;
|
||||
}
|
||||
|
||||
export default class RevisionsDialog extends ReactBasicWidget {
|
||||
|
||||
private props: RevisionsDialogProps = {};
|
||||
|
13
apps/client/src/widgets/react/ActionButton.tsx
Normal file
13
apps/client/src/widgets/react/ActionButton.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
interface ActionButtonProps {
|
||||
text: string;
|
||||
icon: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export default function ActionButton({ text, icon, onClick }: ActionButtonProps) {
|
||||
return <button
|
||||
class={`icon-action ${icon}`}
|
||||
title={text}
|
||||
onClick={onClick}
|
||||
/>;
|
||||
}
|
@ -13,6 +13,7 @@ interface ModalProps {
|
||||
*/
|
||||
header?: ComponentChildren;
|
||||
footer?: ComponentChildren;
|
||||
footerStyle?: CSSProperties;
|
||||
footerAlignment?: "right" | "between";
|
||||
minWidth?: string;
|
||||
maxWidth?: number;
|
||||
@ -46,7 +47,7 @@ interface ModalProps {
|
||||
bodyStyle?: CSSProperties;
|
||||
}
|
||||
|
||||
export default function Modal({ children, className, size, title, header, footer, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden: onHidden, modalRef: _modalRef, formRef: _formRef, bodyStyle }: ModalProps) {
|
||||
export default function Modal({ children, className, size, title, header, footer, footerStyle, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden: onHidden, modalRef: _modalRef, formRef: _formRef, bodyStyle }: ModalProps) {
|
||||
const modalRef = _modalRef ?? useRef<HTMLDivElement>(null);
|
||||
const formRef = _formRef ?? useRef<HTMLFormElement>(null);
|
||||
|
||||
@ -108,10 +109,10 @@ export default function Modal({ children, className, size, title, header, footer
|
||||
e.preventDefault();
|
||||
onSubmit();
|
||||
}}>
|
||||
<ModalInner footer={footer} bodyStyle={bodyStyle}>{children}</ModalInner>
|
||||
<ModalInner footer={footer} bodyStyle={bodyStyle} footerStyle={footerStyle} footerAlignment={footerAlignment}>{children}</ModalInner>
|
||||
</form>
|
||||
) : (
|
||||
<ModalInner footer={footer} bodyStyle={bodyStyle}>
|
||||
<ModalInner footer={footer} bodyStyle={bodyStyle} footerStyle={footerStyle} footerAlignment={footerAlignment}>
|
||||
{children}
|
||||
</ModalInner>
|
||||
)}
|
||||
@ -121,8 +122,8 @@ export default function Modal({ children, className, size, title, header, footer
|
||||
);
|
||||
}
|
||||
|
||||
function ModalInner({ children, footer, footerAlignment, bodyStyle }: Pick<ModalProps, "children" | "footer" | "footerAlignment" | "bodyStyle">) {
|
||||
const footerStyle: CSSProperties = {};
|
||||
function ModalInner({ children, footer, footerAlignment, bodyStyle, footerStyle: _footerStyle }: Pick<ModalProps, "children" | "footer" | "footerAlignment" | "bodyStyle" | "footerStyle">) {
|
||||
const footerStyle: CSSProperties = _footerStyle ?? {};
|
||||
if (footerAlignment === "between") {
|
||||
footerStyle.justifyContent = "space-between";
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user