fix: download tool fixes & improvements (#1235)

* fix: download tool fixes & improvements

* fix filename error

* Create variable to track erros

* Fix small console error

* Fix all conflicts and merge changes from latest master with this PR's improvements

* Small improvement on select and textinput labels

* Add new icon for unlink

* Refactor on download image modal

* Adding loading screen

* Fix translation issue

* Fixing aspect Ratio and E2E tests

* Allow empty value without setting to 0

* Remove eslint comments

* Fixing typos

Co-authored-by: Gustavo André Lelis <galelis@gmail.com>
Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>

platform/ui/src/elements/Icon/Icon.styl

@@ -1,6 +1,10 @@
 .icon-pulse
   fa-spin 1s infinite steps(8)
 
+.icon-spin {
+  animation: spin 2s linear infinite;
+}
+
 @keyframes fa-spin{
   0%{ transform:rotate(0deg) }
   to{ transform:rotate(1turn) }

platform/ui/src/elements/Icon/getIcon.js

@@ -80,6 +80,7 @@ import thLarge from './icons/th-large.svg';
 import thList from './icons/th-list.svg';
 import times from './icons/times.svg';
 import trash from './icons/trash.svg';
+import unlink from './icons/unlink.svg';
 import user from './icons/user.svg';
 import youtube from './icons/youtube.svg';
 
@@ -158,6 +159,7 @@ const ICONS = {
   rotate,
   'rotate-right': rotateRight,
   trash,
+  unlink,
   'exclamation-circle': exclamationCircle,
   link,
   'exclamation-triangle': exclamationTriangle,

platform/ui/src/elements/Icon/icons/unlink.svg

@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="unlink"
+  viewBox="0 0 512 512"
+  width="1em"
+  height="1em"
+  fill="currentColor"
+>
+  <title id="title">Unlink</title>
+  <path d="M304.083 388.936c4.686 4.686 4.686 12.284 0 16.971l-65.057 65.056c-54.709 54.711-143.27 54.721-197.989 0-54.713-54.713-54.719-143.27 0-197.989l65.056-65.057c4.686-4.686 12.284-4.686 16.971 0l22.627 22.627c4.686 4.686 4.686 12.284 0 16.971L81.386 311.82c-34.341 34.341-33.451 88.269.597 120.866 32.577 31.187 84.788 31.337 117.445-1.32l65.057-65.056c4.686-4.686 12.284-4.686 16.971 0l22.627 22.626zm-56.568-243.245l64.304-64.304c34.346-34.346 88.286-33.453 120.882.612 31.18 32.586 31.309 84.785-1.335 117.43l-65.056 65.057c-4.686 4.686-4.686 12.284 0 16.971l22.627 22.627c4.686 4.686 12.284 4.686 16.971 0l65.056-65.057c54.711-54.709 54.721-143.271 0-197.99-54.71-54.711-143.27-54.72-197.989 0l-65.057 65.057c-4.686 4.686-4.686 12.284 0 16.971l22.627 22.627c4.685 4.685 12.283 4.685 16.97-.001zm238.343 362.794l22.627-22.627c4.686-4.686 4.686-12.284 0-16.971L43.112 3.515c-4.686-4.686-12.284-4.686-16.971 0L3.515 26.142c-4.686 4.686-4.686 12.284 0 16.971l465.373 465.373c4.686 4.686 12.284 4.686 16.97-.001z"></path>
+</svg>

platform/ui/src/elements/form/Select.js

@@ -29,18 +29,18 @@ class Select extends Component {
   render() {
     return (
       <div className="select-ohif-container">
-        <label className="select-ohif-label" htmlFor={this.id}>
-          {this.props.label}
-          <select className="form-control select-ohif" {...this.props}>
-            {this.props.options.map(({ key, value }) => {
-              return (
-                <option key={key} value={value}>
-                  {key}
-                </option>
-              );
-            })}
-          </select>
-        </label>
+        {this.props.label && (
+          <label className="select-ohif-label" htmlFor={this.id}>{this.props.label}</label>
+        )}
+        <select className="form-control select-ohif" {...this.props}>
+          {this.props.options.map(({ key, value }) => {
+            return (
+              <option key={key} value={value}>
+                {key}
+              </option>
+            );
+          })}
+        </select>
       </div>
     );
   }

platform/ui/src/elements/form/TextInput.js

@@ -14,7 +14,7 @@ class TextInput extends React.Component {
       PropTypes.number
     ]),
     id: PropTypes.string,
-    label:PropTypes.string,
+    label: PropTypes.string,
     type: PropTypes.string,
   };
 
@@ -28,15 +28,15 @@ class TextInput extends React.Component {
   render() {
     return (
       <div className="input-ohif-container">
-        <label className="input-ohif-label" htmlFor={this.props.id}>
-          {this.props.label}
-          <input
-            type={this.props.type}
-            id={this.props.id}
-            className="form-control input-ohif"
-            {...this.props}
-          />
-        </label>
+        {this.props.label && (
+          <label className="input-ohif-label" htmlFor={this.props.id}>{this.props.label}</label>
+        )}
+        <input
+          type={this.props.type}
+          id={this.props.id}
+          className="form-control input-ohif"
+          {...this.props}
+        />
       </div>
     );
   }