Remove file-upload.css

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

diff --git a/src/components/file-upload/file-upload.css b/src/components/file-upload/file-upload.css
deleted file mode 100644 (file)
index 0d74b89..0000000
--- a/src/components/file-upload/file-upload.css
+++ /dev/null
@@ -1,67 +0,0 @@
-.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 0f87b1e9e35a18b5417063759c70f06e35641531..41054df43f9da6c6d76fb446a118dc15781606bd 100644 (file)
--- a/src/components/file-upload/file-upload.tsx
+++ b/src/components/file-upload/file-upload.tsx
@@ -17,10 +17,9 @@ 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" | "dropzoneWrapper" | "container" | "uploadIcon";
-
-import './file-upload.css';
-import { DOMElement, RefObject } from "react";
+type CssRules = "root" | "dropzone" | "dropzoneWrapper" | "container" | "uploadIcon"
+    | "dropzoneBorder" | "dropzoneBorderLeft" | "dropzoneBorderRight" | "dropzoneBorderTop" | "dropzoneBorderBottom"
+    | "dropzoneBorderHorzActive" | "dropzoneBorderVertActive";
 
 const styles: StyleRulesCallback<CssRules> = theme => ({
     root: {
@@ -36,6 +35,47 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
         position: "relative",
         border: "1px solid rgba(0, 0, 0, 0.42)"
     },
+    dropzoneBorder: {
+        content: "",
+        position: "absolute",
+        transition: "transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms",
+        pointerEvents: "none",
+        backgroundColor: "#6a1b9a"
+    },
+    dropzoneBorderLeft: {
+        left: -1,
+        top: -1,
+        bottom: -1,
+        width: 2,
+        transform: "scaleY(0)",
+    },
+    dropzoneBorderRight: {
+        right: -1,
+        top: -1,
+        bottom: -1,
+        width: 2,
+        transform: "scaleY(0)",
+    },
+    dropzoneBorderTop: {
+        left: 0,
+        right: 0,
+        top: -1,
+        height: 2,
+        transform: "scaleX(0)",
+    },
+    dropzoneBorderBottom: {
+        left: 0,
+        right: 0,
+        bottom: -1,
+        height: 2,
+        transform: "scaleX(0)",
+    },
+    dropzoneBorderHorzActive: {
+        transform: "scaleY(1)"
+    },
+    dropzoneBorderVertActive: {
+        transform: "scaleX(1)"
+    },
     container: {
         height: "100%"
     },
@@ -67,13 +107,13 @@ export const FileUpload = withStyles(styles)(
         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 })}/>
+                <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderLeft, { [classes.dropzoneBorderHorzActive]: this.state.focused })}/>
+                <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderRight, { [classes.dropzoneBorderHorzActive]: this.state.focused })}/>
+                <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderTop, { [classes.dropzoneBorderVertActive]: this.state.focused })}/>
+                <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderBottom, { [classes.dropzoneBorderVertActive]: this.state.focused })}/>
                 <Dropzone className={classes.dropzone}
                     onDrop={files => onDrop(files)}
-                    onClick={(e) => {
+                    onClick={() => {
                         const el = document.getElementsByClassName("file-upload-dropzone")[0];
                         const inputs = el.getElementsByTagName("input");
                         if (inputs.length > 0) {