Added wip mobile sidebar

web/SystemAO/file_system/file_explorer.css

@@ -25,6 +25,7 @@ body.whiteTheme {
     --divider: #f0f0f0;
     --navi_bgcolor: #fcfcfc;
     --navi_theme: #92cfe7;
+    --navi_theme_multiselect: #6c06ba;
     --navi_txt: rgb(114, 114, 114);
 
     --dropdown_bg: white;
@@ -105,6 +106,7 @@ body.darkTheme{
     --divider: #465561;
     --navi_bgcolor: #27292d;
     --navi_theme: #6682c4;
+    --navi_theme_multiselect: #6c06ba;
     --navi_txt: rgb(241, 241, 241);
 
     --dropdown_bg: #373a42;
@@ -214,6 +216,10 @@ body.darkTheme .ui.icon.button{
     border-bottom:2px solid var(--navi_theme);
 }
 
+.navibar.ctrl{
+    border-bottom:2px solid var(--navi_theme_multiselect);
+}
+
 .button.standard{
     box-shadow: 0 1px 1px 0px rgb(190, 190, 190);
     border: 0px;
@@ -286,6 +292,14 @@ body.darkTheme .ui.icon.button{
 .ui.selection.dropdown{
     background-color: var(--dropdown_bg) !important;
     color: var(--dropdown_txt) !important;
+    min-width: 10em;
+}
+
+/* special case when using in mobile sidebar */
+#mobileSortDropdown .ui.selection.dropdown{
+    width: 100%;
+    border-radius: 0;
+    padding: 1em;
 }
 
 .ui.selection.dropdown .menu > .item{
@@ -302,9 +316,59 @@ body.darkTheme .ui.icon.button{
     color: var(--text_color_secondary) !important;
 }
 
+/* Mobile interface */
+.fileOprBtnMobile{
+    position: relative;
+    width: 100%;
+    background-color: none;
+    padding: 0.6em;
+    padding-left: 1em;
+    cursor: pointer;
+}
+
+#mobileNaviBar .fileOprBtnMobile{
+    border-bottom: 1px solid var(--divider);
+}
+
+.fileOprBtnMobile:hover{
+    background-color: var(--popup_btn_hover) !important;
+}
+
+.fileOprBtnMobile .opricon{
+    width: 30px;
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 0.4em;
+}
+
+.fileOprBtnMobile  p{
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.fileoprSmallBtnMobile{
+    cursor: pointer;
+    border: 1px solid transparent;
+    color:var(--navi_txt);
+    background-color: transparent;
+    padding: 0.4em;
+    padding-left: 1em;
+    width: 100%;
+    text-align: left;
+}
+
+#mobileNaviBar .fileoprSmallBtnMobile{
+    border-bottom: 1px solid var(--divider);
+}
+
+.fileoprSmallBtnMobile:hover{
+    background-color: var(--popup_btn_hover) !important;
+}
+
 /*
     Address and search bar
 */
+
 .navibarBtn{
     cursor: pointer;
     border: 1px solid transparent;
@@ -416,6 +480,35 @@ body.darkTheme .ui.icon.button{
     margin-top: -10px;
 }
 
+/* Mobile file operation menus */
+.mobileFileOprMenu{
+    position: fixed;
+    top: 0.6em;
+    right: 0.6em;
+    background-color: var(--navi_bgcolor);
+    border: none;
+    color: var(--text_color);
+    cursor: pointer;
+    width: 50px;
+    height: 50px;
+    padding-top: 4px;
+    padding-left: 10px;
+    border-radius: 0.4em;
+}
+
+.mobileFileOprMenu:hover{
+    opacity: 0.8;
+}
+
+.mobileFileOprMenuToggle{
+    padding: 1.2em;
+    border: 0px solid transparent;
+    color: var(--text_color);
+    border-bottom:2px solid var(--navi_theme);
+    text-align: right;
+    cursor: pointer;
+}
+
 /*
     Search bar
 */
@@ -790,7 +883,7 @@ body.darkTheme .ui.icon.button{
 .popup{
     position:fixed;
     top:0;
-    z-index:110;
+    z-index:200;
     right:0;
     bottom:30px;
     padding-bottom:24px;
@@ -798,20 +891,14 @@ body.darkTheme .ui.icon.button{
     width: 30em;
     height: 100%;
     max-width: 100%;
+    border: 1px solid var(--popup_border);
+    background-color:var(--popup_bg);
 }
 
 .popup.wide{
     width: 60em;
 }
 
-.popup{
-    -webkit-box-shadow:  3px 4px 5px 0px rgba(138,138,138,1);
-    -moz-box-shadow:  3px 4px 5px 0px rgba(138,138,138,1);
-    box-shadow:  3px 4px 5px 0px rgba(138,138,138,1);
-    border: 1px solid var(--popup_border);
-    background-color:var(--popup_bg);
-}
-
 .popupheader{
     width:100%;
     padding:3px;
@@ -904,7 +991,7 @@ body.darkTheme .ui.icon.button{
     left:0px;
     width:100%;
     height:100%;
-    z-index:99;
+    z-index:199;
     background-color: var(--popup_wrapper_background);
     display:none;
 }
@@ -1097,6 +1184,7 @@ i.blue{
 }
 
 
+
 /*
 
     Responsive
@@ -1134,4 +1222,10 @@ i.blue{
         width:100%;
         height: auto;
     }
+
+    /* msgbox */
+    .msgbox{
+        left: 0.4em;
+        border: 0px solid transparent;
+    }
 }

web/SystemAO/file_system/file_explorer.html

@@ -28,10 +28,10 @@
         <div id="navibar" class="navibar">
             <!-- File Opr Group-->
             <div class="btnGroup" style="display:inline-block;">
-                <button class="fileOprBtn" title="Open" onclick="openViaButton();"><img class="opricon" src="img/opr/open.svg"><p class="oprtxt" locale="fileopr/Open">Open</p></button>
-                <button class="fileOprBtn" title="Copy" onclick="copy();"><img class="opricon" src="img/opr/copy.svg"><p class="oprtxt" locale="fileopr/Copy">Copy</p></button>
-                <button class="fileOprBtn" title="Paste" onclick="paste();"><img class="opricon" src="img/opr/paste.svg"><p class="oprtxt" locale="fileopr/Paste">Paste</p></button>
-                <div class="fileoprGroupDivider" style="display: inline-block; vertical-align: top;">
+                <button class="fileOprBtn desktopOnly" title="Open" onclick="openViaButton();"><img class="opricon" src="img/opr/open.svg"><p class="oprtxt" locale="fileopr/Open">Open</p></button>
+                <button class="fileOprBtn desktopOnly" title="Copy" onclick="copy();"><img class="opricon" src="img/opr/copy.svg"><p class="oprtxt" locale="fileopr/Copy">Copy</p></button>
+                <button class="fileOprBtn desktopOnly" title="Paste" onclick="paste();"><img class="opricon" src="img/opr/paste.svg"><p class="oprtxt" locale="fileopr/Paste">Paste</p></button>
+                <div class="fileoprGroupDivider desktopOnly" style="display: inline-block; vertical-align: top;">
                     <button class="fileoprSmallBtn" title="Open with" onclick="openWith();"><i class="external icon"></i> <span locale="fileopr/Open with">Open With</span></button><br>
                     <button class="fileoprSmallBtn" title="Cut" onclick="cut();"><i class="blue cut icon"></i> <span locale="fileopr/Cut">Cut</span></button><br>
                     <button class="fileoprSmallBtn" title="Rename" onclick="rename();"><i class="teal i cursor icon"></i> <span locale="fileopr/Rename">Rename</span></button>
@@ -41,21 +41,24 @@
             <button class="fileOprBtn" title="Download" onclick="downloadFile();"><img class="opricon" src="img/opr/download.svg"><p class="oprtxt" locale="fileopr/Download">Download</p></button>
             <div class="fileoprGroupDivider" style="display: inline-block; vertical-align: top; height: 80px;"></div>
             <button class="twolines fileOprBtn" title="New Folder" onclick="newFolder();"><img class="opricon" src="img/opr/new_folder.svg"><p class="oprtxt" locale="fileopr/New Folder">New<br>Folder</p></button>
-            <div class="fileoprGroupDivider" style="display: inline-block; vertical-align: top;">
+            <div class="fileoprGroupDivider desktopOnly" style="display: inline-block; vertical-align: top;">
                 <button class="fileoprSmallBtn" title="New File" onclick="newfile();"><i class="file outline icon"></i> <span locale="fileopr/New File">New File</span></button><br>
                 <button class="fileoprSmallBtn" title="Create Zip" onclick="zipFile();"><i class="brown zip file icon"></i> <span locale="fileopr/Create Zip">Create Zip</span></button><br>
                 <button class="fileoprSmallBtn" title="Unzip Here" onclick="unzipHere();"><i class="inbox icon"></i> <span locale="fileopr/Unzip Here">Unzip Here</span></button><br>
             </div>
-            <div  class="fileoprGroupDivider" style="display: inline-block; vertical-align: top;">
+            <div  class="fileoprGroupDivider desktopOnly" style="display: inline-block; vertical-align: top;">
                 <button class="fileoprSmallBtn" title="Refresh" onclick="refreshList();"><i class="green refresh icon"></i> <span locale="fileopr/Refresh">Refresh</span></button><br>
                 <button class="fileoprSmallBtn" title="Home" onclick="openHomeDir();"><i class="home icon"></i> <span locale="fileopr/Home">Home</span></button><br>
                 <button class="fileoprSmallBtn" title="File Info" onclick="showFileProperties();"><i class="blue info circle icon"></i> <span locale="fileopr/File Info">File Info</span></button><br>
             </div>
-            <button class="fileOprBtn" title="Delete" onclick="deleteFile();"><img class="opricon" src="img/opr/delete.svg"><p class="oprtxt" locale="fileopr/Delete">Delete</p></button>
+            <button class="fileOprBtn desktopOnly" title="Delete" onclick="deleteFile();"><img class="opricon" src="img/opr/delete.svg"><p class="oprtxt" locale="fileopr/Delete">Delete</p></button>
             <button class="fileOprBtn" title="Share File" onclick="shareFile();"><img class="opricon" src="img/opr/share.svg"><p class="oprtxt" locale="fileopr/Share">Share</p></button>
             <div class="fileoprGroupDivider" style="display: inline-block; vertical-align: top; height: 80px;"></div>
+            <button class="mobileOnly mobileFileOprMenu" onclick="toggleMobileSidebar(true);">
+                <i class="ui large bars icon"></i>
+            </button> 
             <div style="display: inline-block; vertical-align: top;">
-                <select id="sortingMethodSelector" title="Sorting Method" class="ui basic borderless mini dropdown" onchange="updateSortingMethods();" autocomplete="off">
+                <select id="sortingMethodSelector" title="Sorting Method" class="ui basic borderless mini dropdown" onchange="updateSortingMethods();" autocomplete="off" style="min-width: 10em;">
                     <option value="default" locale="menu/sort/asc">Ascending</option>
                     <option value="reverse" locale="menu/sort/desc">Descending</option>
                     <option value="smallToLarge" locale="menu/sort/small">Smallest</option>
@@ -73,7 +76,29 @@
                     <button class="ui icon tiny button 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 id="togglePropertiesViewBtn" class="ui icon tiny button videmode propbar" title="Show Properties" onclick="togglePropertiesView(this);"><i class="columns icon"></i></button>
-               </div>   
+               </div>  
+            </div>
+
+            <!-- Mobile Navi-bar -->
+            <div id="mobileNaviBar" class="ui right fixed vertical menu" style="display:;">
+                <div class="mobileFileOprMenuToggle" onclick="toggleMobileSidebar(false);">
+                    <i class="large chevron right icon"></i>
+                </div>
+                <!-- Sorting Mode Selector-->
+                <div id="mobileSortDropdown">
+
+                </div>
+                <!-- File Operation Buttons -->
+                <div class="fileOprBtnMobile" title="Open" onclick="openViaButton();"><img class="opricon" src="img/opr/open.svg"><p class="oprtxt" locale="fileopr/Open">Open</p></div>
+                <div class="fileOprBtnMobile" title="Copy" onclick="copy();"><img class="opricon" src="img/opr/copy.svg"><p class="oprtxt" locale="fileopr/Copy">Copy</p></div>
+                <div class="fileOprBtnMobile" title="Paste" onclick="paste();"><img class="opricon" src="img/opr/paste.svg"><p class="oprtxt" locale="fileopr/Paste">Paste</p></div>
+                <div class="fileOprBtnMobile" title="Delete" onclick="deleteFile();"><img class="opricon" src="img/opr/delete.svg"><p class="oprtxt" locale="fileopr/Delete">Delete</p></div>
+                <button class="fileoprSmallBtnMobile" title="New File" onclick="newfile();"><i class="file outline icon"></i> <span locale="fileopr/New File">New File</span></button><br>
+                <button class="fileoprSmallBtnMobile" title="Create Zip" onclick="zipFile();"><i class="brown zip file icon"></i> <span locale="fileopr/Create Zip">Create Zip</span></button><br>
+                <button class="fileoprSmallBtnMobile" title="Unzip Here" onclick="unzipHere();"><i class="inbox icon"></i> <span locale="fileopr/Unzip Here">Unzip Here</span></button><br>
+                <button class="fileoprSmallBtnMobile" title="Refresh" onclick="refreshList();"><i class="green refresh icon"></i> <span locale="fileopr/Refresh">Refresh</span></button><br>
+                <button class="fileoprSmallBtnMobile" title="Home" onclick="openHomeDir();"><i class="home icon"></i> <span locale="fileopr/Home">Home</span></button><br>
+                <button class="fileoprSmallBtnMobile" title="File Info" onclick="showFileProperties();"><i class="blue info circle icon"></i> <span locale="fileopr/File Info">File Info</span></button><br>
             </div>
             <br>
             <!-- Directoy navigations -->
@@ -555,7 +580,7 @@
 
             //Browser detection
             //TODO: REMOVE DEBUG
-            let isMobile = window.mobilecheck();
+            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);
@@ -606,6 +631,9 @@
                     $(".viewportBtns").addClass("mobile");
                     $(".addressBar").append($(".viewportBtns"));
 
+                    //Move the sorting dropdown to sidebar
+                    $("#mobileSortDropdown").append($("#sortingMethodSelector"));
+
                     $(".desktopOnly").hide();
                     $(".mobileOnly").show();
                 }else{
@@ -1612,7 +1640,20 @@
                     var defaultTopPost =evt.pageY + "px";
                     
                     if (evt.pageX > window.innerWidth / 2){
-                        defaultLeftPost = evt.pageX - $("#contextmenu").width() + "px";
+                        defaultLeftPost = evt.pageX - $("#contextmenu").width();
+                        
+                        if (defaultLeftPost < 0){
+                            //over the left boundary
+                            defaultLeftPost = 0;
+                        }
+                        defaultLeftPost = defaultLeftPost + "px";
+                    }else{
+
+                        if (evt.pageX + $("#contextmenu").width() > window.innerWidth){
+                            //Over the right boundary
+                            defaultLeftPost = window.innerWidth - $("#contextmenu").width();
+                            defaultLeftPost = defaultLeftPost + "px";
+                        }
                     }
 
                     if (evt.pageY > window.innerHeight / 2){
@@ -1631,8 +1672,7 @@
                             defaultTopPost = defaultTopPost + "px"
                         }
                     }
-                    console.log(defaultLeftPost, defaultTopPost);
-
+                    
                     $("#contextmenu").css({
                         left: defaultLeftPost,
                         top: defaultTopPost
@@ -1930,6 +1970,8 @@
 
             function showEditCurrentPathInput(e){
                 e.preventDefault();
+                e.stopImmediatePropagation();
+                pathInputMode = true;
                 $("#pathInputField").find("input").val(currentPath);
                 $("#editPathBtn").hide();
                 if (isMobile){
@@ -1941,7 +1983,7 @@
                 }
                 $("#pathInputField").show();
                 $("#pathInputField").find("input").focus();
-                pathInputMode = true;
+                
             }
 
             function handleOpenPathKeydown(e){
@@ -3507,7 +3549,7 @@
                     toggleSidebar(false);
                 }
 
-                if (isMobile){
+                if (isMobile && !pathInputMode){
                     refreshList();
                 }
 
@@ -3515,7 +3557,10 @@
                 resizeShareIframe()
 
                 //Resize the path display content
-                updatePathDisplay(currentPath);
+                if (!pathInputMode){
+                    updatePathDisplay(currentPath);
+                }
+                
             });
 
             function handleShareFilebuttonClick(event, object){
@@ -3647,10 +3692,25 @@
                 $("#shareFileEmbedded").attr("src", "");
             }
 
+            function toggleMobileSidebar(show=undefined){
+                if(show == true){
+                    $("#mobileNaviBar").stop().finish().transition("slide left in");
+                }else if (show == false){
+                    $("#mobileNaviBar").stop().finish().transition("slide left out");
+                }else{
+                    $("#mobileNaviBar").toggle();
+                }
+            }
+
             function toggleSidebar(useAnimation=true){
                 //Fixing desktop bugs on showing the sidebar
                 if (isMobile){
-                    $("#directorySidebar").stop().finish().toggle();
+                    if (sideBarShown){
+                        $("#directorySidebar").hide();
+                    }else{
+                        $("#directorySidebar").show();
+                    }
+                    
                 }else{
                     if (sideBarShown){
                         $("#directorySidebar").stop().finish().transition("slide right out", function(){
@@ -3737,19 +3797,19 @@
 
             function toggleDarkTheme(){
                 if ($(".darkTheme").length > 0){
-                    //Set To
+                    //Set To whiteTheme
                     $("body").removeClass("darkTheme").addClass("whiteTheme");
                     currentTheme = "whiteTheme";
                     $("#darkthemebtn").attr("class","moon icon");
                     $("#darkthemebtn").parent().addClass("inverted");
                     $(".dropdown").removeClass("inverted");
                     setPreference("file_explorer/theme","whiteTheme");
+                    $("#mobileNaviBar").removeClass("inverted");
 
                     //If in vdi mode, update desktop's listMenu as well
                     if (ao_module_virtualDesktop){
                         parent.initTheme("whiteTheme");
                     }
-                    
                 }else{
                     //Set to DarkTheme
                     $("body").removeClass("whiteTheme").addClass("darkTheme");
@@ -3758,6 +3818,7 @@
                     $("#darkthemebtn").parent().removeClass("inverted");
                     $(".dropdown").addClass("inverted");
                     setPreference("file_explorer/theme","darkTheme");
+                    $("#mobileNaviBar").addClass("inverted");
 
                      //If in vdi mode, update desktop's listMenu as well
                      if (ao_module_virtualDesktop){
@@ -4951,9 +5012,9 @@
             if (isMobile){
                 //Change color of the navibar based on selection mode
                 if (ctrlHold){
-                    $("#navibar").css("border-bottom","2px solid #6c06ba");
+                    $("#navibar").addClass("ctrl");
                 }else{
-                    $("#navibar").css("border-bottom","2px solid #34b7eb");
+                    $("#navibar").removeClass("ctrl");
                 }
             }
         }