Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-05-07 00:55:51 +02:00
Code Issues Packages Projects Releases Activity

client/modal dialog: add support for full page dialogs on mobile

Browse Source
This commit is contained in:
Adorian Doran
2026-04-18 20:20:06 +03:00
parent 2742df7cd1
commit dbea88fa56
2 changed files with 21 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/client/src/stylesheets/style.css
View File

@@ -1666,6 +1666,21 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
display: flex;
}
body.mobile .modal-dialog.modal-dialog-full-page-on-mobile {
width: 100%;
height: 100%;
max-height: unset;
.modal-content {
border-radius: 0;
border: 0;
.modal-body {
overflow: scroll;
}
}
}
body.mobile .modal-content {
overflow-y: auto;
border-radius: var(--bs-modal-border-radius) var(--bs-modal-border-radius) 0 0;

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

@@ -77,9 +77,13 @@ export interface ModalProps {
* If true, the modal will not focus itself after becoming visible.
*/
noFocus?: boolean;
/**
* Indicates if the dialog will be displayed as a full page on mobile devices.
*/
isFullPageOnMobile?: boolean;
}
export default function Modal({ children, className, size, title, customTitleBarButtons: titleBarButtons, header, footer, footerStyle, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden, modalRef: externalModalRef, formRef, bodyStyle, show, stackable, keepInDom, noFocus }: ModalProps) {
export default function Modal({ children, className, size, title, customTitleBarButtons: titleBarButtons, header, footer, footerStyle, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden, modalRef: externalModalRef, formRef, bodyStyle, show, stackable, keepInDom, noFocus, isFullPageOnMobile }: ModalProps) {
const modalRef = useSyncedRef<HTMLDivElement>(externalModalRef);
const modalInstanceRef = useRef<BootstrapModal>();
const elementToFocus = useRef<Element | null>();
@@ -143,7 +147,7 @@ export default function Modal({ children, className, size, title, customTitleBar
return (
<div className={`modal fade mx-auto ${className}`} tabIndex={-1} style={dialogStyle} role="dialog" ref={modalRef}>
{(show || keepInDom) && <div className={`modal-dialog modal-${size} ${scrollable ? "modal-dialog-scrollable" : ""}`} style={documentStyle} role="document">
{(show || keepInDom) && <div className={clsx("modal-dialog", `modal-${size}`, {"modal-dialog-scrollable": scrollable, "modal-dialog-full-page-on-mobile": isFullPageOnMobile})} style={documentStyle} role="document">
<div className="modal-content">
<div className="modal-header">
{!title || typeof title === "string" ? (