refactor(Dashboard additional row): changes the UI and behavior to add an additional row to the grid

public/css/components/dashboard.css

@@ -18,6 +18,22 @@
 	position:relative;
 }
 
+.dashboard-section > .newGridRow{
+	position:absolute;
+	width:20px;
+	height:20px;
+	padding:0;
+	bottom:0;
+	left:50%;
+	transform:translate(-50%, 50%);
+	background-color:white;
+}
+
+.newGridRow:hover {
+	color:white;
+	background-color:#6c757d;
+}
+
 .empty-tile-hover:hover {
 		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-500 -500 1448 1512"><path fill="rgb(211, 211, 211)" d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM200 344V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V168c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H248v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"/></svg>');
 }

public/js/components/Dashboard/Item.js

@@ -42,7 +42,8 @@ export default {
 		"place",
 		"setup",
 		"dragstate",
-		"resizeOverlay"
+		"resizeOverlay",
+		"additionalRow"
 	],
 	computed: {
 		maxHeight(){

public/js/components/Dashboard/Section.js

@@ -41,6 +41,7 @@ export default {
 			gridWidth: 1,
 			gridHeight: null,
 			draggedItem:null,
+			additionalRow:false,
 		}
 	},
 	provide() {
@@ -214,7 +215,8 @@ export default {
 		{{sectionNameTranslation()}}:
 	</h4>
 	<div class="dashboard-section position-relative pb-3 border-bottom" ref="container" :style="getSectionStyle">
-		<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" >
+		<button v-if="!additionalRow && editModeIsActive" @click="additionalRow=true" class="btn btn-outline-secondary rounded-circle newGridRow d-flex justify-content-center align-items-center">+</button>
+		<drop-grid v-model:cols="gridWidth" v-model:additionalRow="additionalRow" :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>
 				<dashboard-item 

public/js/components/Drop/Grid.js

@@ -26,6 +26,10 @@ export default {
 			type: Number,
 			default: 0
 		},
+		additionalRow:{
+			type: Boolean,
+			default: false,
+		}
 	},
 	emits: [
 		"rearrangeItems",
@@ -48,7 +52,6 @@ export default {
 			draggedOffset: [0,0],
 			draggedItem: null,
 			draggedNode: null,
-			additionalRow: null,
 			reorderedItems:[],
 			clonedWidget:null,
 		}
@@ -60,6 +63,14 @@ export default {
 		},
 	},
 	computed: {
+		additionalRowComputed: {
+			get() {
+				return this.additionalRow;
+			},
+			set(value) {
+				this.$emit('update:additionalRow', value);
+			}
+		},
 		items_hashmap() {
 			let items = {};
 			this.items.forEach(item => {
@@ -120,6 +131,11 @@ export default {
 			if ((this.mode == MODE_MOVE || this.mode == MODE_RESIZE) && this.dragGrid){
 				return this.dragGrid.h;
 			}
+			if (this.mode == MODE_IDLE) {
+				if (this.additionalRowComputed) {
+					return this.grid ? (this.grid.h+1) : 1;
+				}
+			}
 			return this.grid ? this.grid.h : 1;
 		},
 		gridStyle() {
@@ -350,13 +366,8 @@ export default {
 			if (this.mode == MODE_IDLE) {
 				this.x = -1;
 				this.y = -1;
-				if (this.additionalRow !== null) {
-					let gridHeight = this.grid.getMaxY() + 1;
-					if(this.grid.h>gridHeight){
-						this.grid.h = gridHeight;
-					}
-					this.additionalRow = null;
-				}
+				this.additionalRowComputed = false;
+				
 			}
 		},
 		updateCursor(evt) {
@@ -380,18 +391,6 @@ export default {
 			if (this.x == gridX && this.y == gridY)
 				return false;
 			
-			if (this.mode == MODE_IDLE) {
-				if (this.additionalRow === null && this.y == this.rows-1 && gridY == this.rows) {
-					this.additionalRow = this.grid.h;
-					this.grid.h += 1;
-				} else if (this.additionalRow !== null && gridY != this.rows - 1) {
-					let gridHeight = this.grid.getMaxY() + 1;
-					if(this.grid.h > gridHeight){
-						this.grid.h = gridHeight;
-					}
-					this.additionalRow = null;
-				}
-			}
 			this.x = gridX;
 			this.y = gridY;
 
@@ -482,6 +481,7 @@ export default {
 			}
 		},
 		dragCancel() {
+			this.additionalRowComputed = false;
 			this.toggleDraggedItemOverlay(false);
 			this.mode = MODE_IDLE;
 			this.positionUpdates = null;
@@ -531,6 +531,7 @@ export default {
 			return updated;
 		},
 		emptyTileClicked() {
+			this.additionalRowComputed = false;
 			this.$emit('newItem', this.x, this.y);
 		},
 		updateCursorOnMouseMove(evt){