download sections and progess bars

src/ui/App.tsx

@@ -11,6 +11,8 @@ import ServerLaunchSection from './components/ServerLaunchSection'
 import ProgressBar from './components/common/ProgressBar'
 import MainProgressBar from './components/common/MainProgressBar'
 import Options from './components/menu/Options'
+import MiniDialog from './components/MiniDialog'
+import DownloadList from './components/common/DownloadList'
 
 interface IProps {
   [key: string]: never;
@@ -19,6 +21,7 @@ interface IProps {
 interface IState {
   isDownloading: boolean;
   optionsOpen: boolean;
+  miniDownloadsOpen: boolean;
 }
 
 const downloadHandler = new DownloadHandler()
@@ -41,7 +44,8 @@ class App extends React.Component<IProps, IState> {
     super(props)
     this.state = {
       isDownloading: false,
-      optionsOpen: false
+      optionsOpen: false,
+      miniDownloadsOpen: false,
     }
   }
 
@@ -52,9 +56,20 @@ class App extends React.Component<IProps, IState> {
           optFunc={() => {
             this.setState({ optionsOpen: !this.state.optionsOpen })
           }}
-          downFunc={() => null}
+          downFunc={() => {
+            this.setState({ miniDownloadsOpen: !this.state.miniDownloadsOpen })
+            console.log(this.state.miniDownloadsOpen)
+          }}
         />
 
+        {
+          // Mini downloads section
+          this.state.miniDownloadsOpen ? 
+            <MiniDialog>
+              <DownloadList downloadManager={downloadHandler} />
+            </MiniDialog> : null
+        }
+
         {
           this.state.optionsOpen ? <Options closeFn={() => this.setState({ optionsOpen: !this.state.optionsOpen })}/> : null
         }

src/ui/components/MiniDialog.css

@@ -0,0 +1,18 @@
+.MiniDialog {
+  position: fixed;
+  z-index: 99;
+
+  /* Temp positions */
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  /* Len and width */
+  height: 30%;
+  width: 30%;
+
+  background: #fff;
+  padding: 20px;
+  border-radius: 10px;
+}
+

src/ui/components/MiniDialog.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import './MiniDialog.css'
+
+interface IProps {
+  children: React.ReactNode[] | React.ReactNode;
+}
+
+export default class MiniDialog extends React.Component<IProps, never> {
+  constructor(props: IProps) {
+    super(props)
+  }
+
+  render() {
+    return (
+      <div className="MiniDialog">
+        {this.props.children}
+      </div>
+    )
+  }
+}

src/ui/components/TopBar.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
+import { app } from '@tauri-apps/api'
 import { appWindow } from '@tauri-apps/api/window'
-import './TopBar.css'
 import closeIcon from '../../resources/icons/close.svg'
 import minIcon from '../../resources/icons/min.svg'
 import cogBtn from '../../resources/icons/cog.svg'
 import downBtn from '../../resources/icons/download.svg'
-import { app } from '@tauri-apps/api'
+
+import './TopBar.css'
 
 interface IProps {
   optFunc: () => void;
@@ -13,7 +14,7 @@ interface IProps {
 }
 
 interface IState {
-  version: string
+  version: string;
 }
 export default class TopBar extends React.Component<IProps, IState> {
   constructor(props: IProps) {
@@ -49,7 +50,7 @@ export default class TopBar extends React.Component<IProps, IState> {
           <div id="settingsBtn" onClick={this.props.optFunc} className='TopButton'>
             <img src={cogBtn} alt="settings" />
           </div>
-          <div id="downloadsBtn" className='TopButton'>
+          <div id="downloadsBtn" className='TopButton' onClick={this.props.downFunc}>
             <img src={downBtn} alt="downloads" />
           </div>
         </div>

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 {

src/utils/download.ts

@@ -37,6 +37,10 @@ export default class DownloadHandler {
     })
   }
 
+  getDownloads() {
+    return this.downloads
+  }
+  
   addDownload(url: string, path: string) {
     // Begin download from rust backend
     invoke('download_file', { url, path })