FEATURE: upload dialog with configurable additional property fields

Resources/Private/JavaScript/asset-upload-screen/package.json

@@ -10,7 +10,6 @@
     "@apollo/client": "^3.3.13",
     "@media-ui/core": "workspace:*",
     "@media-ui/feature-asset-upload": "workspace:*",
-    "@media-ui/media-module": "workspace:*",
     "apollo-upload-client": "^14.1.3",
     "react": "^17.0.2",
     "react-redux": "^5.1.2",

Resources/Private/JavaScript/asset-upload-screen/src/NewAssetUpload.tsx

@@ -6,7 +6,6 @@ import { useIntl, useNotify } from '@media-ui/core/src';
 import { useUploadDialogState, useUploadFiles } from '@media-ui/feature-asset-upload/src/hooks';
 import { useCallback } from 'react';
 import { PreviewSection, UploadSection } from '@media-ui/feature-asset-upload/src/components';
-import { FilesUploadState, UploadedFile } from '@media-ui/feature-asset-upload/typings';
 import classes from './NewAssetUpload.module.css';
 
 const NewAssetUpload = (props: { onComplete: (result: { object: { __identity: string } }) => void }) => {

Resources/Private/JavaScript/asset-upload/src/components/Dialogs/NewAssetDialog.tsx

@@ -11,7 +11,6 @@ import { useUploadDialogState, useUploadFiles } from '../../hooks';
 import { useAssetsQuery } from '@media-ui/core/src/hooks';
 
 import classes from './NewAssetDialog.module.css';
-import { FilesUploadState, UploadedFile } from '../../../typings';
 
 const NewAssetDialog: React.FC = () => {
     const { translate } = useIntl();

Resources/Private/JavaScript/asset-upload/src/components/Dialogs/ReplaceAssetDialog.tsx

@@ -15,7 +15,6 @@ import useReplaceAsset, { AssetReplacementOptions } from '../../hooks/useReplace
 import { useSetRecoilState } from 'recoil';
 
 import classes from './ReplaceAssetDialog.module.css';
-import { UploadedFile } from '../../../typings';
 import {
     selectedAssetLabelState,
     selectedAssetCaptionState,

Resources/Private/JavaScript/asset-upload/src/components/FilePreview.module.css

@@ -12,12 +12,17 @@
     border: 1px solid #eaeaea;
     margin-bottom: var(--theme-spacing-Half, 8px);
     margin-right: var(--theme-spacing-Half, 8px);
-    width: 270px;
-    height: 200px;
+    width: 100px;
+    height: 100px;
     padding: var(--theme-spacing-Quarter, 4px);
     box-sizing: border-box;
 }
 
+.thumbWide {
+    width: 270px;
+    height: 200px;
+}
+
 .thumbInner {
     position: relative;
     width: 100%;
@@ -55,32 +60,32 @@
     z-index: -1;
 }
 
-.thumbInner:after {
+.thumbInner::after {
     display: none;
     position: absolute;
-    content: "";
+    content: '';
     left: 0;
     top: 0;
     right: 0;
     bottom: 0;
     background-color: var(--theme-colors-alternatingBackground, #3f3f3f);
-    opacity: 0.3;
+    opacity: .3;
     z-index: -1;
 }
 
 .loading {
     border-color: var(--theme-colors-border, #3f3f3f);
 }
 
-.loading .thumbInner:after {
+.loading .thumbInner::after {
     display: block;
 }
 
 .success {
     border-color: var(--theme-colors-Success, #00a338);
 }
 
-.success .thumbInner:after {
+.success .thumbInner::after {
     display: block;
     background-color: var(--theme-colors-Success, #00a338);
 }
@@ -89,7 +94,7 @@
     border-color: var(--theme-colors-Error, #ff460d);
 }
 
-.error .thumbInner:after {
+.error .thumbInner::after {
     display: block;
     background-color: var(--theme-colors-Error, #ff460d);
 }
@@ -100,20 +105,5 @@
 
 .properties .textInput,
 .properties .textArea {
-    padding: var(--theme-spacing-Half, 8px) 14px;
-}
-
-.properties .propertyGroupRow {
-    display: inline-flex;
-    flex-direction: row-reverse;
-    justify-content: flex-end;
-}
-
-.properties .propertyGroupRow .checkBox {
-    margin-right: 8px;
-}
-
-.properties .propertyGroupRow label {
-    line-height: 20px;
-    margin-bottom: 0;
+    padding: var(--theme-spacing-Half, 8px) 14px !important;
 }

Resources/Private/JavaScript/asset-upload/src/components/FilePreview.tsx

@@ -6,9 +6,8 @@ import { SetterOrUpdater } from 'recoil';
 import { Icon, TextArea, TextInput, CheckBox } from '@neos-project/react-ui-components';
 
 import classes from './FilePreview.module.css';
-import { FileUploadResult, FilesUploadState, UploadedFile } from '../../typings';
 import { UploadDialogStateWithFiles } from '../state/uploadDialogState';
-import Property from '@media-ui/media-module/src/components/SideBarRight/Inspector/Property';
+import Property from '@media-ui/core/src/components/Property';
 import { useIntl } from '@media-ui/core/src';
 import { useConfigQuery } from '@media-ui/core/src/hooks';
 
@@ -134,12 +133,17 @@ const FilePreview: React.FC<FilePreviewProps> = ({
         setUploadPossible(getUploadPossibleValue(files));
     };
 
+    const isWideThumb =
+        uploadPropertiesConfig['title'].show ||
+        uploadPropertiesConfig['caption'].show ||
+        (uploadPropertiesConfig['copyrightNotice'] && uploadPropertiesConfig['copyrightNotice'].show);
     // TODO: Output helpful localised messages for results 'EXISTS', 'ADDED', 'ERROR'
     return (
         <div className={classes.preview}>
             <div
                 className={cx(
                     classes.thumb,
+                    isWideThumb ? classes.thumbWide : '',
                     error ? classes.error : success ? classes.success : loading && classes.loading
                 )}
                 title={file.name}
@@ -197,7 +201,7 @@ const FilePreview: React.FC<FilePreviewProps> = ({
                                     'uploadDialog.copyrightNoticeNotNeeded',
                                     'Copyright notice not needed'
                                 )}
-                                className={classes.propertyGroupRow}
+                                isCheckbox={true}
                             >
                                 <CheckBox
                                     onChange={setCopyrightNoticeNotNeeded}

Resources/Private/JavaScript/asset-upload/src/components/PreviewSection.tsx

@@ -7,7 +7,6 @@ import { SetStateAction, Dispatch } from 'react';
 import { SetterOrUpdater } from 'recoil';
 
 import classes from './PreviewSection.module.css';
-import { FileUploadResult, FilesUploadState } from '../../typings';
 import { UploadDialogStateWithFiles } from '../state/uploadDialogState';
 
 interface PreviewSectionProps {

Resources/Private/JavaScript/asset-upload/src/components/UploadSection.tsx

@@ -7,7 +7,6 @@ import { useConfigQuery } from '@media-ui/core/src/hooks';
 import { humanFileSize } from '@media-ui/core/src/helper';
 
 import classes from './UploadSection.module.css';
-import { UploadedFile } from '../../typings';
 
 interface UploadSectionProps {
     files: UploadedFile[];

Resources/Private/JavaScript/asset-upload/src/hooks/useReplaceAsset.ts

@@ -1,7 +1,6 @@
 import { useMutation } from '@apollo/client';
 
 import { REPLACE_ASSET } from '../mutations';
-import { FileUploadResult, UploadedFile } from '../../typings';
 
 export interface AssetReplacementOptions {
     generateRedirects: boolean;

Resources/Private/JavaScript/asset-upload/src/hooks/useUploadDialogState.ts

@@ -1,6 +1,5 @@
 import { Dispatch, SetStateAction, useCallback, useState } from 'react';
 import { useRecoilState } from 'recoil';
-import { FilesUploadState } from '../../typings';
 import { uploadPossibleState, uploadDialogState } from '../state';
 import { UPLOAD_TYPE, UploadDialogStateWithFiles } from '../state/uploadDialogState';
 

Resources/Private/JavaScript/asset-upload/src/hooks/useUploadFile.ts

@@ -5,7 +5,6 @@ import { selectedTagIdState } from '@media-ui/feature-asset-tags';
 import { selectedAssetCollectionIdState } from '@media-ui/feature-asset-collections';
 
 import { UPLOAD_FILE } from '../mutations';
-import { FileUploadResult } from '../../typings';
 
 export default function useUploadFile() {
     const [action, { error, data, loading }] = useMutation<{ uploadFile: FileUploadResult }>(UPLOAD_FILE);

Resources/Private/JavaScript/asset-upload/src/hooks/useUploadFiles.ts

@@ -5,7 +5,6 @@ import { selectedTagIdState } from '@media-ui/feature-asset-tags';
 import { selectedAssetCollectionIdState } from '@media-ui/feature-asset-collections';
 
 import { UPLOAD_FILES } from '../mutations';
-import { FileUploadResult, UploadedFile } from '../../typings';
 
 export default function useUploadFiles() {
     const [action, { error, data, loading }] = useMutation<{ uploadFiles: FileUploadResult[] }>(UPLOAD_FILES);

Resources/Private/JavaScript/asset-upload/src/state/uploadDialogState.ts

@@ -1,5 +1,4 @@
 import { atom } from 'recoil';
-import { FilesUploadState } from '../../typings';
 
 export enum UPLOAD_TYPE {
     new = 'new',

Resources/Private/JavaScript/asset-upload/typings/FileUploadResult.ts

@@ -1,4 +1,5 @@
-export interface FileUploadResult {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+interface FileUploadResult {
     filename: string;
     success: boolean;
     result: string;

Resources/Private/JavaScript/asset-upload/typings/FilesUploadState.ts

@@ -1,5 +1,5 @@
-import { UploadedFile } from './UploadedFile';
-export interface FilesUploadState {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+interface FilesUploadState {
     selected: UploadedFile[];
     finished: UploadedFile[];
     rejected: UploadedFile[];

Resources/Private/JavaScript/asset-upload/typings/UploadedFile.ts

@@ -1,4 +1,5 @@
-export interface UploadedFile extends File {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+interface UploadedFile extends File {
     id?: string;
     path?: string;
     preview?: string;

Resources/Private/JavaScript/core/src/components/Property.module.css

@@ -0,0 +1,8 @@
+.propertyGroupRow label {
+    display: flex;
+    justify-content: flex-start;
+}
+
+.propertyGroupLabel {
+    line-height: 20px;
+}

Resources/Private/JavaScript/core/src/components/Property.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Label } from '@neos-project/react-ui-components';
+import classes from './Property.module.css';
+
+const Property: React.FC<{ label: React.ReactNode; isCheckbox?: boolean }> = ({ children, label, isCheckbox }) => {
+    return (
+        <>
+            {isCheckbox ? (
+                <div className={'propertyGroup ' + classes.propertyGroupRow}>
+                    <Label>
+                        {children}
+                        <div className={classes.propertyGroupLabel}>{label}</div>
+                    </Label>
+                </div>
+            ) : (
+                <div className="propertyGroup">
+                    <Label>{label}</Label>
+                    {children}
+                </div>
+            )}
+        </>
+    );
+};
+
+export default Property;

Resources/Private/JavaScript/dev-server/src/server.ts

@@ -8,7 +8,6 @@ import express from 'express';
 import { createProxyMiddleware } from 'http-proxy-middleware';
 
 import * as Fixtures from './fixtures/index';
-import { FileUploadResult } from '@media-ui/feature-asset-upload/typings';
 
 // FIXME: type annotations are missing as they couldn't be included anymore while making the devserver work again
 // import { AssetChange, AssetChangeQueryResult, AssetChangeType } from '@media-ui/feature-concurrent-editing/src';

Resources/Private/JavaScript/media-module/src/components/SideBarRight/Inspector/AssetCollectionInspector.tsx

@@ -9,7 +9,7 @@ import { useSelectedAssetCollection, useUpdateAssetCollection } from '@media-ui/
 
 import { TagSelectBoxAssetCollection } from '.';
 import Actions from './Actions';
-import Property from './Property';
+import Property from '@media-ui/core/src/components/Property';
 import InspectorContainer from './InspectorContainer';
 import ParentCollectionSelectBox from './ParentCollectionSelectBox';
 

Resources/Private/JavaScript/media-module/src/components/SideBarRight/Inspector/PropertyInspector.tsx

@@ -9,7 +9,7 @@ import { IconLabel } from '@media-ui/core/src/components';
 import { featureFlagsState } from '@media-ui/core/src/state';
 
 import { CollectionSelectBox, MetadataView, TagSelectBoxAsset } from './index';
-import Property from './Property';
+import Property from '@media-ui/core/src/components/Property';
 import Actions from './Actions';
 import InspectorContainer from './InspectorContainer';
 import Tasks from './Tasks';

Resources/Private/JavaScript/media-module/src/components/SideBarRight/Inspector/TagInspector.tsx

@@ -9,7 +9,7 @@ import { selectedInspectorViewState } from '@media-ui/core/src/state';
 import { useSelectedTag, useUpdateTag } from '@media-ui/feature-asset-tags';
 
 import Actions from './Actions';
-import Property from './Property';
+import Property from '@media-ui/core/src/components/Property';
 import InspectorContainer from './InspectorContainer';
 
 const TagInspector = () => {