From: Daniel Kos <daniel.kos@contractors.roche.com>
Date: Sat, 22 Sep 2018 12:11:58 +0000 (+0200)
Subject: Remove file-upload.css
X-Git-Tag: 1.3.0~78^2~1
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/92f226041a58e80dc3c4879acffd5e68a338351e

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
index 0d74b897..00000000
--- 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 0f87b1e9..41054df4 100644
--- 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) {