[ARVADOS-WORKBENCH2] created: 1.2.0-321-g84e8b01
Git user
git at public.curoverse.com
Thu Sep 13 02:15:55 EDT 2018
at 84e8b0117dcbc0a500c4aac3310a959020c81b91 (commit)
commit 84e8b0117dcbc0a500c4aac3310a959020c81b91
Author: Daniel Kos <daniel.kos at contractors.roche.com>
Date: Thu Sep 13 08:15:22 2018 +0200
Add project name autofocus
Feature #14161
Arvados-DCO-1.1-Signed-off-by: Daniel Kos <daniel.kos at contractors.roche.com>
diff --git a/src/views-components/form-fields/project-form-fields.tsx b/src/views-components/form-fields/project-form-fields.tsx
index 630877e..6446c76 100644
--- a/src/views-components/form-fields/project-form-fields.tsx
+++ b/src/views-components/form-fields/project-form-fields.tsx
@@ -12,11 +12,12 @@ export const ProjectNameField = () =>
name='name'
component={TextField}
validate={PROJECT_NAME_VALIDATION}
- label="Project Name" />;
+ label="Project Name"
+ autoFocus={true} />;
export const ProjectDescriptionField = () =>
<Field
name='description'
component={TextField}
validate={PROJECT_DESCRIPTION_VALIDATION}
- label="Description - optional" />;
\ No newline at end of file
+ label="Description - optional" />;
commit e567f0daa13834f980fc326faaed1eadeaebf34f
Author: Daniel Kos <daniel.kos at contractors.roche.com>
Date: Sun Sep 9 21:35:56 2018 +0200
Add file-upload focus indicator, add submit type for dialog default button
Feature #14161
Arvados-DCO-1.1-Signed-off-by: Daniel Kos <daniel.kos at contractors.roche.com>
diff --git a/src/components/file-upload/file-upload.css b/src/components/file-upload/file-upload.css
new file mode 100644
index 0000000..0d74b89
--- /dev/null
+++ b/src/components/file-upload/file-upload.css
@@ -0,0 +1,67 @@
+.dropzone-border-left {
+ left: -1px;
+ top: -1px;
+ bottom: -1px;
+ width: 2px;
+ content: "";
+ position: absolute;
+ transform: scaleY(0);
+ transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+ pointer-events: none;
+ background-color: #6a1b9a;
+}
+
+.dropzone-border-right {
+ right: -1px;
+ top: -1px;
+ bottom: -1px;
+ width: 2px;
+ content: "";
+ position: absolute;
+ transform: scaleY(0);
+ transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+ pointer-events: none;
+ background-color: #6a1b9a;
+}
+
+.dropzone-border-top {
+ left: 0;
+ right: 0;
+ top: -1px;
+ height: 2px;
+ content: "";
+ position: absolute;
+ transform: scaleX(0);
+ transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+ pointer-events: none;
+ background-color: #6a1b9a;
+}
+
+.dropzone-border-bottom {
+ left: 0;
+ right: 0;
+ bottom: -1px;
+ height: 2px;
+ content: "";
+ position: absolute;
+ transform: scaleX(0);
+ transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+ pointer-events: none;
+ background-color: #6a1b9a;
+}
+
+.dropzone-border-left-active {
+ transform: scaleY(1);
+}
+
+.dropzone-border-right-active {
+ transform: scaleY(1);
+}
+
+.dropzone-border-top-active {
+ transform: scaleX(1);
+}
+
+.dropzone-border-bottom-active {
+ transform: scaleX(1);
+}
diff --git a/src/components/file-upload/file-upload.tsx b/src/components/file-upload/file-upload.tsx
index e7f402c..0f87b1e 100644
--- a/src/components/file-upload/file-upload.tsx
+++ b/src/components/file-upload/file-upload.tsx
@@ -3,6 +3,7 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
+import * as classnames from 'classnames';
import {
Grid,
StyleRulesCallback,
@@ -16,17 +17,24 @@ import { CloudUploadIcon } from "../icon/icon";
import { formatFileSize, formatProgress, formatUploadSpeed } from "~/common/formatters";
import { UploadFile } from '~/store/file-uploader/file-uploader-actions';
-type CssRules = "root" | "dropzone" | "container" | "uploadIcon";
+type CssRules = "root" | "dropzone" | "dropzoneWrapper" | "container" | "uploadIcon";
+
+import './file-upload.css';
+import { DOMElement, RefObject } from "react";
const styles: StyleRulesCallback<CssRules> = theme => ({
root: {
},
dropzone: {
width: "100%",
+ height: "100%",
+ overflow: "auto"
+ },
+ dropzoneWrapper: {
+ width: "100%",
height: "200px",
- overflow: "auto",
- border: "1px dashed black",
- borderRadius: "5px"
+ position: "relative",
+ border: "1px solid rgba(0, 0, 0, 0.42)"
},
container: {
height: "100%"
@@ -36,44 +44,87 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
}
});
-export interface FileUploadProps {
+interface FileUploadPropsData {
files: UploadFile[];
disabled: boolean;
onDrop: (files: File[]) => void;
}
+interface FileUploadState {
+ focused: boolean;
+}
+
+export type FileUploadProps = FileUploadPropsData & WithStyles<CssRules>;
+
export const FileUpload = withStyles(styles)(
- ({ classes, files, disabled, onDrop }: FileUploadProps & WithStyles<CssRules>) =>
- <Dropzone className={classes.dropzone} onDrop={files => onDrop(files)} disabled={disabled}>
- {files.length === 0 &&
- <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 click to browse
- </Typography>
- </Grid>
- </Grid>}
- {files.length > 0 &&
- <Table style={{ width: "100%" }}>
- <TableHead>
- <TableRow>
- <TableCell>File name</TableCell>
- <TableCell>File size</TableCell>
- <TableCell>Upload speed</TableCell>
- <TableCell>Upload progress</TableCell>
- </TableRow>
- </TableHead>
- <TableBody>
- {files.map(f =>
- <TableRow key={f.id}>
- <TableCell>{f.file.name}</TableCell>
- <TableCell>{formatFileSize(f.file.size)}</TableCell>
- <TableCell>{formatUploadSpeed(f.prevLoaded, f.loaded, f.prevTime, f.currentTime)}</TableCell>
- <TableCell>{formatProgress(f.loaded, f.total)}</TableCell>
- </TableRow>
- )}
- </TableBody>
- </Table>
- }
- </Dropzone>
+ class extends React.Component<FileUploadProps, FileUploadState> {
+ constructor(props: FileUploadProps) {
+ super(props);
+ this.state = {
+ focused: false
+ };
+ }
+ render() {
+ const { classes, onDrop, disabled, files } = this.props;
+ return <div className={"file-upload-dropzone " + classes.dropzoneWrapper}>
+ <div className={classnames("dropzone-border-left", { "dropzone-border-left-active": this.state.focused })}/>
+ <div className={classnames("dropzone-border-right", { "dropzone-border-right-active": this.state.focused })}/>
+ <div className={classnames("dropzone-border-top", { "dropzone-border-top-active": this.state.focused })}/>
+ <div className={classnames("dropzone-border-bottom", { "dropzone-border-bottom-active": this.state.focused })}/>
+ <Dropzone className={classes.dropzone}
+ onDrop={files => onDrop(files)}
+ onClick={(e) => {
+ const el = document.getElementsByClassName("file-upload-dropzone")[0];
+ const inputs = el.getElementsByTagName("input");
+ if (inputs.length > 0) {
+ inputs[0].focus();
+ }
+ }}
+ disabled={disabled}
+ inputProps={{
+ onFocus: () => {
+ this.setState({
+ focused: true
+ });
+ },
+ onBlur: () => {
+ this.setState({
+ focused: false
+ });
+ }
+ }}>
+ {files.length === 0 &&
+ <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 click to browse
+ </Typography>
+ </Grid>
+ </Grid>}
+ {files.length > 0 &&
+ <Table style={{ width: "100%" }}>
+ <TableHead>
+ <TableRow>
+ <TableCell>File name</TableCell>
+ <TableCell>File size</TableCell>
+ <TableCell>Upload speed</TableCell>
+ <TableCell>Upload progress</TableCell>
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {files.map(f =>
+ <TableRow key={f.id}>
+ <TableCell>{f.file.name}</TableCell>
+ <TableCell>{formatFileSize(f.file.size)}</TableCell>
+ <TableCell>{formatUploadSpeed(f.prevLoaded, f.loaded, f.prevTime, f.currentTime)}</TableCell>
+ <TableCell>{formatProgress(f.loaded, f.total)}</TableCell>
+ </TableRow>
+ )}
+ </TableBody>
+ </Table>
+ }
+ </Dropzone>
+ </div>;
+ }
+ }
);
diff --git a/src/components/form-dialog/form-dialog.tsx b/src/components/form-dialog/form-dialog.tsx
index dd02813..40050b7 100644
--- a/src/components/form-dialog/form-dialog.tsx
+++ b/src/components/form-dialog/form-dialog.tsx
@@ -68,6 +68,7 @@ export const FormDialog = withStyles(styles)((props: DialogProjectProps) =>
{props.cancelLabel || 'Cancel'}
</Button>
<Button
+ type="submit"
onClick={props.handleSubmit}
className={props.classes.lastButton}
color="primary"
diff --git a/src/components/text-field/text-field.tsx b/src/components/text-field/text-field.tsx
index 1fe77ca..b5671db 100644
--- a/src/components/text-field/text-field.tsx
+++ b/src/components/text-field/text-field.tsx
@@ -15,7 +15,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
},
});
-export const TextField = withStyles(styles)((props: WrappedFieldProps & WithStyles<CssRules> & { label?: string }) =>
+export const TextField = withStyles(styles)((props: WrappedFieldProps & WithStyles<CssRules> & { label?: string, autoFocus?: boolean }) =>
<MaterialTextField
helperText={props.meta.touched && props.meta.error}
className={props.classes.textField}
@@ -23,6 +23,7 @@ export const TextField = withStyles(styles)((props: WrappedFieldProps & WithStyl
disabled={props.meta.submitting}
error={props.meta.touched && !!props.meta.error}
autoComplete='off'
+ autoFocus={props.autoFocus}
fullWidth={true}
{...props.input}
/>);
diff --git a/src/views-components/file-uploader/file-uploader.tsx b/src/views-components/file-uploader/file-uploader.tsx
index d9111f4..e71a14c 100644
--- a/src/views-components/file-uploader/file-uploader.tsx
+++ b/src/views-components/file-uploader/file-uploader.tsx
@@ -21,8 +21,10 @@ const mapStateToProps = (state: RootState, { disabled }: FileUploaderProps): Pic
const mapDispatchToProps = (dispatch: Dispatch, { onDrop }: FileUploaderProps): Pick<FileUploadProps, 'onDrop'> => ({
onDrop: files => {
- dispatch(fileUploaderActions.SET_UPLOAD_FILES(files));
- onDrop(files);
+ if (files.length > 0) {
+ dispatch(fileUploaderActions.SET_UPLOAD_FILES(files));
+ onDrop(files);
+ }
},
});
diff --git a/src/views-components/form-fields/collection-form-fields.tsx b/src/views-components/form-fields/collection-form-fields.tsx
index af240fc..1771c0e 100644
--- a/src/views-components/form-fields/collection-form-fields.tsx
+++ b/src/views-components/form-fields/collection-form-fields.tsx
@@ -13,7 +13,8 @@ export const CollectionNameField = () =>
name='name'
component={TextField}
validate={COLLECTION_NAME_VALIDATION}
- label="Collection Name" />;
+ label="Collection Name"
+ autoFocus={true} />;
export const CollectionDescriptionField = () =>
<Field
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list