dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Igor Kulikov 2024-09-25 19:28:25 +03:00
parent 5632b07009
commit 6face3fa17
6 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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(),

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

@ -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"

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

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

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

@ -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>

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

@ -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;

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

@ -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);
});