BUGFIX: Layout changes for creation dialog

Configuration/Settings.Neos.yaml

@@ -34,3 +34,7 @@ Neos:
         stylesheets:
           Flowpack.Media.Ui:AssetEditor:
             resource: resource://Flowpack.Media.Ui/Public/AssetEditor/Plugin.css
+          # Plugin.css is missing the styles for the Lightbox used for Asset Previews,
+          # so we have to include the main bundle as well
+          Flowpack.Media.Ui:Assets:
+            resource: resource://Flowpack.Media.Ui/Public/Assets/main.bundle.css

Resources/Private/JavaScript/asset-preview/src/components/AssetPreview.tsx

@@ -17,12 +17,33 @@ const useStyles = createUseMediaUiStyles({
     },
 });
 
+const useLightBoxContainer = (defaultContainer: null | Element = null) => {
+    const lightBoxContainerRef = React.useRef<null | Element>(defaultContainer);
+
+    React.useEffect(() => {
+        if (defaultContainer === null) {
+            const newLightBoxContainer = document.createElement('div');
+            newLightBoxContainer.setAttribute('data-ignore_click_outside', 'true');
+
+            document.body.appendChild(newLightBoxContainer);
+            lightBoxContainerRef.current = newLightBoxContainer;
+
+            return () => newLightBoxContainer.remove();
+        }
+
+        lightBoxContainerRef.current = defaultContainer;
+    }, [defaultContainer]);
+
+    return lightBoxContainerRef;
+};
+
 export default function AssetPreview() {
     const classes = useStyles();
     const theme = useMediaUiTheme();
-    const { containerRef, assets } = useMediaUi();
+    const { containerRef, isInNodeCreationDialog, assets } = useMediaUi();
     const [selectedAssetForPreview, setSelectedAssetForPreview] = useRecoilState(selectedAssetForPreviewState);
     const { asset } = useAssetQuery(selectedAssetForPreview);
+    const lightBoxContainer = useLightBoxContainer(isInNodeCreationDialog ? null : containerRef.current);
 
     const [prevAsset, nextAsset] = useMemo(() => {
         if (!asset) return [null, null];
@@ -40,7 +61,7 @@ export default function AssetPreview() {
     return (
         <Lightbox
             reactModalStyle={{ overlay: { zIndex: theme.lightboxZIndex } }}
-            reactModalProps={{ parentSelector: () => containerRef.current }}
+            reactModalProps={{ parentSelector: () => lightBoxContainer.current }}
             wrapperClassName={classes.lightbox}
             mainSrc={asset.previewUrl}
             mainSrcThumbnail={asset.thumbnailUrl}

Resources/Private/JavaScript/core/src/provider/MediaUiProvider.tsx

@@ -12,6 +12,7 @@ interface MediaUiProviderProps {
     children: React.ReactElement;
     dummyImage: string;
     selectionMode?: boolean;
+    isInNodeCreationDialog?: boolean;
     containerRef: React.RefObject<HTMLDivElement>;
     onAssetSelection?: (localAssetIdentifier: string) => void;
     featureFlags: FeatureFlags;
@@ -23,6 +24,7 @@ interface MediaUiProviderValues {
     handleDeleteAsset: (asset: Asset) => Promise<boolean>;
     handleSelectAsset: (assetIdentity: AssetIdentity) => void;
     selectionMode: boolean;
+    isInNodeCreationDialog: boolean;
     assets: Asset[];
     refetchAssets: () => void;
     featureFlags: FeatureFlags;
@@ -35,6 +37,7 @@ export function MediaUiProvider({
     children,
     dummyImage,
     selectionMode = false,
+    isInNodeCreationDialog = false,
     onAssetSelection = null,
     containerRef,
     featureFlags,
@@ -109,6 +112,7 @@ export function MediaUiProvider({
                 handleDeleteAsset,
                 handleSelectAsset,
                 selectionMode,
+                isInNodeCreationDialog,
                 assets,
                 refetchAssets,
                 featureFlags,

Resources/Private/JavaScript/media-module/src/components/App.tsx

@@ -19,10 +19,12 @@ import { CreateTagDialog, UploadDialog, CreateAssetCollectionDialog } from './Di
 import { AssetPreview } from '../../../asset-preview/src';
 
 const useStyles = createUseMediaUiStyles((theme: MediaUiTheme) => ({
-    container: ({ selectionMode }) => ({
+    container: ({ selectionMode, isInNodeCreationDialog }) => ({
         display: 'grid',
         // TODO: Find a way to not calculate height to allow scrolling in main grid area
-        height: `calc(100vh - 48px - 61px - 41px)`, // Remove top bar, body padding and bottom bar
+        height: isInNodeCreationDialog
+            ? `calc(100% - 61px - 8px)` // Remove bottom bar and add padding
+            : `calc(100vh - 48px - 61px - 41px)`, // Remove top bar, body padding and bottom bar
         gridTemplateRows: '40px 1fr',
         gridTemplateColumns: selectionMode
             ? theme.size.sidebarWidth + ' 1fr'
@@ -87,13 +89,13 @@ const useStyles = createUseMediaUiStyles((theme: MediaUiTheme) => ({
 }));
 
 const App = () => {
-    const { selectionMode, containerRef } = useMediaUi();
+    const { selectionMode, isInNodeCreationDialog, containerRef } = useMediaUi();
     const showUploadDialog = useRecoilValue(uploadDialogVisibleState);
     const { visible: showCreateTagDialog } = useRecoilValue(createTagDialogState);
     const { visible: showCreateAssetCollectionDialog } = useRecoilValue(createAssetCollectionDialogState);
     const showAssetUsagesModal = useRecoilValue(assetUsageDetailsModalState);
     const showSimilarAssetsModal = useRecoilValue(similarAssetsModalState);
-    const classes = useStyles({ selectionMode });
+    const classes = useStyles({ selectionMode, isInNodeCreationDialog });
 
     return (
         <div className={classes.container} ref={containerRef}>

Resources/Private/JavaScript/media-module/src/components/BottomBar/BottomBar.tsx

@@ -1,29 +1,30 @@
 import * as React from 'react';
 import { useMemo } from 'react';
 
-import { createUseMediaUiStyles, MediaUiTheme } from '@media-ui/core/src';
+import { createUseMediaUiStyles, MediaUiTheme, useMediaUi } from '@media-ui/core/src';
 import { ClipboardToggle } from '@media-ui/feature-clipboard/src';
 
 import AssetCount from './AssetCount/AssetCount';
 import Pagination from './Pagination/Pagination';
 
 const useStyles = createUseMediaUiStyles((theme: MediaUiTheme) => ({
-    bottomBar: {
+    bottomBar: ({ isInNodeCreationDialog }) => ({
         display: 'grid',
-        gridTemplateColumns: '350px 1fr 350px',
+        gridTemplateColumns: isInNodeCreationDialog ? 'repeat(3, 1fr)' : '350px 1fr 350px',
         gridGap: theme.spacing.goldenUnit,
         position: 'fixed',
-        bottom: 0,
-        left: 0,
-        right: 0,
+        bottom: isInNodeCreationDialog ? -16 : 0,
+        left: isInNodeCreationDialog ? -16 : 0,
+        right: isInNodeCreationDialog ? -16 : 0,
         borderTop: `1px solid ${theme.colors.border}`,
         backgroundColor: theme.colors.moduleBackground,
         zIndex: theme.paginationZIndex,
-    },
+    }),
 }));
 
 const BottomBar: React.FC = () => {
-    const classes = useStyles();
+    const { isInNodeCreationDialog } = useMediaUi();
+    const classes = useStyles({ isInNodeCreationDialog });
 
     const components = useMemo(() => [AssetCount, Pagination, ClipboardToggle], []);
 

Resources/Private/JavaScript/media-module/src/components/BottomBar/Pagination/Pagination.tsx

@@ -19,6 +19,7 @@ const useStyles = createUseMediaUiStyles({
         justifySelf: 'center',
         listStyleType: 'none',
         textAlign: 'center',
+        padding: 0,
     },
     ellipsis: {
         lineHeight: '2.4rem',

Resources/Private/JavaScript/media-module/src/components/Dialogs/CreateAssetCollectionDialog.tsx

@@ -1,14 +1,16 @@
 import * as React from 'react';
 import { useRecoilState } from 'recoil';
 
-import { Button, TextInput, Label, Dialog } from '@neos-project/react-ui-components';
+import { Button, TextInput, Label } from '@neos-project/react-ui-components';
 
 import { useIntl, createUseMediaUiStyles, useNotify } from '@media-ui/core/src';
 import { useCreateAssetCollection } from '@media-ui/core/src/hooks';
 
 import { useCallback } from 'react';
 import { createAssetCollectionDialogState } from '../../state';
 
+import { Dialog } from './Dialog';
+
 const useStyles = createUseMediaUiStyles(() => ({
     formBody: {
         padding: 16,

Resources/Private/JavaScript/media-module/src/components/Dialogs/CreateTagDialog.tsx

@@ -2,13 +2,15 @@ import * as React from 'react';
 import { useCallback } from 'react';
 import { useRecoilState } from 'recoil';
 
-import { Button, Dialog, Label, TextInput } from '@neos-project/react-ui-components';
+import { Button, Label, TextInput } from '@neos-project/react-ui-components';
 
 import { useIntl, createUseMediaUiStyles, useNotify } from '@media-ui/core/src';
 import { useCreateTag, useSelectedAssetCollection } from '@media-ui/core/src/hooks';
 
 import { createTagDialogState } from '../../state';
 
+import { Dialog } from './Dialog';
+
 const useStyles = createUseMediaUiStyles(() => ({
     formBody: {
         padding: 16,

Resources/Private/JavaScript/media-module/src/components/Dialogs/Dialog.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { Dialog as NeosUiDialog } from '@neos-project/react-ui-components';
+
+//
+// @TODO: Remove this once https://github.com/neos/neos-ui/issues/2925 is solved.
+//
+export const Dialog: React.FC<any> = (props) => {
+    const dialogRef = React.useRef<React.ReactInstance>();
+
+    React.useEffect(() => {
+        if (dialogRef.current) {
+            const section = ReactDOM.findDOMNode(dialogRef.current) as null | HTMLElement; // eslint-disable-line react/no-find-dom-node
+            section?.firstElementChild?.setAttribute('data-ignore_click_outside', 'true');
+        }
+    }, [dialogRef]);
+
+    return <NeosUiDialog {...props} ref={dialogRef} />;
+};

Resources/Private/JavaScript/media-module/src/components/Dialogs/UploadDialog.tsx

@@ -3,14 +3,16 @@ import { useCallback, useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { useRecoilState } from 'recoil';
 
-import { Button, Icon, Dialog } from '@neos-project/react-ui-components';
+import { Button, Icon } from '@neos-project/react-ui-components';
 
 import { useIntl, createUseMediaUiStyles, MediaUiTheme, useMediaUi, useNotify } from '@media-ui/core/src';
 import { useConfigQuery, useUploadFiles } from '@media-ui/core/src/hooks';
 
 import { humanFileSize } from '../../helper';
 import { uploadDialogVisibleState } from '../../state';
 
+import { Dialog } from './Dialog';
+
 const useStyles = createUseMediaUiStyles((theme: MediaUiTheme) => ({
     uploadArea: {
         padding: theme.spacing.full,

Resources/Private/JavaScript/media-module/src/components/Main/ListView.tsx

@@ -2,16 +2,17 @@ import * as React from 'react';
 import { useCallback } from 'react';
 import { useSetRecoilState } from 'recoil';
 
-import { useIntl, createUseMediaUiStyles, MediaUiTheme } from '@media-ui/core/src';
+import { useIntl, createUseMediaUiStyles, MediaUiTheme, useMediaUi } from '@media-ui/core/src';
 import { AssetIdentity } from '@media-ui/core/src/interfaces';
 import { useSelectAsset } from '@media-ui/core/src/hooks';
 import { selectedAssetForPreviewState } from '@media-ui/feature-asset-preview/src';
 
 import { ListViewItem } from './index';
 
 const useStyles = createUseMediaUiStyles((theme: MediaUiTheme) => ({
-    listView: {
+    listView: ({ isInNodeCreationDialog }) => ({
         overflowY: 'scroll',
+        height: isInNodeCreationDialog ? '100%' : 'auto',
         '& table': {
             borderSpacing: '0 1px',
             width: '100%',
@@ -28,15 +29,16 @@ const useStyles = createUseMediaUiStyles((theme: MediaUiTheme) => ({
                 },
             },
         },
-    },
+    }),
 }));
 
 interface ListViewProps {
     assetIdentities: AssetIdentity[];
 }
 
 const ListView: React.FC<ListViewProps> = ({ assetIdentities }: ListViewProps) => {
-    const classes = useStyles();
+    const { isInNodeCreationDialog } = useMediaUi();
+    const classes = useStyles({ isInNodeCreationDialog });
     const { translate } = useIntl();
     const setSelectedAssetForPreview = useSetRecoilState(selectedAssetForPreviewState);
     const selectAsset = useSelectAsset();

Resources/Private/JavaScript/media-selection-screen/src/MediaSelectionScreen.tsx

@@ -46,17 +46,20 @@ interface MediaSelectionScreenProps {
     type: 'assets' | 'images';
     onComplete: (localAssetIdentifier: string) => void;
     isLeftSideBarHidden: boolean;
+    isNodeCreationDialogOpen: boolean;
     toggleSidebar: () => void;
     addFlashMessage: (title: string, message: string, severity?: string, timeout?: number) => void;
 }
 
 interface MediaSelectionScreenState {
     initialLeftSideBarHiddenState: boolean;
+    initialNodeCreationDialogOpenState: boolean;
 }
 
 @connect(
     $transform({
         isLeftSideBarHidden: $get('ui.leftSideBar.isHidden'),
+        isNodeCreationDialogOpen: $get('ui.nodeCreationDialog.isOpen'),
     }),
     {
         addFlashMessage: actions.UI.FlashMessages.add,
@@ -76,23 +79,25 @@ export default class MediaSelectionScreen extends React.PureComponent<
         super(props);
         this.state = {
             initialLeftSideBarHiddenState: false,
+            initialNodeCreationDialogOpenState: false,
         };
     }
 
     componentDidMount() {
-        const { isLeftSideBarHidden, toggleSidebar } = this.props;
+        const { isLeftSideBarHidden, isNodeCreationDialogOpen, toggleSidebar } = this.props;
         this.setState({
             initialLeftSideBarHiddenState: isLeftSideBarHidden,
+            initialNodeCreationDialogOpenState: isNodeCreationDialogOpen,
         });
-        if (!isLeftSideBarHidden) {
+        if (!isLeftSideBarHidden && !isNodeCreationDialogOpen) {
             toggleSidebar();
         }
     }
 
     componentWillUnmount() {
         const { isLeftSideBarHidden, toggleSidebar } = this.props;
-        const { initialLeftSideBarHiddenState } = this.state;
-        if (initialLeftSideBarHiddenState !== isLeftSideBarHidden) {
+        const { initialLeftSideBarHiddenState, initialNodeCreationDialogOpenState } = this.state;
+        if (initialLeftSideBarHiddenState !== isLeftSideBarHidden && !initialNodeCreationDialogOpenState) {
             toggleSidebar();
         }
     }
@@ -160,8 +165,10 @@ export default class MediaSelectionScreen extends React.PureComponent<
             error: (title, message = '') => addFlashMessage(title, message, 'error'),
         };
 
+        const isInNodeCreationDialog = this.state.initialNodeCreationDialogOpenState;
+
         return (
-            <div style={{ transform: 'translateZ(0)', height: '100%', padding: '1rem' }}>
+            <div style={{ transform: 'translateZ(0)', height: '100%', padding: isInNodeCreationDialog ? 0 : '1rem' }}>
                 <IntlProvider translate={this.translate}>
                     <NotifyProvider notificationApi={Notification}>
                         <ApolloProvider client={client}>
@@ -170,6 +177,7 @@ export default class MediaSelectionScreen extends React.PureComponent<
                                     dummyImage={dummyImage}
                                     onAssetSelection={(localAssetIdentifier) => onComplete(localAssetIdentifier)}
                                     selectionMode={true}
+                                    isInNodeCreationDialog={isInNodeCreationDialog}
                                     containerRef={containerRef}
                                     featureFlags={featureFlags}
                                 >