From 5d5527bb5123b55c56efd58f89cf4f6843e659e2 Mon Sep 17 00:00:00 2001
From: hexxa <hexxa@outlook.com>
Date: Tue, 21 Dec 2021 20:35:06 +0800
Subject: [PATCH] fix(fe/panel_uploadings): refine uploading panel style

---
 public/static/css/white.css                   | 21 +++++++++++++--
 src/client/web/src/components/panel_files.tsx |  4 ++-
 .../web/src/components/panel_uploadings.tsx   | 27 ++++++++++++++-----
 3 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/public/static/css/white.css b/public/static/css/white.css
index 2d25310..daeaa26 100644
--- a/public/static/css/white.css
+++ b/public/static/css/white.css
@@ -167,7 +167,8 @@
   margin-top: 2rem;
 }
 
-.theme-default #item-rows .name, .theme-default #item-rows .name a {
+.theme-default #item-rows .name,
+.theme-default #item-rows .name a {
   color: #34495e;
   font-size: 1.8rem;
   line-height: 2rem;
@@ -229,8 +230,24 @@
   padding: 0 1rem;
 }
 
+.theme-default #upload-list .desc {
+  font-size: 1.2rem;
+  line-height: 2rem;
+}
+
+.theme-default #upload-list .progress-grey {
+  background-color: #ecf0f6;
+  width: 100%;
+  height: 0.3rem;
+}
+
+.theme-default #upload-list .progress-green {
+  background-color: #1abc9c;
+  height: 100%
+}
+
 .theme-default .upload-item {
-  padding: 0 0 1rem 0;
+  padding: 1rem 0 1rem 0;
 }
 
 .theme-default .share-item {
diff --git a/src/client/web/src/components/panel_files.tsx b/src/client/web/src/components/panel_files.tsx
index 0543b4f..b121e78 100644
--- a/src/client/web/src/components/panel_files.tsx
+++ b/src/client/web/src/components/panel_files.tsx
@@ -480,7 +480,9 @@ export class FilesPanel extends React.Component<Props, State, {}> {
         </div>
       );
 
-      const detailColor = this.state.showDetail.has(item.name) ? "cyan0" : "grey0";
+      const detailColor = this.state.showDetail.has(item.name)
+        ? "cyan0"
+        : "grey0";
       const op = item.isDir ? (
         <div className={`v-mid item-cell item-op ${showOp}`}>
           <span onClick={() => this.select(item.name)} className="float-l">
diff --git a/src/client/web/src/components/panel_uploadings.tsx b/src/client/web/src/components/panel_uploadings.tsx
index 909e738..7f6cf23 100644
--- a/src/client/web/src/components/panel_uploadings.tsx
+++ b/src/client/web/src/components/panel_uploadings.tsx
@@ -78,9 +78,11 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
       (uploading: UploadEntry) => {
         const pathParts = uploading.filePath.split("/");
         const fileName = pathParts[pathParts.length - 1];
-
+        const progress = `${Math.floor(
+          (uploading.uploaded / uploading.size) * 100
+        )}%`;
         return (
-          <div key={uploading.filePath}>
+          <div key={uploading.filePath} className="upload-item">
             <Flexbox
               children={List([
                 <Flexbox
@@ -91,12 +93,17 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
                       className="margin-r-m blue0-font"
                     />,
 
-                    <div className={`${nameWidthClass}`}>
-                      <span className="title-m">{fileName}</span>
-                      <div className="desc-m grey0-font">
+                    <div className={`font-s ${nameWidthClass}`}>
+                      <span className="">{fileName}&nbsp;</span>
+                      <span className="desc grey0-font">
                         {FileSize(uploading.uploaded, { round: 0 })}
-                        &nbsp;/&nbsp;{FileSize(uploading.size, { round: 0 })}
-                      </div>
+                        &nbsp;/&nbsp;
+                        {FileSize(uploading.size, {
+                          round: 0,
+                        })}
+                        &nbsp;/&nbsp;
+                        {progress}
+                      </span>
                     </div>,
                   ])}
                 />,
@@ -118,6 +125,12 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
               ])}
               childrenStyles={List([{}, { justifyContent: "flex-end" }])}
             />
+            <div className="progress-grey">
+              <div
+                className="progress-green"
+                style={{ width: `${progress}` }}
+              ></div>
+            </div>
             {uploading.err.trim() === "" ? null : (
               <div className="error">{uploading.err.trim()}</div>
             )}