Fixed a lot of File Manager UX problems

web/SystemAO/file_system/file_explorer.html

@@ -93,11 +93,13 @@
             }
 
             .rightPad{
-                margin-right:40px;
+                margin-right:37px;
             }
             .addressBar{
                 width:100%;
                 padding:3px;
+                padding-left: 0px;
+                padding-right: 0px;
                 min-height: 35px;
                 padding-top:6px;
             }
@@ -649,17 +651,26 @@
              <button class="ts icon tiny negative button" title="Delete" onclick="deleteFile();"><i class="trash outline icon"></i></button>
 
              <button class="ts icon tiny button standard whiteTheme" title="Refresh" onclick="refreshList();"><i class="refresh icon"></i></button>
+             <button class="ts icon tiny button standard whiteTheme" title="Home" onclick="openHomeDir();"><i class="home icon"></i></button>
              <button class="ts icon tiny button standard whiteTheme" title="File Info" onclick="showFileProperties();"><i class="notice icon"></i></button>
-             <button class="ts icon tiny button standard whiteTheme" title="Help"><i class="help icon"></i></button>
+             
              
              <div class="addressBar">
                 <button class="ts icon tiny button standard whiteTheme" onclick="toggleSidebar();"  title="Toggle Folder List"><i class="content icon"></i></button>
                 <button  class="ts icon tiny button inverted" title="Dark Theme" onclick="toggleDarkTheme();"><i class="moon icon" id="darkthemebtn"></i></button>
-                <div class="ts breadcrumb whiteTheme addressText pathDisplay desktopOnly">
+                <button class="ts tiny icon button standard whiteTheme" title="Edit Path" onclick="showEditCurrentPathInput(event)"><i class="ui edit icon"></i></button>
+                <div id="pathDisplayField" class="ts breadcrumb whiteTheme addressText pathDisplay desktopOnly" ondblclick="showEditCurrentPathInput(event);">
                     <div class="section whiteTheme selectable"><i class="folder icon"></i> user</div>
                     <div class="divider whiteTheme">:/</div>
                     <div class="section whiteTheme selectable">Desktop</div>
                 </div>
+                
+                <div id="pathInputField" class="ts action mini input whiteTheme" style="display:none;">
+                    <input type="text" style="min-width: 200px;" class="whiteTheme" placeholder="Type a path and press enter" onkeydown="handleOpenPathKeydown(event);">
+                    <button class="ts icon button" title="Open" onclick="openEnteredPath(this);">
+                        <i class="checkmark icon"></i>
+                    </button>
+                </div>
                 <div class="rightAlign">
                     <select id="sortingMethodSelector" title="Sorting Method" class="ts basic borderless mini dropdown" onchange="updateSortingMethods();" autocomplete="off">
                         <option value="default">Ascending</option>
@@ -675,7 +686,7 @@
                 </div>
              </div>
              <div class="mobilePathDisplayWrapper">
-                <div style="width:100%;" class="ts pathDisplay breadcrumb whiteTheme addressText mobileOnly">
+                <div id="mobilePathDisplay" style="width:100%;" class="ts pathDisplay breadcrumb whiteTheme addressText mobileOnly">
                     <div class="section whiteTheme selectable"><i class="folder icon"></i> user</div>
                     <div class="divider whiteTheme">:/</div>
                     <div class="section whiteTheme selectable">Desktop</div>
@@ -735,10 +746,10 @@
                 </div>
             </div>
             <div id="folderView" class="whiteTheme" ondrop="drop(event)" ondragover="allowDrop(event)">
-                <div id="folderList">
+                <div id="folderList" class="ts segmented fluid list whiteTheme">
 
                 </div>
-                <div id="fileList">
+                <div id="fileList" class="ts segmented fluid list whiteTheme">
 
                 </div>
                 <br>
@@ -1175,9 +1186,14 @@
                 });
                 $(".desktopOnly").hide();
                 $(".mobileOnly").show();
+
+                //Adjust minor css on mobile devices
+                $(".rightPad").css("margin-right", "37px");
             }else{
                 $(".mobileOnly").hide();
                 $(".desktopOnly").show();
+
+                $(".rightPad").css("margin-right", "37px");
             }
             //Initialize view mode buttons
             updateViewmodeButtons();
@@ -1474,13 +1490,24 @@
                                     var pdir = currentPath.split("/");
                                     pdir.pop(); pdir.pop();
                                     pdir = pdir.join("/");
-                                    currentPath = pdir;
+                                    //currentPath = pdir;
 
                                     //Check if it is already rooted and no more parent ahead
                                     if (currentPath == ""){
                                         currentPath = "user:/";
                                     }
                                     
