From 6fbcbe191d8356ad2029e79ad961c983b2284afd Mon Sep 17 00:00:00 2001 From: Daniel Kos Date: Sat, 4 Aug 2018 15:32:43 +0200 Subject: [PATCH] Add component layout, add react-dropzone Feature #13856 Arvados-DCO-1.1-Signed-off-by: Daniel Kos --- package.json | 2 + src/components/file-upload/file-upload.tsx | 43 ++++++++++++------- src/components/icon/icon.tsx | 2 + .../dialog-collection-create.tsx | 2 + yarn.lock | 19 ++++++++ 5 files changed, 53 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index f940e54e..cd8a9c4d 100644 --- 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", + "@types/react-dropzone": "4.2.1", "@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-dropzone": "4.2.13", "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 53784110..3a98e27a 100644 --- 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'; -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 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 = 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) => - - { - } + + + Upload data + + + + + + Drag and drop data or browse + + + + ); diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx index 1dc8669e..0f0442a5 100644 --- 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 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'; @@ -44,6 +45,7 @@ export const CustomizeTableIcon: IconType = (props) => ; export const CopyIcon: IconType = (props) => ; export const CollectionIcon: IconType = (props) => ; export const CloseIcon: IconType = (props) => ; +export const CloudUploadIcon: IconType = (props) => ; export const DefaultIcon: IconType = (props) => ; export const DetailsIcon: IconType = (props) => ; export const DownloadIcon: IconType = (props) => ; diff --git a/src/views-components/dialog-create/dialog-collection-create.tsx b/src/views-components/dialog-create/dialog-collection-create.tsx index 3e3b74aa..f59728b6 100644 --- 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 { FileUpload } from "../../components/file-upload/file-upload"; 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"/> +