chore(react/dialogs): reintroduce footer in note revisions

This commit is contained in:
Elian Doran 2025-08-06 18:01:26 +03:00
parent 0af5feab79
commit 2ad4b26c9e
No known key found for this signature in database
3 changed files with 51 additions and 6 deletions

View File

@ -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 = {};

View 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}
/>;
}

View File

@ -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";
}