Added restore view mode after search

web/SystemAO/file_system/file_explorer.css

@@ -27,6 +27,9 @@
     --folder_view_background: #ffffff;
     --folder_view_share: #24cc29;
 
+    --address_text_border:#cfcfcf;
+    --address_text_background: white;
+
     --contextmenu_background: #ffffff;
     --contextmenu_hover: #f9f9f9;
     --contextmenu_textcolor: rgb(78, 78, 78);
@@ -35,6 +38,12 @@
     --upload_progresstext: rgb(255, 255, 255);
     --upload_progress_succ: #8cd68f;
     --upload_progress_failed: #d68c8c;
+
+    --open_with_selected: #51aded;
+    --open_with_selected_text: white;
+    --open_with_item_hover_background:rgba(35,35,35,0.14); 
+
+    --popup_wrapper_background: rgba(27,27,27,0.5);
 }
 
 
@@ -192,12 +201,16 @@ body{
     display: flex;
 }
 
-.addressText{
+#pathDisplayField{
     margin-left: 0.4em !important;
+}
+
+.addressText{
     padding:5px;
     border-radius: 0.4em;
-    border: 1px solid #cfcfcf;
+    border: 1px solid var(--address_text_border);
     flex-grow: 1;
+    background-color: var(--address_text_background);
 }
 
 #pathInputField{
@@ -206,11 +219,18 @@ body{
     height: 27px;
 }
 
-
 .selectable{
     cursor:pointer;
 }
 
+.viewportBtns.mobile{
+    order: 2;
+    margin-left: auto !important;
+    height: 30px;
+    border-right: none;
+    margin-top: -10px;
+}
+
 /*
     Search bar
 */
@@ -677,7 +697,7 @@ body{
     width:100%;
     height:100%;
     z-index:99;
-    background-color:rgba(27,27,27,0.5);
+    background-color: var(--popup_wrapper_background);
     display:none;
 }
 @supports (backdrop-filter: none) {
@@ -685,9 +705,6 @@ body{
         backdrop-filter: blur(5px);
     }
 }
-.breadcrumb{
-    background-color:white;
-}
 
 #openWithModuleList{
     height:50vh;
@@ -703,18 +720,40 @@ body{
 }
 
 #openWithModuleList .item.selected{
-    background-color:#51aded !important;
-    color:white;
+    background-color: var(--open_with_selected) !important;
+    color:var(--open_with_selected_text);
 }
 
 #openWithModuleList .item.selectable:hover{
-    background-color:rgba(35,35,35,0.14);
+    background-color:var(--open_with_item_hover_background);
 }
 
 .contextmenu .item{
     font-size:90% !important;
 }
 
+/*
+    New Item List
+*/
+.newfilelist{
+    border: 1px solid var(--divider);
+    border-radius: 0.4em;
+    margin-bottom: 0.6em;
+}
+
+.newfilelist .item{
+    padding: 0.6em;
+}
+
+.newfilelist .item:not(:last-child){
+    border-bottom: 1px solid var(--divider);
+}
+.newfilelist .item.selected{
+    background-color: var(--open_with_selected) !important;
+    color:var(--open_with_selected_text);
+}
+
+
 /*
     Upload Related
 */
@@ -789,7 +828,9 @@ body{
 }
 
 
-
+/*
+    Legacy supports (Deprecated)
+*/
 .normal.object{
     color:#303030;
 }
@@ -802,10 +843,6 @@ body{
     color: #69aaff !important;
 }
 
-.dropdown.inverted:not(.icon){
-    background-color: #17161f !important;
-}
-
 
 /*
     Hot Search Related
@@ -817,3 +854,43 @@ i.blue{
 .fileObject.hotSearchHighlight{
     background-color: #d2f2f7 !important;
 }
+
+
+/*
+
+    Responsive
+
+*/
+
+@media (max-width:620px) {
+    #pathInputField{
+        width: 100%;
+    }
+
+    #pathInputField input{
+        margin-left: 0;
+    }
+
+    /*Directory sidebar, full width */
+    #directorySidebar{
+        width: 100%;
+        min-width: 100%;
+    }
+
+    /* Properties view, disable function in small display size*/
+    #propertiesView{
+        display:none !important;
+    }
+
+    #togglePropertiesViewBtn{
+        display:none !important;
+    }
+
+    /* popups */
+    .popup{
+        top: 5em;
+        bottom: 5em;
+        width:100%;
+        height: auto;
+    }
+}

web/SystemAO/file_system/file_explorer.html

@@ -66,13 +66,13 @@
                     <option value="fileTypeDesc" locale="menu/sort/typeDes">File Type (Desc)</option>
                     <option value="smart" locale="menu/sort/smart">Smart</option>
                 </select>
-               <div class="buttons">
+               <div class="buttons viewportBtns">
                     <!-- Viewport-->
                     <button class="ui icon tiny button basic videmode" mode="grid" title="Block View" onclick="changeViewMode(this);"><i class="block layout icon"></i></button>
                     <button class="ui icon tiny button basic videmode" mode="list" title="List View" onclick="changeViewMode(this);"><i class="align justify icon"></i></button>
                     <button class="ui icon tiny button basic videmode" mode="details" title="Detail View" onclick="changeViewMode(this);"><i class="list ul icon"></i></button>
                     <div class="fileoprGroupDivider" style="display: inline-block; height: 30px; vertical-align: bottom; margin-left: -0.2em; padding-right: 0.4em;"></div>
