show download speed

src/ui/App.css

@@ -36,4 +36,10 @@ body {
   top: 85%;
   left: 5%;
   width: 60%;
+}
+
+.MiniDownloads {
+  position: absolute;
+  top: 40%;
+  left: 12%;
 }

src/ui/App.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { listen } from '@tauri-apps/api/event'
 import './App.css'
-import './custom.css'
 
 /* FOR TESTING */
 import DownloadHandler from '../utils/download'
@@ -60,19 +59,19 @@ class App extends React.Component<IProps, IState> {
           optFunc={() => {
             this.setState({ optionsOpen: !this.state.optionsOpen })
           }}
-          downFunc={() => {
-            this.setState({ miniDownloadsOpen: !this.state.miniDownloadsOpen })
-          }}
+          downFunc={() => { console.log('Shit is changing dw') }}
         />
 
         {
           // Mini downloads section
           this.state.miniDownloadsOpen ? 
-            <MiniDialog title="Downloads" closeFn={() => {
-              this.setState({ miniDownloadsOpen: false })
-            }}>
-              <DownloadList downloadManager={downloadHandler} />
-            </MiniDialog> : null
+            <div className="MiniDownloads">
+              <MiniDialog title="Downloads" closeFn={() => {
+                this.setState({ miniDownloadsOpen: false })
+              }}>
+                <DownloadList downloadManager={downloadHandler} />
+              </MiniDialog>
+            </div> : null
         }
 
         {
@@ -83,7 +82,9 @@ class App extends React.Component<IProps, IState> {
 
         <ServerLaunchSection />
 
-        <div id="DownloadProgress">
+        <div id="DownloadProgress"
+          onClick={() => this.setState({ miniDownloadsOpen: !this.state.miniDownloadsOpen })}
+        >
           <MainProgressBar downloadManager={downloadHandler} />
         </div>
       </div>

src/ui/components/MiniDialog.css

@@ -1,12 +1,7 @@
 .MiniDialog {
   position: fixed;
   z-index: 99;
-
-  /* Temp positions */
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
+  
   /* Len and width */
   height: 30%;
   width: 30%;

src/ui/components/common/DownloadSection.tsx

@@ -9,7 +9,7 @@ interface IProps {
   downloadName: string;
 }
 
-export default class MiniDialog extends React.Component<IProps, never> {
+export default class DownloadSection extends React.Component<IProps, never> {
   constructor(props: IProps) {
     super(props)
   }

src/ui/components/common/MainProgressBar.tsx

@@ -9,7 +9,8 @@ interface IProps {
 interface IState {
   average: number,
   files: number,
-  total: number
+  total: number,
+  speed: string,
 }
 
 /**
@@ -24,7 +25,8 @@ export default class ProgressBar extends React.Component<IProps, IState> {
     this.state = {
       average,
       files,
-      total: totalSize
+      total: totalSize,
+      speed: '0 B/s'
     }
   }
 
@@ -36,6 +38,7 @@ export default class ProgressBar extends React.Component<IProps, IState> {
         average: prog?.average || 0,
         files: prog?.files,
         total: prog?.totalSize || 0,
+        speed: prog?.speed || '0 B/s',
       })
     }, 200)
   }
@@ -60,8 +63,8 @@ export default class ProgressBar extends React.Component<IProps, IState> {
           }}></div>
         </div>
 
-        <div className="ProgressText">
-          Files Downloading: {this.state.files}
+        <div className="MainProgressText">
+          Files Downloading: {this.state.files} ({this.state.speed})
         </div>
       </div>
     )

src/ui/components/common/ProgressBar.css

@@ -22,12 +22,17 @@
   background-color: #fff;
 }
 
+.MainProgressText,
 .ProgressText {
   color: #c5c5c5;
   padding: 0px 10px;
   width: 30%;
 }
 
+.MainProgressText {
+  width: 100%;
+}
+
 .MainProgressBarWrapper {
   display: flex;
   flex-direction: column;
@@ -37,7 +42,7 @@
   color: #fff;
 }
 
-.MainProgressBarWrapper .ProgressText {
+.MainProgressBarWrapper .MainProgressText {
   font-size: 20px;
   font-weight: bold;
   color: #fff !important;