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 { renderMathInElement } from "../../services/math";
import { CSSProperties } from "preact/compat"; import { CSSProperties } from "preact/compat";
import open from "../../services/open"; import open from "../../services/open";
import ActionButton from "../react/ActionButton";
import options from "../../services/options";
interface RevisionsDialogProps { interface RevisionsDialogProps {
note?: FNote; note?: FNote;
@ -55,6 +57,8 @@ function RevisionsDialogComponent({ note }: RevisionsDialogProps) {
} }
}}/>) }}/>)
} }
footer={<RevisionFooter note={note} />}
footerStyle={{ paddingTop: 0, paddingBottom: 0 }}
> >
<RevisionsList <RevisionsList
revisions={revisions} 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 { export default class RevisionsDialog extends ReactBasicWidget {
private props: RevisionsDialogProps = {}; 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; header?: ComponentChildren;
footer?: ComponentChildren; footer?: ComponentChildren;
footerStyle?: CSSProperties;
footerAlignment?: "right" | "between"; footerAlignment?: "right" | "between";
minWidth?: string; minWidth?: string;
maxWidth?: number; maxWidth?: number;
@ -46,7 +47,7 @@ interface ModalProps {
bodyStyle?: CSSProperties; 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 modalRef = _modalRef ?? useRef<HTMLDivElement>(null);
const formRef = _formRef ?? useRef<HTMLFormElement>(null); const formRef = _formRef ?? useRef<HTMLFormElement>(null);
@ -108,10 +109,10 @@ export default function Modal({ children, className, size, title, header, footer
e.preventDefault(); e.preventDefault();
onSubmit(); onSubmit();
}}> }}>
<ModalInner footer={footer} bodyStyle={bodyStyle}>{children}</ModalInner> <ModalInner footer={footer} bodyStyle={bodyStyle} footerStyle={footerStyle} footerAlignment={footerAlignment}>{children}</ModalInner>
</form> </form>
) : ( ) : (
<ModalInner footer={footer} bodyStyle={bodyStyle}> <ModalInner footer={footer} bodyStyle={bodyStyle} footerStyle={footerStyle} footerAlignment={footerAlignment}>
{children} {children}
</ModalInner> </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">) { function ModalInner({ children, footer, footerAlignment, bodyStyle, footerStyle: _footerStyle }: Pick<ModalProps, "children" | "footer" | "footerAlignment" | "bodyStyle" | "footerStyle">) {
const footerStyle: CSSProperties = {}; const footerStyle: CSSProperties = _footerStyle ?? {};
if (footerAlignment === "between") { if (footerAlignment === "between") {
footerStyle.justifyContent = "space-between"; footerStyle.justifyContent = "space-between";
} }