[ARVADOS-WORKBENCH2] created: 1.1.4-525-g6fbcbe1
Git user
git at public.curoverse.com
Sat Aug 4 09:32:49 EDT 2018
at 6fbcbe191d8356ad2029e79ad961c983b2284afd (commit)
commit 6fbcbe191d8356ad2029e79ad961c983b2284afd
Author: Daniel Kos <daniel.kos at contractors.roche.com>
Date: Sat Aug 4 15:32:43 2018 +0200
Add component layout, add react-dropzone
Feature #13856
Arvados-DCO-1.1-Signed-off-by: Daniel Kos <daniel.kos at contractors.roche.com>
diff --git a/package.json b/package.json
index f940e54..cd8a9c4 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 5378411..3a98e27 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<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>) =>
- <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>
);
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 1dc8669..0f0442a 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) => <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 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} />;
diff --git a/src/views-components/dialog-create/dialog-collection-create.tsx b/src/views-components/dialog-create/dialog-collection-create.tsx
index 3e3b74a..f59728b 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"/>
+ <FileUpload/>
</DialogContent>
<DialogActions className={classes.dialogActions}>
<Button onClick={handleClose} className={classes.button} color="primary"
diff --git a/yarn.lock b/yarn.lock
index ee49986..700f4ad 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -123,6 +123,12 @@
"@types/node" "*"
"@types/react" "*"
+"@types/react-dropzone at 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 at 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"
+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 at 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 at 16.4.2:
object-assign "^4.1.1"
prop-types "^15.6.0"
+react-dropzone at 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"
commit c0afd448c39a41d229612afe47643aed7a2cf5dd
Merge: 9a21854 0a6a8ab
Author: Daniel Kos <daniel.kos at contractors.roche.com>
Date: Sat Aug 4 13:57:00 2018 +0200
refs #master Merge branch 'origin/master' into 13856-upload-component
Arvados-DCO-1.1-Signed-off-by: Daniel Kos <daniel.kos at contractors.roche.com>
commit 9a21854c2f9f76d0c5cc8b95972beba857444c5d
Author: Daniel Kos <daniel.kos at contractors.roche.com>
Date: Sun Jul 29 23:33:41 2018 +0200
Introduce file component
Feature #13856
Arvados-DCO-1.1-Signed-off-by: Daniel Kos <daniel.kos at contractors.roche.com>
diff --git a/src/components/file-upload/file-upload.tsx b/src/components/file-upload/file-upload.tsx
new file mode 100644
index 0000000..5378411
--- /dev/null
+++ b/src/components/file-upload/file-upload.tsx
@@ -0,0 +1,36 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { Button, Grid, StyleRulesCallback, WithStyles } from '@material-ui/core';
+import { withStyles } from '@material-ui/core';
+
+export interface Breadcrumb {
+ label: string;
+}
+
+type CssRules = "item" | "currentItem" | "label";
+
+const styles: StyleRulesCallback<CssRules> = theme => ({
+ item: {
+ opacity: 0.6
+ },
+ currentItem: {
+ opacity: 1
+ },
+ label: {
+ textTransform: "none"
+ }
+});
+
+interface FileUploadProps {
+}
+
+export const FileUpload = withStyles(styles)(
+ ({ classes }: FileUploadProps & WithStyles<CssRules>) =>
+ <Grid container alignItems="center" wrap="nowrap">
+ {
+ }
+ </Grid>
+);
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list