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

UI: Move drag icon button to first column of table

Browse Source
This commit is contained in:
ArtemDzhereleiko 2025-10-06 16:46:54 +03:00
parent a813cf403e
commit 7609722b30
3 changed files with 27 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-zone-grups-table/calculated-field-geofencing-zone-groups-table.component.ts
View File

@ -168,7 +168,7 @@ export class CalculatedFieldGeofencingZoneGroupsTableComponent implements Contro
renderer: this.renderer, renderer: this.renderer,
componentType: CalculatedFieldGeofencingZoneGroupsPanelComponent, componentType: CalculatedFieldGeofencingZoneGroupsPanelComponent,
hostView: this.viewContainerRef, hostView: this.viewContainerRef,
preferredPlacement: 'right', preferredPlacement: isExists ? ['left', 'leftTop', 'leftBottom'] : ['topRight', 'right', 'rightTop'],
context: ctx, context: ctx,
isModal: true isModal: true
}); });

23
ui-ngx/src/app/modules/home/components/calculated-fields/components/panel/calculated-field-geofencing-zone-groups-panel.component.html
View File

@ -97,7 +97,8 @@
<mat-expansion-panel class="tb-settings" expanded> <mat-expansion-panel class="tb-settings" expanded>
<mat-expansion-panel-header>{{ 'calculated-fields.entity-zone-relationship' | translate }}</mat-expansion-panel-header> <mat-expansion-panel-header>{{ 'calculated-fields.entity-zone-relationship' | translate }}</mat-expansion-panel-header>
<div class="tb-form-table"> <div class="tb-form-table">
<div class="tb-form-table-header no-padding-right"> <div class="tb-form-table-header">
<div class="tb-form-table-header-cell tb-actions-header"></div>
<div class="tb-form-table-header-cell" translate>calculated-fields.level</div> <div class="tb-form-table-header-cell" translate>calculated-fields.level</div>
<div class="tb-form-table-header-cell flex-1" translate>calculated-fields.direction-level</div> <div class="tb-form-table-header-cell flex-1" translate>calculated-fields.direction-level</div>
<div class="tb-form-table-header-cell flex-1 tb-required" translate>calculated-fields.relation-type</div> <div class="tb-form-table-header-cell flex-1 tb-required" translate>calculated-fields.relation-type</div>
@ -110,6 +111,17 @@
(cdkDropListDropped)="keyDrop($event)"> (cdkDropListDropped)="keyDrop($event)">
@for (keyControl of levelsFormArray().controls; track trackByKey;) { @for (keyControl of levelsFormArray().controls; track trackByKey;) {
<div cdkDrag [cdkDragDisabled]="!dragEnabled" class="tb-draggable-form-table-row"> <div cdkDrag [cdkDragDisabled]="!dragEnabled" class="tb-draggable-form-table-row">
<div class="tb-form-table-row-cell-buttons">
<button mat-icon-button
type="button"
cdkDragHandle
class="lt-lg:!hidden"
[class.tb-hidden]="!dragEnabled"
matTooltip="{{ 'action.drag' | translate }}"
matTooltipPosition="above">
<mat-icon>drag_indicator</mat-icon>
</button>
</div>
<div class="tb-form-row no-border flex-1" [formGroup]="keyControl"> <div class="tb-form-row no-border flex-1" [formGroup]="keyControl">
<div class="level-text">{{ $index+1 }}</div> <div class="level-text">{{ $index+1 }}</div>
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"> <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
@ -137,15 +149,6 @@
matTooltipPosition="above"> matTooltipPosition="above">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
<button mat-icon-button
type="button"
cdkDragHandle
class="lt-lg:!hidden"
[class.tb-hidden]="!dragEnabled"
matTooltip="{{ 'action.drag' | translate }}"
matTooltipPosition="above">
<mat-icon>drag_indicator</mat-icon>
</button>
</div> </div>
</div> </div>
} }

18
ui-ngx/src/app/modules/home/components/calculated-fields/components/panel/calculated-field-geofencing-zone-groups-panel.component.scss
View File

@ -30,6 +30,8 @@ $panel-width: 520px;
} }
.level-text { .level-text {
display: flex;
justify-content: center;
width: 25px; width: 25px;
color: rgba(0, 0, 0, 0.54); color: rgba(0, 0, 0, 0.54);
} }
@ -38,14 +40,20 @@ $panel-width: 520px;
.tb-form-row { .tb-form-row {
gap: 12px; gap: 12px;
} }
.tb-form-table-body { .tb-form-table-body {
gap: unset; gap: unset;
} }
}
.tb-form-table-header-cell { .tb-form-table-header {
&.tb-actions-header { padding: 0;
width: 80px; }
min-width: 80px;
.tb-form-table-header-cell {
&.tb-actions-header {
width: 40px;
min-width: 40px;
}
} }
} }