Fixed many icons related issues on File Manager and Music embedded page

web/Music/embedded.html

@@ -6,6 +6,7 @@
 	<meta charset="UTF-8">
 	<meta name="theme-color" content="#232324">
     <link rel="stylesheet" href="../script/tocas/tocas.css">
+	<link rel="icon" type="image/png" href="./img/small_icon.png">
 	<script src="../script/tocas/tocas.js"></script>
 	<script src="../script/jquery.min.js"></script>
 	<script src="../script/ao_module.js"></script>
@@ -15,6 +16,12 @@
 		overflow: hidden;
 		height:100%;
 	}
+
+	.coloredBackground{
+		background: rgb(58,58,58);
+		background: linear-gradient(180deg, rgba(58,58,58,1) 2%, rgba(34,34,34,1) 57%, rgba(0,0,0,1) 100%); 
+	}
+
 	html, body { height: 100%; width: 100%; margin: 0; }
 	.playerInterface{
 		background-color:rgba(226, 221, 220,0.95);
@@ -187,6 +194,11 @@
 		//Init ao_module window events
 		ao_module_setFixedWindowSize();
 
+		//Do things if it is not run under desktop mode
+		if (!ao_module_virtualDesktop){
+			$("#nearbyFilelist").addClass("coloredBackground");
+		}
+
 		//Ignore all other input files.
 		playingFileInfo = ao_module_loadInputFiles()[0];
 		//Get the song title and meta data from server

web/SystemAO/file_system/file_explorer.html

@@ -4,6 +4,7 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
         <link rel="stylesheet" href="../../script/tocas/tocas.css">
+        <link rel="icon" type="image/png" href="./img/small_icon.png">
         <link rel="manifest" crossorigin="use-credentials" href="manifest.json">
         <script type="text/javascript" src="../../script/tocas/tocas.js"></script>
         <script type="text/javascript" src="../../script/jquery.min.js"></script>
@@ -1522,7 +1523,10 @@
                 }
                 //Define the grid size for the interface
                 var gridSize = 150 ;
+
                 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 ;
@@ -1530,7 +1534,17 @@
                         //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");
+                    $("#fileList").attr("align", "left");
+
+                    //Calculate the best width to fit all the grids
+                    var bestCount = Math.floor(parseFloat($("#folderView").width()) / parseFloat(gridSize));
+                    var bestOffset = $("#folderView").width() % gridSize;
+                    gridSize = gridSize + (bestOffset / bestCount) - (window.innerWidth - $("#folderView").width()) / bestCount;
                 }
                 
                 //List all folders
@@ -1874,7 +1888,7 @@
                 $(".fileObject").off("contextmenu").on("contextmenu", function(evt){
                     evt.preventDefault();
                    
-                    if (isFirefox && isMobile){
+                    if (isMobile){
                         //Firefox Mobile. Fix select with context menu not working bug
                         var selectedObject = $(evt.target);