Added new rename ux

web/SystemAO/file_system/file_explorer.css

@@ -37,7 +37,7 @@ body{
     color:black;
     height:100%;
 }
-h1, h2, h3, p, span, div { font-family: "Microsoft JhengHei","SimHei", "Apple LiGothic Medium", "STHeiti"}
+h1, h2, h3, p, span, div, input { font-family: "Microsoft JhengHei","SimHei", "Apple LiGothic Medium", "STHeiti"}
 html{
     height:100%;
     overflow:hidden;
@@ -618,6 +618,11 @@ body{
     width: 100%;
 }
 
+.renameinput input:focus {
+    outline: none !important;
+    border: 1px solid var(--navi_theme);
+}
+
 .allowHover:hover{
     background-color:rgba(238, 238, 238, 0.932);
 }

web/SystemAO/file_system/file_explorer.html

@@ -496,6 +496,7 @@
             let overwriteMode = "keep"; //Overwrite mode, support {skip, overwrite, keep}
             let thumbRenderWebSocket = null;
             let pathInputMode = false;
+            let renameMode = false;
 
             //Searching related
             let searchCaseSensitive = false;
@@ -1002,7 +1003,7 @@
 
                 }else if (viewMode == "details"){
                     //Append the table structure to the corrisponding elements
-                    $("#folderList").append(`<table class="ui very basic compact unstackable table"  style="padding-right: 2em;">
+                    $("#folderList").append(`<table class="ui very basic unstackable table"  style="padding-right: 2em;">
                         <thead>
                             <tr>
                                 <th style="white-space: nowrap !important;"><span class="foldercounter"></span>${applocale.getString("view/details/folders", " Folders")}</th>
@@ -2075,37 +2076,62 @@
                 }   
 
                 //Override with rename input box
-                let rootObject = $($(".fileObject.selected")[0]);
-                let targetDOM = $(rootObject).find(".filename");
-                rootObject.attr("draggable", "false");
-                if (viewMode == "list"){
-                    $(targetDOM).html(`<div class="renameinput" style="width: calc(100% - 5em); display: inline-block;">
-                        <input type="text" value="${oldname}">
-                    </div>`);
-                    $(rootObject).find(".sharebtn").remove();
-                }else if (viewMode == "grid"){
-                    $(targetDOM).html(`<div class="renameinput" style="width: 100%; display: inline-block;">
-                        <input type="text" value="${oldname}">
-                    </div>`);
-                }else if (viewMode == "details"){
-                    $(targetDOM).html(`<div class="renameinput" style="width: calc(100% - 5em); display: inline-block;">
-                        <input type="text" value="${oldname}">
-                    </div>`);
-                }
-               
+                renameMode = true;
 
-                return;
+                if (isMobile){
+                    //Mobile rename using sidebar dialog
+                    $("#renameBox").find(".orgfn").val(oldname);
+                    $("#renameBox").find(".newfn").val(oldname);
+                    showPopupWrapper();
+                    $("#renameBox").transition('slide left in');
+                }else{
+                    //Desktop rename
+                    let rootObject = $($(".fileObject.selected")[0]);
+                    let targetDOM = $(rootObject).find(".filename");
+                    rootObject.attr("draggable", "false");
+                    if (viewMode == "list"){
+                        $(targetDOM).html(`<div class="renameinput" oldname="${encodeURIComponent(oldname)}" onkeydown="handleInputConfirmRename(this, event);" style="width: calc(100% - 5em); display: inline-block;">
+                            <input type="text" value="${oldname}">
+                        </div>`);
+                        $(rootObject).find(".sharebtn").remove();
+                    }else if (viewMode == "grid"){
+                        $(targetDOM).html(`<div class="renameinput" oldname="${encodeURIComponent(oldname)}" onkeydown="handleInputConfirmRename(this, event);" style="width: 100%; display: inline-block;">
+                            <input type="text" value="${oldname}">
+                        </div>`);
+                    }else if (viewMode == "details"){
+                        $(targetDOM).html(`<div class="renameinput" oldname="${encodeURIComponent(oldname)}" onkeydown="handleInputConfirmRename(this, event);" style="width: calc(100% - 5em); display: inline-block;">
+                            <input type="text" value="${oldname}">
+                        </div>`);
+                    }
+                    
+                    let targetInputField = $(".renameinput").find("input")[0];
+                    $(targetInputField).focus();
+                    targetInputField.selectionStart = targetInputField.value.length;
+                    targetInputField.selectionEnd = targetInputField.value.length;
+                }
+            }
 
-                //Fallback to default rename dialog box
-                $("#renameBox").find(".orgfn").val(oldname);
-                $("#renameBox").find(".newfn").val(oldname);
-                showPopupWrapper();
-                $("#renameBox").transition('slide left in');
+            
+            function handleInputConfirmRename(object, evt){
+                if (evt.keyCode == 13){
+                    evt.preventDefault();
+                    let oldname = $(object).attr("oldname").trim();
+                    let newname = $(object).find("input").val().trim();
+                    confirmRename(oldname, newname);
+                }
             }
+            
+
+            function confirmRename(oldName=undefined, newName=undefined){
+                renameMode = false;
+                if (oldName == undefined){
+                    oldName = $("#renameBox").find(".orgfn").val();
+                }
+
+                if (newName == undefined){
+                    newName = $("#renameBox").find(".newfn").val();
+                }
 
-            function confirmRename(){
-                var oldName = $("#renameBox").find(".orgfn").val();
-                var newName = $("#renameBox").find(".newfn").val();
                 if (newName == oldName){
                     msgbox("red remove",applocale.getString("message/newFilenameIdentical", "New filename is identical to the original filename."));
                     hideAllPopupWindows();
@@ -2832,7 +2858,8 @@
                     });
                     
                 }else{
-                    alert("No file selected!")
+                    msgbox("red remove",applocale.getString("message/No file selected", "No file selected"));
+                    //alert("No file selected!")
                 }
                 
             }

web/SystemAO/locale/file_explorer.json

@@ -204,6 +204,7 @@
                 "message/Invalid dir given":"資料夾路徑無效",
                 "message/Storage Quota Full":"儲存配額已滿",
                 "message/Unknown file opeartion given":"不支援的檔案動作請求",
+                "message/No file selected": "沒有選擇檔案",
                 "message/Preference value too long. Preference value can only store maximum 1024 characters.":"設定值太長。設定值只能夠少於 1024 字元",
                 "message/User not logged in":"使用者未登入",
                 "message/Folder not exists":"找不到資料夾",