Browse Source

Fixed bugs in grid render view

Toby Chui 2 years ago
parent
commit
5c591d7658

+ 50 - 5
web/SystemAO/file_system/file_explorer.css

@@ -282,12 +282,11 @@ body.darkTheme .ui.icon.button{
 .navibar.mobile .twolines.fileOprBtn .opricon{
     width: 28px;
 }
-.navibar .twolines.fileOprBtn .oprtxt{
+.navibar.mobile .twolines.fileOprBtn .oprtxt{
     font-size: 0.7em;
 }
 
-
-.fileoprSmallBtn{
+.navibar .fileoprSmallBtn{
     cursor: pointer;
     border: 1px solid transparent;
     color:var(--navi_txt);
@@ -297,12 +296,18 @@ body.darkTheme .ui.icon.button{
     text-align: left;
 }
 
-.fileoprSmallBtn:hover{
+.navibar .fileoprSmallBtn:hover{
     opacity: 0.8;
     border: 1px solid var(--divider);
     border-radius: 0.4em;
 }
 
+.navibar.mobile .fileoprSmallBtn{
+    font-size: 0.9em;
+    padding: 0.2em;
+}
+
+
 .navibar .fileoprGroupDivider{
     padding-right: 0.2em;
     margin-right: 0.2em;
@@ -351,7 +356,11 @@ body.darkTheme .ui.icon.button{
     cursor: pointer;
 }
 
-#mobileNaviBar .fileOprBtnMobile{
+#mobileNaviBar{
+    height: 100vh !important;
+    overflow-y: auto !important;
+}
+#mobileNaviBar .fileoprBtnMobile{
     border-bottom: 1px solid var(--divider);
 }
 
@@ -712,6 +721,7 @@ body.darkTheme .ui.icon.button{
     border-radius: 0.4em;
     position: relative;
     margin-bottom:1em;
+    width: 148px !important;
 }
 
 .fileviewList .fileObject.card img{
@@ -805,6 +815,16 @@ body.darkTheme .ui.icon.button{
     border: 1px solid transparent;
     background-color: transparent;
     color: var(--folder_view_share);
+    margin-left: 4px;
+    margin-top: 1px;
+}
+
+/* Handle specific Chrome bug in rendering the share icon */
+@media screen and (-webkit-min-device-pixel-ratio:0)
+  and (min-resolution:.001dpcm) {
+    .sharebtn{
+        padding: 0 !important;
+    }
 }
 
 .sharebtn:hover{
@@ -1217,6 +1237,16 @@ i.blue{
 
 */
 
+@media (max-width:800px) {
+    .tabletAndDesktopOnly{
+        display:none !important;
+    }
+
+    .mobileFileOprMenu{
+        display:block !important;
+    }
+}
+
 @media (max-width:620px) {
     #pathInputField{
         width: 100%;
@@ -1232,6 +1262,21 @@ i.blue{
         min-width: 100%;
     }
 
+    /* grid mode preview */
+    .fileviewList .fileObject.card{
+        border-radius: 0.4em;
+        position: relative;
+        margin-bottom:1em;
+        width: calc(33% - 4px) !important;
+        min-width: 100px;
+        max-width: 148px;
+    }
+    
+    .fileviewList .fileObject.card img{
+        width: 100% !important;
+        height: auto !important;
+    }
+
     /* Properties view, disable function in small display size*/
     #propertiesView{
         display:none !important;

+ 22 - 13
web/SystemAO/file_system/file_explorer.html

@@ -27,10 +27,10 @@
     <body class="whiteTheme">
         <div id="navibar" class="navibar">
             <!-- File Opr Group-->
-            <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="fileOprBtn tabletAndDesktopOnly" title="Open" onclick="openViaButton();"><img class="opricon" src="img/opr/open.svg"><p class="oprtxt" locale="fileopr/Open">Open</p></button>
+            <button class="fileOprBtn tabletAndDesktopOnly" title="Copy" onclick="copy();"><img class="opricon" src="img/opr/copy.svg"><p class="oprtxt" locale="fileopr/Copy">Copy</p></button>
+            <button class="fileOprBtn tabletAndDesktopOnly" title="Paste" onclick="paste();"><img class="opricon" src="img/opr/paste.svg"><p class="oprtxt" locale="fileopr/Paste">Paste</p></button>
+            <div class="fileoprGroupDivider tabletAndDesktopOnly" 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>
@@ -39,17 +39,17 @@
             <button class="fileOprBtn" title="Download" onclick="downloadFile(); exitMultiSelectMode();"><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;"></div>
             <button class="twolines fileOprBtn" title="New Folder" onclick="newFolder(); exitMultiSelectMode();"><img class="opricon" src="img/opr/new_folder.svg"><p class="oprtxt" locale="fileopr/New Folder">New<br>Folder</p></button>
-            <div class="fileoprGroupDivider desktopOnly" style="display: inline-block; vertical-align: top;">
+            <div class="fileoprGroupDivider tabletAndDesktopOnly" 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 desktopOnly" style="display: inline-block; vertical-align: top;">
+            <div class="fileoprGroupDivider tabletAndDesktopOnly" 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 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 tabletAndDesktopOnly" 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;"></div>
             <button class="mobileOnly mobileFileOprMenu" onclick="toggleMobileSidebar(true);">
@@ -87,10 +87,10 @@
 
                 </div>
                 <!-- File Operation Buttons -->
-                <div class="fileOprBtnMobile" title="Open" onclick="openViaButton(); toggleMobileSidebar(false, exitMultiSelectMode);"><img class="opricon" src="img/opr/open.svg"><p class="oprtxt" locale="fileopr/Open">Open</p></div>
-                <div class="fileOprBtnMobile" title="Copy" onclick="copy(); toggleMobileSidebar(false, exitMultiSelectMode);"><img class="opricon" src="img/opr/copy.svg"><p class="oprtxt" locale="fileopr/Copy">Copy</p></div>
-                <div class="fileOprBtnMobile" title="Paste" onclick="paste(); toggleMobileSidebar(false, exitMultiSelectMode);"><img class="opricon" src="img/opr/paste.svg"><p class="oprtxt" locale="fileopr/Paste">Paste</p></div>
-                <div class="fileOprBtnMobile" title="Delete" onclick="deleteFile(); toggleMobileSidebar(false, exitMultiSelectMode);"><img class="opricon" src="img/opr/delete.svg"><p class="oprtxt" locale="fileopr/Delete">Delete</p></div>
+                <div class="fileoprBtnMobile" title="Open" onclick="openViaButton(); toggleMobileSidebar(false, exitMultiSelectMode);"><img class="opricon" src="img/opr/open.svg"><p class="oprtxt" locale="fileopr/Open">Open</p></div>
+                <div class="fileoprBtnMobile" title="Copy" onclick="copy(); toggleMobileSidebar(false, exitMultiSelectMode);"><img class="opricon" src="img/opr/copy.svg"><p class="oprtxt" locale="fileopr/Copy">Copy</p></div>
+                <div class="fileoprBtnMobile" title="Paste" onclick="paste(); toggleMobileSidebar(false, exitMultiSelectMode);"><img class="opricon" src="img/opr/paste.svg"><p class="oprtxt" locale="fileopr/Paste">Paste</p></div>
+                <div class="fileoprBtnMobile" title="Delete" onclick="deleteFile(); toggleMobileSidebar(false, exitMultiSelectMode);"><img class="opricon" src="img/opr/delete.svg"><p class="oprtxt" locale="fileopr/Delete">Delete</p></div>
                 <button class="fileoprSmallBtnMobile" title="Multi Select" onclick="toggleCtrl(); toggleMobileSidebar(false);"> <i class="mouse pointer icon"></i> <span locale="fileopr/Multi Select">Multi-select</span></button><br>
                 <button class="fileoprSmallBtnMobile" title="Select All" onclick="selectAll(); toggleMobileSidebar(false);"> <i class="blue plus square icon"></i> <span locale="fileopr/Select All">Select All</span></button><br>
                 <button class="fileoprSmallBtnMobile" title="Clear Selection" onclick="clearSelection(); toggleMobileSidebar(false, exitMultiSelectMode);"> <i class="remove icon"></i> <span locale="fileopr/Clear Select">Clear Selection</span></button><br>
@@ -584,7 +584,7 @@
 
             //Browser detection
             //TODO: REMOVE DEBUG
-            let isMobile = true; //window.mobilecheck();
+            let isMobile = 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);
@@ -1595,6 +1595,10 @@
                             }
                         }else{
                             $(this).addClass("selected");
+                            if (propertiesView){
+                                let filepath =  $(this).attr("filepath");
+                                loadFileProperties(filepath);
+                            }
                         }
                        
                         lastClickedFileID = parseInt($(this).attr("fileid"));
@@ -1727,6 +1731,11 @@
                             $(selectedObject).addClass("selected");
                        }
 
+                       if (propertiesView){
+                            let filepath = $(selectedObject).attr("filepath");
+                            loadFileProperties(filepath);
+                        }
+
                         //Enable multi-select mode
                         ctrlHold = true;
                         updateCtrlDisplay();
@@ -3581,7 +3590,7 @@
                 }
 
                 if (isMobile && !pathInputMode){
-                    refreshList();
+                    //refreshList();
                 }
 
                 //Resize the share iframe

+ 1 - 1
web/desktop.system

@@ -1292,7 +1292,7 @@
         var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
         var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
         var isMacOS = (navigator.appVersion.indexOf("Mac")!=-1);
-        var isTouchScreen = (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
+        var isTouchScreen = window.matchMedia("(any-pointer: coarse)").matches;
 
         //Check and prepare localization
         if (applocale){