Add component layout, add react-dropzone

Feature #13856

Arvados-DCO-1.1-Signed-off-by: Daniel Kos <daniel.kos@contractors.roche.com>

diff --git a/package.json b/package.json
index f940e54ee3e4b138ee7000daf58eb41ca5e38d67..cd8a9c4d241356df33f60894c8ca23f2bf0fc1e4 100644 (file)
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@material-ui/icons": "2.0.0",
     "@types/lodash": "4.14.116",
     "@types/react-copy-to-clipboard": "4.2.5",
     "@material-ui/icons": "2.0.0",
     "@types/lodash": "4.14.116",
     "@types/react-copy-to-clipboard": "4.2.5",

+    "@types/react-dropzone": "4.2.1",

     "@types/redux-form": "7.4.4",
     "axios": "0.18.0",
     "classnames": "2.2.6",
     "@types/redux-form": "7.4.4",
     "axios": "0.18.0",
     "classnames": "2.2.6",


@@ -14,6 +15,7 @@
     "react": "16.4.2",
     "react-copy-to-clipboard": "5.0.1",
     "react-dom": "16.4.2",
     "react": "16.4.2",
     "react-copy-to-clipboard": "5.0.1",
     "react-dom": "16.4.2",

+    "react-dropzone": "4.2.13",

     "react-redux": "5.0.7",
     "react-router": "4.3.1",
     "react-router-dom": "4.3.1",
     "react-redux": "5.0.7",
     "react-router": "4.3.1",
     "react-router-dom": "4.3.1",

diff --git a/src/components/file-upload/file-upload.tsx b/src/components/file-upload/file-upload.tsx
index 537841101036055830e65c75143e6b596409f276..3a98e27af214f3e3b763404f52dd4b9790631b08 100644 (file)
--- a/src/components/file-upload/file-upload.tsx
+++ b/src/components/file-upload/file-upload.tsx
@@ -3,24 +3,27 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';

-import { Button, Grid, StyleRulesCallback, WithStyles } from '@material-ui/core';
+import { Grid, StyleRulesCallback, Typography, WithStyles } from '@material-ui/core';

 import { withStyles } from '@material-ui/core';
 import { withStyles } from '@material-ui/core';

+import Dropzone from 'react-dropzone';
+import { CloudUploadIcon } from "../icon/icon";

 
 

-export interface Breadcrumb {
-    label: string;
-}
-
-type CssRules = "item" | "currentItem" | "label";
+type CssRules = "root" | "dropzone" | "container" | "uploadIcon";

 
 const styles: StyleRulesCallback<CssRules> = theme => ({
 
 const styles: StyleRulesCallback<CssRules> = theme => ({

-    item: {
-        opacity: 0.6
+    root: {

     },
     },

-    currentItem: {
-        opacity: 1
+    dropzone: {
+        width: "100%",
+        height: "100px",
+        border: "1px dashed black",
+        borderRadius: "5px"

     },
     },

-    label: {
-        textTransform: "none"
+    container: {
+        height: "100%"
+    },
+    uploadIcon: {
+        verticalAlign: "middle"

     }
 });
 
     }
 });
 


