From 495c10b696deb1de93e0fa54c1d16a5e49d5d02e Mon Sep 17 00:00:00 2001 From: Sebastian Helzle Date: Wed, 19 Nov 2025 11:44:51 +0100 Subject: [PATCH] FEATURE: Support new link editor layout --- .../src/components/AssetPreview.tsx | 4 ++-- .../core/src/provider/MediaUiProvider.tsx | 4 ++++ packages/media-module/src/components/App.tsx | 4 ++-- .../src/components/Main/ListView.module.css | 3 ++- .../src/components/Main/ListView.tsx | 4 ++-- .../components/TopBar/SortOrderSelector.tsx | 4 ++-- .../src/MediaSelectionScreen.module.css | 2 +- .../src/MediaSelectionScreen.tsx | 24 +++++++++++++------ 8 files changed, 32 insertions(+), 17 deletions(-) diff --git a/packages/asset-preview/src/components/AssetPreview.tsx b/packages/asset-preview/src/components/AssetPreview.tsx index 8b1312b4a..c6ee75806 100644 --- a/packages/asset-preview/src/components/AssetPreview.tsx +++ b/packages/asset-preview/src/components/AssetPreview.tsx @@ -33,11 +33,11 @@ const useLightBoxContainer = (defaultContainer: null | Element = null) => { }; export default function AssetPreview() { - const { containerRef, isInNodeCreationDialog } = useMediaUi(); + const { containerRef, isInDialog } = useMediaUi(); const assets = useRecoilValue(availableAssetsState); const [selectedAssetForPreview, setSelectedAssetForPreview] = useRecoilState(selectedAssetForPreviewState); const { asset } = useAssetQuery(selectedAssetForPreview); - const lightBoxContainer = useLightBoxContainer(isInNodeCreationDialog ? null : containerRef.current); + const lightBoxContainer = useLightBoxContainer(isInDialog ? null : containerRef.current); const [prevAsset, nextAsset] = useMemo(() => { if (!asset) return [null, null]; diff --git a/packages/core/src/provider/MediaUiProvider.tsx b/packages/core/src/provider/MediaUiProvider.tsx index a7f9255a1..4930b6c56 100644 --- a/packages/core/src/provider/MediaUiProvider.tsx +++ b/packages/core/src/provider/MediaUiProvider.tsx @@ -20,6 +20,7 @@ interface MediaUiProviderProps { dummyImage: string; selectionMode?: boolean; isInNodeCreationDialog?: boolean; + isInDialog?: boolean; containerRef: React.RefObject; onAssetSelection?: (localAssetIdentifier: string) => void; approvalAttainmentStrategyFactory?: ApprovalAttainmentStrategyFactory; @@ -32,6 +33,7 @@ interface MediaUiProviderValues { // TODO: Turn view variants into a single view Enum selectionMode: boolean; isInNodeCreationDialog: boolean; + isInDialog: boolean; isAssetSelectable: (asset: Asset) => boolean; approvalAttainmentStrategy: ApprovalAttainmentStrategy; } @@ -44,6 +46,7 @@ export function MediaUiProvider({ dummyImage, selectionMode = false, isInNodeCreationDialog = false, + isInDialog = false, onAssetSelection = null, containerRef, approvalAttainmentStrategyFactory = DefaultApprovalAttainmentStrategyFactory, @@ -136,6 +139,7 @@ export function MediaUiProvider({ handleSelectAsset, selectionMode, isInNodeCreationDialog, + isInDialog, isAssetSelectable, approvalAttainmentStrategy, }} diff --git a/packages/media-module/src/components/App.tsx b/packages/media-module/src/components/App.tsx index 603636407..0865441c6 100644 --- a/packages/media-module/src/components/App.tsx +++ b/packages/media-module/src/components/App.tsx @@ -33,7 +33,7 @@ import classes from './App.module.css'; import './Global.module.css'; const App = () => { - const { selectionMode, isInNodeCreationDialog, containerRef } = useMediaUi(); + const { selectionMode, isInDialog, containerRef } = useMediaUi(); const uploadDialog = useRecoilValue(uploadDialogState); const createTagDialog = useRecoilValue(createTagDialogState); const showCreateAssetCollectionDialog = useRecoilValue(createAssetCollectionDialogVisibleState); @@ -59,7 +59,7 @@ const App = () => {
diff --git a/packages/media-module/src/components/Main/ListView.module.css b/packages/media-module/src/components/Main/ListView.module.css index 23238e020..2251275e7 100644 --- a/packages/media-module/src/components/Main/ListView.module.css +++ b/packages/media-module/src/components/Main/ListView.module.css @@ -2,8 +2,9 @@ height: auto; } -.listView--fullHeight { +.fullHeight { height: 100%; + padding-bottom: 41px; } .listView table { diff --git a/packages/media-module/src/components/Main/ListView.tsx b/packages/media-module/src/components/Main/ListView.tsx index 91302e90a..2ef7eb76f 100644 --- a/packages/media-module/src/components/Main/ListView.tsx +++ b/packages/media-module/src/components/Main/ListView.tsx @@ -15,7 +15,7 @@ interface ListViewProps { import classes from './ListView.module.css'; const ListView: React.FC = ({ assetIdentities }: ListViewProps) => { - const { isInNodeCreationDialog } = useMediaUi(); + const { isInDialog } = useMediaUi(); const { translate } = useIntl(); const setSelectedAssetForPreview = useSetRecoilState(selectedAssetForPreviewState); const selectAsset = useSelectAsset(); @@ -32,7 +32,7 @@ const ListView: React.FC = ({ assetIdentities }: ListViewProps) = ); return ( -
+
diff --git a/packages/media-module/src/components/TopBar/SortOrderSelector.tsx b/packages/media-module/src/components/TopBar/SortOrderSelector.tsx index 9be40643e..f1c90f3c0 100644 --- a/packages/media-module/src/components/TopBar/SortOrderSelector.tsx +++ b/packages/media-module/src/components/TopBar/SortOrderSelector.tsx @@ -17,10 +17,10 @@ interface SortByOption { } const SortOrderSelector: React.FC = () => { - const { isInNodeCreationDialog, selectionMode } = useMediaUi(); + const { isInDialog, selectionMode } = useMediaUi(); const [sortOrderState, setSortOrderState] = useRecoilState(selectedSortOrderState); const { translate } = useIntl(); - const hideOptionIcon = isInNodeCreationDialog || selectionMode; + const hideOptionIcon = isInDialog || selectionMode; const handleChangeSortBy = useCallback( (sortBy: SORT_BY) => { setSortOrderState({ ...sortOrderState, sortBy }); diff --git a/packages/media-selection-screen/src/MediaSelectionScreen.module.css b/packages/media-selection-screen/src/MediaSelectionScreen.module.css index 9423c8dbd..9920ddaba 100644 --- a/packages/media-selection-screen/src/MediaSelectionScreen.module.css +++ b/packages/media-selection-screen/src/MediaSelectionScreen.module.css @@ -4,6 +4,6 @@ padding: 1rem; } -.isInNodeCreationDialog { +.isInDialog { padding: 0; } diff --git a/packages/media-selection-screen/src/MediaSelectionScreen.tsx b/packages/media-selection-screen/src/MediaSelectionScreen.tsx index 44560a575..bdefc60a6 100755 --- a/packages/media-selection-screen/src/MediaSelectionScreen.tsx +++ b/packages/media-selection-screen/src/MediaSelectionScreen.tsx @@ -45,6 +45,7 @@ interface MediaSelectionScreenState { class MediaSelectionScreen extends React.PureComponent { notificationHandler: NeosNotification; + containerRef = createRef(); constructor(props: MediaSelectionScreenProps) { super(props); @@ -69,7 +70,7 @@ class MediaSelectionScreen extends React.PureComponent { + return this.state.initialNodeCreationDialogOpenState || !!this.containerRef.current?.closest('[role="dialog"]'); + }; + render() { const { onComplete } = this.props; const { dummyImage } = this.getConfig(); - const containerRef = createRef(); - const isInNodeCreationDialog = this.state.initialNodeCreationDialogOpenState; + const isInDialog = this.isInDialog(); + const { initialNodeCreationDialogOpenState } = this.state; return (