Finalized desktop update

web/desktop.system

@@ -361,13 +361,15 @@
         
         #listMenu {
             position: fixed;
-            bottom: 36px;
-            left: 0px;
+            bottom: calc(36px + 1em);
+            left: 0.4em;
             height: 500px;
             width: 400px;
             background-color: #ffffff;
             box-shadow: 3px 3px 5px 0px rgba(207, 207, 207, 0.37);
             z-index: 1113;
+            border-radius: 6px;
+            overflow: hidden;
         }
 
         body.darkTheme #listMenu{
@@ -400,6 +402,7 @@
         #listMenu .listItemWrapper {
             overflow: hidden;
             height: 462px;
+            border-bottom-left-radius: 1em;
         }
         
         .listItemWrapper .groups{
@@ -492,7 +495,7 @@
             width: 100%;
             cursor: pointer;
         }
-        
+
         #listMenu .poweroption:hover {
             background-color: #dedede;
         }
@@ -753,16 +756,14 @@
         #quickAccessPanel{
             background-color:var(--body_background);
             position:absolute;
-            top:28px;
-            right:4px;
+            bottom:calc(36px + 1em);
+            left:55px;
             z-index:114;
             width:300px;
+            border-radius: 6px;
             max-height: calc(100% - 100px);
             overflow-y: auto;
             scrollbar-width: thin;
-            border-radius: 10px;
-            border-top-right-radius: 0px;
-            border-top-left-radius: 0px;
             border: 1px solid #ebebeb;
             padding-top:8px;
             padding-bottom:8px;
@@ -1095,15 +1096,16 @@
 
     <!-- Navigation Menu-->
     <div id="navimenu" class="navimenu themeColor">
-        <div class="item clickable system" onclick="toggleListMenu();" ontouchstart="toggleListMenu();" >
+        <div class="item clickable system" onclick="toggleListMenu();" ontouchstart="toggleListMenu();" style="margin-right: 0.5em;">
             <img style="height:36px;" src="img/desktop/system_icon/list.png"></img>
         </div>
-        <div class="item clickable system" style="padding-top: 0.5em; padding-right: 1.3em;">
-            <span class="hostname">Welcome</span>
-        </div>
-        <div class="item clickable system" onclick="showToolPanel();" ontouchend="showToolPanel();">
+        <div class="item clickable system" onclick="showToolPanel();" ontouchend="showToolPanel();" style="border-left: 1px solid rgba(207, 207, 207, 0.37)">
             <img style="height:36px;" src="img/desktop/system_icon/navi.png"></img>
         </div>
+        <div class="item system" style="padding-top: 0.5em; padding-right: 1.3em; color: white; pointer-events: none;">
+            <span class="hostname">Welcome</span>
+        </div>
+     
 
         <!-- Right fixed buttons-->
         <div id="backgroundtaskBtn" class="item backgroundtasks clickable system" onclick="showBackgroundTaskPanel()" ontouchstart="showBackgroundTaskPanel();">
@@ -1129,7 +1131,7 @@
     <div id="listMenu" class="" style="display:none;">
         <div class="searchBar" onkeydown="searchModule(event);">
             <div class="ui icon fluid input" style="border-radius: 0px !important;">
-                <input id="searchBar" type="text" placeholder="Search" style="border-radius: 0px !important; border: 0px solid transparent;">
+                <input id="searchBar" type="text" placeholder="Search" style="border: 0px solid transparent;">
                 <i class="search icon"></i>
             </div>
         </div>
@@ -1182,7 +1184,7 @@
     </div>
 
     <!-- Background Task Panel -->
-    <div id="backgroundTaskPanel" class="" style="display:;">
+    <div id="backgroundTaskPanel" class="" style="display:none;">
         <!--
         <div class="backgroundtaskObject">
             <small>src > dest (test.mp4)</small>
@@ -1649,10 +1651,13 @@
         }
 
         function showToolPanel(){
-            $("#quickAccessPanel").slideToggle("fast");
+            if (listMenuShown = true){
+                hideListMenu();
+            }
+            $("#quickAccessPanel").fadeIn("fast");
         }
         function hideToolPanel(){
-            $("#quickAccessPanel").slideUp("fast");
+            $("#quickAccessPanel").fadeOut("fast");
         }
 
         function initStartupSounds(){
@@ -1774,13 +1779,12 @@
         // ===================== LIST MENU EVENTS FUNCTIONS ===============
 
         function toggleListMenu() {
-            $("#listMenu").stop().finish().animate({
-                height: "toggle"
-            }, 300, function() {
-                if ($("#listMenu").offset().top == 0) {
-                    listMenuShown = false;
-                } else {
+            hideToolPanel()
+            $("#listMenu").fadeToggle("fast", function(){
+                if ($("#listMenu").is(":visible")) {
                     listMenuShown = true;
+                } else {
+                    listMenuShown = false;
                 }
             });
         }
@@ -1797,9 +1801,7 @@
 
         function hideListMenu() {
             if (listMenuShown) {
-                $("#listMenu").animate({
-                    height: "hide"
-                }, 300);
+                $("#listMenu").fadeOut("fast");
                 listMenuShown = false;
             }
         }
@@ -6525,7 +6527,7 @@
         function hideAllContextMenus() {
             $("#subcontextmenu").hide();
             $("#contextmenu").hide()
-            $("#quickAccessPanel").slideUp("fast");
+            $("#quickAccessPanel").fadeOut("fast");
             $("#backgroundTaskPanel").slideUp("fast");
         }