blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-07-20 00:12:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature(Dashboard Grid): adds a red border to the widget if the user tries to resize the widget over its max width/height or under its min width/height

Browse Source
This commit is contained in:
SimonGschnell
2025-04-15 13:55:02 +02:00
parent fc0a09180a
commit 19f169aca2
2 changed files with 48 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/components/Dashboard/Section.js
+1 -1
View File
@@ -193,7 +193,7 @@ export default {
{{name}}:
</h4>
<div class="dashboard-section position-relative pb-3 border-bottom" ref="container" :style="getSectionStyle">
<drop-grid v-model:cols="gridWidth" :items="items" :active="editModeIsActive" :resize-limit="checkResizeLimit" :margin-for-extra-row=".01" @draggedItem="draggedItem=$event" @rearrange-items="updatePositions" @gridHeight="gridHeight=$event" >
<drop-grid v-model:cols="gridWidth" :items="items" :itemsSetup="computedWidgetsSetup" :active="editModeIsActive" :resize-limit="checkResizeLimit" :margin-for-extra-row=".01" @draggedItem="draggedItem=$event" @rearrange-items="updatePositions" @gridHeight="gridHeight=$event" >
<template #default="item">
<div v-if="item.placeholder" class="empty-tile-hover" @click="$emit('widgetAdd', name, { widget: 1, config: {}, place: {[gridWidth]: {x:item.x,y:item.y,w:1,h:1}}, custom: 1 })"></div>
<div v-else-if="item.blank || (item.widgetid && item.widgetid == draggedItem?.data.widgetid)" :class="{'dashboard-item-overlay':item.resizeOverlay}" class="dashboard-item card overflow-hidden h-100 position-relative draggedItem" ></div>
public/js/components/Drop/Grid.js
+47 -4
View File
@@ -16,6 +16,7 @@ export default {
props: {
cols: Number,
items: Array,
itemsSetup: Object,
resizeLimit: Function,
active: {
type: Boolean,
@@ -404,6 +405,7 @@ export default {
this.mode = MODE_MOVE;
this.grid.h += 1;
this.draggedItem = item;
this.$emit('draggedItem',item);
this.draggedNode = evt.target;
@@ -425,9 +427,19 @@ export default {
this._dragStart(evt);
},
dragOver(evt) {
if ((this.y + 1) > this.grid?.h && this.mode == MODE_MOVE) {
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();
if(this.mode == MODE_RESIZE){
this.checkWidgetSizeLimitAnimation();
}
if (this.updateCursor(evt)) {
switch(this.mode) {
case MODE_MOVE: {
@@ -463,7 +475,6 @@ export default {
}
},
dragCancel() {
this.toggleDraggedItemOverlay(false);
this.mode = MODE_IDLE;
this.positionUpdates = null;
@@ -474,12 +485,19 @@ export default {
},
dragEnd() {
if (this.mode == MODE_IDLE)
return;
// clean up unused classes
let draggedItemNode = document.getElementById(this.draggedItem.data.widgetid);
draggedItemNode.classList.remove("border-danger");
Array.from(document.getElementsByClassName("denied-dragging-animation"))?.forEach(ele => {
ele.classList.remove("denied-dragging-animation");
})
let widgetClones = document.getElementsByClassName("widgetClone");
for(let widget of widgetClones){
this.$refs.container.removeChild(widget);
}
if (this.mode == MODE_IDLE)
return;
if (!this.active || this.x < 0 || this.y < 0 || this.x >= this.cols)
return this.dragCancel();
this.mode = MODE_IDLE;
@@ -534,7 +552,7 @@ export default {
Array.from(document.getElementsByClassName("denied-dragging-animation"))?.forEach(ele => {
ele.classList.remove("denied-dragging-animation");
})
itemAtPosition.forEach(item=>{
if (item.place[this.cols] && item.place[this.cols].pinned) {
let pinnedWidget = document.getElementById(item.widgetid);
@@ -545,6 +563,31 @@ export default {
}
})
},
checkWidgetSizeLimitAnimation() {
let draggedItemSetup = this.itemsSetup[this.draggedItem.data.widget];
let draggedItemMaxWidth = draggedItemSetup.width.max ?? draggedItemSetup.width;
let draggedItemMinWidth = draggedItemSetup.width.min ?? draggedItemSetup.width;
let draggedItemMaxHeight = draggedItemSetup.height.max ?? draggedItemSetup.height;
let draggedItemMinHeight = draggedItemSetup.height.min ?? draggedItemSetup.height;
let draggedItemNode = document.getElementById(this.draggedItem.data.widgetid);
let width_after_resize = this.x - this.draggedItem.x + 1;
let height_after_resize = this.y - this.draggedItem.y + 1;
if(
(width_after_resize > 0 && (width_after_resize > draggedItemMaxWidth
|| width_after_resize < draggedItemMinWidth)
)
||
(height_after_resize > 0 && (height_after_resize > draggedItemMaxHeight
|| height_after_resize < draggedItemMinHeight)
)
){
draggedItemNode.classList.add("border-danger");
}else{
draggedItemNode.classList.remove("border-danger");
}
},
mouseDown(){
this.mode = MODE_MOUSE_DOWN;
},