From 3c8a3f253760131827a58b2a091bc2be4d1da70e Mon Sep 17 00:00:00 2001 From: SpikeHD Date: Thu, 12 May 2022 20:32:06 -0700 Subject: [PATCH] download stop button --- src-tauri/src/downloader.rs | 4 +-- src/index.css | 4 +-- src/ui/App.css | 1 + src/ui/components/ServerLaunchSection.css | 3 +- src/ui/components/common/MainProgressBar.tsx | 9 ++--- src/ui/components/common/ProgressBar.css | 28 ++++++++++++++-- src/ui/components/common/ProgressBar.tsx | 35 ++++++++++++-------- src/utils/download.ts | 2 +- 8 files changed, 61 insertions(+), 25 deletions(-) diff --git a/src-tauri/src/downloader.rs b/src-tauri/src/downloader.rs index 09d89e7..31a124a 100644 --- a/src-tauri/src/downloader.rs +++ b/src-tauri/src/downloader.rs @@ -13,7 +13,7 @@ pub async fn download_file(window: tauri::Window, url: &str, path: &str) -> Resu let res = match reqwest::get(url) .await { Ok(r) => r, - Err(e) => { + Err(_e) => { emit_download_err(window, format!("Failed to request {}", url), url); return Err(format!("Failed to request {}", url)); }, @@ -25,7 +25,7 @@ pub async fn download_file(window: tauri::Window, url: &str, path: &str) -> Resu // Create file path let mut file = match File::create(path) { Ok(f) => f, - Err(e) => { + Err(_e) => { emit_download_err(window, format!("Failed to create file '{}'", path), path); return Err(format!("Failed to create file '{}'", path)); }, diff --git a/src/index.css b/src/index.css index ec2585e..0e86a6a 100644 --- a/src/index.css +++ b/src/index.css @@ -1,7 +1,7 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + font-family: 'Helvetica Neue', BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; diff --git a/src/ui/App.css b/src/ui/App.css index abec169..5573d1d 100644 --- a/src/ui/App.css +++ b/src/ui/App.css @@ -34,5 +34,6 @@ body { #DownloadProgress { position: absolute; top: 85%; + left: 5%; width: 60%; } \ No newline at end of file diff --git a/src/ui/components/ServerLaunchSection.css b/src/ui/components/ServerLaunchSection.css index 5182bc8..0331be3 100644 --- a/src/ui/components/ServerLaunchSection.css +++ b/src/ui/components/ServerLaunchSection.css @@ -12,5 +12,6 @@ } #serverControls .Checkbox label { - color: #000; + color: #fff; + font-weight: bold; } \ No newline at end of file diff --git a/src/ui/components/common/MainProgressBar.tsx b/src/ui/components/common/MainProgressBar.tsx index 0dbaa73..fe449dc 100644 --- a/src/ui/components/common/MainProgressBar.tsx +++ b/src/ui/components/common/MainProgressBar.tsx @@ -1,8 +1,9 @@ import React from 'react' +import DownloadHandler from '../../../utils/download' import './ProgressBar.css' interface IProps { - downloadManager: any, + downloadManager: DownloadHandler, } interface IState { @@ -18,12 +19,12 @@ export default class ProgressBar extends React.Component { constructor(props: IProps) { super(props) - const { average, files, total } = this.props.downloadManager.getTotalAverage() + const { average, files, totalSize } = this.props.downloadManager.getTotalAverage() this.state = { average, files, - total + total: totalSize } } @@ -32,7 +33,7 @@ export default class ProgressBar extends React.Component { const intv = setInterval(() => { const prog = this.props.downloadManager.getTotalAverage() this.setState({ - average: parseInt(prog?.average || 0, 10), + average: prog?.average || 0, files: prog?.files, total: prog?.totalSize || 0, }) diff --git a/src/ui/components/common/ProgressBar.css b/src/ui/components/common/ProgressBar.css index c50f931..dca8842 100644 --- a/src/ui/components/common/ProgressBar.css +++ b/src/ui/components/common/ProgressBar.css @@ -19,7 +19,7 @@ .InnerProgress { height: 100%; - background-color: #ffc61e; + background-color: #fff; } .ProgressText { @@ -30,7 +30,7 @@ .MainProgressBarWrapper { display: flex; flex-direction: column; - align-items: center; + align-items: flex-start; justify-content: center; color: #fff; @@ -40,4 +40,28 @@ font-size: 20px; font-weight: bold; color: #fff !important; +} + +.ProgressBarWrapper { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +.DownloadControls { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + + margin-left: 10px; +} + +.DownloadControls div { + height: 20px; +} + +.DownloadControls div img { + height: 100%; } \ No newline at end of file diff --git a/src/ui/components/common/ProgressBar.tsx b/src/ui/components/common/ProgressBar.tsx index 499e6f6..fecd186 100644 --- a/src/ui/components/common/ProgressBar.tsx +++ b/src/ui/components/common/ProgressBar.tsx @@ -1,6 +1,7 @@ import React from 'react' import { capitalize } from '../../../utils/string' +import Stop from '../../../resources/icons/close.svg' import './ProgressBar.css' interface IProps { @@ -45,23 +46,31 @@ export default class ProgressBar extends React.Component { render() { return (
-
-
{ - // Handles files with content-lengths of 0 - if (this.state.status === 'finished') { - return '100' - } +
+
+
{ + // Handles files with content-lengths of 0 + if (this.state.status === 'finished') { + return '100' + } - if (this.state.total <= 0) { - return '0' - } + if (this.state.total <= 0) { + return '0' + } - return this.state.progress / this.state.total * 100 - })()}%`, - }}>
+ return this.state.progress / this.state.total * 100 + })()}%`, + }}>
+
+
+
+ +
+
+
{capitalize(this.state.status)}
diff --git a/src/utils/download.ts b/src/utils/download.ts index 8235231..d26c9bc 100644 --- a/src/utils/download.ts +++ b/src/utils/download.ts @@ -86,7 +86,7 @@ export default class DownloadHandler { return { average: (progress / total) * 100 || 0, - files: this.downloads.filter(d => d.status !== 'finished').length, + files: this.downloads.filter(d => d.status !== 'finished' && d.status !== 'error').length, totalSize: total, } }