[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