Optimized upload css and rename method

web/SystemAO/file_system/file_explorer.css

@@ -30,6 +30,11 @@
     --contextmenu_background: #ffffff;
     --contextmenu_hover: #f9f9f9;
     --contextmenu_textcolor: rgb(78, 78, 78);
+
+    --upload_progressbar: #92cfe7;
+    --upload_progresstext: rgb(255, 255, 255);
+    --upload_progress_succ: #8cd68f;
+    --upload_progress_failed: #d68c8c;
 }
 
 
@@ -361,6 +366,11 @@ body{
     border-bottom-right-radius: 0.4em;
 }
 
+.fileviewList .fileObject.item.selected.renaming{
+    padding-top: 0.6em !important;
+    padding-bottom: 0.6em !important;
+}
+
 .fileviewList .fileObject.item:not(:first-child) {
     border-top: 0;
 }
@@ -439,6 +449,10 @@ body{
     color:black !important;
 }
 
+.fileviewList .fileObject.details.selected.renaming td:first-child{
+    padding: inherit;
+}
+
 .fileviewList .detailTableContent tr td:first-child{
     padding-left: 1em !important;
 }
@@ -684,6 +698,9 @@ body{
     font-size:90% !important;
 }
 
+/*
+    Upload Related
+*/
 #uploadTab{
     position:fixed;
     right:0px;
