Fixed File Manager context menu bug on too small screen

web/SystemAO/file_system/file_explorer.css

@@ -8,24 +8,48 @@
 /*
     Color definations
 */
-:root {
-    --fileopr_btnTxt: rgb(114, 114, 114);
+:root{
+    --dark_theme_toggle: #333333;
+    --dark_theme_toggle_text: rgb(218, 218, 218);
+    --white_theme_toggle: #dadada;
+    --white_theme_toggle_text: rgb(27, 27, 27);
+}
+
+body.whiteTheme {
+    --body_text: black;
+    --body_background: rgb(250, 250, 250);
+
+    --fileopr_btnTxt: rgb(226, 226, 226);
+    --fileopr_oprtxt: rgb(56, 52, 52);
+    --fileopr_btnhover: #f0f0f0;
     --divider: #f0f0f0;
     --navi_bgcolor: #fcfcfc;
     --navi_theme: #92cfe7;
-    --dark_theme_toggle: #333333;
+    --navi_txt: rgb(114, 114, 114);
+    
+    --vroot_active_bg: #dadada;
     --dir_item_color: rgb(78, 78, 78);
     --text_color: rgb(29, 29, 29);
     --text_color_secondary: rgb(139, 139, 139);
     --text_color_invert: rgb(182, 182, 182);
     --text_active: #23cc28;
 
+    --dir_bg: #f5f5f5;
+    --dir_txt: rgb(44, 44, 44);
+    --dir_border: rgba(219, 226, 241, 0.7);
     --dir_hover_text: #a3a3a3;
     --dir_hover_background: #f3f3f3;
     --dir_hover_active: #c9e7f1;
 
+    --normal_object_txt: #303030;
+    --hex_folder_txt: #2b9447;
+    --um_file_txt: #69aaff;
+
     --folder_view_background: #ffffff;
     --folder_view_share: #24cc29;
+    --fileobject_background_hover: #f2f2f2;
+    --fileobject_background_selected: #d2f2f7;
+    --fileobject_text_selected: black;
 
     --address_text_border:#cfcfcf;
     --address_text_background: white;
@@ -46,19 +70,75 @@
     --popup_wrapper_background: rgba(27,27,27,0.5);
 }
 
+body.darkTheme{
+    --body_text: rgb(236, 236, 236);
+    --body_background: rgb(37, 37, 37);
+
+    --fileopr_btnTxt: rgb(255, 255, 255);
+    --fileopr_oprtxt: rgb(241, 241, 241);
+    --fileopr_btnhover: #353535;
+    --divider: #3b4751;
+    --navi_bgcolor: #27292d;
+    --navi_theme: #6682c4;
+    --navi_txt: rgb(241, 241, 241);
+    
+    --vroot_active_bg: #95b5de;
+    --dir_item_color: rgb(228, 228, 228);
+    --text_color: rgb(241, 241, 241);
+    --text_color_secondary: rgb(214, 214, 214);
+    --text_color_invert: rgb(63, 63, 63);
+    --text_active: #23cc28;
+
+    --dir_bg: #373a42;
+    --dir_txt: rgb(230, 230, 230);
+    --dir_border: #3b4751;
+    --dir_hover_text: #a3a3a3;
+    --dir_hover_background: #f3f3f3;
+    --dir_hover_active: #7c9cc7;
+
+    --normal_object_txt: rgb(236, 236, 236);;
+    --hex_folder_txt: #44d36a;
+    --um_file_txt: #69aaff;
+
+    --folder_view_background: #373a42;
+    --folder_view_share: #24cc29;
+    --fileobject_background_hover: #5a5e6b;
+    --fileobject_background_selected: #95b5de;
+    --fileobject_text_selected: black;
+
+    --address_text_border:#27292d;
+    --address_text_background: rgb(0, 0, 0);
+
+    --contextmenu_background: #ffffff;
+    --contextmenu_hover: #f9f9f9;
+    --contextmenu_textcolor: rgb(78, 78, 78);
+
+    --upload_progressbar: #92cfe7;
+    --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);
+}
 
 body{
-    color:black;
+    color:var(--body_text);
+    background-color:var(--body_background);
     height:100%;
+    overflow: hidden;
 }
+
+
+
 h1, h2, h3, p, span, div, input { font-family: "Microsoft JhengHei","SimHei", "Apple LiGothic Medium", "STHeiti"}
 html{
     height:100%;
     overflow:hidden;
 }
