Added dynamic row resize indicator

packages/qgrid-ngx-theme-material/src/lib/templates/body-cell-row-indicator.tpl.html

@@ -10,10 +10,11 @@
 	</ng-container>
 	<ng-container *ngIf="$view.row.canResize">
 		<div [q-grid-drag]="$view.row.resize"
-			 [q-grid-resize]="$cell.row"
-			 q-grid-resize-selector="parent"
+				 [q-grid-resize]="$cell.row"
+			 	 q-grid-resize-selector="parent"
 		     q-grid-resize-path="rows"
 		     [q-grid-can-resize]="$view.row.resize.canExecute">
+				 <mat-icon class="q-grid-icon q-grid-row-resize-indicator" style="display: none;">unfold_more</mat-icon>
 		</div>
 	</ng-container>
 </ng-template>

packages/qgrid-ngx/src/lib/row/row.component.ts

@@ -52,7 +52,7 @@ export class RowComponent implements OnChanges, OnInit {
 	}
 
 	ngOnInit() {
-		const { model, observe } = this.plugin;
+		const { model, observe, table } = this.plugin;
 
 		if (this.behavior.indexOf('expandOnShortcut') >= 0) {
 			observe(model.keyboardChanged)
@@ -90,6 +90,29 @@ export class RowComponent implements OnChanges, OnInit {
 					});
 			}
 		}
+
+		observe(model.highlightChanged)
+			.subscribe(e => {
+				if (e.changes.cell?.oldValue && e.changes.cell?.newValue && e.changes.cell.oldValue.rowIndex !== e.changes.cell.newValue.rowIndex){
+					const previousRow = table.body.row(e.changes.cell.oldValue.rowIndex);
+					const newRow = table.body.row(e.changes.cell.newValue.rowIndex);
+
+					previousRow.removeClass('q-grid-row-size-handler');
+					newRow.addClass('q-grid-row-size-handler');
+				}
+		});
+
+		observe(model.mouseChanged)
+			.subscribe(e => {
+				if(e.changes.status?.newValue === 'leave' && e.state.status === 'leave') {
+					const indicators = document.getElementsByClassName('q-grid-row-size-handler') as HTMLCollectionOf<HTMLElement>;
+					if(indicators.length > 0) {
+						for(let i = 0; i < indicators.length; i++) {
+							indicators[i].classList.remove('q-grid-row-size-handler');
+						}
+					}
+				}
+		});
 	}
 
 	ngOnChanges() {

packages/qgrid-styles/focus.scss

@@ -7,6 +7,15 @@ td.q-grid-focused {
     }
 }
 
+.q-grid-row-size-handler {
+	.q-grid-row-resize-indicator {
+		display: block!important;
+		margin-top: 16px;
+		position: absolute;
+		bottom: 0;
+	}
+}
+
 .q-grid-view.q-grid-active {
     td.q-grid-focused {
         outline-color: $blue-outline025;