Added wip rename dialog box

web/SystemAO/file_system/file_explorer.css

@@ -510,6 +510,10 @@ body{
     border-bottom: 1px solid var(--divider);
 }
 
+/*
+    Message box and popups
+*/
+
 .msgbox{
     padding:3px;
 }
@@ -603,6 +607,17 @@ body{
     pointer-events: none;
 }
 
+/* Rename dialog */
+.renameinput input{
+    box-shadow: none;
+    border: 1px solid var(--divider);
+    padding-left: 0.4em;
+    padding-right: 0.4em;
+    padding-top: 0.2em;
+    padding-bottom: 0.2em;
+    width: 100%;
+}
+
 .allowHover:hover{
     background-color:rgba(238, 238, 238, 0.932);
 }

web/SystemAO/file_system/file_explorer.html

@@ -1094,8 +1094,8 @@
                         }
                        
                         $("#folderList").append(`<div class="fileObject item" draggable="true" ondragstart="onFileObjectDragStart(this,event);" ondrop="dropToFolder(event)" ondragover="allowDrop(event)" fileID="${i}" filename="${filename}" filepath="${filepath}" ondblclick="openthis(this,event);" type="folder">
-                            <span style="display:inline-block !important;word-break: break-all;" class="${textclass}">
-                                <i class="${icon} icon" style="margin-right:12px; color:#eab54e;"></i>  ${displayName} ${shareicon}
+                            <span style="display:inline-block !important;word-break: break-all; width:100%;" class="${textclass}">
+                                <i class="${icon} icon" style="margin-right:12px; color:#eab54e;"></i>  <span class="filename">${displayName}</span> ${shareicon}
                             </span></div>`);
                     }else if (viewMode == "grid"){
                         var displayName = JSON.parse(JSON.stringify(filename));
@@ -1120,7 +1120,7 @@
                                 <div class="shareOverlay ${isShared?"visible":""}">${shareicon}</div>
                             </div>
                             <div class="content" style="font-size: 12px;">
-                                <div class="header ${textclass}" title="${filename}">${displayName}</div>
+                                <div class="header ${textclass} filename" title="${filename}">${displayName}</div>
                             </div>
                             
                         </div>`);
@@ -1133,7 +1133,7 @@
                         //Convert the unix timestamp to datetime
                         var date = new Date(modTime * 1000);
                         $("#folderList").find(".folderDetailList").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="folder">
-                            <td><i class="${icon} icon" style="margin-right:12px; color:#eab54e;"></i>  ${filename}</td>
+                            <td><i class="${icon} icon" style="margin-right:12px; color:#eab54e;"></i> <span class="filename">${filename}</span></td>
                             <td class="light-text">${date.toLocaleDateString("default") + " " + date.toLocaleTimeString("default")}</td>
                             <td>${isSharedIcon}</td>
                         </tr>`);
@@ -1658,7 +1658,7 @@
                     });
 
                     //Disable scroll on folderView
-                    $("#folderView").addClass("fixscroll");
+                    //$("#folderView").addClass("fixscroll");
                 });
 
                 //Right click on empty space of the file selector
@@ -1685,7 +1685,7 @@
                         }
 
                         //Disable scroll on folderView
-                        $("#folderView").addClass("fixscroll");
+                        //$("#folderView").addClass("fixscroll");
 
                    }
                });
@@ -1727,7 +1727,7 @@
                $(document).on("click",function(evt){
                    $(".contextmenu").removeClass("visible");
                     //Enable scroll on folderView
-                    $("#folderView").removeClass("fixscroll");
+                    //$("#folderView").removeClass("fixscroll");
                });
             }
 
@@ -2053,7 +2053,7 @@
 
             let renameFileObjects = [];
             function rename(){
-                $(".popup").fadeOut('fast');
+                hideAllPopupWindows();
                 renameFileObjects = [];
                 var filenames = [];
                 $(".fileObject.selected").each(function(){
@@ -2072,11 +2072,35 @@
                 }else if (renameFileObjects.length > 0){
                     $("#renameBox").find(".multifileWarning").hide();
                     oldname = filenames[0];
+                }   
+
+                //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>`);
                 }
+               
+
+                return;
+
+                //Fallback to default rename dialog box
                 $("#renameBox").find(".orgfn").val(oldname);
                 $("#renameBox").find(".newfn").val(oldname);
                 showPopupWrapper();
-                $("#renameBox").fadeIn(100);
+                $("#renameBox").transition('slide left in');
             }
 
             function confirmRename(){
@@ -2084,8 +2108,7 @@
                 var newName = $("#renameBox").find(".newfn").val();
                 if (newName == oldName){
                     msgbox("red remove",applocale.getString("message/newFilenameIdentical", "New filename is identical to the original filename."));
-                    $("#renameBox").fadeOut(100);
-                    $(".popupWrapper").fadeOut(100);
+                    hideAllPopupWindows();
                     return;
                 }
                 var newNameWithoutExt = newName;
@@ -2132,18 +2155,15 @@
                                 refreshList();
                                 msgbox("checkmark",applocale.getString("message/rename/success", "Rename suceed"));
                             }
-                            $("#renameBox").fadeOut(100);
-                            $(".popupWrapper").fadeOut(100);
+                            hideAllPopupWindows();
                         },
                         error: function(){
-                            $("#renameBox").fadeOut(100);
-                            $(".popupWrapper").fadeOut(100);
+                            hideAllPopupWindows();
                         }
                     });
                     renameFileObjects = [];
                 });
-               
-                hideAllPopupWindows();
+            
             }
 
             function changeOverwriteRule(mode, doPasteAgain=false){