UI: Clear code and change style

ui-ngx/src/app/modules/home/components/home-components.module.ts

@@ -173,7 +173,6 @@ import { RateLimitsDetailsDialogComponent } from '@home/components/profile/tenan
 import { AssetProfileComponent } from '@home/components/profile/asset-profile.component';
 import { AssetProfileDialogComponent } from '@home/components/profile/asset-profile-dialog.component';
 import { AssetProfileAutocompleteComponent } from '@home/components/profile/asset-profile-autocomplete.component';
-import { DragDropModule } from '@angular/cdk/drag-drop';
 
 @NgModule({
   declarations:
@@ -322,7 +321,6 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
   imports: [
     CommonModule,
     SharedModule,
-    DragDropModule,
     SharedHomeComponentsModule,
     WidgetSettingsModule,
     Lwm2mProfileComponentsModule,
@@ -455,8 +453,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
     RateLimitsListComponent,
     RateLimitsComponent,
     RateLimitsTextComponent,
-    RateLimitsDetailsDialogComponent,
+    RateLimitsDetailsDialogComponent
-    DragDropModule
   ],
   providers: [
     WidgetComponentService,

ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html

@@ -59,36 +59,49 @@
       </div>
     </mat-toolbar>
     <div fxFlex class="table-container">
-      <table mat-table [dataSource]="dataSource"
+      <table mat-table
+             [dataSource]="dataSource"
              matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear
-             cdkDropList [cdkDropListData]="dataSource" (cdkDropListDropped)="dropAction($event)">
+             cdkDropList cdkDropListOrientation="vertical"
+             [cdkDropListData]="dataSource"
+             (cdkDropListDropped)="dropAction($event)"
+             [cdkDropListDisabled]="dragDisabled"
+             class="tb-drop-list">
         <ng-container matColumnDef="actionSourceId">
-          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40px"> {{ 'widget-config.action-source-order' | translate }} </mat-header-cell>
+          <mat-header-cell *matHeaderCellDef style="width: 36px"></mat-header-cell>
           <mat-cell *matCellDef="let action">
-            <mat-icon cdkDragHandle>reorder</mat-icon>
+            <div cdkDragHandle
+                 class="tb-drag-handle"
+                 style="min-width: 36px"
+                 (mousedown)="dragDisabled = false"
+                 (mouseup)="dragDisabled = true"
+                 matTooltip="{{ 'action.drag' | translate }}"
+                 matTooltipPosition="above">
+              <mat-icon>drag_handle</mat-icon>
+            </div>
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="actionSourceName">
           <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 20%"> {{ 'widget-config.action-source' | translate }} </mat-header-cell>
-          <mat-cell *matCellDef="let action">
+          <mat-cell *matCellDef="let action" style="width: 20%">
             {{ action.actionSourceName }}
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="name">
           <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%"> {{ 'widget-config.action-name' | translate }} </mat-header-cell>
-          <mat-cell *matCellDef="let action">
+          <mat-cell *matCellDef="let action" style="width: 30%">
             {{ action.name }}
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="icon">
-          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40px"> {{ 'widget-config.action-icon' | translate }} </mat-header-cell>
+          <mat-header-cell *matHeaderCellDef style="width: 40px"> {{ 'widget-config.action-icon' | translate }} </mat-header-cell>
-          <mat-cell *matCellDef="let action">
+          <mat-cell *matCellDef="let action" style="width: 40px">
             <mat-icon>{{ action.icon }}</mat-icon>
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="typeName">
           <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 50%"> {{ 'widget-config.action-type' | translate }} </mat-header-cell>
-          <mat-cell *matCellDef="let action">
+          <mat-cell *matCellDef="let action" style="width: 50%">
             {{ action.typeName }}
           </mat-cell>
         </ng-container>
@@ -114,8 +127,8 @@
             </div>
           </mat-cell>
         </ng-container>
-        <mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+        <mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-        <mat-row [ngClass]="{'mat-row-select': true}"
+        <mat-row class="mat-row-select tb-draggable"
                  *matRowDef="let action; columns: displayedColumns;"
                  cdkDrag [cdkDragData]="action"></mat-row>
       </table>

ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.scss

@@ -41,4 +41,17 @@
   .mat-sort-header-sorted .mat-sort-header-arrow {
     opacity: 1 !important;
   }
+
+  .tb-draggable {
+    &.cdk-drag-placeholder {
+      opacity: 0;
+    }
+    &.cdk-drag-preview {
+      box-sizing: border-box;
+      border-radius: 4px;
+      box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+      0 8px 10px 1px rgba(0, 0, 0, 0.14),
+      0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    }
+  }
 }

ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts

@@ -54,7 +54,7 @@ import {
 import { deepClone } from '@core/utils';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { hidePageSizePixelValue } from '@shared/models/constants';
-import {CdkDragDrop, moveItemInArray, CdkDragHandle} from '@angular/cdk/drag-drop';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 
 @Component({
   selector: 'tb-manage-widget-actions',
@@ -86,6 +86,7 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
 
   viewsInited = false;
   dirtyValue = false;
+  dragDisabled = true;
 
   private widgetResize$: ResizeObserver;
 
@@ -164,7 +165,8 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
     this.dataSource.loadActions(this.pageLink, reload);
   }
 
-  dropAction(event: CdkDragDrop<WidgetActionDescriptorInfo[]>) {
+  dropAction(event: CdkDragDrop<WidgetActionsDatasource>) {
+    this.dragDisabled = true;
     const droppedAction = event.item.data;
     this.dataSource.getAllActions().subscribe(
       (actions) => {
@@ -183,7 +185,7 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
         }
 
         const targetActions = this.getOrCreateTargetActions(droppedAction.actionSourceId);
-        let oldIndex: number = -1;
+        let oldIndex = -1;
         let newIndex: number = nearestNeighbourAction ? -1 : (isBackward ? targetActions.length - 1 : 0);
 
         for (let i: number = isBackward ? targetActions.length - 1 : 0;

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -3686,7 +3686,6 @@
         "add-action": "Add action",
         "search-actions": "Search actions",
         "no-actions-text": "No actions found",
-        "action-source-order": "Order",
         "action-source": "Action source",
         "action-source-required": "Action source is required.",
         "action-name": "Name",