-                    <button class="ui icon tiny button basic videmode" title="Show Properties" onclick="togglePropertiesView(this);"><i class="columns icon"></i></button>
+                    <button id="togglePropertiesViewBtn" class="ui icon tiny button basic videmode" title="Show Properties" onclick="togglePropertiesView(this);"><i class="columns icon"></i></button>
                </div>   
             </div>
             <br>
@@ -147,7 +147,7 @@
                 </div>
                 <br>
             </div>
-            <div id="propertiesView" class="small">
+            <div id="propertiesView" class="small" style="display:none;">
                 <div class="preview" style="margin-top: 0.4em;">
                     <img class="ui fluid image" >
                 </div>
@@ -280,7 +280,7 @@
             </div>
             <div class="popupcontent" style="padding:12px;">
                 <p locale="opr/newfile/instruction">Select a type of file to be created.</p>
-                <div class="ui segmented list newfilelist" style="max-height:18em; overflow-y:scroll">
+                <div class="newfilelist" style="max-height:18em; overflow-y:scroll">
                     <div class="item newFileFormat" ext="php">No Item</div>
                 </div>
                 <p locale="opr/newfile/newempty">Or create an empty file with given filename:</p>
@@ -525,11 +525,12 @@
 
             //Searching related
             let searchCaseSensitive = false;
+            let viewModeBeforeSearch = "list";
             let searchMode = false;
             let hotSearchBuffer = "";
             let hotSearchTimer = null;
             let hotSearchOffsetIndex = 0;
-            let propertiesView = true; //Enable viewing properties on the right sidebar
+            let propertiesView = false; //Enable viewing properties on the right sidebar
 
             //Keypress listeners
             let ctrlHold = false;
@@ -553,7 +554,8 @@
             let systemIP = "";
 
             //Browser detection
-            let isMobile = window.mobilecheck();
+            //TODO: REMOVE DEBUG
+            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);
@@ -599,9 +601,13 @@
                         "padding-left":"1em",
                         "padding-top":"1em",
                     });
+
+                    //Move the sort menu into the desktop address bar gap
+                    $(".viewportBtns").addClass("mobile");
+                    $(".addressBar").append($(".viewportBtns"));
+
                     $(".desktopOnly").hide();
                     $(".mobileOnly").show();
-
                 }else{
                     $(".mobileOnly").hide();
                     $(".desktopOnly").show();
@@ -622,6 +628,12 @@
                     }
                 });
 
+                //Initialize properties view
+                if (localStorage.getItem("file_explorer/viewProperties") == "true"){
+                    $("#togglePropertiesViewBtn").click();
+                }
+
+
                 if (window.location.hash != ""){
                     //Check if the hash is standard open protocol. If yes, translate it
                     if (ao_module_loadInputFiles() === null){
@@ -1788,14 +1800,18 @@
                 setPreference("file_explorer/listmode",targetMode)
             }
 
+            //Toggle properties view
+            //Setting will be save to this browser only
             function togglePropertiesView(object){
                 propertiesView = !propertiesView;
                 if (propertiesView){
                     $("#propertiesView").show();
                     $(object).addClass('active');
+                    localStorage.setItem("file_explorer/viewProperties", "true");
                 }else{
                     $("#propertiesView").hide();
                     $(object).removeClass('active');
+                    localStorage.setItem("file_explorer/viewProperties", "false");
                 }
             }
 
@@ -1892,10 +1908,8 @@
                 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();
@@ -2703,10 +2717,13 @@
                 }
 
                 let fullpath = domPathChunks.join(`<div class="divider">/</div>`);
-                
-                $(".pathDisplay").append(`<div id="pre-render" class="measure">${fullpath}</div>`);
+                let targetDisplayDOM = $("#pathDisplayField").find(".pathDisplay");
+                if (isMobile){
+                    targetDisplayDOM = $("#mobilePathDisplay");
+                }
+                $(targetDisplayDOM).append(`<div id="pre-render" class="measure">${fullpath}</div>`);
                 let pathWidth = $("#pre-render").width();
-                let pathFieldWidth = $(".pathDisplay").width();
+                let pathFieldWidth = $(targetDisplayDOM).width();
                 let counter = 0;
 
                 //Check for a combination that just fit the path bar
@@ -2721,7 +2738,7 @@
                 }
                 //Render the final address into a visiable field
                 $("#pre-render").remove();
-                $(".pathDisplay").append(fullpath);
+                $(targetDisplayDOM).append(fullpath);
 
                 //Update the manual input field as well
                 $("#pathInputField").find("input").val(path);
@@ -3606,7 +3623,7 @@
             function toggleSidebar(useAnimation=true){
                 //Fixing desktop bugs on showing the sidebar
                 if (isMobile){
-                    $("#directorySidebar").stop().finish().animate({left: "toggle"},200);
+                    $("#directorySidebar").stop().finish().toggle();
                 }else{
                     if ($("#directorySidebar").is(":visible")){
                         $("#directorySidebar").transition("slide right out", function(){
@@ -4735,6 +4752,7 @@
             $("#searhbtn").addClass("disabled");
 
             //Force videmode to list
+            viewModeBeforeSearch = viewMode;
             viewMode = "list"
             $(".videmode.button").each(function(){
                  $(this).addClass('disabled');
@@ -4763,8 +4781,9 @@
             initWindowSizes(true);
             $("#searchInput").val("");
             $("#searhbtn").removeClass("disabled");
+            viewMode = viewModeBeforeSearch;
             $(".videmode.button").each(function(){
-                if ($(this).attr("mode") != "list"){
+                if ($(this).attr("mode") != viewMode){
                     $(this).removeClass('disabled');
                 }
             });