feat: use only 6 dots icon as a drag handle for table menu

Using not the entire menu entry fixes scrolling with fingers on mobile devices, when you have a small screen and many menu items.
Maxl94 · Feb 20, 2024 · 9aba71e · 9aba71e
1 parent d64398b
commit 9aba71e
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/src/lib/mat-multi-sort-table-settings/mat-multi-sort-table-settings.component.html b/src/lib/mat-multi-sort-table-settings/mat-multi-sort-table-settings.component.html
@@ -27,7 +27,7 @@
 <ng-template #templateRef>
   <div cdkDropList class="column-list" (cdkDropListDropped)="drop($event)">
     <div class="column-item" *ngFor="let column of _tableData.columns" cdkDrag>
-      <mat-icon>drag_indicator</mat-icon>
+      <mat-icon cdkDragHandle>drag_indicator</mat-icon>
       <mat-checkbox [(ngModel)]="column.isActive" (change)="toggle()">{{column.name}}</mat-checkbox>
     </div>
   </div>

diff --git a/src/lib/mat-multi-sort-table-settings/mat-multi-sort-table-settings.component.scss b/src/lib/mat-multi-sort-table-settings/mat-multi-sort-table-settings.component.scss
@@ -75,8 +75,8 @@
   }
 }
 
-.column-item:hover {
-  cursor: move;
+.column-item > mat-icon:hover {
+  cursor: grab;
   border-top: solid 1px rgba(0, 0, 0, .12);
   border-bottom: solid 1px rgba(0, 0, 0, .12);
 }