Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-27 00:06: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 <Modal
className="sort-child-notes-dialog" className="sort-child-notes-dialog"
title={t("sort_child_notes.sort_children_by")} title={t("sort_child_notes.sort_children_by")}
size="lg" size="lg" maxWidth={500}
onSubmit={onSubmit} onSubmit={onSubmit}
footer={<Button text={t("sort_child_notes.sort")} keyboardShortcut="Enter" />} 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 { useEffect, useRef } from "preact/hooks";
import { t } from "../../services/i18n"; import { t } from "../../services/i18n";
import { ComponentChildren } from "preact"; import { ComponentChildren } from "preact";
import type { CSSProperties } from "preact/compat";
interface ModalProps { interface ModalProps {
className: string; className: string;
@@ -8,6 +9,7 @@ interface ModalProps {
size: "lg" | "sm"; size: "lg" | "sm";
children: ComponentChildren; children: ComponentChildren;
footer?: 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. * 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. * Especially useful for user input that can be submitted with Enter key.
@@ -17,7 +19,7 @@ interface ModalProps {
helpPageId?: string; 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); const modalRef = useRef<HTMLDivElement>(null);
if (onShown) { 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 ( return (
<div className={`modal fade mx-auto ${className}`} tabIndex={-1} role="dialog" ref={modalRef}> <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-content">
<div className="modal-header"> <div className="modal-header">
<h5 className="modal-title">{title}</h5> <h5 className="modal-title">{title}</h5>