Optimized upload tab display

web/SystemAO/file_system/file_explorer.css

@@ -87,6 +87,12 @@ body.whiteTheme {
     --open_with_item_hover_background:rgba(35,35,35,0.14); 
 
     --popup_wrapper_background: rgba(27,27,27,0.5);
+    --code_bg: #f7f7f9;
+    --code_txt: #bd4147;
+
+    --uploadtab_bg: #f5f5f5;
+    --uploadtab_txt: rgb(78, 78, 78);
+    --upload_bg: #ffffff;
 }
 
 body.darkTheme{
@@ -162,6 +168,12 @@ body.darkTheme{
     --open_with_item_hover_background:rgba(35,35,35,0.14); 
 
     --popup_wrapper_background: rgba(27,27,27,0.5);
+    --code_bg: rgb(20, 20, 20);
+    --code_txt: #d68c8c;
+
+    --uploadtab_bg: #27292d;
+    --uploadtab_txt: rgb(233, 233, 233);
+    --upload_bg: #373a42;
 }
 
 body{
@@ -486,6 +498,11 @@ body.darkTheme .ui.icon.button{
 .mobilePathDisplayWrapper{
     width:100%;
     margin-bottom:5px;
+    
+}
+
+#mobilePathDisplay .divider{
+    color: var(--text_color_secondary) !important;
 }
 
 .pathDisplay{
@@ -966,16 +983,17 @@ body.darkTheme .ui.icon.button{
     width:300px;
     margin-bottom:0px !important;
     padding:0px !important;
+    background-color: var(--upload_bg) !important;
 }
 
 .statusBar{
     height:32px;
-    background-color:#f5f5f5;
+    background-color:var(--uploadtab_bg);
     padding:8px;
 }
 
 .statusBar{
-    color:rgb(78, 78, 78);
+    color:var(--uploadtab_txt);
 }
 
 
@@ -1029,6 +1047,27 @@ body.darkTheme .ui.icon.button{
     margin-bottom: 1em !important;
 }
 
+/*
+    Special message or exceptions 
+*/
+.ui.themed.header{
+    color: var(--text_color);
+}
+
+.ui.themed.header .sub.header{
+    color: var(--text_color_secondary);
+}
+
+code{
+    background-color: var(--code_bg);
+    color: var(--code_txt);
+    line-height: 2.5;
+    padding: 0.1em;
+    padding-left: 0.4em;
+    padding-right: 0.4em;
+    border-radius: 0.2em;
+}
+
 
 /*
     Legacy supports (Deprecated)

web/SystemAO/file_system/file_explorer.html

@@ -555,7 +555,7 @@
 
             //Browser detection
             //TODO: REMOVE DEBUG
-            let isMobile = false; //window.mobilecheck();
+            let isMobile = true; //window.mobilecheck();
             let isChromium = window.chrome;
             let isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
             let isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
@@ -992,7 +992,7 @@
                                     //Print folder not found exception
                                     $("#folderList").show();
                                     $("#folderList").html(`<div class="ui basic segment">
-                                        <div class="ui header">
+                                        <div class="ui header themed">
                                             <i class="remove icon"></i> <span>${applocale.getString("message/folderCannotOpen","This Folder Cannot Be Opened")}</span>
                                             <div class="sub header" style="margin-top:12px;">${applocale.getString("message/folderCannotOpen/codedesc","The server return the following error message:")} <br><code>${data.error.toUpperCase()}</code><br>
                                                 ${new Date().toLocaleString(undefined, {year: 'numeric', month: '2-digit', day: '2-digit', weekday:"long", hour: '2-digit', hour12: false, minute:'2-digit', second:'2-digit'})}</div>
@@ -4452,11 +4452,13 @@
                         if ($(this).attr("taskID") == uuid){
                             //Update this progress bar
                             $(this).find(".bar").css("width",progress + "%");
-                            $(this).find(".percentage").text(progress.toFixed(1) + "%");
+                            $(this).find(".progress.percentage").text(progress.toFixed(1) + "%");
+                            console.log(progress.toFixed(1) + "%");
                             if (progress == 100){
                                 //When progress = 100 and the server is not response with 200,
                                 //That means the upload has finish and server is processing the upload
                                 $(this).find(".progress").addClass("active");
+                                $(this).find(".progress.percentage").hide();
                             }
                         }
                     });
@@ -4694,11 +4696,12 @@
                         if ($(this).attr("taskID") == taskUUID){
                             //Update this progress bar
                             $(this).find(".bar").css("width",progress + "%");
-
+                            $(this).find(".progress.percentage").text(progress.toFixed(1) + "%");
                             if (progress == 100){
                                 //When progress = 100 and the server is not response with 200,
                                 //That means the upload has finish and server is processing the upload
-                                $(this).find(".progress").addClass("indeterminate");
+                                $(this).find(".progress").addClass("active");
+                                $(this).find(".progress.percentage").hide();
 
                             }
                         }
@@ -4717,7 +4720,7 @@
                                 $(this).find(".uploadTaskRemoveIcon").show();
                                 $(this).addClass("ended");
                                 //Update 15-11-2020
-                                //Remove this taskbar after 3 seconds to prevent lags during > 2000 uploads
+                                //Remove this taskbar after 1 second to prevent lags during > 2000 uploads
                                 $.when($(this).delay(1000).fadeOut("fast")).then(function(){
                                     $(this).remove();
                                     updateUploadFileCount();
@@ -4815,7 +4818,7 @@
             //Clear current folderlist
             $("#folderList").show();
             $("#folderList").html(`<div class="ui basic segment">
-                <div class="ui header">
+                <div class="ui header themed">
                     <i class="arrow up icon"></i> <span>${applocale.getString("func/search/typeToStart", "Type to Start Search")}</span>
                     <div class="sub header" style="margin-top:12px;">${applocale.getString("func/search/tip1", "Type something in the search bar to start searching.")}<br>
                         ${applocale.getString("func/search/tip2", `Start wildcard matching with "/" (slash) and your wildcard string (e.g. /*.mp3)`)}</div>