Moved notification to bottom

web/desktop.system

@@ -274,8 +274,7 @@
             color: white;
             font-size: 0.9em;
             line-height: 1.3em;
-            pointer-events: none;
-            padding-top: 2px;
+            padding-top: 1px;
             padding-right: 0.5em;
             padding-left: 0.5em;
         }
@@ -639,12 +638,12 @@
         }
 
         .notificationbar .content{
-            position: relative;
+            position: fixed;
             background-color:white;
             margin-top:6px;
-            margin-left: auto;
-            margin-right: auto;
             width:30%;
+            right: 1em;
+            bottom: calc(36px + 1em);
             min-width:650px;
             height:400px;
             padding: 3px;
@@ -664,10 +663,11 @@
         }
 
         .notificationbar .cover{
-            backdrop-filter: blur(2px);
-            -webkit-backdrop-filter: blur(2px);
+            backdrop-filter: blur(0.5px);
+            -webkit-backdrop-filter: blur(0.5px);
+            background-color: rgba(0,0,0,0.15);
             position:fixed;
-            top:28px;
+            top:0;
             left:0;
             width:100%;
             height: calc(100%);
@@ -1061,23 +1061,7 @@
     <div id="bgwrapper" class="background-wrapper" allowdrop="true" ondrop="drop(event)" ondragstart="return false;" onclick="event.preventDefault(); hideAllContextMenus();" ondblclick="event.preventDefault();event.stopImmediatePropagation();" ondragover="allowDrop(event);"
         align="center" draggable="false">
     </div>
-    <!-- Top Status Bar -->
-    <div id="statusbar">
-        <div class="hostname statusbarpadding">
-            Welcome
-        </div>
-        <div class=" statusbarpadding" onclick="toggleNotification();" ontouchstart="toggleNotification();">
-            ArozOS Desktop
-        </div>
-        <div class="quicktools statusbarpadding">
-            <div class="qtwrapper backgroundtask" >
-                
-            </div>
-            <div class="qtwrapper content" onclick="showToolPanel();" ontouchend="showToolPanel();" style="margin-right: 0.4em;">
-                <i class="content icon"></i>
-            </div>
-        </div>
-    </div>
+
     <!-- Calendar and Notification -->
     <div class="notificationbar" style="display:none;">        
         <div class="cover" onclick='toggleNotification("hide");' ontouchstart='toggleNotification("hide");'></div>
@@ -1114,7 +1098,10 @@
         <div class="item clickable system" onclick="toggleListMenu();" ontouchstart="toggleListMenu();" >
             <img style="height:36px;" src="img/desktop/system_icon/list.png"></img>
         </div>
-        <div class="item clickable system">
+        <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();">
             <img style="height:36px;" src="img/desktop/system_icon/navi.png"></img>
         </div>
 
@@ -1122,7 +1109,7 @@
         <div id="backgroundtaskBtn" class="item backgroundtasks clickable system" onclick="showBackgroundTaskPanel()" ontouchstart="showBackgroundTaskPanel();">
             <i class="clone icon"></i>
         </div>
-        <div class="item clock system">
+        <div class="item clock clickable system"  onclick="toggleNotification();" ontouchstart="toggleNotification();">
 
         </div>
         
@@ -1315,7 +1302,7 @@
         var iconSize = []; //Defined the icon size for the desktop icons
         var desktopFileList = []; //Temperature storage of desktop filenames
         var startDragRelatuve = []; //Relative location of where the icon being start dragging
-        var iconOffsetXY = [0,20];  //Pixel to offset for the icon location
+        var iconOffsetXY = [-10,-10];  //Pixel to offset for the icon location
 
         //Float window related
         var focusedWindow;
@@ -1771,56 +1758,15 @@
         }
 
         function toggleNotification(action=undefined){
-            var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
             if (typeof action == "undefined"){
                 $(".notificationbar").stop().finish().fadeToggle("fast", function(){
-                    /*
-                    //Firefox 103 now support backdrop-filter
-                    if ($(this).is(":visible")){
-                        if (isFirefox){
-                            $("#bgwrapper").addClass("blured");
-                            $("#iconwrapper").addClass("blured");
-                            $("#navimenu").addClass("blured");
-                            $(".floatWindow").addClass("blured");
-                            $("#listMenu").addClass("blured");
-                        }
-                    }else{
-                        if (isFirefox){
-                            $("#bgwrapper").removeClass("blured");
-                            $("#iconwrapper").removeClass("blured");
-                            $("#navimenu").removeClass("blured");
-                            $(".floatWindow").removeClass("blured");
-                            $("#listMenu").removeClass("blured");
-                        }
-                    }
-                    */
+                  
                 });
             }else{
                 if (action == "hide"){
                     $(".notificationbar").stop().finish().fadeOut("fast");
-                     /*
-                    //Firefox 103 now support backdrop-filter
-                    if (isFirefox){
-                        $("#bgwrapper").removeClass("blured");
-                        $("#iconwrapper").removeClass("blured");
-                        $("#navimenu").removeClass("blured");
-                        $(".floatWindow").removeClass("blured");
-                        $("#listMenu").removeClass("blured");
-                    }
-                    */
-                  
                 }else if (action == "show"){
                     $(".notificationbar").stop().finish().fadeIn("fast");
-                    /*
-                    //Firefox 103 now support backdrop-filter
-                    if (isFirefox){
-                        $("#bgwrapper").addClass("blured");
-                        $("#iconwrapper").addClass("blured");
-                        $("#navimenu").addClass("blured");
-                        $(".floatWindow").addClass("blured");
-                        $("#listMenu").addClass("blured");
-                    }
-                    */
                 }
             }
         }