-body{
-    background-color:rgb(250, 250, 250);
-}
 
 /*
 
@@ -104,14 +184,14 @@ body{
 }
 
 .fileOprBtn:hover{
-    border: 1px solid #f0f0f0;
+    border: 1px solid var(--fileopr_btnhover);
     opacity: 0.8;
 }
 .fileOprBtn .opricon{
     width: 46px;
 }
 .fileOprBtn .oprtxt{
-    color:rgb(56, 52, 52)
+    color:var(--fileopr_oprtxt);
 }
 
 .twolines.fileOprBtn{
@@ -128,7 +208,7 @@ body{
 .fileoprSmallBtn{
     cursor: pointer;
     border: 1px solid transparent;
-    color:rgb(114, 114, 114);
+    color:var(--navi_txt);
     background-color: transparent;
     padding: 0.3em;
     width: fit-content;
@@ -153,7 +233,7 @@ body{
 .navibarBtn{
     cursor: pointer;
     border: 1px solid transparent;
-    color:rgb(114, 114, 114);
+    color:var(--navi_txt);
     background-color: transparent;
     padding: 0.3em;
     display: inline-block;
@@ -175,11 +255,16 @@ body{
 }
 
 /* Special button for switching over to dark theme*/
-.navibarBtn.DarkThemeToggle{
-    color:var(--text_color_invert);
+.navibarBtn.DarkThemeToggle.inverted{
+    color:var(--dark_theme_toggle_text);
     background-color: var(--dark_theme_toggle);
 }
 
+.navibarBtn.DarkThemeToggle{
+    color: var(--white_theme_toggle_text);
+    background-color: var(--white_theme_toggle);
+}
+
 .navibarBtn.DarkThemeToggle:hover{
     border: 1px solid transparent;
 }
@@ -188,6 +273,20 @@ body{
     opacity: 0.8;
 }
 
+/* View mode buttons */
+.videmode.button{
+    color:var(--navi_txt) !important;
+    background-color: transparent;
+}
+
+.videmode.button:hover{
+    background-color: transparent;
+    opacity: 0.8;
+}
+.videmode.button:focus:not(#togglePropertiesViewBtn){
+    background-color: transparent !important;
+}
+
 .addressBar{
     border-top: 1px solid var(--divider);
     width:100%;
@@ -217,6 +316,12 @@ body{
     margin-left: 0.4em !important;
     font-size: 1rem;
     height: 27px;
+    width: 100%;
+}
+
+#pathInputField input{
+    background-color: var(--address_text_background);
+    color: var(--text_color);
 }
 
 .selectable{
@@ -272,9 +377,9 @@ body{
     padding-bottom: 1em;
     overflow-y:auto;
     padding-bottom:20px;
-    border-right:2px solid rgba(219, 226, 241, 0.7);
-    background-color:#f5f5f5;
-    color:rgb(44, 44, 44);
+    border-right:2px solid var(--dir_border);
+    background-color:var(--dir_bg);
+    color:var(--dir_txt);
     width: 250px;
     min-width: 250px;
 }
@@ -301,7 +406,7 @@ body{
 }
 
 .vroot.active{
-    background-color: #dadada;
+    background-color: var(--vroot_active_bg);
 }
 
 #selectInfo{
@@ -365,12 +470,12 @@ body{
 }
 
 .fileviewList .fileObject.item:hover,.fileviewList .fileObject.card:hover{
-    background-color:#f2f2f2 !important;
+    background-color: var(--fileobject_background_hover) !important;
 }
 
 .fileviewList .fileObject.item.selected, .fileviewList .fileObject.card.selected{
-    background-color:#d2f2f7 !important;
-    color:black !important;
+    background-color: var(--fileobject_background_selected) !important;
+    color: var(--fileobject_text_selected) !important;
 }
 
 /* Filelist in list mode */
@@ -462,15 +567,20 @@ body{
     cursor:pointer;
     user-select: none;
     border: 1px solid var(--divider);
+    color: var(--text_color);
 }
 
 .fileviewList .fileObject.details:hover{
-    background-color:#f2f2f2 !important;
+    background-color:var(--fileobject_background_hover) !important;
 }
 
 .fileviewList .fileObject.details.selected{
-    background-color:#d2f2f7 !important;
-    color:black !important;
+    background-color:var(--fileobject_background_selected) !important;
+    
+}
+
+#folderView th{
+    color: var(--text_color);
 }
 
 .fileviewList .fileObject.details.selected.renaming td:first-child{
@@ -832,15 +942,15 @@ body{
     Legacy supports (Deprecated)
 */
 .normal.object{
-    color:#303030;
+    color:var(--normal_object_txt);
 }
 
 .hex.foldername{
-    color:#2b9447 !important;
+    color: var(--hex_folder_txt) !important;
 }
 
 .um.filename{
-    color: #69aaff !important;
+    color: var(--um_file_txt) !important;
 }
 
 

web/SystemAO/file_system/file_explorer.html

@@ -68,11 +68,11 @@
                 </select>
                <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>
+                    <button class="ui icon tiny button videmode" mode="grid" title="Block View" onclick="changeViewMode(this);"><i class="block layout icon"></i></button>
+                    <button class="ui icon tiny button videmode" mode="list" title="List View" onclick="changeViewMode(this);"><i class="align justify icon"></i></button>
+                    <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 basic videmode" title="Show Properties" onclick="togglePropertiesView(this);"><i class="columns icon"></i></button>
+                    <button id="togglePropertiesViewBtn" class="ui icon tiny button videmode propbar" title="Show Properties" onclick="togglePropertiesView(this);"><i class="columns icon"></i></button>
                </div>   
             </div>
             <br>
@@ -82,7 +82,7 @@
                 <button id="ppbtn" class="navibarBtn" onclick="parentDir();" title="Parent Folder"><i class="up arrow icon"></i></button>
 
                 <button class="navibarBtn" onclick="toggleSidebar();"  title="Toggle Folder List"><i class="content icon"></i></button>
-                <button  class="navibarBtn DarkThemeToggle" title="Dark Theme" onclick="toggleDarkTheme();"><i class="moon icon" id="darkthemebtn"></i></button>
+                <button  class="navibarBtn DarkThemeToggle inverted" title="Dark Theme" onclick="toggleDarkTheme();"><i class="moon icon" id="darkthemebtn"></i></button>
 
                 <div id="pathDisplayField" class="ui breadcrumb addressText pathDisplay desktopOnly" onclick="showEditCurrentPathInput(event);">
                     <div class="section selectable"><i class="folder icon"></i> user</div>
@@ -555,7 +555,7 @@
 
             //Browser detection
             //TODO: REMOVE DEBUG
-            let isMobile = true; //window.mobilecheck();
+            let isMobile = false; //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);
@@ -1605,16 +1605,30 @@
 
                 //This function calculate and offset the context menu to not go out of the window area
                 function calculateContextMenuOffsets(evt){
-                    var defaultLeftPost = evt.pageX;
-                    var defaultTopPost =evt.pageY;
+                    var defaultLeftPost = evt.pageX + "px";
+                    var defaultTopPost =evt.pageY + "px";
                     
                     if (evt.pageX > window.innerWidth / 2){
                         defaultLeftPost = evt.pageX - $("#contextmenu").width() + "px";
                     }
 
                     if (evt.pageY > window.innerHeight / 2){
-                        defaultTopPost = evt.pageY - $("#contextmenu").height() + "px";
+                        defaultTopPost = evt.pageY - $("#contextmenu").height();
+
+                        if (defaultTopPost < 0){
+                            //over the top boundary
+                            defaultTopPost = 0;
+                        }
+                        defaultTopPost = defaultTopPost + "px"
+                       
+                    }else{
+                        if (evt.pageY + $("#contextmenu").height() > window.innerHeight){
+                            //Over the lower boundary
+                            defaultTopPost =  window.innerHeight - $("#contextmenu").height();
+                            defaultTopPost = defaultTopPost + "px"
+                        }
                     }
+                    console.log(defaultLeftPost, defaultTopPost);
 
                     $("#contextmenu").css({
                         left: defaultLeftPost,
@@ -3711,7 +3725,7 @@
             function toggleDarkTheme(){
                 if ($(".darkTheme").length > 0){
                     //Set To
-                    $(".darkTheme").removeClass("darkTheme").addClass("whiteTheme");
+                    $("body").removeClass("darkTheme").addClass("whiteTheme");
                     currentTheme = "whiteTheme";
                     $("#darkthemebtn").attr("class","moon icon");
                     $("#darkthemebtn").parent().addClass("inverted");
@@ -3725,7 +3739,7 @@
                     
                 }else{
                     //Set to DarkTheme
-                    $(".whiteTheme").removeClass("whiteTheme").addClass("darkTheme");
+                    $("body").removeClass("whiteTheme").addClass("darkTheme");
                     currentTheme = "darkTheme";
                     $("#darkthemebtn").attr("class","sun icon");
                     $("#darkthemebtn").parent().removeClass("inverted");
@@ -3736,8 +3750,6 @@
                      if (ao_module_virtualDesktop){
                         parent.initTheme("darkTheme");
                     }
-
-                    $(".rightPad").css("margin-right", "40px");
                 }
                
             }