download sections and progess bars

src/ui/components/common/DownloadList.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import DownloadHandler from '../../../utils/download'
+import DownloadSection from './DownloadSection'
+
+import './DownloadList.css'
+
+interface IProps {
+  downloadManager: DownloadHandler;
+}
+
+export default class DownloadList extends React.Component<IProps, never> {
+  constructor(props: IProps) {
+    super(props)
+  }
+
+  render() {
+    return (
+      <div className="DownloadList">
+        {
+          this.props.downloadManager.getDownloads().map((download) => {
+            return (
+              <DownloadSection key={download.path} downloadName={download.path} downloadManager={this.props.downloadManager} />
+            )
+          })
+        }
+      </div>
+    )
+  }
+}

src/ui/components/common/DownloadSection.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import DownloadHandler from '../../../utils/download'
+import ProgressBar from './ProgressBar'
+
+import './DownloadSection.css'
+
+interface IProps {
+  downloadManager: DownloadHandler;
+  downloadName: string;
+}
+
+export default class MiniDialog extends React.Component<IProps, never> {
+  constructor(props: IProps) {
+    super(props)
+  }
+
+  render() {
+    return (
+      <div className="DownloadSection">
+        <span>{this.props.downloadName}</span>
+        <div className="DownloadSectionInner">
+          <ProgressBar path={this.props.downloadName} downloadManager={this.props.downloadManager} />
+        </div>
+      </div>
+    )
+  }
+}

src/ui/components/common/ProgressBar.css

@@ -13,6 +13,8 @@
   width: 80%;
   background-color: #fff;
   color: #fff;
+
+  border: 1px solid #ccc;
 }
 
 .InnerProgress {