diff --git a/ui/src/views/list/Grid.tsx b/ui/src/views/list/Grid.tsx index c5b3aa3e..403e19c3 100644 --- a/ui/src/views/list/Grid.tsx +++ b/ui/src/views/list/Grid.tsx @@ -511,6 +511,7 @@ const Grid = (props: GridProps) => { mode, isPopupFullScreen, useMobileEditPopup, + baseWrapperClass: 'dx-datagrid-edit-popup', translate, handlers: { onSave: () => getGridInstance()?.saveEditData(), diff --git a/ui/src/views/list/Tree.tsx b/ui/src/views/list/Tree.tsx index f4cc9cc2..dab87838 100644 --- a/ui/src/views/list/Tree.tsx +++ b/ui/src/views/list/Tree.tsx @@ -507,6 +507,7 @@ const Tree = (props: TreeProps) => { mode, isPopupFullScreen, useMobileEditPopup, + baseWrapperClass: 'dx-treelist-edit-popup', translate, handlers: { onSave: () => getTreeInstance()?.saveEditData(), diff --git a/ui/src/views/list/shared/editPopup.ts b/ui/src/views/list/shared/editPopup.ts index 0ee093e7..b7ec815b 100644 --- a/ui/src/views/list/shared/editPopup.ts +++ b/ui/src/views/list/shared/editPopup.ts @@ -15,16 +15,27 @@ export const isMobileViewport = () => /** Popup'ın mobil davranış kurallarıyla açılıp açılmayacağını belirler. */ export const shouldUseMobileEditPopup = () => isMobileViewport() || isTouchLikeDevice() +/** + * Tam ekran popup'ta yükseklik verilmez; DevExtreme kendi `fullScreen` ölçümünü + * uygular. Buraya '100%' yazıldığında DevExtreme yüzdeyi pencereye değil + * popup'ın görsel container'ına (grid elemanı) göre çözüyor, içerik alanı + * yanlış yükseklikte kırpılıyordu. + */ export const getEditPopupHeight = (useMobileEditPopup: boolean, isPopupFullScreen: boolean) => - useMobileEditPopup && isPopupFullScreen ? '100%' : 'auto' + useMobileEditPopup && isPopupFullScreen ? undefined : 'auto' +/** + * Yüzdelik maxHeight container'a göre çözüldüğü için mobil tam ekranda hiç + * gönderilmez. Diğer durumlarda px veya `vh` kullanılır; `vh` pencereye göre + * hesaplanır ve container'dan etkilenmez. + */ export const getEditPopupMaxHeight = ( useMobileEditPopup: boolean, isPopupFullScreen: boolean, configuredHeight?: number, ) => { if (useMobileEditPopup && isPopupFullScreen) { - return '100%' + return undefined } return configuredHeight && configuredHeight > 0 ? configuredHeight : '90vh' @@ -92,6 +103,12 @@ type BuildEditPopupParams = { handlers: EditPopupToolbarHandlers /** Scheduler gibi ek sınıf gerektiren yerler için. */ mobileWrapperClass?: string + /** + * DevExtreme'in kendi wrapper sınıfı (`dx-datagrid-edit-popup`, + * `dx-treelist-edit-popup` …). `wrapperAttr` verildiğinde bileşenin varsayılan + * sınıfı eziliyor; tema kuralları kaybolmasın diye başa eklenir. + */ + baseWrapperClass?: string } /** @@ -106,10 +123,13 @@ export const buildEditPopupOptions = ({ translate, handlers, mobileWrapperClass = 'mobile-edit-popup', + baseWrapperClass, }: BuildEditPopupParams) => ({ animation: {}, deferRendering: true, - wrapperAttr: useMobileEditPopup ? { class: mobileWrapperClass } : undefined, + wrapperAttr: useMobileEditPopup + ? { class: [baseWrapperClass, mobileWrapperClass].filter(Boolean).join(' ') } + : undefined, title: (mode === 'new' ? '✚ ' : '🖊️ ') + translate('::' + popupOptions?.title), showTitle: popupOptions?.showTitle, hideOnOutsideClick: popupOptions?.hideOnOutsideClick,