@@ -29,8 +32,18 @@ interface FileUploadProps {
 
 export const FileUpload = withStyles(styles)(
     ({ classes }: FileUploadProps & WithStyles<CssRules>) =>
 
 export const FileUpload = withStyles(styles)(
     ({ classes }: FileUploadProps & WithStyles<CssRules>) =>

-    <Grid container alignItems="center" wrap="nowrap">
-    {
-    }
+    <Grid container direction={"column"}>
+        <Typography variant={"subheading"}>
+            Upload data
+        </Typography>
+        <Dropzone className={classes.dropzone}>
+            <Grid container justify="center" alignItems="center" className={classes.container}>
+                <Grid item component={"span"}>
+                    <Typography variant={"subheading"}>
+                        <CloudUploadIcon className={classes.uploadIcon}/> Drag and drop data or <a>browse</a>
+                    </Typography>
+                </Grid>
+            </Grid>
+        </Dropzone>

     </Grid>
 );
     </Grid>
 );

diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 1dc8669ecfdc927f550459819fc1f9aae1561d16..0f0442a53ebd1b7be4b485694b45e86e3a99be7a 100644 (file)
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -7,6 +7,7 @@ import AccessTime from '@material-ui/icons/AccessTime';
 import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
 import BubbleChart from '@material-ui/icons/BubbleChart';
 import Cached from '@material-ui/icons/Cached';
 import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
 import BubbleChart from '@material-ui/icons/BubbleChart';
 import Cached from '@material-ui/icons/Cached';

+import CloudUpload from '@material-ui/icons/CloudUpload';

 import Code from '@material-ui/icons/Code';
 import ChevronLeft from '@material-ui/icons/ChevronLeft';
 import ChevronRight from '@material-ui/icons/ChevronRight';
 import Code from '@material-ui/icons/Code';
 import ChevronLeft from '@material-ui/icons/ChevronLeft';
 import ChevronRight from '@material-ui/icons/ChevronRight';


@@ -44,6 +45,7 @@ export const CustomizeTableIcon: IconType = (props) => <Menu {...props} />;
 export const CopyIcon: IconType = (props) => <ContentCopy {...props} />;
 export const CollectionIcon: IconType = (props) => <LibraryBooks {...props} />;
 export const CloseIcon: IconType = (props) => <Close {...props} />;
 export const CopyIcon: IconType = (props) => <ContentCopy {...props} />;
 export const CollectionIcon: IconType = (props) => <LibraryBooks {...props} />;
 export const CloseIcon: IconType = (props) => <Close {...props} />;

+export const CloudUploadIcon: IconType = (props) => <CloudUpload {...props} />;

 export const DefaultIcon: IconType = (props) => <RateReview {...props} />;
 export const DetailsIcon: IconType = (props) => <Info {...props} />;
 export const DownloadIcon: IconType = (props) => <GetApp {...props} />;
 export const DefaultIcon: IconType = (props) => <RateReview {...props} />;
 export const DetailsIcon: IconType = (props) => <Info {...props} />;
 export const DownloadIcon: IconType = (props) => <GetApp {...props} />;

diff --git a/src/views-components/dialog-create/dialog-collection-create.tsx b/src/views-components/dialog-create/dialog-collection-create.tsx
index 3e3b74aa92747d9adf5053d543097a1110ee3ace..f59728b6e8205644cbab01711d2bc0345b1a5e84 100644 (file)
--- a/src/views-components/dialog-create/dialog-collection-create.tsx
+++ b/src/views-components/dialog-create/dialog-collection-create.tsx
@@ -13,6 +13,7 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import { Button, StyleRulesCallback, WithStyles, withStyles, CircularProgress } from '@material-ui/core';
 
 import { COLLECTION_NAME_VALIDATION, COLLECTION_DESCRIPTION_VALIDATION } from '../../validators/create-project/create-project-validator';
 import { Button, StyleRulesCallback, WithStyles, withStyles, CircularProgress } from '@material-ui/core';
 
 import { COLLECTION_NAME_VALIDATION, COLLECTION_DESCRIPTION_VALIDATION } from '../../validators/create-project/create-project-validator';

+import { FileUpload } from "../../components/file-upload/file-upload";

 
 type CssRules = "button" | "lastButton" | "formContainer" | "textField" | "createProgress" | "dialogActions";
 
 
 type CssRules = "button" | "lastButton" | "formContainer" | "textField" | "createProgress" | "dialogActions";
 


@@ -90,6 +91,7 @@ export const DialogCollectionCreate = compose(
                                     validate={COLLECTION_DESCRIPTION_VALIDATION}
                                     className={classes.textField}
                                     label="Description - optional"/>
                                     validate={COLLECTION_DESCRIPTION_VALIDATION}
                                     className={classes.textField}
                                     label="Description - optional"/>

+                            <FileUpload/>

                         </DialogContent>
                         <DialogActions className={classes.dialogActions}>
                             <Button onClick={handleClose} className={classes.button} color="primary"
                         </DialogContent>
                         <DialogActions className={classes.dialogActions}>
                             <Button onClick={handleClose} className={classes.button} color="primary"

diff --git a/yarn.lock b/yarn.lock
index ee49986a76142a6638e0bc529c858221153c6e3b..700f4ad2b107eaa3d5ce8f1728a448d64f157343 100644 (file)
--- a/yarn.lock
+++ b/yarn.lock
@@ -123,6 +123,12 @@
     "@types/node" "*"
     "@types/react" "*"
 
     "@types/node" "*"
     "@types/react" "*"
 

+"@types/react-dropzone@4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@types/react-dropzone/-/react-dropzone-4.2.1.tgz#4a973b63a8a227e263ff4eece053f643220f28fc"
+  dependencies:
+    "@types/react" "*"
+

 "@types/react-redux@6.0.6":
   version "6.0.6"
   resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-6.0.6.tgz#87f1d0a6ea901b93fcaf95fa57641ff64079d277"
 "@types/react-redux@6.0.6":
   version "6.0.6"
   resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-6.0.6.tgz#87f1d0a6ea901b93fcaf95fa57641ff64079d277"


@@ -465,6 +471,12 @@ atob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.1.tgz#ae2d5a729477f289d60dd7f96a6314a22dd6c22a"
 
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.1.tgz#ae2d5a729477f289d60dd7f96a6314a22dd6c22a"
 

+attr-accept@^1.0.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-1.1.3.tgz#48230c79f93790ef2775fcec4f0db0f5db41ca52"
+  dependencies:
+    core-js "^2.5.0"
+

 autoprefixer@7.1.6:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.6.tgz#fb933039f74af74a83e71225ce78d9fd58ba84d7"
 autoprefixer@7.1.6:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.6.tgz#fb933039f74af74a83e71225ce78d9fd58ba84d7"


@@ -6126,6 +6138,13 @@ react-dom@16.4.2:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 

+react-dropzone@4.2.13:
+  version "4.2.13"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-4.2.13.tgz#31393c079b4e5ddcc176c095cebc3545d1248b9d"
+  dependencies:
+    attr-accept "^1.0.3"
+    prop-types "^15.5.7"
+

 react-error-overlay@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4"
 react-error-overlay@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4"