Implement Download Progress

ui/component/claimMenuList/view.jsx

@@ -263,6 +263,10 @@ function ClaimMenuList(props: Props) {
     push(`/$/${PAGES.REPORT_CONTENT}?claimId=${contentClaim && contentClaim.claim_id}`);
   }
 
+  function handleDownload() {
+    console.log('handleDownload', fileInfo, props);
+  }
+
   const shouldShow = !IS_WEB || (IS_WEB && isAuthenticated);
   return (
     <Menu>
@@ -467,6 +471,20 @@ function ClaimMenuList(props: Props) {
             </div>
           </MenuItem>
         )}
+        {/* <hr className="menu__separator" />
+        <MenuItem className="comment__menu-option" onSelect={handleDownload}>
+          <div className="menu__link">
+            <Icon aria-hidden icon={ICONS.DOWNLOAD} />
+            {__('Download')}
+          </div>
+        </MenuItem>
+
+        <MenuItem className="comment__menu-option" onSelect={() => console.log('download')}>
+          <div className="menu__link-disable">
+            <Icon aria-hidden icon={ICONS.DOWNLOAD} />
+            {__('Downloading')}
+          </div>
+        </MenuItem> */}
       </MenuList>
     </Menu>
   );

ui/component/downloadProgress/view.jsx

@@ -28,6 +28,12 @@ function DownloadProgress(props: Props) {
   //       writtenBytes={100000}
   //       totalBytes={500000}
   //       addedOn={1632388934}
+  //       directory={''}
+  //       stopDownload={props.stopDownload}
+  //       outpoint={'asdfasdfsa'}
+  //       sd_hash={'asdfsadfsadfsd'}
+  //       isCancel
+  //       handleCancel={handleCancel}
   //     />
   //   </div>
   // );
@@ -63,7 +69,7 @@ function DownloadProgress(props: Props) {
           releaseTime = new Date(parseInt(item.metadata.release_time) * 1000).toISOString().split('T')[0];
         }
         return (
-          <>
+          <div key={item.sd_hash}>
             {index !== 0 && <hr className="download--divider" />}
             <DownloadState
               fileName={item.suggested_file_name}
@@ -79,7 +85,7 @@ function DownloadProgress(props: Props) {
               isCancel={cancelHash[item.sd_hash]}
               handleCancel={handleCancel}
             />
-          </>
+          </div>
         );
       })}
     </div>
@@ -182,7 +188,7 @@ function DownloadState({
       <p className="download-count-time">{text}</p>
       {isCancel && (
         <div className="download-cancel">
-          <p>Do you cancel download this file?</p>
+          <p>Do you want to cancel download this file?</p>
           <div className="download-cancel-confirm">
             <button type="button" className="download-cancel-ok" onClick={processStopDownload}>
               Yes

ui/scss/component/_download-progress.scss

@@ -60,7 +60,6 @@
   font-size: 12px;
   margin-left: auto;
   font-style: italic;
-  color: blue;
 }
 .download--state-bar {
   display: flex;
@@ -88,7 +87,7 @@
 }
 .download-count-time {
   font-size: 11px;
-  color: gray;
+  // color: gray;
 }
 .download--divider {
   border-top: 1px solid #bbb;
@@ -123,12 +122,12 @@
 }
 .download-cancel-ok {
   border: none;
-  color: blue;
+  // color: rgb(4, 120, 87);
   background-color: transparent;
-  font-size: 14px;
+  font-size: 13px;
 }
 .download-cancel-ok:hover {
-  color: #1ca5d2;
+  color: rgb(4, 120, 87);
 }
 .download__container {
   position: fixed;

ui/scss/component/menu-button.scss

@@ -117,6 +117,11 @@
   font-size: var(--font-small);
   padding-top: 0;
 }
+.menu__link-disable {
+  @extend .menu__link;
+  color: var(--color-text-subtitle)!important;
+}
+
 
 .menu__link--notification {
   width: 100%;

ui/scss/init/_base-theme.scss

@@ -49,6 +49,7 @@
   --color-text-selection: var(--color-secondary);
   --color-text-empty: #999999;
   --color-text-help: #999999;
+
   --color-text-subtitle: #767676;
   --color-text-warning: #212529;
   --color-help-warning-bg: #fef3c7;