Merge branch 'feature-62450/Drag_Drop_Dashboard_Chrome'

public/css/components/dashboard.css

@@ -203,3 +203,14 @@
 	}
 
 }
+
+.hiddenWidget{
+	background: var(--fhc-disabled-background);
+	opacity: 40%;
+}
+
+.hiddenWidget .card,
+.hiddenWidget .card-body,
+.hiddenWidget .card-body *{
+	background: inherit !important;
+}

public/css/theme/default.css

@@ -89,7 +89,8 @@
 	--fhc-link: var(--fhc-blue-10);
 
 	/* disabled */
-	--fhc-disabled: var(--fhc-gray-10);
+	--fhc-disabled: var(--fhc-gray-90);
+	--fhc-disabled-background: var(--fhc-gray-30);
 
 	/* status colors */
 	--fhc-danger: var(--fhc-red-10);
@@ -135,6 +136,7 @@
 
 	/* disabled */
 	--fhc-disabled: var(--fhc-gray-10);
+	--fhc-disabled-background: var(--fhc-gray-120);
 
 	/* status colors */
 	--fhc-danger: var(--fhc-red-10);

public/js/components/Dashboard/Item.js

@@ -156,7 +156,7 @@ export default {
 			<i class="fa-solid fa-spinner fa-pulse fa-3x"></i>
 		</div>
 	</div>
-	<div v-else-if="!hidden || editMode" :id="widgetID" class="dashboard-item card overflow-hidden h-100 position-relative" :class="{'draggedItem':dragstate, 'dashboard-item-overlay':resizeOverlay, [arguments?.className]:arguments && arguments.className}">
+	<div v-else-if="!hidden || editMode" :id="widgetID" class="dashboard-item card overflow-hidden h-100 position-relative" :class="{'hiddenWidget':hidden, 'draggedItem':dragstate, 'dashboard-item-overlay':resizeOverlay, [arguments?.className]:arguments && arguments.className}">
 	<div v-show="!dragstate" class="h-100 card border-0">
 		<div v-if="widget" class="card-header d-flex ps-0 pe-2 align-items-center">
 			<Transition>

public/js/components/DashboardWidget/Url.js

@@ -159,7 +159,7 @@ export default {
 		// this.$emit('setConfig', true); -> use this to enable widget config mode if needed
 	},
 	template: /*html*/ `
-    <div class="widgets-url w-100 h-100 overflow-scroll" style="padding: 1rem 1rem;">
+    <div class="widgets-url w-100 h-100 overflow-auto" style="padding: 1rem 1rem;">
         <div class="d-flex flex-column justify-content-between">
         	<button class="btn btn-outline-secondary btn-sm w-100 mt-2 card" @click="openCreateModal" type="button">{{$p.t('bookmark','newLink')}}</button>
 

public/js/components/Drop/Grid.js

@@ -274,8 +274,23 @@ export default {
 		dragging(event){
 			if(this.mode == MODE_MOVE){
 				this.toggleDraggedItemOverlay(true);
-				this.clonedWidget.style.top = `${this.clientY-20}px`;
-				this.clonedWidget.style.left = `${this.clientX-15}px`;
+				
+				const containerRect = this.$refs.container.getBoundingClientRect();
+				const clonedWidgetRect = this.clonedWidget.getBoundingClientRect();
+				
+				let desiredTop = this.clientY - 20;
+				let desiredLeft = this.clientX - 15;
+				
+				const minTop = 0;
+				const maxTop = containerRect.height - clonedWidgetRect.height;
+				const minLeft = 0;
+				const maxLeft = containerRect.width - clonedWidgetRect.width;
+				
+				const constrainedTop = Math.max(minTop, Math.min(maxTop, desiredTop));
+				const constrainedLeft = Math.max(minLeft, Math.min(maxLeft, desiredLeft));
+				
+				this.clonedWidget.style.top = `${constrainedTop}px`;
+				this.clonedWidget.style.left = `${constrainedLeft}px`;
 			}
 		},
 		createNewGrid(items) {
@@ -413,11 +428,14 @@ export default {
 			setTimeout(() => {
 				this.draggedNode = evt.target.closest(".drop-grid-item");
 				//clones the widget for the drag Image
+				
 				let clone = evt.target.closest(".drop-grid-item")?.cloneNode(true);
 
 				clone.style.zIndex = 5;
 				clone.classList.add("widgetClone");
 				this.$refs.container.appendChild(clone);
+				const hiddenWidget = clone.querySelector("[style='display: none;']");
+				hiddenWidget.style.removeProperty("display");
 				this.clonedWidget = clone;
 			}, 0);
 
@@ -434,12 +452,9 @@ export default {
 		},
 		dragOver(evt) {
 			if ((this.y + 1) > this.rows && (this.mode == MODE_MOVE || this.mode == MODE_RESIZE)) {
-				this.positionUpdates = this.positionUpdates?.filter(item => {
-					return item.widgetid == this.draggedItem.data.widgetid;
-				})
-				this.dragEnd();
 				this.dragCancel();
-			} 
+				
+			}
 			if (!this.active)
 				return this.dragCancel();
 			this.checkPinnedWidgetAnimation();
@@ -454,17 +469,17 @@ export default {
 						let x = this.x + this.draggedOffset[0];
 						let y = this.y + this.draggedOffset[1];
 						if (x < 0) {
-							this.draggedOffset[0] -= x;
+							this.draggedOffset[0] += x;
 							x = 0;
 						} else if (x + this.draggedItem.w > this.cols) {
 							this.draggedOffset[0] += this.cols - this.draggedItem.w - x;
 							x = this.cols - this.draggedItem.w;
 						}
 						if (y < 0) {
-							this.draggedOffset[1] -= y;
+							this.draggedOffset[1] += y;
 							y = 0;
 						}
-						this.positionUpdates = this.dragGrid.move(this.draggedItem, x, y);
+						this.positionUpdates= this.dragGrid.move(this.draggedItem, x, y);
 						break;
 					}
 					case MODE_RESIZE: {
@@ -481,6 +496,7 @@ export default {
 			}
 		},
 		dragCancel() {
+			this.removeWidgetClones();
 			this.additionalRowComputed = false;
 			this.toggleDraggedItemOverlay(false);
 			this.mode = MODE_IDLE;
@@ -492,8 +508,12 @@ export default {
 			
 		},
 		dragEnd() {
-			if (this.mode == MODE_IDLE)
+			this.removeWidgetClones();
+			this.toggleDraggedItemOverlay(false);
+			
+			if (this.mode == MODE_IDLE){
 				return;
+			}
 			// clean up unused classes
 			let draggedItemNode = document.getElementById(this.draggedItem.data.widgetid);
 			draggedItemNode.classList.remove("border-danger");
@@ -501,19 +521,19 @@ export default {
 				ele.classList.remove("denied-dragging-animation");
 			})
 			
-			let widgetClones = document.getElementsByClassName("widgetClone");
-			for (let i=0; i <widgetClones.length; i++){ 
-				this.$refs.container.removeChild(widgetClones[i]);
-			}
-			
-			if (!this.active || this.x < 0 || this.y < 0 || this.x >= this.cols)
-				return this.dragCancel();
+			//if (!this.active || this.x < 0 || this.y < 0 || this.x >= this.cols)
+				//return this.dragCancel();
+
 			this.mode = MODE_IDLE;
 			let updated = [];
 			this.convertGridResultToUpdate(this.positionUpdates, updated);
 			updated = this._updateFixedPositions(updated);
 			if (updated.length)
 				this.$emit('rearrangeItems', updated.filter(v => v));
+
+			this.draggedItem = null;
+			this.draggedNode = null;
+			this.$emit('draggedItem', null);
 		},
 		_updateFixedPositions(updated) {
 			updated.forEach((item, index) => {
@@ -597,6 +617,12 @@ export default {
 				draggedItemNode.classList.remove("border-danger");
 			}
 		},
+		removeWidgetClones(){
+			let widgetClones = Array.from(document.getElementsByClassName("widgetClone"));
+			for (let i = 0; i < widgetClones.length; i++) {
+				this.$refs.container.removeChild(widgetClones[i]);
+			}
+		},
 		mouseDown(){
 			this.mode = MODE_MOUSE_DOWN;
 		},
@@ -612,7 +638,7 @@ export default {
 		@touchmove="dragOver"
 		@touchend="dragCancel"
 		@dragover.prevent="dragOver"
-		@drop="dragEnd"
+		@drop="dragEnd($event)"
 		@mousemove="updateCursorOnMouseMove"
 		@mouseleave="mouseLeave">
 		<TransitionGroup tag="div">
@@ -626,7 +652,7 @@ export default {
 				@mouse-up="mouseUp"
 				@start-resize="startResize"
 				@dragging="dragging"
-				@end-drag="dragCancel"
+				@end-drag="dragEnd"
 				@touch-end="dragEnd();mouseUp();"
 				@touch-start="updateCursorOnMouseMove($event); mouseDown();"
 				class="position-absolute"

public/js/composables/GridLogic.js

@@ -116,7 +116,7 @@ class GridLogic {
 				prefer = DIR_RIGHT;
 		}
 
-		const originalFrame = [...item.frame];
+		const originalFrame = Array.isArray(item.frame) ? [...item.frame] : [item.frame];
 
 		const currItem = {...item};
 		currItem.x = x;
@@ -146,6 +146,7 @@ class GridLogic {
 				}
 			}
 			replaceUpdate[item.index] = { index: item.index, x, y };
+			
 			return replaceUpdate;
 		}