+                                    //Print folder not found exceotion
+                                    $("#folderList").show();
+                                    $("#folderList").html(`<div class="ts basic segment ${currentTheme}">
+                                        <div class="ts header">
+                                            <i class="remove icon ${currentTheme}"></i> <span class="${currentTheme}">This Folder Cannot Be Opened</span>
+                                            <div class="sub header ${currentTheme}" style="margin-top:12px;">The server return the following error message: <br><code>${data.error.toUpperCase()}</code><br>
+                                                ${ao_module_utils.timeConverter(Date.now()/1000)}</div>
+                                        </div>
+                                    </div>`);
+                                    $("#fileList").hide();
+
                                     //listDirectory(currentPath, function(){
                                     //    window.location.reload();
                                     //});
@@ -1544,16 +1571,6 @@
 
                 if (isMobile){
                     //Update 3/5/2021: Optimize the width calculation method to best fit
-                    /*
-                    if (window.innerWidth > window.innerHeight){
-                        //Screen using in horizontal mode
-                        gridSize = window.innerWidth /4 - 20 ;
-                    }else{
-                        //Screen using in vertical mode
-                        gridSize = window.innerWidth /2 - 20 ;
-                    }
-                    */
-
                     //A hack to align the divs to center of the container
                     $("#folderView").attr("align", "center");
                     $("#folderList").attr("align", "left");
@@ -2180,6 +2197,44 @@
                 listDirectory(rootDir);
             }
 
+            function showEditCurrentPathInput(e){
+                e.preventDefault();
+                $("#pathInputField").find("input").val(currentPath);
+                if (isMobile){
+                    $("#mobilePathDisplay").hide();
+                    $(".mobilePathDisplayWrapper").append($("#pathInputField"));
+                    $("#pathInputField").find("input").css("width", window.innerWidth - 54 + "px");
+                }else{
+                    //Desktop
+                    $("#pathInputField").find("input").css("width", $("#pathDisplayField").width() - 24+ "px");
+                    $("#pathDisplayField").hide();
+                }
+                $("#pathInputField").show();
+            }
+
+            function handleOpenPathKeydown(e){
+                if (e.key == "enter" | e.keyCode == 13){
+                    //Etner pressed
+                    openEnteredPath($("#pathInputField").find("button"));
+                }
+            }
+            function openEnteredPath(object){
+                var newPath = $(object).parent().find("input").val();
+                //Filter out the path
+                newPath = newPath.split("\\").join("/");
+                listDirectory(newPath);
+                hideManualOpenPathInput();
+            }
+
+            function hideManualOpenPathInput(){
+                $("#pathInputField").hide();
+                if (isMobile){
+                    $("#mobilePathDisplay").show();
+                }else{
+                    $("#pathDisplayField").show();
+                }
+            }
+
             function checkIfParentDirExists(path){
                 if (path.includes("/")){
                     pathInfo = path.split("/");
@@ -2216,12 +2271,21 @@
                 })
             }
 
+            function openHomeDir(){
+                listDirectory("user:/", function(){
+                    hideManualOpenPathInput();
+                    hideSearchBar();
+                })
+            }
+
             //=================================== FILE OPERATIONS ========================
 
             function refreshList(){
                 if (searchMode == true){
                     //Refresh the search result
-                    handleSearch();
+                    if ($("#searchInput").val().length >  0){
+                        handleSearch();
+                    }
                     return;
                 }
 
@@ -2745,6 +2809,9 @@
                     //E.g. user:/Desktop or user:/
                     $(".pathDisplay").append(`<div class="section ${currentTheme} selectable" onclick="refreshList();">${shortenLongFoldername(pathInfo[1], 80)}</div>`);
                 }
+
+                //Update the manual input field as well
+                $("#pathInputField").find("input").val(path);
             }
 
             function shortenLongFoldername(name, maxchar = 20){
@@ -3694,6 +3761,8 @@
                     if (ao_module_virtualDesktop){
                         parent.initTheme("whiteTheme");
                     }
+
+                    $(".rightPad").css("margin-right", "37px");
                     
                 }else{
                     //Set to DarkTheme
@@ -3708,6 +3777,8 @@
                      if (ao_module_virtualDesktop){
                         parent.initTheme("darkTheme");
                     }
+
+                    $(".rightPad").css("margin-right", "40px");
                 }
                
             }
@@ -4633,6 +4704,11 @@
                  $(this).addClass('disabled');
             });
             searchMode = true;
+            
+            //Adjust the css for mobile interface
+            if (isMobile){
+                $("#searchInput").parent().parent().css("width", window.innerWidth - 135 + "px");
+            }
 
             //Clear current folderlist
             $("#folderList").show();