Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-26 07:46:30 +01:00
Code Issues Packages Projects Releases Activity

chore(react): reintroduce max width

Browse Source
This commit is contained in:
Elian Doran
2025-08-03 21:39:25 +03:00
parent bca397e3e4
commit e53ad2c62a
2 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/widgets/dialogs/sort_child_notes.tsx
View File

@@ -34,7 +34,7 @@ function SortChildNotesDialogComponent({ parentNoteId }: { parentNoteId?: string
<Modal
className="sort-child-notes-dialog"
title={t("sort_child_notes.sort_children_by")}
size="lg"
size="lg" maxWidth={500}
onSubmit={onSubmit}
footer={<Button text={t("sort_child_notes.sort")} keyboardShortcut="Enter" />}
>

11
apps/client/src/widgets/react/Modal.tsx
View File

@@ -1,6 +1,7 @@
import { useEffect, useRef } from "preact/hooks";
import { t } from "../../services/i18n";
import { ComponentChildren } from "preact";
import type { CSSProperties } from "preact/compat";
interface ModalProps {
className: string;
@@ -8,6 +9,7 @@ interface ModalProps {
size: "lg" | "sm";
children: ComponentChildren;
footer?: ComponentChildren;
maxWidth?: number;
/**
* If set, the modal body and footer will be wrapped in a form and the submit event will call this function.
* Especially useful for user input that can be submitted with Enter key.
@@ -17,7 +19,7 @@ interface ModalProps {
helpPageId?: string;
}
export default function Modal({ children, className, size, title, footer, onShown, onSubmit, helpPageId }: ModalProps) {
export default function Modal({ children, className, size, title, footer, onShown, onSubmit, helpPageId, maxWidth }: ModalProps) {
const modalRef = useRef<HTMLDivElement>(null);
if (onShown) {
@@ -29,9 +31,14 @@ export default function Modal({ children, className, size, title, footer, onShow
});
}
const style: CSSProperties = {};
if (maxWidth) {
style.maxWidth = `${maxWidth}px`;
}
return (
<div className={`modal fade mx-auto ${className}`} tabIndex={-1} role="dialog" ref={modalRef}>
<div className={`modal-dialog modal-${size}`} role="document">
<div className={`modal-dialog modal-${size}`} style={style} role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">{title}</h5>