UI: Fix touch event handling in dashboard edit mode. Disable pointer events in edit mode for some widgets.

ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts

@@ -252,6 +252,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
       },
       draggable: {
         enabled: this.isEdit && !this.isEditingWidget,
+        delayStart: 100,
         stop: (_, itemComponent) => {(itemComponent.item as DashboardWidget).updatePosition(itemComponent.$item.x, itemComponent.$item.y);}
       },
       itemChangeCallback: () => this.dashboardWidgets.sortWidgets(),

ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-toggle-button-panel" [style.padding]="padding" [style]="backgroundStyle$ | async">
+<div class="tb-toggle-button-panel" [class.no-pointer-events]="ctx.isEdit" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-toggle-button-overlay" [style]="overlayStyle"></div>
   <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   <div class="tb-toggle-button-container"

ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.scss

@@ -38,6 +38,12 @@
     padding: 0;
   }
 
+  &.no-pointer-events {
+    button {
+      pointer-events: none;
+    }
+  }
+
   .tb-toggle-button-container {
     flex: 1;
     min-width: 0;

ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-slider-panel" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'" [style.padding]="padding" [style]="backgroundStyle$ | async">
+<div class="tb-slider-panel" [class.no-pointer-events]="ctx.isEdit" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-slider-overlay" [style]="overlayStyle"></div>
   <div *ngIf="showWidgetTitlePanel" class="tb-slider-title-panel">
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>

ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.scss

@@ -65,6 +65,13 @@ $backgroundColorDisabled: var(--tb-slider-background-color-disabled, #D5D7E5);
   div.tb-slider-title-panel {
     z-index: 2;
   }
+  &.no-pointer-events {
+    .mat-mdc-slider.tb-slider {
+      .mdc-slider__input {
+        pointer-events: none;
+      }
+    }
+  }
   .tb-slider-content {
     flex: 1;
     min-height: 0;

ui-ngx/src/app/shared/models/jquery-event.models.ts

@@ -37,13 +37,13 @@ export const initCustomJQueryEvents = () => {
           e.stopPropagation();
           timeoutId = setTimeout(() => {
             timeoutId = null;
-            e.stopPropagation();
             const touch = e.originalEvent.changedTouches[0];
             const event = $.Event('tbcontextmenu', {
               clientX: touch.clientX,
               clientY: touch.clientY,
               ctrlKey: false,
-              metaKey: false
+              metaKey: false,
+              originalEvent: e
             });
             el.trigger(event, e);
           }, 500);
@@ -56,13 +56,12 @@ export const initCustomJQueryEvents = () => {
         });
       } else {
         el.on('contextmenu', (e) => {
-          e.preventDefault();
-          e.stopPropagation();
           const event = $.Event('tbcontextmenu', {
             clientX: e.originalEvent.clientX,
             clientY: e.originalEvent.clientY,
             ctrlKey: e.originalEvent.ctrlKey,
             metaKey: e.originalEvent.metaKey,
+            originalEvent: e
           });
           el.trigger(event, e);
         });