@@ -719,18 +736,43 @@ body{
 
 .uploadTask{
     margin-top:6px;
+    position: relative;
 }
+
 .uploadTaskRemoveIcon{
     position:absolute;
     top:0px;
     right:0px;
     cursor:pointer;
 }
+
 .clearallButton{
     padding:8px;
     cursor:pointer;
 }
 
+.themed.progress .bar{
+    background-color: var(--upload_progressbar);
+}
+
+.themed.progress .percentage{
+    color: var(--upload_progresstext) !important;
+}
+
+.success.progress .bar{
+    background-color: var(--upload_progress_succ);
+}
+
+.error.progress .bar{
+    background-color: var(--upload_progress_failed);
+}
+
+.ui.progress{
+    margin-bottom: 1em !important;
+}
+
+
+
 .normal.object{
     color:#303030;
 }
@@ -748,7 +790,9 @@ body{
 }
 
 
-
+/*
+    Hot Search Related
+*/
 i.blue{
     color: #345eeb;
 }

web/SystemAO/file_system/file_explorer.html

@@ -756,7 +756,6 @@
             }
 
             function highlightCurrentRoot(){
-                
                 //Highlight the target vroot name on the side bar
                 $(".vroot.active").removeClass("active");
                 $(".vroot").each(function(){
@@ -825,6 +824,7 @@
 
                 //Backup the current selected files if it is an refresh operation
                 let selectedFiles = [];
+                let currentScrollTop = JSON.parse(JSON.stringify($("#folderView").scrollTop()));
                 if (path == currentPath){
                     $(".fileObject.item.selected").each(function(){
                         selectedFiles.push($(this).attr("filename"));
@@ -873,8 +873,9 @@
 
                 //Add loading screen to the folderlists and fileList
                 $("#fileList").html("");
+                
                 $("#folderList").html(`<div style="height: 100px;">
-                    <div class="ui active inverted dimmer">
+                    <div class="ui active inverted dimmer" style="z-index: 95;">
                         <div class="ui text loader">${applocale.getString("message/loading", "Loading")}</div>
                     </div>
                 </div>`);
@@ -972,6 +973,9 @@
                                                 }
                                             }
                                         });
+
+                                        //Restore the previous scroll position
+                                        $("#folderView").scrollTop(currentScrollTop);
                                         
                                         //Perform the callback
                                         if (callback !== undefined){
@@ -1178,7 +1182,7 @@
 
                     var shareicon = "";
                     if (isShared){
-                        shareicon = `<button class="sharebtn" onclick='handleShareFilebuttonClick(event, this);' style="margin-left: 4px; height: 16px;">
+                        shareicon = `<button class="sharebtn" onclick='handleShareFilebuttonClick(event, this);' style="margin-left: 0px; height: 16px;">
                             <i class='share alternate icon'></i>
                         </button>`
                     }
@@ -1220,7 +1224,7 @@
                         $("#fileList").append(`<div class="fileObject item" draggable="true" ondragstart="onFileObjectDragStart(this,event);"  fileID="${fl + i}"  filename="${filename}" filepath="${filepath}" ondblclick="openthis(this,event);"  type="${fileType}" filesize="${filesize}" displaysize="${Displaysize}">
                             <span style="display:inline-block !important;word-break: break-all;text-overflow: ellipsis !important;overflow: hidden;" class="${textclass}">
                                 <i class="${icon} icon" style="margin-right:12px;"></i>  
-                                ${displayName}  ${shareicon}
+                                <span class="filename">${displayName}</span>  ${shareicon}
                             </span>
                         </div>`);
                     }else if (viewMode == "grid"){
@@ -1262,9 +1266,10 @@
                         <div class="fileObject card" draggable="true" ondragstart="onFileObjectDragStart(this,event);" fileID="${fl + i}" filename="${filename}" filepath="${filepath}" ondblclick="openthis(this,event);" type="${fileType}" style="width:${gridSize}px; display:inline-block !important;vertical-align:top; height:20em;  margin-top:0px !important;  overflow:hidden;">
                             <div class="image" style="text-align: center !important;">
                                 <img draggable="true"ondragstart="disableDrag(event);" style="height: 148px; width: 148px; display:inline-block;" src="${imagePath}">
+                                <div class="shareOverlay ${isShared?"visible":""}">${shareicon}</div>
                             </div>
                             <div class="content">
-                                <div class="header ${textclass}" title="${filename}" style="text-overflow: ellipsis; font-size: 100%">${displayName} ${shareicon}</div>
+                                <div class="header ${textclass}" title="${filename}" style="text-overflow: ellipsis; font-size: 100%"><span class="filename">${displayName}</span></div>
                                 <div class="meta">
                                     <div>${ext}</div>
                                 </div>
@@ -1292,7 +1297,7 @@
                             }
                         }
 
-                        let isSharedIcon = '<i class="ui grey remove icon" style="margin-left: 8px;"></i>';
+                        let isSharedIcon = '<i class="ui grey remove icon" style="margin-left: 4px;"></i>';
                         if (isShared){
                             isSharedIcon = shareicon;
                         }
@@ -1300,7 +1305,7 @@
                         var date = new Date(modTime * 1000);
 
                         $("#fileList").find(".fileDetailList").append(`<tr class="fileObject details" draggable="true" ondragstart="onFileObjectDragStart(this,event);" ondrop="dropToFolder(event)" ondragover="allowDrop(event)" fileID="${i}" filename="${filename}" filepath="${filepath}" ondblclick="openthis(this,event);" type="file">
-                            <td><i class="${icon} icon" style="margin-right:12px;"></i>  ${filename}</td>
+                            <td><i class="${icon} icon" style="margin-right:12px;"></i>  <span class="filename">${filename}</span></td>
                             <td class="light-text">${ext}</td>
                             <td class="light-text">${Displaysize}</td>
                             <td class="light-text">${date.toLocaleDateString("default") + " " + date.toLocaleTimeString("default")}</td>
@@ -1491,6 +1496,14 @@
             var lastClickedFileID = 0;
             function bindFileObjectEvents(){
                 $(".fileObject").off("click").on("click",function(evt){
+                    if (renameMode && $(this).find(".renameinput").length == 0){
+                        exitRenameModeWithConfirm();
+                        return;
+                    }else if (renameMode){
+                        //Stop the click event propagating to the #fileViewer on-click exit event
+                        evt.stopImmediatePropagation();
+                    }
+
                     if (!ctrlHold && isMobile && !ctrlHold){
                         //If on mobile, click means open (only on not muilti selection mode)
                         evt.preventDefault();
@@ -1883,6 +1896,11 @@
                 if (pathInputMode){
                     hideManualOpenPathInput();
                 }
+
+                if (renameMode && $(".renameinput").length > 0){
+                    exitRenameModeWithConfirm();
+                    return;
+                }
             })
 
             function checkIfParentDirExists(path){
@@ -1937,7 +1955,7 @@
 
             //=================================== FILE OPERATIONS ========================
 
-            function refreshList(){
+            function refreshList(callback){
                 if (searchMode == true){
                     //Refresh the search result
                     if ($("#searchInput").val().length >  0){
@@ -1949,11 +1967,7 @@
                 shiftHold = false;
                 ctrlHold = false;
                 updateCtrlDisplay();
-                let currentScrollTop = JSON.parse(JSON.stringify($("#folderView").scrollTop()));
-                listDirectory(currentPath, function(){
-                    //Scroll back to the original height
-                    $("#folderView").scrollTop(currentScrollTop);
-                });
+                listDirectory(currentPath, callback);
             }
 
            function zipFile(){
@@ -2087,6 +2101,7 @@
                 }else{
                     //Desktop rename
                     let rootObject = $($(".fileObject.selected")[0]);
+                    $(rootObject).addClass("renaming");
                     let targetDOM = $(rootObject).find(".filename");
                     rootObject.attr("draggable", "false");
                     if (viewMode == "list"){
@@ -2106,19 +2121,46 @@
                     
                     let targetInputField = $(".renameinput").find("input")[0];
                     $(targetInputField).focus();
-                    targetInputField.selectionStart = targetInputField.value.length;
-                    targetInputField.selectionEnd = targetInputField.value.length;
+                    targetInputField.selectionStart = 0;
+                    targetInputField.selectionEnd = targetInputField.value.lastIndexOf(".");
                 }
             }
 
-            
+            //Exit rename mode with current name in filename as new filename
+            //Activate from clicking elsewhere
+            function exitRenameModeWithConfirm(applyChange = true){
+                let renamingObject = $($(".renameinput")[0]);
+                $(".fileObject.renaming").removeClass("renaming");
+                let newname = renamingObject.find("input").val();
+                let oldname = renamingObject.attr("oldname");
+                oldname = decodeURIComponent(oldname);
+                if (oldname == newname || !applyChange){
+                    //Cancel Rename, in cases where old name = new name or applyChange set to false
+                    let filenameField = $(renamingObject).parent();
+                    $(filenameField).html(oldname);
+                    renameMode = false;
+                    return;
+                }
+                confirmRename(oldname, newname);
+            }
+
+            //Handle enter press on rename input box
             function handleInputConfirmRename(object, evt){
+                let filenameForbiddenCharKey = [
+                    '/',
+                    '<',
+                    '>',
+                    ':',
+                    '"',
+                    '\\',
+                    '*'
+                ];
                 if (evt.keyCode == 13){
                     evt.preventDefault();
                     evt.stopImmediatePropagation();
                     let oldname = $(object).attr("oldname").trim();
                     let newname = $(object).find("input").val().trim();
-
+                    $(".fileObject.selected.renaming").removeClass("renaming");
                     if (oldname == newname){
                         //Cancel Rename
                         let filenameField = $(object).parent();
@@ -2127,6 +2169,13 @@
                         return;
                     }
                     confirmRename(oldname, newname);
+                }else if (evt.keyCode == 27){
+                    //ESC key, restore to origin
+                    //Exit rename mode but not apply change
+                    exitRenameModeWithConfirm(false);
+                }else if (filenameForbiddenCharKey.includes(evt.key)){
+                    //Show now allow popup
+                    evt.preventDefault();
                 }
             }
             
@@ -2187,7 +2236,9 @@
                             if (data.error !== undefined){
                                 msgbox("red remove",applocale.getString("message/" + data.error, data.error));
                             }else{
-                                refreshList();
+                                refreshList(function(){
+                                    focusFileObject(newName);
+                                });
                                 msgbox("checkmark",applocale.getString("message/rename/success", "Rename suceed"));
                             }
                             hideAllPopupWindows();
@@ -2628,26 +2679,9 @@
                     pathWidth = $("#pre-render").width();
                     counter++;
                 }
-
+                //Render the final address into a visiable field
                 $("#pre-render").remove();
                 $(".pathDisplay").append(fullpath);
-                /*
-                if (l > 3){
-                    //E.g. user:/Desktop/test/boo/ => Display as user:/.../test/boo/
-                    $(".pathDisplay").append(`<div class="section">...</div>`);
-                    $(".pathDisplay").append(`<div class="divider">/</div>`);
-                    $(".pathDisplay").append(`<div class="section selectable"  onclick="event.stopImmediatePropagation(); parentDir();">${shortenLongFoldername(pathInfo[l-2], 40)}</div>`);
-                    $(".pathDisplay").append(`<div class="divider">/</div>`);
-                    $(".pathDisplay").append(`<div class="section selectable" onclick="event.stopImmediatePropagation(); refreshList();">${shortenLongFoldername(pathInfo[l-1], 60)}</div>`);
-                }else if (l == 3){
-                    $(".pathDisplay").append(`<div class="section selectable"  onclick="event.stopImmediatePropagation(); parentDir();">${shortenLongFoldername(pathInfo[l-2], 40)}</div>`);
-                    $(".pathDisplay").append(`<div class="divider">/</div>`);
-                    $(".pathDisplay").append(`<div class="section selectable" onclick="event.stopImmediatePropagation(); refreshList();">${shortenLongFoldername(pathInfo[l-1], 60)}</div>`);
-                }else if (l == 2){
-                    //E.g. user:/Desktop or user:/
-                    $(".pathDisplay").append(`<div class="section selectable" onclick="event.stopImmediatePropagation(); refreshList();">${shortenLongFoldername(pathInfo[1], 80)}</div>`);
-                }
-                */
 
                 //Update the manual input field as well
                 $("#pathInputField").find("input").val(path);
@@ -2704,6 +2738,15 @@
                 if (evt !== null){
                     evt.preventDefault();
                 }
+
+                if (renameMode && $(object).find(".renameinput").length > 0){
+                    //This object is currently under rename. Ignore input
+                    return;
+                }else if (renameMode){
+                    //Opening another stuffs. Exit renameMode
+                    exitRenameModeWithConfirm();
+                }
+                
                 var objType = $(object).attr("type");
                 if ( objType == "file"){
                     //Open this file. Generate the access path from filepath
@@ -3737,6 +3780,7 @@
                     //Esc key
                     hideAllPopupWindows();
                     $(".fileObject.selected").removeClass("selected");
+
                 }else{
                     //Handle generic file search by consecutive typing
                     if (hotSearchTimer != null){
@@ -3774,6 +3818,10 @@
                 shiftHold = false;
                 ctrlHold = false;
                 updateCtrlDisplay();
+
+                if (renameMode){
+                    exitRenameModeWithConfirm();
+                }
             });
 
             //Check if localstorage is availble
@@ -4290,12 +4338,11 @@
                         if ($(this).attr("taskID") == uuid){
                             //Update this progress bar
                             $(this).find(".bar").css("width",progress + "%");
-
+                            $(this).find(".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");
                             }
                         }
                     });
@@ -4402,10 +4449,10 @@
                             if ($(this).attr("taskID") == taskUUID){
                                 //Update this progress bar to completed
                                 $(this).find(".bar").css("width","100%");
-                                $(this).find(".progress").attr("class","ui tiny positive progress");
+                                $(this).find(".progress").attr("class", "ui tiny success progress");
                                 $(this).find(".uploadTaskRemoveIcon").show();
                                 $(this).addClass("ended");
-
+                                
                                 $.when($(this).delay(1000).fadeOut("fast")).then(function(){
                                     $(this).remove();
                                     updateUploadFileCount();
@@ -4484,6 +4531,9 @@
                         updateUploadFileCount();
                     }, 100);
                 }
+
+                //TODO: Make the upload management interface a bit better
+                //return;
                 
                 //Updates 22-10-2020
                 //Added file upload queuing system to prevent too many request on-the-fly at the same time
@@ -4549,10 +4599,9 @@
                             if ($(this).attr("taskID") == taskUUID){
                                 //Update this progress bar to completed
                                 $(this).find(".bar").css("width","100%");
-                                $(this).find(".progress").attr("class","ui tiny positive progress");
+                                $(this).find(".progress").attr("class", "ui tiny success progress");
                                 $(this).find(".uploadTaskRemoveIcon").show();
                                 $(this).addClass("ended");
-
                                 //Update 15-11-2020
                                 //Remove this taskbar after 3 seconds to prevent lags during > 2000 uploads
                                 $.when($(this).delay(1000).fadeOut("fast")).then(function(){
@@ -4571,7 +4620,7 @@
                                 if ($(this).attr("taskID") == taskUUID){
                                     //Update this progress bar to completed
                                     $(this).find(".bar").css("width","100%");
-                                    $(this).find(".progress").attr("class","ui tiny negative progress");
+                                    $(this).find(".progress").attr("class", "ui tiny error progress");
                                     $(this).find(".uploadTaskRemoveIcon").show();
                                     $(this).addClass("ended");
                                 }
@@ -4812,8 +4861,10 @@
             
             $("#uploadProgressList").append(`<div class="uploadTask" taskID="${newuuid}">
                 <p style="width: calc(100% - 15px);">${filename} (${humanReadableFilesize})</p>
-                <div class="ui tiny primary progress" style="margin-top:-12px;">
-                    <div class="bar" style="width: 0%"></div>
+                <div class="ui small themed progress" style="margin-top:-12px;">
+                    <div class="bar" style="width: 0%; min-width: 0px;">
+                        <div class="progress percentage"></div>
+                    </div>
                 </div>
                 <div class="uploadTaskRemoveIcon" onclick="removeThisTask(this, '${newuuid}');" style="">
                     <i class="remove icon"></i>