Added left right docking indicator

web/desktop.system

@@ -286,8 +286,33 @@
             padding-right: 0.5em;
             padding-left: 0.7em;
         }
-        
-        #fwdragpanel {
+
+        /* Float window docking indicator */
+        .dockIndicator{
+            position: fixed;
+            width: calc(50% - 0.4em);
+            height: calc(100vh - 0.4em);
+            border-radius: 6px;
+            pointer-events: none;
+            user-select: none;
+            z-index: 100;
+            background-color: rgba(255,255,255,0.1);
+            border: 1px solid rgba(182, 182, 182, 0.37);
+            backdrop-filter: blur(0.5px);
+            display:none;
+        }
+        #fwdockLeftIndicator{
+            left: 0.4em;
+            top:  0.4em;
+        }
+
+        #fwdockRightIndicator{
+            right: 0.4em;
+            top: 0.4em;
+        }
+
+        /* Float window dragging plane */
+        #fwdragpanel{
             position: fixed;
             width: 100%;
             height: 100%;
@@ -1117,6 +1142,9 @@
         
     </div>
 
+    <!--- floatWindow dock left/right indicator -->
+    <div id="fwdockLeftIndicator" class="dockIndicator"></div>
+    <div id="fwdockRightIndicator"  class="dockIndicator"></div>
     <!-- floatWindow dragging panel-->
     <div id="fwdragpanel"></div>
     <div id="tfwdragpanel"></div>
@@ -2591,6 +2619,20 @@
                     $(object).find(".dockleft").removeClass("disabled");
                 }
 
+                if (event.pageX < 20) {
+                    //Show dock to left indicator
+                    $("#fwdockLeftIndicator").show();
+                    $("#fwdockRightIndicator").hide();
+                } else if (event.pageX > window.innerWidth - 20) {
+                    //Show dock to right indicator
+                    $("#fwdockLeftIndicator").hide();
+                    $("#fwdockRightIndicator").show();
+                }else{
+                    //hide both indicator
+                    $("#fwdockRightIndicator").hide();
+                    $("#fwdockLeftIndicator").hide();
+                }
+
                 $(object).css("left", event.pageX - clickDownOffset[0]);
                 $(object).css("top", event.pageY - clickDownOffset[1]);
             } else if (resizingWindow && resizingEdgeID == 6){
@@ -2647,13 +2689,16 @@
                 //Check if the window location is drag to the edge of the screen. If yes, toggle half screen fullscreen
                 //Not need to check for if max because it must be minimized during drag move
                 var dockMode = false;
-                if (event.pageX < 10) {
+                if (event.pageX < 20) {
                     //Dock to left
                     dockWindowToLeft(object);
-                } else if (event.pageX > window.innerWidth - 10) {
+                } else if (event.pageX > window.innerWidth - 20) {
                     //Dock to right
                     dockWindowToRight(object);
                 }
+
+                $("#fwdockRightIndicator").hide();
+                $("#fwdockLeftIndicator").hide();
             }else if (resizingWindow && resizingEdgeID == 6){
                 resizeUp($(object), event);
             }
@@ -4169,40 +4214,6 @@
                         locations.push(JSON.parse(JSON.stringify(nextLocation)));
                     }
 
-                    /*
-                    for (var k =0; k < files.length; k++){
-                        var thisLocation = JSON.parse(JSON.stringify(targetGridLocation));
-                        //Add k to y axis of the list.
-                        thisLocation[1] += k;
-                        if (thisLocation[1] >= gridMaxY){
-                                thisLocation[0]++;
-                                thisLocation[1] = thisLocation[1] % gridMaxY;
-                        }
-                        if (thisLocation[1] >= gridMaxY && thisLocation[0] >= gridMaxX){
-                            //Desktop full. Force put to 0 0 
-                            thisLocation[0] = 0;
-                            thisLocation[1] = 0;
-                            break;
-                        }
-                        while (getObjectFromGridLocation(thisLocation[0], thisLocation[1]) !== undefined){
-                            thisLocation[1] += 1;
-                            if (thisLocation[1] >= gridMaxY){
-                                //Over the screen. Shift to the row on the right
-                                thisLocation[0]++;
-                                thisLocation[1] = 0;
-                            }
-
-                            if (thisLocation[1] >= gridMaxY && thisLocation[0] >= gridMaxX){
-                                //Desktop full. Force put to 0 0 
-                                thisLocation[0] = 0;
-                                thisLocation[1] = 0;
-                                break;
-                            }
-                        }
-                        locations.push(thisLocation)
-                    }
-                    */
-
                     console.log(locations, ev.dataTransfer.files);
 
                     //Register file locations